1. 项目概述去年接手了一个零食电商平台的开发项目采用DjangoVue的前后端分离架构。这个看似普通的商城系统在实际开发中遇到了不少值得分享的技术点和踩坑经验。今天就把这个项目的完整实现过程和关键技术细节整理出来希望能给正在开发类似系统的同行一些参考。这个零食商城系统主要包含商品展示、购物车、订单管理、支付对接等核心模块。前端采用Vue3Element Plus实现响应式界面后端使用Django Rest Framework构建API服务数据库选用MySQL配合Redis缓存。系统上线后日均PV达到5万经受住了618大促的流量考验。2. 技术选型与架构设计2.1 为什么选择DjangoVue选择这个技术栈主要基于以下几点考虑开发效率Django自带Admin后台和ORM能快速搭建业务模型Vue的组件化开发模式适合电商这类交互复杂的场景性能考量Django的缓存机制和Vue的虚拟DOM都能有效提升系统响应速度生态完善两者都有丰富的第三方库支持比如Django Rest Framework和Vue Router团队适配团队成员对Python和JavaScript都比较熟悉2.2 系统架构图前端层(Vue) ↔ API层(DRF) ↔ 业务层(Django) ↔ 数据层(MySQLRedis)这种分层架构的关键优势在于前后端完全解耦可以独立开发和部署API层作为中间件便于后续扩展微服务数据库读写分离Redis缓解高并发压力3. 核心功能实现3.1 商品模块设计商品表设计采用了主表扩展表的方案class Product(models.Model): name models.CharField(max_length100) price models.DecimalField(max_digits10, decimal_places2) stock models.IntegerField(default0) # 其他公共字段... class ProductDetail(models.Model): product models.OneToOneField(Product, on_deletemodels.CASCADE) description models.TextField() spec models.JSONField() # 存储规格参数 # 其他扩展字段...这种设计的优点高频查询字段放在主表提升性能大文本和JSON数据放在扩展表减少主表体积便于实现商品的多规格展示3.2 购物车实现方案购物车功能需要考虑的几个关键点数据结构使用Redis hash存储用户ID和商品ID的映射关系并发控制采用乐观锁解决库存冲突失效机制设置7天自动过期时间核心代码示例def add_to_cart(user_id, product_id, quantity): with transaction.atomic(): product Product.objects.select_for_update().get(idproduct_id) if product.stock quantity: raise Exception(库存不足) redis_client.hincrby( fcart:{user_id}, product_id, quantity ) product.stock - quantity product.save()3.3 订单系统设计订单模块采用了状态机模式class Order(models.Model): STATUS_CHOICES ( (unpaid, 待支付), (paid, 已支付), (shipped, 已发货), (completed, 已完成), (cancelled, 已取消) ) status models.CharField(max_length20, choicesSTATUS_CHOICES) # 其他字段... def can_cancel(self): return self.status in [unpaid, paid]状态转换通过信号量触发相关业务逻辑receiver(pre_save, senderOrder) def order_status_change(sender, instance, **kwargs): if instance.id: original Order.objects.get(idinstance.id) if original.status ! instance.status: # 触发状态变更处理逻辑 handle_status_change(original.status, instance.status)4. 性能优化实践4.1 缓存策略采用多级缓存方案CDN缓存静态资源缓存页面缓存Vue的keep-alive组件API缓存Django的cache_page装饰器数据缓存Redis缓存热点数据缓存更新采用先更新数据库再删除缓存的策略避免缓存一致性问题。4.2 数据库优化索引优化为高频查询字段添加索引class Meta: indexes [ models.Index(fields[name]), models.Index(fields[price]), ]查询优化使用select_related和prefetch_related减少查询次数分库分表用户数据和订单数据分离到不同数据库4.3 前端性能优化组件懒加载const ProductDetail () import(./views/ProductDetail.vue)图片懒加载使用Intersection Observer API请求合并将多个API请求合并为单个请求本地缓存使用localStorage缓存用户偏好设置5. 安全防护措施5.1 常见攻击防护XSS防护前端使用DOMPurify过滤HTML后端设置Django的SECURE_BROWSER_XSS_FILTERTrueCSRF防护使用Django内置的CsrfViewMiddleware前端axios配置withCredentialstrueSQL注入使用ORM而非原生SQL必要时的原生查询使用参数化查询5.2 数据安全敏感信息加密from django.db import models from django_cryptography.fields import encrypt class User(models.Model): id_card encrypt(models.CharField(max_length100))日志脱敏自定义日志过滤器对手机号、身份证等敏感信息进行脱敏处理权限控制基于JWT的细粒度权限控制6. 部署与监控6.1 生产环境部署采用DockerNginxGunicorn方案version: 3 services: web: build: . command: gunicorn core.wsgi:application --bind 0.0.0.0:8000 volumes: - static:/app/static depends_on: - redis - db nginx: image: nginx:latest ports: - 80:80 volumes: - ./nginx.conf:/etc/nginx/nginx.conf - static:/app/static depends_on: - web6.2 监控方案应用监控PrometheusGrafana监控接口响应时间和错误率日志收集ELK收集和分析日志业务监控自定义埋点监控关键业务流程7. 踩坑经验分享7.1 跨域问题解决方案开发环境下的跨域处理CORS_ALLOWED_ORIGINS [ http://localhost:8080, http://127.0.0.1:8080 ]生产环境推荐使用Nginx反向代理解决跨域避免直接开放CORS。7.2 支付对接注意事项异步通知处理一定要验证签名和订单金额幂等设计支付回调接口需要处理重复通知对账机制每日定时对账发现异常订单7.3 高并发场景下的库存扣减最初使用简单的UPDATE语句导致超卖UPDATE products SET stock stock - 1 WHERE id 123优化方案使用SELECT FOR UPDATE加行锁在Redis中预扣减库存引入消息队列异步处理8. 项目扩展方向推荐系统基于用户行为的协同过滤推荐秒杀系统独立部署的秒杀微服务智能客服集成NLP技术的在线客服数据分析用户行为分析和销售预测这个项目从技术选型到最终上线历时3个月最大的体会是电商系统看似简单但要在保证性能和安全的前提下实现良好的用户体验需要在前端交互、后端架构和运维部署等多个环节做好平衡。特别是在高并发场景下一个小小的设计缺陷就可能引发严重的系统问题。