精通毕业项目：管理后台与 Vue 迁移

第 12 章 · 精通毕业项目：管理后台与 Vue 迁移

本章目标：在 ch01～ch11 基础上独立交付 admin-demo 毕业作品（用户/商品/订单三模块 Layui 后台）；按 100 分验收表 自评与答辩；掌握 jQuery/Layui → Vue3 + Element Plus 迁移对照；衔接 frontend-framework 模块；回顾 34 + 12 章前端学习地图。

学时建议：5 天 × 5～7 小时（合计 25～35 小时）

前置：完成本模块 ch01～ch11；建议浏览 frontend-framework ch01、ch11、ch16。

12.1 毕业项目背景与边界

admin-demo 是本模块 jQuery/Layui 的收官作品，模拟示例电商后台 MVP：入驻商家管理商品、查看订单、管理员维护账号。

┌─────────────────────────────────────────────────┐
│              admin-demo 毕业项目范围               │
├──────────┬──────────┬──────────┬────────────────┤
│  登录    │ 用户管理  │ 商品管理  │   订单列表     │
│  会话    │ (admin)  │ CRUD     │   分页筛选     │
└──────────┴──────────┴──────────┴────────────────┘
                      │
                      ▼
           Mock API / 标准 REST 等价行为

模块	MVP 必做	加分项（不计入 100 分基础项）
登录	账号密码、退出、会话保持	记住我、验证码
用户管理	列表、新增、禁用（仅 admin）	角色分配弹窗
商品管理	列表搜索、新增/编辑、删除、主图上传	批量上下架
订单列表	分页、状态筛选、详情查看	导出 CSV
布局	layout-admin、侧栏、面包屑	Tab 多页签
权限	菜单按角色、只读隐藏写按钮	路由级拦截

行业常见做法：内网商户后台日活规模不一；本毕业规格对标 商户端 MVP 2024 Q4 教学标准，评审通过可写入学习档案，并作为选修 L2 前端 Layui 方向 答辩素材。完整 Vue 版见 frontend-framework ch16。

12.2 技术栈与交付物清单

12.2.1 必选技术

层级	选型
布局/UI	Layui 2.x
DOM/Ajax	jQuery 3.x（或 Layui 内置 jquery）
弹层/表格/表单	layer / table / form / upload / laydate
数据	Mock（json-server）或 MSW 等价 REST
样式	`admin-custom.css` 主题主色 `#e91e8c`

12.2.2 目录结构（评审检查）

admin-demo/
├── index.html                 # 登录
├── index-layout.html          # 主框架
├── pages/
│   ├── dashboard.html
│   ├── user-list.html         # admin
│   ├── product-list.html
│   ├── product-edit.html
│   └── order-list.html
├── layui/
├── js/
│   ├── config.js
│   ├── menu-config.js
│   ├── xz-ui.js
│   ├── product-list.js
│   └── ...
├── css/admin-custom.css
├── mock/db.json
├── README.md                  # 启动说明、账号、API 说明
└── screenshots/               # 答辩用截图 ≥ 5 张

12.2.3 README 必含

本地启动步骤（Mock 端口、登录账号）
三种角色账号：admin / operator / viewer
功能清单与已知限制
若对标行业遗留后台，注明参考页面功能模块（勿写真实路径）

12.3 三模块功能规格

12.3.1 用户管理（admin 专属）

项	规格
入口	侧栏「系统管理 → 用户列表」，`roles: ['admin']`
列表	table：用户名、角色、状态、创建时间
新增	layer 表单：用户名、密码、角色 select
禁用	行操作 switch 或「禁用」confirm
校验	用户名 3～20 字；密码 ≥ 6 位

12.3.2 商品管理（ch11 walkthrough）

项	规格
搜索	关键词、上架状态
列表	价格 templet、状态 badge
新增/编辑	iframe + form.verify + upload 主图
删除	confirm 富文本提示
operator	可增删改；viewer 不可见菜单

12.3.3 订单列表（ch09）

项	规格
筛选	订单号、状态、日期范围 laydate
列表	服务端分页 parseData
详情	layer.open 只读订单明细
viewer	可看列表与详情，无删除

12.4 100 分验收表

评审员按表打分；≥ 80 分为通过，≥ 90 分为优秀。

#	验收项	分值	通过标准
1	项目可本地一键启动，README 清晰	8	他人按文档 10 分钟内跑通
2	登录/退出与会话	10	未登录不能进 layout；退出清 session
3	layout-admin 布局完整	8	头侧主、iframe 高度合理、可折叠
4	权限菜单三角色正确	12	admin/operator/viewer 菜单与按钮符合 12.3
5	用户管理 CRUD（admin）	10	列表+新增+禁用至少 3 项可用
6	商品管理搜索+分页	10	where 搜索、分页参数正确
7	商品新增/编辑+校验+上传	15	verify 生效、主图必传、PUT/POST 区分
8	商品删除 confirm	5	有确认、失败有提示
9	订单列表+筛选+分页	12	parseData、状态 templet、空状态
10	订单详情只读弹窗	5	字段完整、viewer 可查看
11	统一错误与 loading	5	401 跳登录；提交有 load/防连点
12	代码组织与注释	5	关键模块拆分 js；无大面积复制粘贴
13	主题主色与基本美观	5	主色/按钮/空状态统一
14	答辩材料	5	README + ≥5 截图 + 2 分钟演示视频或 live demo

扣分常见项：

直接 location.reload 替代合理 table.reload（-2）
未处理 CSRF / 401（-3）
viewer 仍能删数据（-10，权限重大缺陷）
表单未 form.render 导致控件失效（-3）

12.5 5 天实施计划

天	目标	产出
D1	登录 + layout + 菜单权限 + Mock	能按角色看到不同菜单
D2	商品列表 + 搜索 table	product-list 完成
D3	商品编辑 + upload + 删	商品 CRUD 闭环
D4	订单列表 + 详情 + 用户管理	三模块齐
D5	xz-ui 统一、README、自测验收表、截图	可提交评审

每日结束跑一遍验收表前 6 项，避免最后一天集中补权限漏洞。

12.6 jQuery/Layui vs Vue3 + Element Plus 迁移对照

完成 Layui 版后，建议用 同一 API 契约 迁移到 frontend-framework 技术栈，体会框架差异。

12.6.1 概念映射

Layui / jQuery	Vue3 + Element Plus
`layui-layout-admin`	`el-container` + `AdminLayout.vue`
`layui-nav-tree`	`el-menu` + `router`
`table.render`	`el-table` + 分页 `el-pagination`
`form.on('submit')`	`@submit` + `el-form rules`
`layer.open iframe`	`el-dialog` + 内嵌组件或子路由
`layer.msg`	`ElMessage`
`layer.confirm`	`ElMessageBox.confirm`
`upload.render`	`el-upload`
`laydate`	`el-date-picker`
`table.reload`	改 `queryParams` + 重新 `fetchList()`
`sessionStorage.user`	Pinia `authStore` + Token
`$.ajax`	axios 封装（ch13）

12.6.2 商品列表代码对照（片段）

Layui：

table.render({