docs: 增加前端API集中管理设计规范

1. 架构设计文档 v1.7 -> v1.8
   新增 6.1.5 API集中管理规范:
   - 目录结构示例:api/index.ts + api/request.ts + api/modules/
   - api/index.ts 代码示例
   - Vue组件调用示例(正确vs错误对比)
   - 规范要求:禁止硬编码、统一入口、路径简化、便于维护

2. Agents.md v1.2 -> v1.3
   新增 5.6 前端API集中管理规范:
   - 目录结构说明
   - 规范要求表格
   - 正确/错误代码示例对比

规范要点:
- 采用独立目录或文件集中管理后台API请求
- Vue组件中禁止直接使用 request.get('/xxx/xxx') 硬编码URL
- 所有API函数从 @/api 统一导出,按模块分组
- API路径变更时只需修改 api/index.ts 一处
This commit is contained in:
zhangjf 2026-02-23 11:26:18 +08:00
parent 2e7fb5f5d4
commit 5e782ac8cc
2 changed files with 115 additions and 2 deletions

View File

@ -1,6 +1,6 @@
# 资金服务平台 (FundPlatform) - 开发规范
> **文档版本**: v1.2
> **文档版本**: v1.3
> **创建日期**: 2026-02-20
> **更新日期**: 2026-02-23
> **适用范围**: 本项目所有开发人员
@ -264,6 +264,52 @@ GET /cust/api/v1/customer/page # 分页查询
| 404 | 资源不存在 |
| 500 | 服务器内部错误 |
### 5.6 前端API集中管理规范
前端项目必须采用**独立目录或文件集中管理**对后台API的请求便于调整和优化。
**目录结构**
```
fund-admin/src/api/ 或 fund-mobile/src/api/
├── index.ts # API集中定义入口统一导出
├── request.ts # Axios实例配置、拦截器
└── modules/ # 按业务模块拆分(可选)
├── auth.ts # 用户认证API
├── customer.ts # 客户管理API
└── expense.ts # 支出管理API
```
**规范要求**
| 要求 | 说明 |
|------|------|
| 禁止硬编码 | Vue组件中禁止直接使用 `request.get('/xxx/xxx')` 形式 |
| 统一入口 | 所有API函数从 `@/api` 统一导出,按模块分组 |
| 路径简化 | API函数内部使用简化路径由 baseURL 统一添加前缀 |
| 便于维护 | 后端接口变更时,只需修改 api/index.ts 一处 |
**正确示例**
```typescript
// api/index.ts - 集中定义
export function getReceivableList(params: { pageNum: number; pageSize: number }) {
return request.get('/receipt/receivable/page', { params })
}
// Vue组件 - 使用集中定义
import { getReceivableList } from '@/api'
const res = await getReceivableList({ pageNum: 1, pageSize: 10 })
```
**错误示例**
```typescript
// Vue组件 - 硬编码URL禁止
import request from '@/api/request'
const res = await request.get('/receipt/api/v1/receipt/receivable/page')
```
---
## 六、多租户规范

View File

@ -1,6 +1,6 @@
# 资金服务平台 (FundPlatform) - 架构设计文档
> **文档版本**: v1.7
> **文档版本**: v1.8
> **创建日期**: 2026-02-13
> **更新日期**: 2026-02-23
> **项目名称**: 资金服务平台
@ -3551,6 +3551,72 @@ const router = createRouter({
/fund/receipt/receivable -> /api/v1/receipt/receivable -> fund-receipt
```
#### 6.1.5 API集中管理规范
前端项目必须采用**独立目录或文件集中管理**对后台API的请求便于调整和优化。
**目录结构示例**
```
fund-mobile/src/
└── api/
├── index.ts # API集中定义入口统一导出
├── request.ts # Axios实例配置、拦截器
└── modules/ # 按业务模块拆分(可选)
├── auth.ts # 用户认证API
├── customer.ts # 客户管理API
└── expense.ts # 支出管理API
```
**api/index.ts 示例**
```typescript
import request from './request'
// ===================== 用户认证 =====================
export function login(data: { username: string; password: string }) {
return request.post('/auth/login', data)
}
export function getUserInfo() {
return request.get('/auth/info')
}
// ===================== 支出管理 =====================
export function createExpense(data: any) {
return request.post('/exp/expense', data)
}
export function getExpenseTypeTree() {
return request.get('/exp/expense-type/tree')
}
// ===================== 应收款管理 =====================
export function getReceivableList(params: { pageNum: number; pageSize: number }) {
return request.get('/receipt/receivable/page', { params })
}
```
**Vue组件调用示例**
```typescript
// 正确使用集中定义的API函数
import { getReceivableList, createExpense } from '@/api'
const res = await getReceivableList({ pageNum: 1, pageSize: 10 })
// 错误直接在组件中硬编码URL
import request from '@/api/request'
const res = await request.get('/receipt/api/v1/receipt/receivable/page')
```
**规范要求**
1. **禁止硬编码**Vue组件中禁止直接使用 `request.get('/xxx/xxx')` 形式调用API
2. **统一入口**所有API函数从 `@/api` 统一导出,按模块分组
3. **路径简化**API函数内部使用简化路径`/auth/login`),由 request.ts 的 baseURL 统一添加前缀
4. **便于维护**:后端接口变更时,只需修改 api/index.ts 一处即可
### 6.3 生产环境部署
```
@ -4070,6 +4136,7 @@ public class GlobalExceptionHandler {
| v1.5 | 2026-02-13 | 补充模块通信与 OpenFeign 参数对象管理策略、分层架构职责说明、MyBatis-Plus 使用规范、Controller 与参数校验规范、事务与测试规范及开发规则总览 | zhangjf |
| v1.6 | 2026-02-13 | 补充单机部署配置配置文件分离架构env.properties+service.properties、打包目录结构、多租户部署配置、日志配置集中化、脚本加载逻辑 | zhangjf |
| v1.7 | 2026-02-23 | 新增6.1前端部署路径设计Nginx子路径部署、部署路径规划、Nginx配置示例、前端构建配置、API请求路径规范 | zhangjf |
| v1.8 | 2026-02-23 | 新增6.1.5 API集中管理规范独立目录管理、禁止硬编码、统一入口、路径简化、便于维护 | zhangjf |
---