Python (Flask) 后端
python
from flask import Flask, render_template, request, jsonify
app = Flask(name) junjie8.cn
假设的商品数据
products = [
{“id”: 1, “name”: “Product 1”, “price”: 100},
{“id”: 2, “name”: “Product 2”, “price”: 200},
# … 更多商品
]
@app.route(‘/’)
def index():
return render_template(‘index.html’, products=products)
假设的购物车逻辑(这里仅为了演示)
cart = []
@app.route(‘/add_to_cart’, methods=[‘POST’])
def add_to_cart():
product_id = request.form.get(‘product_id’)
for product in products:
if product[‘id’] == int(product_id):
cart.append(product)
break
return jsonify({‘message’: ‘Product added to cart’}), 200
if name == ‘main’:
app.run(debug=True)
HTML 前端
html
Products
- {% for product in products %}
- {{ product.name }} - ${{ product.price }} Add to Cart
- {% endfor %}
<script>
function addToCart(productId) {
$.post('/add_to_cart', {product_id: productId}, function(data) {
console.log(data.message);
});
}
</script>
JavaScript 前端交互 在上面的HTML代码中,已经包含了JavaScript的部分,用于处理“添加到购物车”的点击事件,并通过AJAX将请求发送到Flask后端。
注意事项
这是一个非常简化的示例,真实的购物商城会更加复杂。
商品数据和购物车逻辑仅保存在内存中,重启服务器后数据会丢失。真实环境中应使用数据库来持久化数据。
没有用户认证和支付集成。
没有错误处理和验证。
前端仅使用了jQuery来处理AJAX请求,但现代前端框架(如React、Vue、Angular)通常更为强大和灵活。
后端使用了Flask作为轻量级的Web框架,但Django、FastAPI等也是流行的选择。由于生成一个完整的购物商城代码在多种电脑语言中涉及大量的代码和复杂的逻辑,这里我将为你提供一个非常简化的版本,以Python(后端)、HTML(前端)和JavaScript(前端交互)为例。请注意,这只是一个非常基础的示例,一个真实的购物商城需要数据库支持、用户认证、支付集成、商品管理、订单管理等复杂功能。
Python (Flask) 后端
python
from flask import Flask, render_template, request, jsonify
app = Flask(name)
假设的商品数据
products = [
{“id”: 1, “name”: “Product 1”, “price”: 100},
{“id”: 2, “name”: “Product 2”, “price”: 200},
# … 更多商品
]
@app.route(‘/’)
def index():
return render_template(‘index.html’, products=products)
假设的购物车逻辑(这里仅为了演示)
cart = []
@app.route(‘/add_to_cart’, methods=[‘POST’])
def add_to_cart():
product_id = request.form.get(‘product_id’)
for product in products:
if product[‘id’] == int(product_id):
cart.append(product)
break
return jsonify({‘message’: ‘Product added to cart’}), 200
if name == ‘main’:
app.run(debug=True)
HTML 前端
html
Products
- {% for product in products %}
- {{ product.name }} - ${{ product.price }} Add to Cart
- {% endfor %}
<script>
function addToCart(productId) {
$.post('/add_to_cart', {product_id: productId}, function(data) {
console.log(data.message);
});
}
</script>
JavaScript 前端交互 在上面的HTML代码中,已经包含了JavaScript的部分,用于处理“添加到购物车”的点击事件,并通过AJAX将请求发送到Flask后端。
注意事项
这是一个非常简化的示例,真实的购物商城会更加复杂。
商品数据和购物车逻辑仅保存在内存中,重启服务器后数据会丢失。真实环境中应使用数据库来持久化数据。
没有用户认证和支付集成。
没有错误处理和验证。
前端仅使用了jQuery来处理AJAX请求,但现代前端框架(如React、Vue、Angular)通常更为强大和灵活。
后端使用了Flask作为轻量级的Web框架,但Django、FastAPI等也是流行的选择。