精通毕业项目：商城后台全栈交付

第 16 章 · 精通毕业项目：商城后台全栈交付

本章目标：在 ch01～ch15 基础上，独立交付 示例商户后台 毕业作品（Vue 或 React 二选一）；覆盖商品管理、订单列表、用户登录、权限菜单；技术栈含 TypeScript + UI 库 + Pinia/Zustand + axios + Vitest + Docker；按 5 天计划 实施并通过 100 分验收；完成答辩与简历项目描述。

学时建议：5 天 × 6～8 小时（合计 30～40 小时）

前置：完成本模块 ch01～ch15；建议同步复习 frontend-web ch16 业务规格。

16.1 项目背景与产品边界

贤紫优选商城 C 端面向消费者；商户后台供入驻商家管理商品、处理订单、查看经营数据。本毕业项目实现后台 MVP，与真实 OpenAPI 对齐或 MSW Mock 等价行为。

┌─────────────────────────────────────────┐
│           贤紫商户后台（本毕业项目）        │
├─────────┬─────────┬─────────┬───────────┤
│  登录   │ 权限菜单 │ 商品管理 │  订单列表  │
└─────────┴─────────┴─────────┴───────────┘
                    │
                    ▼
         API（ch13）/ MSW（联调前）

行业案例 · 贤紫优选商城：真实商户后台日活商家约 3200+；毕业项目规格对标 2024 Q4 商户端 MVP，评审通过作品可写入学习档案并作为 L2 前端方向 答辩素材。

16.2 技术栈清单（必选）

# Vue 脚手架参考
npm create vite@latest xianzi-admin-vue -- --template vue-ts
cd xianzi-admin-vue
npm install vue-router pinia element-plus axios zod
npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

# React 脚手架参考
npm create vite@latest xianzi-admin-react -- --template react-ts
npm install react-router-dom zustand antd axios zod react-hook-form @hookform/resolvers
npm install -D vitest @testing-library/react @testing-library/user-event jsdom

统一要求：strict: true；ESLint + Prettier；禁止 any 泛滥（评审扣分项）。

16.3 推荐目录结构

16.3.1 Vue 版

xianzi-admin-vue/
├── docker/
│   ├── nginx.conf
│   └── entrypoint.sh
├── public/
├── src/
│   ├── api/                 # ch13：auth, product, order
│   ├── assets/
│   ├── components/          # 通用：PageHeader, StatusTag
│   ├── composables/
│   ├── config/env.ts
│   ├── features/
│   │   ├── auth/            # LoginView
│   │   ├── product/         # List, Wizard（ch12）
│   │   └── order/           # OrderList, OrderDetail
│   ├── layouts/
│   │   └── AdminLayout.vue  # 侧栏 + 顶栏
│   ├── mocks/               # MSW handlers
│   ├── router/
│   │   ├── index.ts
│   │   └── guards.ts        # 登录与权限
│   ├── schemas/             # Zod 共享
│   ├── stores/
│   │   ├── auth.ts
│   │   └── app.ts
│   ├── styles/
│   ├── test/
│   ├── types/
│   ├── utils/
│   ├── App.vue
│   └── main.ts
├── Dockerfile
├── docker-compose.yml
├── .github/workflows/deploy.yml
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

16.3.2 React 版

将 features//views 改为 pages/ 或 features//*.tsx；stores/ 用 Zustand；layouts/AdminLayout.tsx；其余与 Vue 同构。

16.4 功能规格详解

16.4.1 用户登录

测试：ch14 登录表单 3 场景（校验、成功、错误）。

16.4.2 权限菜单

• 侧栏根据 user.role 过滤 menuConfig
• 路由 meta.roles: string[]，beforeEach 校验
• 直接输入 URL 无权限 → 403 页

// router/meta 示例
{
  path: '/products',
  component: ProductList,
  meta: { roles: ['admin', 'operator'], title: '商品管理' },
}

16.4.3 商品管理

16.4.4 订单列表

16.5 五天实施计划

Day 1          Day 2          Day 3          Day 4          Day 5
工程初始化      登录+布局       商品模块        订单+权限       测试+部署+文档
│              │              │              │              │
├─ Vite+TS     ├─ Login       ├─ List        ├─ OrderList   ├─ Vitest 补全
├─ Router      ├─ axios       ├─ Wizard      ├─ 路由守卫    ├─ Dockerfile
├─ UI 库       ├─ MSW         ├─ Zod schema  ├─ 403 页      ├─ CI workflow
└─ 目录骨架    └─ AdminLayout └─ Pinia草稿   └─ 联调真实API └─ README+答辩稿

每日建议节奏：上午实现核心路径，下午补测试与文档，晚间 code review 自查清单。

16.6 100 分验收表