立项原因:随着移动电商渗透率持续提升,中小团队在搭建自有电商前台时常面临"从零造轮子"成本高、买家旅程链路难打通的问题。本项目旨在模拟淘宝核心买家侧体验,沉淀一套可复用的电商前台模板,解决商品浏览搜索、购物车合并结算、优惠券核销、订单状态流转、收货评价等典型电商场景下"功能分散、状态不一致、库存超卖"等痛点。
行业场景:面向 C2C/B2C 零售电商业务背景,聚焦买家从"逛"(首页推荐、分类、关键词搜索)到"买"(加购、下单、用券、模拟支付)再到"售后"(确认收货、带图评价、申请退款)的完整闭环。覆盖服装、数码、美妆、食品、家居、母婴等 6 大类目共 12 个 SKU 的种子数据,真实还原移动端电商业务背景。
项目功能模块划分为七大块:① 用户与登录——手机号注册/JWT 登录/个人中心/收货地址增删改查与默认地址切换;② 商品与搜索——首页分类宫格、关键词搜索、按分类浏览、价格区间筛选、综合/销量/价格升降序排序、商品详情图文与图片轮播;③ 购物车——加购、数量增减、单项勾选、全选、清空选中、实时小计与合计;④ 优惠券——满减券(满50减10、满200减30)与折扣券(9折),按金额门槛校验可用券、下单时核销并支持取消订单后回滚释放;⑤ 订单与支付——下单(商品/地址/优惠券快照)、模拟支付回调、确认收货、取消订单、申请退款,七状态状态机(pending_pay→pending_ship→pending_recv→finished,及 cancelled/refunding/refunded)严格校验合法流转并记录审计日志;⑥ 评价——收货后对商品打 1-5 星、文字评价、支持多图上传;⑦ 个人中心——订单状态快捷入口、地址管理、优惠券入口。
我负责的具体任务:整体架构设计与目录规划、后端 13 张数据表建模与全部 9 组路由实现(认证/用户/商品/购物车/优惠券/订单/支付/评价/上传)、订单状态机与库存/优惠券事务一致性、前端 13 个页面与 6 个公共组件、Pinia 状态管理与路由守卫、种子数据脚本、以及前后端联调与类型检查/lint 验证。
技术栈:前端 Vue3 + Vite + TypeScript + Tailwind CSS + Pinia + Vue Router + axios;后端 FastAPI + SQLAlchemy + SQLite + JWT(python-jose)+ passlib。架构为前后端分离,前端 Vite 代理 /api 与 /uploads 到后端 8000 端口。实现亮点:① 订单下单时对商品标题/价格/主图与收货地址做 JSON 快照存库,避免后续商品改动影响历史订单;② 优惠券校验、库存扣减、状态机流转集中在订单路由内,取消订单时回滚库存与释放优惠券,保证事务一致性;③ 评价图片统一走 /uploads/image 接口本地存储并静态挂载;④ 前端封装带 X-Token 拦截器的 axios 与 401 自动跳登录。难点:解决 passlib 1.7.4 与环境已装 bcrypt 5.x 的不兼容(改用 pbkdf2_sha256)、解决 vue-tsc project references 的 "js emit is not supported" 报错、以及商品详情页固定底部栏被全局 TabBar 遮挡导致加购按钮点不到的布局冲突。
评论