SOURCE

console 命令行工具 X clear

                    
>
console
// 加载精选商品
document.addEventListener('DOMContentLoaded', function() {
    fetch('/api/products/featured')
        .then(response => response.json())
        .then(products => {
            const productsGrid = document.getElementById('featured-products');
            products.forEach(product => {
                productsGrid.innerHTML += `
                    <div class="product-card">
                        <div class="product-image">
                            <img src="${product.image}" alt="${product.name}">
                        </div>
                        <div class="product-info">
                            <h3 class="product-title">${product.name}</h3>
                            <p class="product-price">¥${product.price.toFixed(2)}</p>
                            <button class="btn add-to-cart" data-id="${product._id}">加入购物车</button>
                        </div>
                    </div>
                `;
            });
            
            // 添加购物车事件
            document.querySelectorAll('.add-to-cart').forEach(button => {
                button.addEventListener('click', function() {
                    const productId = this.getAttribute('data-id');
                    addToCart(productId);
                });
            });
        })
        .catch(error => console.error('Error:', error));
});

// 添加到购物车函数
function addToCart(productId) {
    fetch('/api/cart', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ productId })
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            updateCartCount(data.cartCount);
            alert('商品已添加到购物车!');
        }
    })
    .catch(error => console.error('Error:', error));
}

// 更新购物车数量
function updateCartCount(count) {
    document.getElementById('cart-count').textContent = count;
}

// 初始化购物车数量
fetch('/api/cart/count')
    .then(response => response.json())
    .then(data => updateCartCount(data.count))
    .catch(error => console.error('Error:', error));
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线购物平台</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <a href="/" class="logo">ShopEasy</a>
            <div class="search-box">
                <input type="text" placeholder="搜索商品...">
                <button><i class="fas fa-search"></i></button>
            </div>
            <div class="nav-links">
                <a href="/"><i class="fas fa-home"></i> 首页</a>
                <a href="/products"><i class="fas fa-store"></i> 商品</a>
                <a href="/cart"><i class="fas fa-shopping-cart"></i> 购物车 <span id="cart-count">0</span></a>
                <a href="/login"><i class="fas fa-user"></i> 登录</a>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="container">
        <section class="hero">
            <h1>欢迎来到ShopEasy</h1>
            <p>发现最好的商品,享受最优惠的价格</p>
            <a href="/products" class="btn">立即购物</a>
        </section>

        <section class="featured-products">
            <h2>精选商品</h2>
            <div class="products-grid" id="featured-products">
                <!-- 商品将通过JavaScript动态加载 -->
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>ShopEasy致力于为您提供最好的在线购物体验。</p>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="/">首页</a></li>
                    <li><a href="/products">所有商品</a></li>
                    <li><a href="/contact">联系我们</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系方式</h3>
                <p>邮箱: support@shopeasy.com</p>
                <p>电话: 400-123-4567</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>
/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 导航栏样式 */
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.search-box {
    display: flex;
    align-items: center;
}

.search-box input {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    width: 300px;
}

.search-box button {
    padding: 8px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a {
    margin-left: 20px;
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
}

.nav-links a i {
    margin-right: 5px;
}

/* 商品网格 */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.product-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    height: 200px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    padding: 15px;
}

.product-title {
    font-size: 16px;
    margin-bottom: 10px;
}

.product-price {
    font-weight: bold;
    color: #e53935;
    margin-bottom: 10px;
}

.btn {
    display: inline-block;
    padding: 8px 15px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #45a049;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
    }
    
    .search-box {
        margin: 15px 0;
        width: 100%;
    }
    
    .search-box input {
        width: 100%;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}