从零做出 ServiceDesk 工单平台

这是一套给第一次完整做前后端项目的读者准备的实战教程。你会从安装工具开始，在一个新的练习文件夹里逐步完成企业服务工单运营平台，并最终具备可演示、可写入简历的项目。

本教程对应的最终参考实现位于项目根目录。学习时不要直接修改成品代码，请另外新建：

servicedesk-practice/
  client/       # Vue 前端
  server/       # Express 后端

你最终会完成什么

ServiceDesk 用于公司内部 IT 或行政服务。员工提交报修或账号问题，主管分配处理人，处理人员提交解决结果，员工确认关闭，主管查看运营统计。

完成后系统包含：

• 四种身份：提单用户、处理人员、服务主管、系统管理员。
• 登录、退出、刷新恢复登录态。
• 按权限码控制的菜单、页面、按钮以及后端接口校验。
• 工单创建、待受理编辑、筛选分页、评论、状态时间线。
• 待受理 -> 处理中 -> 待确认 -> 已关闭 的主流程，以及取消、退回。
• 用户、角色权限、工单分类的管理页面。
• ECharts 运营看板和 SLA 超时提示。
• 默认可运行的内存数据模式，以及可选 MySQL 持久化模式。
• TypeScript 检查、Lint、格式检查、自动测试和生产构建。

默认学习环境

项目	本教程使用的选择
操作系统	Windows 10/11
命令行	PowerShell
编辑器	Visual Studio Code
Node.js	20 或更新的 LTS 版本
前端	Vue 3 + TypeScript + Vite + Pinia + Vue Router + Element Plus + Axios + ECharts
后端	Node.js + Express + TypeScript
数据	前 12 章使用内存数据，第 13 章接入 MySQL

正确学习方法

1. 按顺序阅读章节，不要一开始复制整个成品。
2. 每章在 servicedesk-practice/ 内亲手创建或修改文件。
3. 完成一章后立即按照“启动并验证”检查结果。
4. 报错时先读当前章和附录的排查说明，再对照最终参考实现。
5. 第 12 章完成后，内存模式已经能完成五分钟面试演示；MySQL 是后续加分内容。

章节目录

章节	你会完成的内容	完成后可验证结果
00 开始之前	安装工具，理解前后端和基础名词	能执行 node -v、npm -v、code -v
01 认识项目与拆需求	角色、状态、页面和接口草稿	能讲清完整工单流程
02 创建前后端工程	npm workspace、Vue、Express	一条命令启动前后端
03 TypeScript 与业务类型	枚举、接口、通用响应类型	写错状态会被 TypeScript 拦住
04 写第一个 Express 接口	配置、健康接口、错误处理	浏览器可请求 /health
05 内存数据与登录鉴权	用户种子、JWT、权限中间件	四种账号可登录
06 Vue 页面与后台布局	登录页、布局、异常页面	页面具备后台外观
07 Axios 与登录状态	请求封装、Pinia、身份恢复	登录后刷新仍保持身份
08 权限菜单与动态路由	路由权限、按钮指令	不同账号显示不同功能
09 工单表单与列表	新建、筛选、分页、URL query	可创建并查找工单
10 详情页与状态流转	分配、处理、确认、编辑、时间线	能跑通核心闭环
11 管理员配置模块	用户、角色、分类配置	管理员可维护配置
12 ECharts 看板与 SLA	图表、聚合统计、超时预警	主管可查看运营数据
13 接入 MySQL	表结构、Docker、存储切换	重启后数据仍存在
14 测试构建与 README	自动检查、测试、交付说明	五条验收命令通过
15 简历与面试演示	简历文字、演示脚本、问答	能在五分钟内展示项目

附录

• 常见报错排查
• 命令速查表
• 名词解释

从哪里看最终答案

当你完成某章但不确定模块应如何组合时，再查看成品目录：

servicedesk/
  client/src/        # 最终前端页面、路由、Store 与组件
  server/src/        # 最终 API、权限、业务服务与存储
  server/sql/        # MySQL 建表脚本

教程会给出本章最关键文件的完整练习代码。成品代码包含样式、测试和异常处理等完整细节，是完成练习后的对照答案，而不是第一步就要背下来的材料。

最终验收命令

第 14 章后在 servicedesk-practice/ 根目录运行：

npm run typecheck
npm run lint
npm run format:check
npm test
npm run build

五条命令通过，并且能按第 15 章完成角色切换演示，才算项目真正完成。