平台采用买家-商家双层用户体系,普通用户注册后即可申请成为商家。提交店铺名称、联系方式、店铺描述等信息后,平台管理员进行审核,审核通过后自动开通店铺权限。商家拥有独立的店铺主页、商品管理后台和订单处理能力,实现多商户共存的 SaaS 运营模式。
支持无限级商品分类树,商家可自由创建一级分类和子分类,灵活组织商品结构。商品管理覆盖完整生命周期:新建商品时设置名称、价格、库存、分类、描述,保存为草稿后可随时上架销售,售罄自动标记,也可手动下架。商品列表支持按名称搜索、按分类和状态筛选、按价格和销量排序,批量管理高效便捷。
订单是平台核心,系统实现了电商标准 8 状态流转:待付款 → 待发货 → 已发货 → 已收货 → 已完成,同时支持已取消、退款中、已退款三条异常路径。每个状态流转均有严格校验,杜绝越权操作。买家提交订单时按商家自动拆单,不同店铺商品生成独立订单,支持填写收货人、电话、地址和备注信息。商家端提供完整订单处理能力:查看待发货订单并一键发货,跟踪物流状态,确认收货,取消未付款订单。订单详情以抽屉面板展示,含状态进度条、收货信息、商品明细和金额汇总,操作按钮根据当前状态智能显示。订单列表支持按状态标签筛选(全部/待付款/待发货/已发货/已收货/已完成/已取消),按订单号、收货人或电话搜索,按日期范围查询,按金额和下单时间排序,分页加载。顶部统计卡片实时展示今日订单数、今日收入、总订单数和待处理数量。
售后管理模块独立呈现所有问题订单:退款中、已退款和已取消三类。商家可查看退款详情(退款原因、订单信息、商品明细),执行同意退款或拒绝退款操作。同意退款后系统自动恢复商品库存,保证数据一致性。统计卡片展示待处理、已退款、已取消的数量,帮助商家快速掌握售后状况。
支付系统支持支付宝和微信支付双通道,每笔支付生成唯一流水号,完整记录支付方式、金额、状态和时间。财务管理模块提供收入概览(累计收入、本月收入、交易笔数),支付流水列表支持按流水号或订单号搜索,按支付方式筛选,按金额和支付时间排序。账单导出功能为对账提供便利。
数据报表是平台的决策大脑,提供 7 个维度的数据可视化。KPI 指标卡片展示总销售额、订单总数、客单价和退款率,每项指标附带环比趋势百分比。销售趋势图采用双轴设计,同时呈现销售额折线和订单量柱状,支持近 7 天、近 30 天、本季度、全年四个时间维度切换。订单状态分布以环形图展示各状态占比,分类销售额排行以横向柱状图对比六大品类的营收贡献。进一步的分析包括客单价趋势图(含均线参考)、支付方式占比饼图、下单时段分布柱状图(识别订单高峰时段)和周同比分析(本周与上周双线对比)。
采用前后端分离 + Docker 容器化部署架构。前端 Vue 3 单页应用通过 Vite 代理转发 API 请求到 Django REST Framework 后端,开发环境 Docker Compose 一键编排,生产环境 Nginx + Gunicorn。以"商家视角"为核心设计,11 个功能模块覆盖电商完整链路:入驻审核 → 商品管理 → 订单履约 → 支付对账 → 售后处理 → 数据分析 → 营销推广。状态机驱动订单流转(8 状态严格校验),按商家自动拆单,库存事务一致性。
独立完成全栈 11 个业务模块的前后端开发,包括 6 个数据模型设计、15 个 RESTful API 端点、7 个可视化图表、3 层权限控制(公开/登录/管理员)。
后端代码量:Django 模型 250+ 行,序列化器 200+ 行,视图 500+ 行,工具函数 240+ 行
前端代码量:Vue 组件 11 个页面,总计 4000+ 行,含 7 个 ECharts 图表配置
数据模型:User、Merchant、Category、Product、Order、OrderItem、Payment、ShoppingCart 共 8 个
API 端点:15 个 RESTful 接口,支持搜索、筛选、排序、分页
订单系统:8 状态流转,153 条种子数据覆盖所有状态
遇到的难点与解决方案
跨域 CSRF 认证问题:Django 默认 Session 认证要求 POST 请求携带 CSRF Token,但 SPA 前端无法获取。逐层排查 Django 中间件 → DRF SessionAuthentication.enforce_csrf() → 自定义 CsrfExemptSessionAuthentication 类,重写 enforce_csrf 为空实现,全局配置到 REST_FRAMEWORK 设置中。
Docker Windows 文件挂载不触发 HMR:修改前端代码后容器内 Vite 不热更新。手动清除 node_modules/.vite 缓存 + 重启容器解决,后续可用 WSL2 或 volume 驱动优化。
OrderViewSet 继承错误:原代码使用 GenericViewSet 而非 ModelViewSet,导致 list/retrieve 路由不存在返回 404。改为 ModelViewSet 并补充 filter_backends、search_fields 配置,同时增加 stats/cancel/receive/refunds 4 个自定义 action。
报表数据为空:数据库订单时间是 4 月,查询近 30 天无结果导致图表空白。添加 demo 数据兜底逻辑,API 失败时自动使用本地数据渲染,保证截图演示和生产运行都正常工作。