Python+Vue校园超市系统开发与优化实践-代码聚汇网

Python+Vue校园超市系统开发与优化实践

做生活的创作者

1. 项目概述：Python+Vue校园超市系统的技术选型与价值

校园小卖铺管理系统是一个典型的轻量级电商应用场景，我去年为本地一所职校开发的这套系统，采用Python+Django+Vue技术栈，上线后日均处理订单300+，稳定运行至今。这种系统相比传统校园超市的手工记账，能实现库存实时预警、销售数据分析、移动端支付等现代化功能。

选择Python作为后端语言主要考虑三点：一是开发效率高，Django/Flask的ORM能快速构建数据模型；二是校园场景对并发要求不高（峰值约50TPS），Python完全够用；三是学生团队后续维护成本低。前端选用Vue.js因其渐进式特性，可以从小型功能模块开始迭代，特别适合需求可能变化的校园场景。

2. 技术架构设计

2.1 前后端分离架构

我们采用典型的B/S架构：

code复制前端：Vue 2.x + Element UI + Axios
后端：Django REST Framework（DRF）
数据库：MySQL 5.7
开发工具：PyCharm Professional + VS Code

这种组合的优势在于：

DRF提供完善的API管理界面，方便调试
Element UI的表格组件完美适配商品管理需求
PyCharm的Django模板支持能自动补全URL路由

2.2 数据库设计要点

核心表结构设计示例（简化版）：

python复制class Commodity(models.Model):
    barcode = models.CharField(max_length=20, unique=True)  # 商品条码
    name = models.CharField(max_length=100)
    price = models.DecimalField(max_digits=7, decimal_places=2)
    stock = models.IntegerField(default=0)
    alert_stock = models.IntegerField(default=10)  # 库存预警值
    
class Order(models.Model):
    student_id = models.CharField(max_length=12)  # 学号
    total_amount = models.DecimalField(max_digits=9, decimal_places=2)
    created_at = models.DateTimeField(auto_now_add=True)
    
class OrderDetail(models.Model):
    order = models.ForeignKey(Order, on_delete=models.CASCADE)
    commodity = models.ForeignKey(Commodity, on_delete=models.PROTECT)
    quantity = models.IntegerField()
    unit_price = models.DecimalField(max_digits=7, decimal_places=2)

注意：校园场景要特别注意学号字段的隐私保护，实际部署时需要加密存储

3. 核心功能实现

3.1 商品扫码入库

利用Django信号机制实现库存自动更新：

python复制from django.db.models.signals import post_save
from django.dispatch import receiver

@receiver(post_save, sender=InboundRecord)
def update_stock(sender, instance, **kwargs):
    commodity = instance.commodity
    commodity.stock += instance.quantity
    if commodity.stock > commodity.alert_stock:
        commodity.status = 'NORMAL'
    commodity.save()

前端扫码采用vue-qrcode-reader组件：

javascript复制<qrcode-stream @decode="onDecode"></qrcode-stream>

methods: {
  onDecode(barcode) {
    axios.get(`/api/commodities/?barcode=${barcode}`)
      .then(response => {
        this.currentCommodity = response.data
      })
  }
}

3.2 移动端支付集成

校园场景推荐使用微信JSAPI支付，关键步骤：

后端生成预付单：

python复制def create_wxpay_order(order_id):
    unified_order = WxPayUnifiedOrder(
        body="校园超市购物",
        out_trade_no=order_id,
        total_fee=int(total_amount * 100),  # 转为分
        spbill_create_ip=request.META['REMOTE_ADDR'],
        notify_url=settings.WXPAY_NOTIFY_URL,
        trade_type="JSAPI",
        openid=request.user.wx_openid  # 需提前获取
    )
    result = WxPayApi.unifiedOrder(unified_order)
    return {
        'appId': result['appid'],
        'timeStamp': str(int(time.time())),
        'nonceStr': result['nonce_str'],
        'package': f"prepay_id={result['prepay_id']}",
        'signType': 'MD5'
    }

前端调用支付：

javascript复制wx.chooseWXPay({
  timestamp: config.timeStamp,
  nonceStr: config.nonceStr,
  package: config.package,
  signType: config.signType,
  paySign: paySign,
  success: () => {
    this.$router.push('/order/success')
  }
})

4. 部署与运维实战

4.1 生产环境部署

推荐使用Nginx+Docker组合部署：

dockerfile复制# Django容器
FROM python:3.8
RUN pip install gunicorn
COPY requirements.txt .
RUN pip install -r requirements.txt
EXPOSE 8000
CMD ["gunicorn", "config.wsgi", "-b", "0.0.0.0:8000"]

# Vue容器
FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

Nginx关键配置：

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

location / {
    try_files $uri $uri/ /index.html;
}

4.2 常见问题排查

跨域问题解决方案：

python复制# settings.py
CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080",
    "https://your-domain.com"
]

微信支付签名错误检查清单：

检查商户密钥是否正确
验证时间戳是否为10位
确认金额单位是分不是元
检查notify_url是否外网可访问

Django Admin中文乱码修复：

python复制# admin.py
class CommodityAdmin(admin.ModelAdmin):
    list_display = ['barcode', 'name', 'price']
    search_fields = ['name']
    
admin.site.register(Commodity, CommodityAdmin)

5. 项目优化方向

5.1 性能优化实践

使用Django Debug Toolbar分析查询：

python复制# settings.py
DEBUG_TOOLBAR_CONFIG = {
    "SHOW_TOOLBAR_CALLBACK": lambda request: True
}

添加数据库索引：

python复制class Order(models.Model):
    student_id = models.CharField(max_length=12, db_index=True)
    created_at = models.DateTimeField(auto_now_add=True, db_index=True)

前端懒加载优化：

javascript复制const CommodityList = () => import('./views/CommodityList.vue')

5.2 扩展功能建议

增加预售功能：

python复制class PreOrder(models.Model):
    STATUS_CHOICES = [
        ('PENDING', '待备货'),
        ('READY', '可领取'),
    ]
    commodity = models.ForeignKey(Commodity, on_delete=models.PROTECT)
    student = models.ForeignKey(Student, on_delete=models.CASCADE)
    expect_date = models.DateField()

实现智能推荐：

python复制from django.db.models import Count

def get_recommendations(student_id):
    # 获取该学生常买商品
    top_products = OrderDetail.objects.filter(
        order__student_id=student_id
    ).values('commodity').annotate(
        count=Count('commodity')
    ).order_by('-count')[:3]
    
    # 基于协同过滤推荐
    return Commodity.objects.filter(
        category__in=[p['commodity'] for p in top_products]
    ).exclude(
        id__in=[p['commodity'] for p in top_products]
    )[:5]

这套系统在实际运行中，最大的收获是发现校园场景的销售高峰非常集中（课间10分钟），因此我们特别优化了结算页面的加载速度，通过预加载常用JS库、启用HTTP/2、压缩静态资源等手段，将页面加载时间从2.1秒降低到0.7秒，高峰期订单处理能力提升3倍。