Vue3 前端部门管理功能开发及 Vite 代理配置解决内网访问问题

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 展示符合预期（如表格列居中等）。