Python (Flask) 后端示例:
python
from flask import Flask, request, jsonify
app = Flask(name) yangzhie289.com
假设的商品数据
products = [
{“id”: 1, “name”: “Product 1”, “price”: 100.0},
{“id”: 2, “name”: “Product 2”, “price”: 200.0},
# … 更多商品
]
@app.route(‘/products’, methods=[‘GET’])
def get_products():
return jsonify(products)
@app.route(‘/products/int:product_id’, methods=[‘GET’])
def get_product(product_id):
product = next((item for item in products if item[“id”] == product_id), None)
if product:
return jsonify(product)
else:
return jsonify({“error”: “Product not found”}), 404
这里可以添加更多路由,如添加商品到购物车、结算等…
if name == ‘main’:
app.run(debug=True)
JavaScript (React + Redux) 前端示例:
由于React和Redux的代码较为复杂,这里只提供一个简化的组件和action示例。
ProductList.js (React Component):
jsx
import React, { useEffect, useState } from ‘react’;
import { useDispatch, useSelector } from ‘react-redux’;
import { fetchProducts } from ‘./actions’;
const ProductList = () => {
const dispatch = useDispatch();
const products = useSelector(state => state.products);
const isLoading = useSelector(state => state.isLoading);
const error = useSelector(state => state.error);
useEffect(() => {
dispatch(fetchProducts());
}, [dispatch]);
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
return (
<div>
{products.map(product => (
<div key={product.id}>
<h2>{product.name}</h2>
<p>Price: {product.price}</p>
{/* ... 其他组件,如添加到购物车按钮等 */}
</div>
))}
</div>
);
};
export default ProductList;
actions.js (Redux Actions):
javascript
export const fetchProductsStart = () => ({
type: ‘FETCH_PRODUCTS_START’
});
export const fetchProductsSuccess = products => ({
type: ‘FETCH_PRODUCTS_SUCCESS’,
payload: products
});
export const fetchProductsFailure = error => ({
type: ‘FETCH_PRODUCTS_FAILURE’,
payload: error
});
export const fetchProducts = () => async dispatch => {
dispatch(fetchProductsStart());
try {
const response = await fetch(‘/products’); // 这里应该是API的URL
const data = await response.json();
dispatch(fetchProductsSuccess(data));
} catch (error) {
dispatch(fetchProductsFailure(error.message));
}
};
注意:这只是一个非常简化的示例,一个真正的购物商城会涉及更多的功能,如用户认证、购物车管理、订单处理、支付集成等。此外,你还需要一个数据库来持久化存储商品和用户数据。在实际开发中,你可能会选择使用更完整的框架和库,如Django、Express.js、Angular、Vue等。由于生成一个完整的购物商城代码涉及多个部分(前端、后端、数据库等),并且每个语言都有其特定的框架和库,这里我将为你提供简化的示例代码,分别用Python(使用Flask框架)和JavaScript(使用React和Redux)来表示后端和前端的代码结构。
Python (Flask) 后端示例:
python
from flask import Flask, request, jsonify
app = Flask(name)
假设的商品数据
products = [
{“id”: 1, “name”: “Product 1”, “price”: 100.0},
{“id”: 2, “name”: “Product 2”, “price”: 200.0},
# … 更多商品
]
@app.route(‘/products’, methods=[‘GET’])
def get_products():
return jsonify(products)
@app.route(‘/products/int:product_id’, methods=[‘GET’])
def get_product(product_id):
product = next((item for item in products if item[“id”] == product_id), None)
if product:
return jsonify(product)
else:
return jsonify({“error”: “Product not found”}), 404
这里可以添加更多路由,如添加商品到购物车、结算等…
if name == ‘main’:
app.run(debug=True)
JavaScript (React + Redux) 前端示例:
由于React和Redux的代码较为复杂,这里只提供一个简化的组件和action示例。
ProductList.js (React Component):
jsx
import React, { useEffect, useState } from ‘react’;
import { useDispatch, useSelector } from ‘react-redux’;
import { fetchProducts } from ‘./actions’;
const ProductList = () => {
const dispatch = useDispatch();
const products = useSelector(state => state.products);
const isLoading = useSelector(state => state.isLoading);
const error = useSelector(state => state.error);
useEffect(() => {
dispatch(fetchProducts());
}, [dispatch]);
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
return (
<div>
{products.map(product => (
<div key={product.id}>
<h2>{product.name}</h2>
<p>Price: {product.price}</p>
{/* ... 其他组件,如添加到购物车按钮等 */}
</div>
))}
</div>
);
};
export default ProductList;
actions.js (Redux Actions):
javascript
export const fetchProductsStart = () => ({
type: ‘FETCH_PRODUCTS_START’
});
export const fetchProductsSuccess = products => ({
type: ‘FETCH_PRODUCTS_SUCCESS’,
payload: products
});
export const fetchProductsFailure = error => ({
type: ‘FETCH_PRODUCTS_FAILURE’,
payload: error
});
export const fetchProducts = () => async dispatch => {
dispatch(fetchProductsStart());
try {
const response = await fetch(‘/products’); // 这里应该是API的URL
const data = await response.json();
dispatch(fetchProductsSuccess(data));
} catch (error) {
dispatch(fetchProductsFailure(error.message));
}
};
注意:这只是一个非常简化的示例,一个真正的购物商城会涉及更多的功能,如用户认证、购物车管理、订单处理、支付集成等。此外,你还需要一个数据库来持久化存储商品和用户数据。在实际开发中,你可能会选择使用更完整的框架和库,如Django、Express.js、Angular、Vue等。