1. 问:你们项目是如何实现前端API接口统一管理的?这样做有什么好处?
答:
在本项目中,前端的API接口统一管理体现在 web-admin/src/api/ 和 web-company/src/api/ 目录下。每个功能模块(如 menu.ts, viewRecord.ts, like.ts 等)都单独封装对应的接口请求,所有请求都通过统一的 request.ts 工具(基于 axios 封装)发起。这样做的好处是:
- 便于维护和查找,接口变更时只需修改对应文件
- 统一处理请求拦截、错误处理、token 注入等逻辑
- 提高代码复用性和可读性
- 方便团队协作,降低出错概率
2. 问:如果后端API地址或参数发生变更,前端如何快速适配?
答:
由于所有API请求都集中管理在 src/api/ 目录下,且每个接口都有独立的函数封装(如 getMenuList, addProduct 等),当后端API地址或参数变更时,只需在对应的API文件中修改即可,无需全局查找替换。比如后端 /api/menu/list 改为 /api/menu/all,只需在 menu.ts 里调整即可,所有调用该接口的地方自动适配,极大提升了维护效率。
3. 问:你们项目的API请求是如何做统一拦截和错误处理的?
答:
项目中所有API请求都通过 request.ts 进行统一封装(如 web-admin/src/utils/request.ts)。在该文件中,利用 axios 的拦截器功能:
- 请求拦截器统一注入 token、设置请求头
- 响应拦截器统一处理后端返回的错误码(如未登录、权限不足等),并弹出友好提示
- 对于网络异常、超时等情况也有统一的错误处理逻辑
这样保证了所有API请求的安全性和一致性,减少了重复代码。
4. 问:如何保证前后端接口文档的一致性?项目中有哪些实践?
答:
项目中采用了以下实践保证接口文档一致性:
- 后端接口开发完成后,统一在接口文档平台(如 YAPI 或 Swagger)进行维护
- 前端开发前先对照接口文档,统一在
src/api/目录下封装接口 - 如果接口有变更,前后端及时同步更新文档和代码
- 重要接口会在代码中添加注释,说明参数和返回值结构
这种流程保证了前后端协作顺畅,减少了因接口不一致导致的 bug。
5. 问:你们项目如何实现多环境(开发、测试、生产)下API地址的切换?
答:
项目通过环境变量和配置文件实现多环境API地址切换。例如在 web-admin 和 web-company 的 vite.config.ts 及 .env 文件中,分别配置了不同环境下的 VITE_API_BASE_URL。在 request.ts 中读取该变量作为 axios 的 baseURL。这样只需切换环境变量,无需修改代码,即可自动适配不同环境的API地址,方便部署和测试。