API 接口文档1. 技术架构┌─────────────────────────────────────────┐ │ 前端层 │ Vue 3 Element Plus │ │ │ (静态 HTMLCDN 引入) │ ├─────────────────────────────────────────┤ │ Controller │ EmpController │ │ (REST API) │ DeptController │ ├─────────────────────────────────────────┤ │ Mapper 层 │ EmpMapper (MyBatis) │ │ (数据访问) │ DeptMapper (MyBatis) │ ├─────────────────────────────────────────┤ │ 数据库 │ Microsoft SQL Server │ │ │ 库名: 2026shangke │ └─────────────────────────────────────────┘层级技术说明框架Spring Boot 3.5.15内嵌 Tomcat提供 Web 服务持久层MyBatis 3.0.5注解式 SQL 映射#{}防注入数据库SQL Server通过mssql-jdbc驱动连接前端Vue 3 Element PlusCDN 引入无需构建工具工具Lombok自动生成 getter/setter/toString2. 统一响应格式所有接口返回 JSON结构统一为Result对象{code:1,// 状态码1 成功0 失败msg:操作成功,// 提示信息data:{}// 响应数据可能是对象、数组或 null}字段类型说明codeInteger1成功0失败msgString操作结果的描述信息dataObject业务数据查询时返回增删改时通常为null3. 员工管理接口基础路径/api/emps3.1 查询员工列表条件搜索支持按姓名模糊搜索、性别筛选、入职日期范围筛选。所有参数均可选不传则不参与筛选。请求GET /api/emps?namegenderbeginend参数类型必填说明nameString否员工姓名模糊匹配LIKE %xxx%genderShort否性别1男2女beginString否入职开始日期格式YYYY-MM-DDendString否入职结束日期格式YYYY-MM-DD请求示例# 无条件查询全部 GET /api/emps # 按姓名模糊搜索 GET /api/emps?name张 # 查询所有男员工 GET /api/emps?gender1 # 查询 2010-01-01 到 2020-12-31 入职的员工 GET /api/emps?begin2010-01-01end2020-12-31 # 组合查询姓张的男员工2000年后入职 GET /api/emps?name张gender1begin2000-01-01end2100-12-31成功响应200 OK{code:1,msg:操作成功,data:[{id:1,username:jinyong,password:123456,name:金庸,gender:1,image:1.jpg,job:4,entrydate:2000-01-01,deptId:2,createTime:2026-06-24T10:00:00,updateTime:2026-06-24T10:00:00},{id:2,username:zhangwuji,password:123456,name:张无忌,gender:1,image:2.jpg,job:2,entrydate:2015-01-01,deptId:2,createTime:2026-06-24T10:00:00,updateTime:2026-06-24T10:00:00}]}3.2 根据 ID 查询员工请求GET /api/emps/{id}参数类型必填说明idInteger是员工 ID路径参数请求示例GET /api/emps/1成功响应200 OK{code:1,msg:操作成功,data:{id:1,username:jinyong,password:123456,name:金庸,gender:1,image:1.jpg,job:4,entrydate:2000-01-01,deptId:2,createTime:2026-06-24T10:00:00,updateTime:2026-06-24T10:00:00}}失败响应200 OK{code:0,msg:员工不存在,data:null}3.3 新增员工请求POST /api/emps Content-Type: application/json参数类型必填说明usernameString是用户名必须唯一nameString是姓名genderShort是性别1男2女jobShort是职位编码详见 数据字典deptIdInteger是部门 IDentrydateString是入职日期格式YYYY-MM-DDpasswordString否密码不传则默认为123456imageString否头像文件名如1.jpg注意id、createTime、updateTime由后端自动生成不需要传。请求示例{username:zhangsan,name:张三,gender:1,image:default.jpg,job:2,entrydate:2024-06-01,deptId:3}成功响应200 OK{code:1,msg:操作成功,data:null}3.4 修改员工请求PUT /api/emps Content-Type: application/json参数类型必填说明idInteger是要修改的员工 IDusernameString是用户名nameString是姓名genderShort是性别jobShort是职位编码deptIdInteger是部门 IDentrydateString是入职日期imageString否头像文件名passwordString否密码注意updateTime由后端自动更新。请求示例{id:18,username:songdaxia,name:老宋,gender:1,image:2.jpg,job:2,entrydate:2012-01-01,deptId:2}成功响应200 OK{code:1,msg:操作成功,data:null}3.5 删除员工请求DELETE /api/emps/{id}参数类型必填说明idInteger是员工 ID路径参数请求示例DELETE /api/emps/23成功响应200 OK{code:1,msg:操作成功,data:null}4. 部门管理接口基础路径/api/depts4.1 查询全部部门请求GET /api/depts无参数返回所有部门。成功响应200 OK{code:1,msg:操作成功,data:[{id:1,name:学工部,createTime:2026-06-24T10:00:00,updateTime:2026-06-24T10:00:00},{id:2,name:教研部,createTime:2026-06-24T10:00:00,updateTime:2026-06-24T10:00:00}]}4.2 根据 ID 查询部门请求GET /api/depts/{id}参数类型必填说明idInteger是部门 ID路径参数请求示例GET /api/depts/1失败响应{code:0,msg:部门不存在,data:null}4.3 新增部门请求POST /api/depts Content-Type: application/json参数类型必填说明nameString是部门名称最长 10 个字符必须唯一请求示例{name:财务部}成功响应200 OK{code:1,msg:操作成功,data:null}4.4 修改部门请求PUT /api/depts Content-Type: application/json参数类型必填说明idInteger是要修改的部门 IDnameString是新的部门名称最长 10 个字符请求示例{id:1,name:学生工作部}成功响应200 OK{code:1,msg:操作成功,data:null}4.5 删除部门请求DELETE /api/depts/{id}参数类型必填说明idInteger是部门 ID路径参数请求示例DELETE /api/depts/6⚠️ 如果该部门下有员工SQL Server 的外键约束可能导致删除失败。成功响应200 OK{code:1,msg:操作成功,data:null}5. 数据字典5.1 性别枚举编码含义1男2女5.2 职位枚举编码含义1班主任2讲师3学工主管4教研主管5咨询师5.3 部门初始数据ID部门名称1学工部2教研部3咨询部4就业部5人事部6. 前端页面页面URL说明首页http://localhost:8080/index.html系统概览显示员工/部门统计卡片员工管理http://localhost:8080/emp.html员工搜索、新增、编辑、删除部门管理http://localhost:8080/dept.html部门新增、编辑、删除前端使用 Vue 3 Element Plus通过 CDN 引入无需额外安装依赖Spring Boot 直接从static/目录提供静态文件服务。前端调用后端流程用户操作页面emp.html → fetch(/api/emps, {method: GET/POST/PUT/DELETE}) → EmpController 接收请求 → EmpMapper 执行 SQL → SQL Server 数据库 → 返回 Result JSON → 前端解析 response.json() → 更新页面数据7. 数据库表结构7.1 员工表emp字段类型说明idINT IDENTITY(1,1) PRIMARY KEY主键自增usernameVARCHAR(20) NOT NULL UNIQUE用户名passwordVARCHAR(32) DEFAULT 123456密码默认 123456nameVARCHAR(10) NOT NULL姓名genderTINYINT NOT NULL性别1 男2 女imageVARCHAR(300)头像文件名jobTINYINT职位编码entrydateDATE入职日期dept_idINT部门 IDcreate_timeDATETIME2 NOT NULL创建时间update_timeDATETIME2 NOT NULL修改时间7.2 部门表dept字段类型说明idINT IDENTITY(1,1) PRIMARY KEY主键自增nameVARCHAR(10) NOT NULL UNIQUE部门名称create_timeDATETIME2 NOT NULL创建时间update_timeDATETIME2 NOT NULL修改时间附录 A接口速查表HTTP 方法URL说明GET/api/emps条件查询员工列表支持 name/gender/begin/endGET/api/emps/{id}根据 ID 查询单个员工POST/api/emps新增员工PUT/api/emps修改员工DELETE/api/emps/{id}删除员工GET/api/depts查询全部部门GET/api/depts/{id}根据 ID 查询部门POST/api/depts新增部门PUT/api/depts修改部门DELETE/api/depts/{id}删除部门附录 B动态 SQL 说明员工列表查询接口使用了 MyBatis 动态 SQL底层对应的 SQL 模板为whereiftestname ! null and name ! and name like concat(%, #{name}, %)/ififtestgender ! nulland gender #{gender}/ififtestbegin ! nulland entrydate #{begin}/ififtestend ! nulland entrydate #{end}/if/where只有前端传了某个参数对应的 WHERE 条件才生效#{name}使用预编译参数天然防止 SQL 注入MyBatis 自动处理多余的AND关键字