不是样式调不出来不是状态理不清。而是——后端说“接口明天给”，接下来你傻等了一天又一天。不过，

好不容易等到接口好了联调又是噩梦：字段对不上、跨域、数据结构变了…，前后端耦合的等待成本，是拖慢项目进度的隐形杀手。

今天这篇实战文章，我会以一个经典的 Todo 全栈项目为例。手把手带你搭建一套前端接口工程让你可以在后端接口就绪前，独立跑通整个应用。怎么说呢，至于读完你会发现，原来前端开发可以这么爽。

很多同学对“前后端分离”的理解就是：你用 React。我用 Koa，咱们各写各的。分离远不止技术栈，更主要的是职责分离和开发流程解耦。

在我们的 Todo 项目中：

• 前端三驾马车React + React-Router + Zustand，负责一切使用者可见的界面交互。
• 后端Node + Koa + MySQL。负责提供 RESTful API，返回 JSON 数据。

接口请求。如果前端直接死等后端提供 /api/todos 才能写渲染逻辑，那等于是把命脉交给了后端。真正的分离，应该让前端拥有独立完成应用的能力.

二、前端独立开发的三驾马车：组件、路由、状态

先搭起我们前端项目的骨架。不过，一个标准的 React SPA 离不开这三样：

• 组件页面级组件和通用组件。UI 的砖瓦，
• 路由React-Router 接管页面级切换。比如 / 到 Home，/todos 到 Todos。
• 状态管理Zustand 或 Hooks 管理响应式数据，相当于前端的“小银行”。

看看我们的路由配置：

// App.jsx
import { Routes。Route,BrowserRouter } from 'react-router-dom';import Nav from './components/Nav';const Todos = lazy => import);


} />
} />

This 时页面已经能切换了但是 Todos 页面一旦挂载就要展示数据，数据从哪里来？这就是前端工程化里最容易被忽略的一环——接口层.

三、打破耦合：前端为什么需要自己的“假后端”

先看一段典型的“傻等后端”的代码：

// 在组件里直接 fetch 真实后端
useEffect => {
fetch
.n)
.n;},)，

这样做有两个致命问题：

1. 后端没开发好。你连页面都无法渲染，完全阻塞。
2. 即便后端好了你可能会因为跨域、代理等问题折腾半天。

方法就是引入 Mock 机制——给前端自己造一个“假后端”。说到说白了就是，前端自己拦截请求。 按约定的接口格式返回模拟数据. 我们这里用到的是 。

实现步骤：

1. 和后端约定好接口文档。
2. 前端按文档编写 Mock 数据。
3. 所有组件、状态、交互全部基于 Mock 接口开发，跑通整个 App。
4. 后端交付后一键切换真实接口，几乎零成本联调。
5. 可通过环境变量自动切换，实现更优雅的流程管理。
6. 统一错误处理与拦截器，让代码保持干净整洁。
7. 团队协作时使用共享 Mock 仓库，提高一致性与效率。
8. 持续集成阶段加入 Mock 测试，用于 UI 快照验证与回归测试。
9. 上线时关闭 Mock。仅保留真实 API 调用，以免误导生产环境。
10. 记录并维护 Mock 与真实 API 的映射表，为新成员快速上手提供参考资料。

四 、设计一个专业 前 侧 接口 层 目录

我们 不 再 在 组 件 中 直 接 写 fetch，而 是统 一 管 理 所 有 请求。来 看 看 项目 中 的 api目录结构 ：

 src/ api/ config . js // axios 实例，配置 baseURL 、 拦截 器 等 todos . js // 具体 接口 模块 

. 封装 axios 实例。关键就在 baseURL

 // api/config.js import axios from 'axios';const instance = axios.create export default instance;

baseURL : '/api' 是 精 髓！因 为 我们 的 Mock 会 拦 截 所 有 /api/* 的 请求，而 真 实 后 端 很 可 能 也 是 /api 前 缀。将 来只需 把 baseURL 改 成 'http:// localhost:' 就 能 切 换 到 真 实 接口。* 一处 修改，全局 生 效 *。

. 按业务模块拆接口

 // api/todos.js import axios from './config';export const getTodos = async => { const res = await axios.get;// 最终请求 /api/todos return res . data;// 直接返回业务 数据 };

这样 组 件里 调 用 就 非 常 干 净 ：

 const data = await getTodos;setTodos，

. Mock 数据 长 什么 样?

我们 用 vite - plugin - mock，在 mock/目录 下 创建 文件。它 会 自动 拦 截 匹 配 的 请求 ：

//mock/todos.js export default } } } ];