Vue+Django全栈电商系统开发实战

1. 项目概述与技术选型

作为一个全栈电商项目，服饰商城系统需要同时兼顾前端用户体验和后端稳定性。在技术选型上，我们采用Vue.js+Django的组合方案，这是经过多个线上项目验证的可靠架构。

前端选择Vue.js 3.x版本，主要考虑其以下优势：

• 组合式API更适合复杂业务逻辑组织
• 虚拟DOM性能优异，适合商品列表等高频率更新场景
• 丰富的生态系统（Vue Router、Vuex/Pinia、Element Plus等）
• 渐进式框架特性，可以按需引入功能模块

后端选择Django REST framework主要基于：

• Django自带的ORM极大简化数据库操作
• REST framework提供完善的API开发工具集
• 内置Admin后台可快速搭建管理系统
• 完善的中间件和认证机制

开发环境配置建议：

• PyCharm Professional版（支持Django模板调试）
• Node.js 16+（Vue开发环境）
• Python 3.8+（建议使用虚拟环境）
• MySQL 8.0或PostgreSQL 13+

2. 项目架构设计

2.1 前后端分离架构

采用经典的前后端分离模式：

code复制├── frontend/            # Vue前端项目
│   ├── public/          # 静态资源
│   ├── src/             # 源码目录
│   │   ├── api/         # 接口封装
│   │   ├── assets/      # 静态资源
│   │   ├── components/  # 公共组件
│   │   ├── router/      # 路由配置
│   │   ├── store/       # 状态管理
│   │   └── views/       # 页面组件
│
└── backend/             # Django后端项目
    ├── config/          # 项目配置
    ├── apps/            # 应用模块
    │   ├── user/        # 用户模块
    │   ├── product/     # 商品模块
    │   ├── order/       # 订单模块
    │   └── payment/     # 支付模块
    ├── manage.py        # 管理脚本
    └── requirements.txt # 依赖文件

2.2 数据库设计要点

核心表关系设计原则：

1. 用户与订单：一对多关系
2. 商品与分类：多对多关系（一个商品可属多个分类）
3. 购物车与商品：多对多关系（通过中间表记录数量）

关键索引设置：

python复制class Product(models.Model):
    name = models.CharField(max_length=100, db_index=True)  # 商品名称索引
    category = models.ManyToManyField(Category)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    
    class Meta:
        indexes = [
            models.Index(fields=['price']),  # 价格区间查询索引
        ]

3. 核心功能实现

3.1 用户认证模块

采用JWT认证流程：

1. 前端提交用户名密码
2. 后端验证后生成access_token和refresh_token
3. 前端存储token（建议httpOnly cookie）
4. 后续请求携带token进行鉴权

Django后端实现示例：

python复制# settings.py
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    )
}

SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=30),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=1),
    'ROTATE_REFRESH_TOKENS': True
}

3.2 商品搜索实现

两种搜索方案对比：

1. 数据库LIKE查询（适合小规模数据）

python复制Product.objects.filter(name__icontains=keyword)

2. Elasticsearch集成（推荐方案）

python复制# 安装django-elasticsearch-dsl
class ProductDocument(Document):
    name = TextField(analyzer='ik_max_word')
    description = TextField(analyzer='ik_max_word')
    
    class Django:
        model = Product
        fields = ['price', 'category']

# 搜索实现
s = ProductDocument.search().query('multi_match', query=keyword, fields=['name', 'description'])
response = s.execute()

3.3 购物车设计

混合存储策略：

1. 未登录用户：使用localStorage存储
2. 已登录用户：同步到服务端数据库
3. 合并逻辑：用户登录时将本地购物车与服务端合并

Vue实现示例：

javascript复制// 购物车状态管理
const useCartStore = defineStore('cart', {
  state: () => ({
    items: loadFromLocalStorage() || []
  }),
  actions: {
    async syncWithServer() {
      if (isLoggedIn()) {
        const serverItems = await api.getCartItems()
        this.items = mergeItems(this.items, serverItems)
        this.saveToServer()
      }
    }
  }
})

4. 支付系统集成

4.1 支付宝接入流程

1. 申请支付宝开发者账号
2. 配置RSA2密钥对
3. 集成支付宝SDK
4. 实现异步通知处理

关键安全措施：

• 验证签名
• 检查通知参数中的out_trade_no
• 校验金额是否匹配
• 处理幂等性问题（防止重复通知）

