基于 Python Flask 和 Vue 的动漫周边商城系统设计与实现

技术栈选择与分工

Python+Flask 作为后端 API 服务，提供 RESTful 接口；Vue.js 作为前端框架实现动态交互；MySQL 或 PostgreSQL 作为数据库存储商品和用户数据。

后端技术栈： Flask + Flask-RESTful + SQLAlchemy + JWT 认证 前端技术栈： Vue3 + Vue Router + Pinia + Axios + Element Plus UI

数据库设计

核心表结构设计：

• 用户表 (user)：用户 ID、用户名、密码 (加密)、联系方式、收货地址
• 商品表 (product)：商品 ID、名称、分类、价格、库存、详情图
• 订单表 (order)：订单 ID、用户 ID、总金额、支付状态、物流信息
• 购物车表 (cart)：用户 ID 与商品 ID 的关联关系

# Flask 模型示例
class Product(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    category = db.Column(db.String(50))
    price = db.Column(db.Float)
    stock = db.Column(db.Integer)
    images = db.Column(db.Text)  # 存储图片 URL 的 JSON

后端 API 开发

建立以下核心 API 端点：

• /api/auth：用户注册/登录/权限验证
• /api/products：商品列表/详情/搜索
• /api/cart：购物车增删改查
• /api/orders：订单创建与状态管理

# Flask 路由示例
@app.route('/api/products/<int:product_id>', methods=['GET'])
def get_product(product_id):
    product = Product.query.get_or_404(product_id)
    return jsonify({
        'id': product.id,
        'name': product.name,
        'price': product.price
    })

前端功能模块

实现以下 Vue 组件树：

• 首页组件：展示热门商品和促销活动
• 商品详情页：商品大图、规格选择、加入购物车
• 用户中心：登录/注册表单、订单历史
• 购物车组件：实时计算总价、批量操作