购物商城的代码涉及多个部分（如后端API、数据库、前端页面等），且完整的实现会非常庞大，以下我将提供简化版的示例代码，涵盖后端API（使用Python Flask和Node.js Express）和前

由于购物商城的代码涉及多个部分（如后端API、数据库、前端页面等），且完整的实现会非常庞大，以下我将提供简化版的示例代码，涵盖后端API（使用Python Flask和Node.js Express）和前端（使用React）的基本结构。

后端 - Python Flask
app.py

python
from flask import Flask, jsonify, request  
  
app = Flask(__name__)  
  
# 假设的商品列表（实际中应存储在数据库中）  
products = [  
    {"id": 1, "name": "商品A", "price": 100},  
    {"id": 2, "name": "商品B", "price": 200},  
]  
  
# 购物车（简化版，仅用于演示）  
cart = []  
  
@app.route('/api/products', methods=['GET'])  
def get_products():  
    return jsonify(products)  
  
@app.route('/api/add-to-cart', methods=['POST'])  
def add_to_cart():  
    product_id = request.json.get('product_id')  
    product = next((p for p in products if p['id'] == product_id), None)  
    if product:  
        cart.append(product)  # 简化版，实际应使用数据库  
        return jsonify({"message": "商品已添加到购物车"}), 201  
    return jsonify({"error": "商品不存在"}), 404  
  
@app.route('/api/cart', methods=['GET'])  
def get_cart():  
    return jsonify(cart)  
  
if __name__ == '__main__':  
    app.run(debug=True)
后端 - Node.js Express
server.js

javascript
const express = require('express');  
const bodyParser = require('body-parser');  
const app = express();  
  
// 假设的商品列表（实际中应存储在数据库中）  
let products = [  
    { id: 1, name: '商品A', price: 100 },  
    { id: 2, name: '商品B', price: 200 },  
];  
  
// 购物车（简化版，仅用于演示）  
let cart = [];  
  
app.use(bodyParser.json());  
  
app.get('/api/products', (req, res) => {  
    res.json(products);  
});  
  
app.post('/api/add-to-cart', (req, res) => {  
    const productId = req.body.product_id;  
    const product = products.find(p => p.id === productId);  
    if (product) {  
        cart.push(product); // 简化版，实际应使用数据库  
        res.status(201).json({ message: '商品已添加到购物车' });  
    } else {  
        res.status(404).json({ error: '商品不存在' });  
    }  
});  
  
app.get('/api/cart', (req, res) => {  
    res.json(cart);  
});  
  
const PORT = process.env.PORT || 3000;  
app.listen(PORT, () => {  
    console.log(`Server is running on port ${PORT}.`);  
});
前端 - React (使用Axios进行API调用)
ProductList.js

jsx
import React, { useState, useEffect } from 'react';  
import axios from 'axios';  
  
function ProductList() {  
    const [products, setProducts] = useState([]);  
  
    useEffect(() => {  
        axios.get('/api/products')  
            .then(res => setProducts(res.data))  
            .catch(err => console.error(err));  
    }, []);  
  
    // ... 其他组件逻辑  
  
    return (  
        <div>  
            {products.map(product => (  
                <div key={product.id}>  
                    <h2>{product.name}</h2>  
                    <p>{product.price}</p>  
                    {/* 添加按钮等 */}  
                </div>  
            ))}  
        </div>  
    );  
}  
  
export default ProductList;
Cart.js

#chhas{
margin-top: 50px;
padding:cqj9.cn;
font-size: 18px;
cursor: 10px 20px;
}
jsx
import React, { useState, useEffect } from 'react';  
import axios from 'axios';  
  
function Cart() {  
    const [cartItems, setCartItems] = useState([]);  
  
    useEffect(() => {