python复制# 支付回调处理
@csrf_exempt
def alipay_callback(request):
    data = request.POST.dict()
    # 验证签名
    if not alipay.verify(data):
        return HttpResponseForbidden()
    
    # 处理业务逻辑
    order = Order.objects.get(order_no=data['out_trade_no'])
    if order.amount != Decimal(data['total_amount']):
        return HttpResponseBadRequest('金额不匹配')
    
    # 更新订单状态
    order.status = 'paid'
    order.save()
    
    return HttpResponse('success')

5. 性能优化实践

5.1 前端优化方案

1. 图片懒加载：

html复制<img v-lazy="product.image" alt="商品图片">

2. 虚拟滚动列表：

vue复制<RecycleScroller
  :items="products"
  :item-size="200"
  key-field="id"
>
  <template #default="{ item }">
    <ProductCard :product="item" />
  </template>
</RecycleScroller>

3. API请求优化：

• 使用axios拦截器添加公共参数
• 实现请求去重
• 失败请求自动重试

5.2 后端缓存策略

多级缓存设计：

1. 热点数据：Redis缓存

python复制# 商品详情缓存装饰器
def cache_product_detail(timeout=300):
    def decorator(func):
        @wraps(func)
        def wrapper(request, product_id):
            cache_key = f'product_{product_id}'
            data = cache.get(cache_key)
            if not data:
                data = func(request, product_id)
                cache.set(cache_key, data, timeout)
            return data
        return wrapper
    return decorator

2. 查询结果：Django缓存API

python复制products = Product.objects.filter(
    category=category_id
).cache(ops=['get', 'fetch'], timeout=60*5)

6. 安全防护措施

6.1 常见攻击防护

1. XSS防护：

• Django模板自动转义
• 前端使用DOMPurify过滤富文本

2. CSRF防护：

python复制# settings.py
CSRF_COOKIE_SAMESITE = 'Strict'
CSRF_COOKIE_HTTPONLY = True

3. SQL注入防护：

• 使用ORM或参数化查询
• 禁止拼接SQL语句

6.2 敏感数据处理

1. 密码存储：

python复制from django.contrib.auth.hashers import make_password

user.password = make_password(password)  # 使用PBKDF2算法

2. 支付信息加密：

• 使用AES加密敏感字段
• 密钥通过KMS管理

7. 部署方案

7.1 容器化部署

Docker-compose配置示例：

yaml复制version: '3'

services:
  db:
    image: postgres:13
    environment:
      POSTGRES_PASSWORD: example
    volumes:
      - pg_data:/var/lib/postgresql/data
  
  redis:
    image: redis:6
    
  backend:
    build: ./backend
    command: gunicorn config.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - ./backend:/code
    depends_on:
      - db
      - redis
  
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

volumes:
  pg_data:

7.2 CI/CD流程

GitLab CI配置示例：

yaml复制stages:
  - test
  - build
  - deploy

backend_test:
  stage: test
  script:
    - cd backend
    - python manage.py test

frontend_build:
  stage: build
  script:
    - cd frontend
    - npm install
    - npm run build
  artifacts:
    paths:
      - frontend/dist

deploy_prod:
  stage: deploy
  script:
    - docker-compose up -d --build
  only:
    - main

8. 开发经验与避坑指南

1. 跨域问题解决方案：

• 开发环境：配置Vue代理

javascript复制// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
  }
}

• 生产环境：配置Nginx反向代理

nginx复制location /api {
    proxy_pass http://backend:8000;
    proxy_set_header Host $host;
}

2. 静态文件处理技巧：

• 前端静态文件通过Nginx直接服务
• 后端媒体文件使用WhiteNoise中间件

python复制# settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MIDDLEWARE = [
    'whitenoise.middleware.WhiteNoiseMiddleware',
]

3. 性能监控建议：

• 前端使用Sentry捕获错误
• 后端配置Prometheus+Granafa监控

python复制# 安装django-prometheus
INSTALLED_APPS += ['django_prometheus']

MIDDLEWARE = [
    'django_prometheus.middleware.PrometheusBeforeMiddleware',
    # ...其他中间件
    'django_prometheus.middleware.PrometheusAfterMiddleware'
]

4. 数据库迁移注意事项：

• 开发阶段频繁迁移时，可以定期squash migrations

bash复制python manage.py squashmigrations app_name migration_number

5. 支付测试技巧：

• 使用支付宝沙箱环境
• 模拟各种异常情况（网络中断、重复通知等）
• 记录完整的请求/响应日志

这个项目从技术选型到部署上线，每个环节都需要仔细考量。特别是在电商领域，支付流程的可靠性和数据安全性至关重要。在实际开发中，建议采用迭代开发模式，先实现核心功能再逐步完善细节。