讨论

从头构建一个全栈电子商务网站

来自 Wikiprompt,自由的提示词百科全书

kundan kumar mahato

2026年8月12日

从头构建一个全栈电子商务网站 生成一个完整、响应式电商网站的全面提示,使用HTML/CSS/JavaScript,包含产品搜索、购物车、结算和现代UI设计等功能。

提示词内容收藏

🌐
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>悦选商城 · 现代购物</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background: #f8fafc; color: #0f172a; line-height: 1.5; scroll-behavior: smooth; } img { display: block; max-width: 100%; object-fit: cover; } button { cursor: pointer; border: none; background: none; font: inherit; } a { text-decoration: none; color: inherit; } /* 通用容器 */ .container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } /* 头部导航 */ .navbar { background: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); position: sticky; top: 0; z-index: 1000; padding: 0.8rem 0; } .nav-wrapper { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .logo { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(135deg, #2563eb, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-links { display: flex; align-items: center; gap: 1.8rem; font-weight: 500; } .nav-links a { transition: color 0.2s; } .nav-links a:hover { color: #2563eb; } .nav-actions { display: flex; align-items: center; gap: 0.8rem; } .search-box { display: flex; align-items: center; background: #f1f5f9; border-radius: 40px; padding: 0.3rem 0.8rem; gap: 0.4rem; } .search-box input { border: none; background: transparent; padding: 0.4rem; width: 140px; outline: none; font-size: 0.9rem; } .cart-btn, .login-btn { background: #ffffff; border: 1px solid #e2e8f0; padding: 0.5rem 1rem; border-radius: 40px; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; transition: all 0.2s; } .cart-btn:hover, .login-btn:hover { background: #f1f5f9; border-color: #2563eb; } .cart-count { background: #2563eb; color: white; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; } .hamburger { display: none; flex-direction: column; gap: 5px; background: transparent; } .hamburger span { width: 28px; height: 3px; background: #0f172a; border-radius: 4px; } /* 移动端菜单 */ .mobile-menu { display: none; flex-direction: column; background: white; padding: 1rem 1.5rem; gap: 1rem; border-top: 1px solid #e2e8f0; } .mobile-menu.open { display: flex; } /* Hero */ .hero { background: linear-gradient(145deg, #dbeafe 0%, #ede9fe 100%); border-radius: 2rem; margin: 2rem auto; padding: 3rem 2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; } .hero-content h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 1rem; } .hero-content p { font-size: 1.1rem; color: #334155; margin-bottom: 2rem; max-width: 500px; } .btn-primary { background: #2563eb; color: white; padding: 0.9rem 2.2rem; border-radius: 60px; font-weight: 600; font-size: 1rem; transition: 0.2s; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2); } .btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); } .hero-image img { max-width: 400px; border-radius: 2rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } /* 分类卡片 */ .section-title { font-size: 2rem; font-weight: 700; margin: 2.5rem 0 1.5rem; letter-spacing: -0.02em; } .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; } .category-card { background: white; border-radius: 1.5rem; padding: 1.5rem 1rem; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); transition: all 0.2s; border: 1px solid #f1f5f9; } .category-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06); } .category-card .emoji { font-size: 2.5rem; margin-bottom: 0.5rem; } .category-card h3 { font-weight: 600; } /* 产品卡片 */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.8rem; } .product-card { background: white; border-radius: 1.5rem; padding: 1.2rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); transition: 0.2s; border: 1px solid #eef2f7; display: flex; flex-direction: column; } .product-card:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06); transform: translateY(-4px); } .product-image { width: 100%; height: 180px; border-radius: 1rem; background: #f1f5f9; margin-bottom: 1rem; object-fit: cover; } .product-name { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.3rem; } .rating { color: #f59e0b; font-size: 0.9rem; margin-bottom: 0.6rem; } .price-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .original-price { text-decoration: line-through; color: #94a3b8; font-size: 0.9rem; } .discounted-price { font-weight: 700; font-size: 1.3rem; color: #0f172a; } .discount-badge { background: #dc2626; color: white; padding: 0.2rem 0.6rem; border-radius: 30px; font-size: 0.75rem; font-weight: 600; } .card-actions { display: flex; gap: 0.5rem; margin-top: auto; } .btn-add-cart, .btn-buy { flex: 1; padding: 0.6rem; border-radius: 40px; font-weight: 600; font-size: 0.9rem; transition: 0.2s; } .btn-add-cart { background: #eef2ff; color: #2563eb; } .btn-add-cart:hover { background: #dbeafe; } .btn-buy { background: #2563eb; color: white; } .btn-buy:hover { background: #1d4ed8; } .wishlist-btn { background: #f1f5f9; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: 0.2s; } .wishlist-btn.active { background: #fee2e2; color: #dc2626; } /* 购物车/结算区域 */ .cart-section { background: white; border-radius: 2rem; padding: 2rem; margin: 2rem 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); } .cart-items { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .cart-item { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 1rem; } .cart-item img { width: 70px; height: 70px; border-radius: 0.8rem; } .cart-item-info { flex: 1; } .qty-control { display: flex; align-items: center; gap: 0.5rem; } .qty-btn { background: #f1f5f9; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; } .cart-total { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 600; margin-top: 1rem; } .checkout-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem; } .checkout-form input, .checkout-form select { padding: 0.8rem 1rem; border: 1px solid #e2e8f0; border-radius: 0.8rem; width: 100%; background: #f8fafc; } .btn-place-order { background: #16a34a; color: white; padding: 1rem; border-radius: 60px; font-weight: 700; font-size: 1.1rem; margin-top: 1.5rem; width: 100%; transition: 0.2s; } .btn-place-order:hover { background: #15803d; } /* 特殊区块 */ .special-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .special-card { background: white; padding: 1.5rem; border-radius: 1.5rem; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); } .newsletter { background: #1e293b; color: white; border-radius: 2rem; padding: 2.5rem; text-align: center; margin: 2rem 0; } .newsletter input { padding: 0.9rem 1.2rem; border-radius: 60px; border: none; width: 280px; max-width: 80%; } .newsletter button { background: #2563eb; color: white; padding: 0.9rem 2rem; border-radius: 60px; margin-left: 0.5rem; } /* 页脚 */ .footer { background: #0f172a; color: #cbd5e1; padding: 3rem 0; margin-top: 3rem; border-radius: 2rem 2rem 0 0; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; } .footer a { color: #cbd5e1; display: block; margin: 0.4rem 0; } .footer a:hover { color: white; } .social-icons { display: flex; gap: 1rem; font-size: 1.5rem; } /* 响应式 */ @media (max-width: 900px) { .nav-links, .search-box { display: none; } .hamburger { display: flex; } .nav-wrapper { flex-wrap: wrap; } .mobile-menu { width: 100%; } .hero { flex-direction: column; text-align: center; } .hero-content h1 { font-size: 2.2rem; } } @media (max-width: 600px) { .container { padding: 0 1rem; } .product-grid { grid-template-columns: 1fr 1fr; } .cart-item { flex-wrap: wrap; } } /* 辅助 */ .hidden { display: none !important; } .toast { position: fixed; bottom: 20px; right: 20px; background: #0f172a; color: white; padding: 1rem 1.5rem; border-radius: 40px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 9999; transition: 0.3s; } </style> </head> <body> <!-- 导航 --> <nav class="navbar"> <div class="container nav-wrapper"> <div class="logo">悦选商城</div> <div class="nav-links"> <a href="#">首页</a> <a href="#shop">商店</a> <a href="#categories">分类</a> <a href="#">关于</a> <a href="#">联系</a> </div> <div class="nav-actions"> <div class="search-box"> <input type="text" id="searchInput" placeholder="搜索商品..."> <span>🔍</span> </div> <button class="cart-btn" id="cartBtn">🛒 <span class="cart-count" id="cartCount">0</span></button> <button class="login-btn">登录</button> <button class="hamburger" id="hamburgerBtn"> <span></span><span></span><span></span> </button> </div> </div> <div class="mobile-menu" id="mobileMenu"> <a href="#">首页</a> <a href="#shop">商店</a> <a href="#categories">分类</a> <a href="#">关于</a> <a href="#">联系</a> <div class="search-box" style="display: flex;"> <input type="text" id="mobileSearchInput" placeholder="搜索..."> <span>🔍</span> </div> </div> </nav> <div class="container"> <!-- Hero --> <section class="hero"> <div class="hero-content"> <h1>夏日焕新季<br>潮流单品低至5折</h1> <p>精选电子、时尚、美妆好物,品质生活一键抵达。</p> <button class="btn-primary" onclick="document.getElementById('shop').scrollIntoView()">立即选购</button> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1607082349566-187342175e2f?w=400&auto=format&fit=crop" alt="促销"> </div> </section> <!-- 分类 --> <section id="categories"> <h2 class="section-title">热门分类</h2> <div class="category-grid"> <div class="category-card" data-category="electronics"><span class="emoji">📱</span><h3>电子</h3></div> <div class="category-card" data-category="fashion"><span class="emoji">👗</span><h3>时尚</h3></div> <div class="category-card" data-category="shoes"><span class="emoji">👟</span><h3>鞋履</h3></div> <div class="category-card" data-category="accessories"><span class="emoji">⌚</span><h3>配饰</h3></div> <div class="category-card" data-category="beauty"><span class="emoji">💄</span><h3>美妆</h3></div> <div class="category-card" data-category="home"><span class="emoji">🛋️</span><h3>家居</h3></div> </div> </section> <!-- 商品区域 --> <section id="shop"> <h2 class="section-title">精选商品</h2> <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;"> <select id="categoryFilter"> <option value="all">全部分类</option> <option value="electronics">电子</option> <option value="fashion">时尚</option> <option value="shoes">鞋履</option> <option value="accessories">配饰</option> <option value="beauty">美妆</option> <option value="home">家居</option> </select> <select id="sortSelect"> <option value="default">默认排序</option> <option value="price-asc">价格 ↑</option> <option value="price-desc">价格 ↓</option> <option value="rating">评分</option> </select> </div> <div class="product-grid" id="productGrid"></div> </section> <!-- 购物车 & 结算 --> <section class="cart-section" id="cartSection"> <h2 style="margin-bottom: 1rem;">🛒 购物车</h2> <div id="cartItems" class="cart-items"></div> <div class="cart-total"> <span>总计</span> <span id="cartTotal">¥0</span> </div> <button id="clearCartBtn" style="background: #fee2e2; color:#b91c1c; padding:0.5rem 1.2rem; border-radius:40px; margin-top:0.5rem;">清空购物车</button> <h3 style="margin: 2rem 0 1rem;">📦 结算信息</h3> <form class="checkout-form" id="checkoutForm"> <input type="text" placeholder="姓名" id="custName" required> <input type="email" placeholder="邮箱" id="custEmail" required> <input type="tel" placeholder="电话" id="custPhone" required> <input type="text" placeholder="地址" id="custAddress" required> <input type="text" placeholder="城市" id="custCity" required> <input type="text" placeholder="州/省" id="custState" required> <input type="text" placeholder="邮编" id="custPin" required> <select id="paymentMethod"> <option value="credit">信用卡</option> <option value="paypal">PayPal</option> <option value="cod">货到付款</option> </select> <button type="submit" class="btn-place-order">提交订单</button> </form> </section> <!-- 特殊区块 --> <div class="special-grid"> <div class="special-card">⚡ 限时闪购<br><small>低至3折</small></div> <div class="special-card">🏆 畅销榜单<br><small>人气之选</small></div> <div class="special-card">✨ 新品首发<br><small>抢先拥有</small></div> <div class="special-card">💬 顾客好评<br><small>4.9/5 平均</small></div> </div> <!-- 客户评价 --> <div style="background: white; border-radius: 2rem; padding: 2rem; margin: 2rem 0;"> <h3>⭐ 真实评价</h3> <p>“品质超棒,物流很快!” - 小美</p> <p>“设计很现代,购物体验一流。” - 阿杰</p> </div> <!-- 订阅 --> <div class="newsletter"> <h3>订阅获取专属优惠</h3> <input type="email" placeholder="你的邮箱" id="newsletterEmail"> <button onclick="alert('感谢订阅!')">订阅</button> </div> </div> <!-- 页脚 --> <footer class="footer"> <div class="container footer-grid"> <div> <h4>悦选商城</h4> <p>精选全球好物,品质生活。</p> </div> <div> <h4>快速链接</h4> <a href="#">首页</a><a href="#">商店</a><a href="#">分类</a> </div> <div> <h4>客户支持</h4> <a href="#">常见问题</a><a href="#">退换货</a><a href="#">配送</a> </div> <div> <h4>隐私与条款</h4> <a href="#">隐私政策</a><a href="#">条款</a> </div> <div class="social-icons"> <span>📘</span><span>📸</span><span>🐦</span> </div> </div> <p style="text-align:center; margin-top:2rem;">© 2025 悦选商城</p> </footer> <script> // ---------- 商品数据 ---------- const products = [ { id: 1, name: '无线降噪耳机', category: 'electronics', price: 299, oldPrice: 499, rating: 4.8, img: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&auto=format&fit=crop' }, { id: 2, name: '经典小白鞋', category: 'shoes', price: 199, oldPrice: 399, rating: 4.5, img: 'https://images.unsplash.com/photo-1549298916-b41d501d3772?w=200&auto=format&fit=crop' }, { id: 3, name: '极简手表', category: 'accessories', price: 159, oldPrice: 259, rating: 4.3, img: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200&auto=format&fit=crop' }, { id: 4, name: '保湿精华液', category: 'beauty', price: 89, oldPrice: 150, rating: 4.7, img: 'https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=200&auto=format&fit=crop' }, { id: 5, name: '北欧风台灯', category: 'home', price: 129, oldPrice: 199, rating: 4.2, img: 'https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=200&auto=format&fit=crop' }, { id: 6, name: '棉麻衬衫', category: 'fashion', price: 149, oldPrice: 249, rating: 4.6, img: 'https://images.unsplash.com/photo-1598033129183-c4f50c736f10?w=200&auto=format&fit=crop' }, { id: 7, name: '智能手环', category: 'electronics', price: 249, oldPrice: 329, rating: 4.4, img: 'https://images.unsplash.com/photo-1575311373937-040b8e1fd5b6?w=200&auto=format&fit=crop' }, { id: 8, name: '真皮手提包', category: 'fashion', price: 399, oldPrice: 599, rating: 4.9, img: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=200&auto=format&fit=crop' }, ]; // 购物车状态 let cart = []; // 渲染商品 function renderProducts(filter = 'all', sort = 'default', search = '') { let list = products.filter(p => { const catMatch = filter === 'all' || p.category === filter; const searchMatch = p.name.toLowerCase().includes(search.toLowerCase()); return catMatch && searchMatch; }); if (sort === 'price-asc') list.sort((a,b) => a.price - b.price); if (sort === 'price-desc') list.sort((a,b) => b.price - a.price); if (sort === 'rating') list.sort((a,b) => b.rating - a.rating); const grid = document.getElementById('productGrid'); grid.innerHTML = list.map(p => { const discount = Math.round((1 - p.price / p.oldPrice) * 100); return ` <div class="product-card" data-id="${p.id}"> <img src="${p.img}" alt="${p.name}" class="product-image"> <div class="product-name">${p.name}</div> <div class="rating">⭐ ${p.rating}</div> <div class="price-row"> <span class="discounted-price">¥${p.price}</span> <span class="original-price">¥${p.oldPrice}</span> <span class="discount-badge">-${discount}%</span> </div> <div class="card-actions"> <button class="btn-add-cart" onclick="addToCart(${p.id})">加入购物车</button> <button class="btn-buy" onclick="buyNow(${p.id})">立即购买</button> <button class="wishlist-btn" onclick="toggleWishlist(this)">🤍</button> </div> </div> `; }).join(''); } // 加入购物车 function addToCart(id) { const product = products.find(p => p.id === id); const existing = cart.find(item => item.id === id); if (existing) { existing.qty++; } else { cart.push({ ...product, qty: 1 }); } updateCartUI(); showToast(`${product.name} 已加入购物车`); } // 立即购买 function buyNow(id) { addToCart(id); document.getElementById('cartSection').scrollIntoView({ behavior: 'smooth' }); } // 更新购物车UI function updateCartUI() { const container = document.getElementById('cartItems'); const totalEl = document.getElementById('cartTotal'); const countEl = document.getElementById('cartCount'); let total = 0; let count = 0; if (cart.length === 0) { container.innerHTML = '<p style="color:#64748b;">购物车是空的</p>'; } else { container.innerHTML = cart.map(item => { total += item.price * item.qty; count += item.qty; return ` <div class="cart-item" data-id="${item.id}"> <img src="${item.img}" width="60"> <div class="cart-item-info"> <strong>${item.name}</strong> <div>¥${item.price}</div> <div class="qty-control"> <button class="qty-btn" onclick="changeQty(${item.id}, -1)">−</button> <span>${item.qty}</span> <button class="qty-btn" onclick="changeQty(${item.id}, 1)">+</button> </div> </div> <button onclick="removeFromCart(${item.id})" style="color:#dc2626;">✕</button> </div> `; }).join(''); } totalEl.textContent = `¥${total}`; countEl.textContent = count; } // 数量调整 function changeQty(id, delta) { const item = cart.find(i => i.id === id); if (!item) return; item.qty += delta; if (item.qty <= 0) { cart = cart.filter(i => i.id !== id); } updateCartUI(); } function removeFromCart(id) { cart = cart.filter(i => i.id !== id); updateCartUI(); } // 清空购物车 document.getElementById('clearCartBtn').addEventListener('click', () => { cart = []; updateCartUI(); }); // 筛选/排序/搜索 document.getElementById('categoryFilter').addEventListener('change', (e) => { renderProducts(e.target.value, document.getElementById('sortSelect').value, document.getElementById('searchInput').value); }); document.getElementById('sortSelect').addEventListener('change', (e) => { renderProducts(document.getElementById('categoryFilter').value, e.target.value, document.getElementById('searchInput').value); }); document.getElementById('searchInput').addEventListener('input', (e) => { renderProducts(document.getElementById('categoryFilter').value, document.getElementById('sortSelect').value, e.target.value); }); document.getElementById('mobileSearchInput').addEventListener('input', (e) => { document.getElementById('searchInput').value = e.target.value; renderProducts(document.getElementById('categoryFilter').value, document.getElementById('sortSelect').value, e.target.value); }); // 分类卡片点击筛选 document.querySelectorAll('.category-card').forEach(card => { card.addEventListener('click', () => { const cat = card.dataset.category; document.getElementById('categoryFilter').value = cat; renderProducts(cat, document.getElementById('sortSelect').value, document.getElementById('searchInput').value); }); }); // 心愿单 function toggleWishlist(btn) { btn.classList.toggle('active'); btn.textContent = btn.classList.contains('active') ? '❤️' : '🤍'; } // 移动端菜单 document.getElementById('hamburgerBtn').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('open'); }); // 结算验证 document.getElementById('checkoutForm').addEventListener('submit', (e) => { e.preventDefault(); const name = document.getElementById('custName').value.trim(); const email = document.getElementById('custEmail').value.trim(); const phone = document.getElementById('custPhone').value.trim(); const address = document.getElementById('custAddress').value.trim(); const city = document.getElementById('custCity').value.trim(); const state = document.getElementById('custState').value.trim(); const pin = document.getElementById('custPin').value.trim(); if (!name || !email || !phone || !address || !city || !state || !pin) { alert('请填写所有必填字段'); return; } if (!/^\S+@\S+\.\S+$/.test(email)) { alert('请输入有效邮箱'); return; } alert(`🎉 订单确认成功!感谢购买,${name}!`); cart = []; updateCartUI(); e.target.reset(); }); // Toast 提示 function showToast(msg) { const toast = document.createElement('div'); toast.className = 'toast'; toast.textContent = msg; document.body.appendChild(toast); setTimeout(() => toast.remove(), 2000); } // 初始化 renderProducts(); updateCartUI(); </script> </body> </html>

登录以查看完整提示词

继续使用:

登录即表示你同意我们的 使用条款 和 隐私政策

用法

此提示词专为 coding 设计。复制上方内容并粘贴到你常用的 AI 工具中。

为获得最佳效果,可将占位符(方括号或大写字母标示)替换为你的具体需求。

参考资料

分类:coding| prompts.chat| e-commerce| website

讨论