别再等后端接口了！前端用 Mock 独立开发，全栈项目这样搞效率翻倍 🚀

然我
278 阅读6分钟

前后端开发节奏不同步，往往让前端卡在 “等接口” 的环节，效率大打折扣。其实，前端完全可以自己 “造接口”—— 用 Mock 技术模拟后端数据，独立完成开发和测试，等后端接口就绪后再无缝衔接。

今天就以 React 项目为例，讲透前端 Mock 的完整流程：从用vite-plugin-mock搭建本地 Mock 服务，到用 Apifox 调试接口，再到后端接口就绪后的平滑切换。全程不依赖后端，让前端开发效率翻倍。

Mock闪亮登场 前端独立开发的关键

在全栈开发中，前后端通常是并行开发的。后端在设计接口、写逻辑时，前端不能闲着 —— 需要先把页面布局、交互逻辑、数据渲染等部分做好。这时候，“Mock 接口” 就成了桥梁：

  • 定义接口规范：前端可以先和后端约定好接口路径、请求方式、返回数据格式（比如/api/todos返回待办列表），然后用 Mock 模拟这个接口。
  • 独立开发测试：前端用 Mock 数据调试页面，不用等后端接口，自己就能跑通整个流程（比如 “获取列表→渲染→添加→删除”）。
  • 提前发现问题：在 Mock 阶段就能发现数据格式不合理、交互逻辑有漏洞等问题，避免后端接口写完后再返工。

简单说，Mock 就是 “前端给自己画的饼”，先把流程跑通，等后端把 “真饼” 做好了，再换过来。

核心工具准备：Vite+Mock+Apifox

今天的实战项目会用到这些工具：

  • Vite：构建工具，快速创建 React 项目；
  • vite-plugin-mock：Vite 的 Mock 插件，用来搭建本地 Mock 服务；
  • Axios：发送 HTTP 请求；
  • Apifox：接口调试工具（替代 Postman，支持 Mock 和真实接口测试）；
  • React：前端框架，用来渲染页面。

从零搭建 Mock 全栈项目

1. 创建 React 项目并安装依赖

首先用 Vite 创建 React 项目，然后安装所需依赖：

# 创建项目
npm create vite@latest mock-demo -- --template react
cd mock-demo

# 安装核心依赖
pnpm install react-router-dom axios
# 安装Mock插件（开发环境依赖）
pnpm i vite-plugin-mock -D

2. 配置 vite-plugin-mock

步骤 1：修改 vite.config.js

在项目根目录的vite.config.js中配置 Mock 插件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// 引入Mock插件
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    react(),
    // 配置Mock服务
    viteMockServe({
      supportTs: false, // 不使用TypeScript
      mockPath: './mock', // Mock文件存放目录（根目录下的mock文件夹）
      localEnabled: true, // 开发环境启用Mock
    })
  ]
})

步骤 2：创建 Mock 数据文件

在项目根目录创建mock文件夹，然后新建test.js文件（Mock 接口定义在这里）：

// mock/test.js
export default [
  // 定义第一个Mock接口：获取待办列表
  {
    url: '/api/todos', // 接口路径
    method: 'get', // 请求方法
    response: () => {
      // 模拟返回数据
      const todos = [
        { id: 1, title: '学习Mock', completed: false },
        { id: 2, title: '写React组件', completed: true }
      ]
      return {
        code: 0, // 状态码（成功）
        message: 'success',
        data: todos // 实际数据
      }
    }
  },
  // 定义第二个Mock接口：获取仓库列表
  {
    url: '/repos',
    method: 'get',
    response: () => {
      return [
        {
          id: 1,
          title: 'vue-demo',
          description: 'Vue项目示例'
        },
        {
          id: 2,
          title: 'react-mock',
          description: 'React+Mock实战'
        }
      ]
    }
  }
]

Mock 接口定义说明：

  • url：接口路径（比如/api/todos）；
  • method：HTTP 方法（get/post等）；
  • response：函数，返回模拟的响应数据（可以根据请求参数动态生成数据）。

3. 封装 Axios 请求

在src目录下创建api文件夹，用来管理接口请求：

步骤 1：配置 Axios 基础设置（src/api/config.js）

