【使用 Java（JSP）实现的简单商城页面前端示例】

启山智软2026-03-20 10:18

这是一个使用 Java（JSP）实现的简单商城页面前端示例：

jsp 复制代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>简易商城</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 80%; margin: 0 auto; }
        .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .product-card { border: 1px solid #ddd; padding: 15px; border-radius: 5px; }
        .cart { position: fixed; top: 20px; right: 20px; background: #f9f9f9; padding: 10px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我们的商城</h1>
        
        <!-- 购物车 -->
        <div class="cart">
            <h3>购物车</h3>
            <ul id="cartItems"></ul>
            <p>总计: ¥<span id="totalPrice">0.00</span></p>
        </div>

        <!-- 商品展示区 -->
        <div class="product-grid">
            <div class="product-card">
                <h3>商品A</h3>
                <p>价格: ¥100.00</p>
                <button onclick="addToCart('商品A', 100)">加入购物车</button>
            </div>
            <div class="product-card">
                <h3>商品B</h3>
                <p>价格: ¥200.00</p>
                <button onclick="addToCart('商品B', 200)">加入购物车</button>
            </div>
            <!-- 更多商品... -->
        </div>
    </div>

    <script>
        let cart = [];
        let total = 0;

        function addToCart(name, price) {
            cart.push({ name, price });
            total += price;
            updateCartDisplay();
        }

        function updateCartDisplay() {
            const cartItems = document.getElementById('cartItems');
            const totalPrice = document.getElementById('totalPrice');
            
            cartItems.innerHTML = '';
            cart.forEach(item => {
                const li = document.createElement('li');
                li.textContent = `${item.name} - ¥${item.price.toFixed(2)}`;
                cartItems.appendChild(li);
            });
            
            totalPrice.textContent = total.toFixed(2);
        }
    </script>
</body>
</html>

功能说明：

页面结构：
- 顶部显示商城标题
- 右侧固定位置显示购物车
- 网格布局展示商品卡片
商品卡片：
- 包含商品名称和价格
- 点击"加入购物车"按钮触发操作
购物车功能：
- 实时显示已选商品列表
- 自动计算总金额
- 使用 JavaScript 实现动态更新
交互逻辑：
- addToCart() 函数处理商品添加
- updateCartDisplay() 更新购物车界面

注意：此示例为前端基础实现，实际项目需结合后端 Java 服务实现数据动态加载、用户会话管理等功能。