从零做出 ServiceDesk 工单平台
从零做出 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 |
正确学习方法
- 按顺序阅读章节,不要一开始复制整个成品。
- 每章在
servicedesk-practice/内亲手创建或修改文件。 - 完成一章后立即按照“启动并验证”检查结果。
- 报错时先读当前章和附录的排查说明,再对照最终参考实现。
- 第 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 章完成角色切换演示,才算项目真正完成。