// src/api/config.js
import axios from 'axios'

// 创建Axios实例
const instance = axios.create({
  // 开发环境：Mock服务的基础路径（Vite默认端口5173）
  baseURL: 'http://localhost:5173',
  timeout: 5000 // 超时时间
})

export default instance

步骤 2：定义 API 请求函数（src/api/index.js）

// src/api/index.js
import axios from './config'

// 获取待办列表（调用Mock接口）
export const getTodos = () => {
  return axios.get('/api/todos')
}

// 获取仓库列表（调用另一个Mock接口）
export const getRepos = () => {
  return axios.get('/repos')
}

4. 在 React 组件中使用 Mock 数据

修改src/App.jsx，调用 API 获取 Mock 数据并渲染：

// src/App.jsx
import { useState, useEffect } from 'react'
import { getTodos, getRepos } from './api' // 导入API函数

function App() {
  const [todos, setTodos] = useState([])
  const [repos, setRepos] = useState([])

  // 组件挂载时获取Mock数据
  useEffect(() => {
    const fetchData = async () => {
      // 获取待办数据
      const todosResult = await getTodos()
      setTodos(todosResult.data.data) // 注意Mock返回的结构（code/data）

      // 获取仓库数据
      const reposResult = await getRepos()
      setRepos(reposResult.data)
    }
    fetchData()
  }, [])

  return (
    <div style={{ padding: '20px' }}>
      <h2>待办列表（Mock数据）</h2>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.title}
          </li>
        ))}
      </ul>

      <h2>仓库列表（Mock数据）</h2>
      <div>
        {repos.map(repo => (
          <div key={repo.id} style={{ margin: '10px 0' }}>
            <h3>{repo.title}</h3>
            <p>{repo.description}</p>
          </div>
        ))}
      </div>
    </div>
  )
}

export default App

5. 启动项目，查看效果

运行pnpm run dev启动项目，访问http://localhost:5173，可以看到页面已经渲染出 Mock 数据了：

image.png

打开浏览器控制台的 Network 面板，可以看到请求/api/todos和/repos的响应数据，正是我们在mock/test.js中定义的内容。

image.png

用 Apifox 调试 Mock 接口

Apifox 是一款强大的接口调试工具，支持 Mock、文档、测试等功能，比 Postman 更适合前后端协作。下面用它来调试我们的 Mock 接口：

官网：www.apifox.cn/ ，根据系统下载安装即可。

image.png

通过 Apifox，我们可以方便地验证 Mock 接口的返回格式是否符合预期，为后续前后端联调做好准备。

、前后端联调：从 Mock 切换到真实接口

当后端接口开发完成后，我们只需要做两步切换：

1. 修改 Axios 的 baseURL

将src/api/config.js中的baseURL改成后端接口的地址：

// src/api/config.js
const instance = axios.create({
  // 替换为真实后端接口地址
  baseURL: 'https://api.your-backend.com',
  timeout: 5000
})

2. 用 Apifox 验证真实接口

在 Apifox 中把请求 URL 改成真实后端地址，发送请求确认：

  • 响应格式是否和 Mock 数据一致（比如是否有code、data字段）；
  • 数据字段是否匹配（比如id、title等字段是否存在）。

如果格式不一致，及时和后端沟通调整，确保前端代码无需大规模修改就能适配真实接口。

总结：Mock 开发的优势

通过今天的实战，我们可以看到 Mock 开发有这些好处：

  1. 前端独立开发：不用等后端接口，自己造数据，加快开发进度；
  2. 并行工作：前后端同时开发，提高团队协作效率；
  3. 提前演示：即使后端没 ready，也能展示产品功能，方便和产品经理沟通；
  4. 接口文档先行：Mock 接口定义的过程，其实就是在提前确定接口文档，减少联调时的冲突。

对于全栈开发者来说，掌握 Mock 技术能让你在项目中更主动，不再被接口阻塞。而 vite-plugin-mock+Apifox 的组合，更是让 Mock 开发变得简单高效。

下次再遇到 “等后端接口” 的情况，不妨试试这套方案 —— 你会发现前端开发可以如此顺畅！ 🚀

avatar
文章
阅读
粉丝