Vue3 前端部门管理功能开发及 Vite 代理配置解决内网访问问题
1. 接口定义
1.1 部门列表查询
基本信息
- 请求路径：
/depts - 请求方式：
GET - 接口描述：该接口用于部门列表数据查询
请求参数
无
响应数据
-
参数格式：
application/json -
参数说明： | 参数名 | 类型 | 是否必须 | 备注 | | --- | --- | --- | --- | | code | number | 是 | 响应码，1 代表成功，0 代表失败 | | msg | string | 否 | 提示信息 | | data | object[] | 否 | 返回的数据 | | id | number | 否 | 部门 ID | | name | string | 否 | 部门名称 | | createTime | string | 否 | 创建时间 | | updateTime | string | 否 | 修改时间 |
-
响应数据样例：
{"code":1,"msg":"success","data":[{"id":1,"name":"学工部","createTime":"2022-09-01T23:06:29","updateTime":"2022-09-01T23:06:29"},{"id":2,"name":"教研部","createTime":"2022-09-01T23:06:29","updateTime":"2022-09-01T23:06:29"}]}
1.2 删除部门
基本信息
- 请求路径：
/depts/{id} - 请求方式：
DELETE - 接口描述：该接口用于根据 ID 删除部门数据
请求参数
-
参数格式：路径参数
-
参数说明： | 参数名 | 类型 | 是否必须 | 备注 | | --- | --- | --- | --- | | id | number | 是 | 部门 ID |
-
请求参数样例：
/depts/1,/depts/2
响应数据
-
参数格式：
application/json -
参数说明： | 参数名 | 类型 | 是否必须 | 备注 | | --- | --- | --- | --- | | code | number | 是 | 响应码，1 代表成功，0 代表失败 | | msg | string | 否 | 提示信息 | | data | object | 否 | 返回的数据 |
-
响应数据样例：
{"code":1,"msg":"success","data":null}
1.3 添加部门
基本信息
- 请求路径：
/depts - 请求方式：
POST - 接口描述：该接口用于添加部门数据
请求参数
-
格式：
application/json -
参数说明： | 参数名 | 类型 | 是否必须 | 备注 | | --- | --- | --- | --- | | name | string | 是 | 部门名称 |
-
请求参数样例：
{"name":"教研部"}
响应数据
-
参数格式：
application/json -
参数说明： | 参数名 | 类型 | 是否必须 | 备注 | | --- | --- | --- | --- | | code | number | 是 | 响应码，1 代表成功，0 代表失败 | | msg | string | 否 | 提示信息 | | data | object | 否 | 返回的数据 |
-
响应数据样例：
{"code":1,"msg":"success","data":null}
1.4 根据 ID 查询
基本信息
- 请求路径：
/depts/{id} - 请求方式：
GET - 接口描述：该接口用于根据 ID 查询部门数据
请求参数
-
参数格式：路径参数
-
参数说明： | 参数名 | 类型 | 是否必须 | 备注 | | --- | --- | --- | --- | | id | number | 是 | 部门 ID |
-
请求参数样例：
/depts/1,/depts/3
响应数据
-
参数格式：
application/json -
参数说明： | 参数名 | 类型 | 是否必须 | 备注 | | --- | --- | --- | --- | | code | number | 是 | 响应码，1 代表成功，0 代表失败 | | msg | string | 否 | 提示信息 | | data | object | 否 | 返回的数据 | | id | number | 否 | 部门 ID | | name | string | 否 | 部门名称 | | createTime | string | 否 | 创建时间 | | updateTime | string | 否 | 修改时间 |
-
响应数据样例：
{"code":1,"msg":"success","data":{"id":1,"name":"学工部","createTime":"2022-09-01T23:06:29","updateTime":"2022-09-01T23:06:29"}}
1.5 修改部门
基本信息
- 请求路径：
/depts - 请求方式：
PUT - 接口描述：该接口用于修改部门数据
请求参数
-
格式：
application/json -
参数说明： | 参数名 | 类型 | 是否必须 | 备注 | | --- | --- | --- | --- | | id | number | 是 | 部门 ID | | name | string | 是 | 部门名称 |
-
请求参数样例：
{"id":1,"name":"教研部"}
响应数据
-
参数格式：
application/json -
参数说明： | 参数名 | 类型 | 是否必须 | 备注 | | --- | --- | --- | --- | | code | number | 是 | 响应码，1 代表成功，0 代表失败 | | msg | string | 否 | 提示信息 | | data | object | 否 | 返回的数据 |
-
响应数据样例：
{"code":1,"msg":"success","data":null}
2. 服务端地址说明
前端需配置后端服务访问地址。注意区分集群内部地址与外部访问地址，避免使用错误的 svc.cluster.local 域名。
3. 常见问题与解决方案
3.1 登录认证问题
测试页面时若发现后端开启了登录认证导致接口不通，可临时关闭后端项目的登录认证功能进行测试。
3.2 内网访问问题与 Vite 代理
浏览器直接访问 Kubernetes 集群节点内网地址（如 http://backend-service:8080/depts）通常无法访问。常规解决方案是配置网关服务，让前端先访问集群内的网关服务，再代理到后端服务。
临时解决方案：使用 Vite 反向代理
在 Vite 配置文件中设置 server.proxy，将前端请求转发至后端服务地址，从而解决跨域及内网访问限制问题。
4. 测试功能
完成新增、编辑、删除部门功能的测试，确保各接口调用正常，UI 展示符合预期（如表格列居中等）。
