跳到主要内容

前后端高效协作

场景​

前后端并行开发时经常出现：接口定义不清晰、联调效率低、前端被后端阻塞。如何提升协作效率？

方案设计​

1. API 先行（API First）​

2. API 规范与文档​

api-contract.ts
// 使用 OpenAPI / Swagger 定义接口规范

// 前端可以通过工具自动生成类型
// npx openapi-typescript https://api.example.com/openapi.json -o src/types/api.d.ts

// 自动生成的类型
interface GetUserResponse {
  code: number;
  data: {
    id: number;
    name: string;
    email: string;
  };
  message: string;
}

3. Mock 方案​

msw-mock.ts
// 使用 MSW（Mock Service Worker）
import { http, HttpResponse } from 'msw';
import { setupWorker } from 'msw/browser';

const handlers = [
  http.get('/api/users/:id', ({ params }) => {
    return HttpResponse.json({
      code: 0,
      data: {
        id: Number(params.id),
        name: '张三',
        email: 'zhangsan@example.com',
      },
    });
  }),
];

// 开发环境启动 Mock
if (import.meta.env.DEV) {
  const worker = setupWorker(...handlers);
  worker.start();
}

4. 联调最佳实践​

阶段做法
接口设计统一数据规范：{ code, data, message }
开发阶段前端用 MSW Mock，不依赖后端
联调阶段先对齐接口返回，再跑完整流程
异常处理约定错误码规范（401 鉴权、403 权限、500 服务器错误）

联调问题排查流程​

常见面试问题​

Q1: 前端如何不被后端阻塞？​

答案：

  1. API 先行：在开发前先对齐接口文档
  2. Mock 开发：使用 MSW 或 Mock Server 独立开发
  3. TypeScript 类型：根据 API 文档提前定义请求/响应类型
  4. 契约测试：用工具（如 Pact）验证前后端对接口定义的理解是否一致

Q2: 你遇到过哪些前后端协作的问题？怎么解决的？​

答案：

常见问题：

  1. 接口返回格式不一致：部分接口 data 是对象，部分是数组 → 制定统一规范
  2. 接口字段频繁变更：后端随意改字段名 → 变更需要通知并更新文档
  3. 联调环境不稳定：后端服务经常挂 → 前端本地用 Mock，减少对联调环境的依赖
  4. 时区/日期格式不一致：→ 统一用 ISO 8601 格式和 UTC 时间

相关链接​