创建一个完整的网上零食销售系统涉及到多个步骤，包括前端页面设计、后端API的编写以及数据库的交互。这里是一个简单的例子，我们将使用Python的Flask框架作为后端，Django ORM管理数据库，和HTML/CSS/JavaScript构建前端。假设我们已经有一个SQLite数据库存储商品信息。 **后端代码 (using Flask)** 首先安装必要的库: ```bash pip install flask flask-wtf sqlalchemy ``` 然后，创建`app.py`: ```python from flask import Flask, render_template, redirect, url_for, request, jsonify from flask_sqlalchemy import SQLAlchemy from werkzeug.exceptions import HTTPException app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///snacks.db' db = SQLAlchemy(app) class Snack(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(50), nullable=False) price = db.Column(db.Float, nullable=False) # 初始化数据库 db.create_all() @app.route('/') def home(): snacks = Snack.query.all() return render_template('index.html', snacks(snacks)) @app.route('/add_to_cart/<int:item_id>', methods=['POST']) def add_to_cart(item_id): try: selected_snack = Snack.query.get(item_id) if not selected_snack: return jsonify({'message': '商品不存在'}), 404 # 在这里添加购物车逻辑（例如存入session） session Cart = request.environ.get('werkzeug.session') session['cart_items'][selected_snack.id] = selected_snack.price return jsonify({'message': '成功添加到购物车'}) except Exception as e: return jsonify({'message': str(e)}), 500 @app.route('/cart') def show_cart(): session = request.environ.get('werkzeug.session') if not session or 'cart_items' not in session: return redirect(url_for('home')) cart_items = [{'id': k, 'name': v.name, 'price': v.price} for k, v in session['cart_items'].items()] return render_template('cart.html', cart_items=cart_items) if __name__ == '__main__': app.run(debug=True) ``` **前端代码 (index.html 和 cart.html)** 创建两个基本的HTML模板： `templates/index.html`: ```html <!DOCTYPE html> <html lang="en"> <head> <!--...头部信息和CSS样式--> </head> <body> <h1>零食店</h1> <ul> {% for snack in snacks %} <li><a href="{{ url_for('add_to_cart', item_id=snack.id)}}">{{ snack.name }} - ￥{{ snack.price }}</a></li> {% endfor %} </ul> <a href="{{ url_for('show_cart')}}">查看购物车</a> </body> </html> ``` `templates/cart.html`: ```html <!DOCTYPE html> <html lang="en"> <head> <!--...头部信息和CSS样式--> </head> <body> <h1>购物车</h1> <table> <tr> <th>ID</th> <th>名称</th> <th>价格</th> </tr> {% for item in cart_items %} <tr> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>￥{{ item.price }}</td> </tr> {% endfor %} </table> </body> </html> ``` 请注意，这只是一个基础示例，实际应用中还需要完善错误处理、购物车功能（例如清空、删除等）、前端和后端分离、数据库连接池以及更复杂的用户认证系统。此外，前端部分可能需要引入React.js或其他前端框架来更好地呈现数据和用户体验。