Django+Vue3二手书交易平台开发实战

1. 项目概述：基于Django与Vue3的二手书交易平台实战

去年帮学校图书馆开发二手教材交易系统时，我选择了Django+Vue3的技术组合。这个全栈方案既能快速实现核心交易功能，又便于后期扩展推荐算法等高级特性。系统上线三个月就促成2000+笔交易，验证了技术选型的合理性。

二手书交易平台本质是C2C电商的垂直领域实现，需要解决三个核心问题：商品（图书）的高效展示与检索、买卖双方的可信交互、交易流程的闭环管理。传统单体架构难以应对复杂的前端交互需求，而前后端分离模式恰好能发挥Django的数据处理优势和Vue3的动态界面能力。

技术选型关键考量：Django自带Admin后台可快速构建管理系统，其ORM能优雅处理图书、用户、订单等关联数据；Vue3的Composition API相比Options API更适应复杂前端状态管理，配合Pinia的状态持久化特性完美匹配购物车等场景。

2. 核心模块设计与实现

2.1 用户系统深度优化

JWT认证是系统安全基石，但原生实现存在令牌刷新问题。我的解决方案是采用双Token机制：

python复制# settings.py
SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=15),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=7),
    'ROTATE_REFRESH_TOKENS': True  # 每次刷新生成新令牌
}

前端需要配套实现Token自动刷新逻辑：

javascript复制// axios响应拦截器
instance.interceptors.response.use(response => {
  return response
}, async error => {
  const originalRequest = error.config
  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true
    const { data } = await axios.post('/api/token/refresh/', {
      refresh: store.auth.refreshToken
    })
    store.auth.updateAccessToken(data.access)
    originalRequest.headers.Authorization = `Bearer ${data.access}`
    return instance(originalRequest)
  }
  return Promise.reject(error)
})

避坑经验：

1. refreshToken必须设置HttpOnly和Secure属性防止XSS攻击
2. 每次accessToken过期后应销毁旧refreshToken，避免令牌滥用
3. 移动端需额外处理Token持久化策略

2.2 图书交易功能实现

2.2.1 多图上传优化方案

原始Django文件上传性能较差，我通过组合这些技术提升体验：

• 前端采用vue-dropzone组件实现拖拽上传
• 后端使用django-storages对接阿里云OSS
• 开启Celery异步处理图片缩略图生成

python复制# models.py
class BookImage(models.Model):
    book = models.ForeignKey(Book, on_delete=models.CASCADE, related_name='images')
    image = models.ImageField(upload_to='book_images/')
    thumbnail = models.ImageField(upload_to='thumbnails/', null=True)
    
    @transac