由于购物商城的代码涉及多个部分(如后端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:dynw.com.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(() => {