由于完整的购物商城代码非常庞大且复杂，涉及到前端、后端、数据库等多个部分，这里我将为你提供一个非常简化的版本，分别用 Python (Flask 框架作为后端) 和 HTML/JavaScript

最新推荐文章于 2024-11-11 09:45:18 发布

博海编程梦工厂

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量650

点赞数 12

文章标签：前端 python 数据库

本文链接：https://blog.csdn.net/JessicaAustin/article/details/138497816

版权

由于完整的购物商城代码非常庞大且复杂，涉及到前端、后端、数据库等多个部分，这里我将为你提供一个非常简化的版本，分别用 Python (Flask 框架作为后端) 和 HTML/JavaScript (作为前端) 来演示。

后端 (Python, Flask)
首先，你需要安装 Flask：

bash
pip install Flask
然后，你可以创建一个简单的 Flask 应用：

python
# app.py
from flask import Flask, request, jsonify

app = Flask(__name__)

# 假设的商品列表
products = [
{"id": 1, "name": "Product 1", "price": 10.0},
{"id": 2, "name": "Product 2", "price": 20.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):
for product in products:
if product['id'] == product_id:
return jsonify(product)
return jsonify({"error": "Product not found"}), 404

# 启动应用 (仅供示例，实际部署时应使用更健壮的方式)
if __name__ == '__main__':
app.run(debug=True)
前端 (HTML/JavaScript)
接下来，你可以创建一个简单的 HTML 页面，并使用 JavaScript 来从 Flask 应用中获取数据：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Shopping Mall</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h1>Product List</h1>
<ul id="product-list"></ul>

#chhas{
margin-top: 50px;
padding:zdcypt.com.cn;
font-size: 18px;
cursor: 10px 20px;
}
<script>
$(document).ready(function() {
fetchProducts();
});

function fetchProducts() {
$.getJSON('/products', function(data) {
$('#product-list').empty();
$.each(data, function(index, product) {
$('#product-list').append(`<li>${product.name} -
$$
{product.price}</li>`);
});
});
}
</script>

</body>
</html>