前言
今天来聊聊前端开发中那些"鸡肋"但又不得不做的事情------Mock数据。说它鸡肋，是因为最终都要被真实接口替换；说它重要，是因为没它前端开发寸步难行。
为什么需要Mock数据？🤔
想象一下这个场景：你兴冲冲地开始写前端页面，结果发现后端小伙伴还在"思考人生"------接口文档都还没写完。这时候你是等着干瞪眼，还是自己动手丰衣足食？
显然，聪明的前端开发者会选择后者。Mock数据就像是给前端开发装上了"独立自主"的翅膀，让我们不再受制于后端的开发进度。
技术栈选择：简单粗暴，效果拔群
对于表演型项目（也就是那些需要快速出效果的项目），我的技术栈选择很简单：
- 前端：React + Vite（快得起飞）
- Mock工具：vite-plugin-mock（无缝集成）
- HTTP客户端：Axios（老朋友了）
项目结构：一目了然的组织架构
在开始撸代码之前，我们先来看看一个标准的Mock项目应该是什么样的结构：
csharp
my-mock-project/
├── src/
│ ├── api/ # API接口层
│ │ ├── config.js # axios配置文件
│ │ └── index.js # 接口定义文件
│ ├── App.jsx # 主组件
│ ├── App.css # 样式文件
│ └── main.jsx # 入口文件
├── mock/ # Mock数据目录
│ └── test.js # Mock接口定义
├── public/ # 静态资源
├── package.json # 项目配置
├── vite.config.js # Vite配置
└── readme.md # 项目说明文档这个结构的精妙之处在于：
- 职责分离：API层独立出来，方便管理和切换
- Mock独立：mock数据单独目录，开发完成后可以整个删掉
- 扩展性好：后期添加路由、状态管理都很方便
实战：用vite-plugin-mock搭建Mock服务
第一步：配置Mock插件
首先，我们需要在项目根目录创建一个 /mock 文件夹，然后新建 test.js 文件：
js
// /mock/test.js
export default [
{
url: '/api/todos',
method: 'get',
response: () => {
return {
code: 200,
message: 'success',
data: [
{
id: '1',
title: '学习React Hooks',
completed: false
},
{
id: '2',
title: '写一篇技术博客',
completed: true
},
{
id: '3',
title: '撸猫十分钟',
completed: false
}
]
}
},
},
]这样配置之后，当我们访问 /api/todos 接口时，就会返回我们预定义的数据。是不是很简单？
第二步：封装HTTP请求
接下来我们需要配置axios，创建一个统一的请求配置文件：
js
// config.js - 标准的http请求库，vue/react都用它
import axios from 'axios';
// 这里有个小技巧：开发阶段用mock地址，生产环境切换到真实API
// axios.defaults.baseURL = 'http://localhost:5173'; // mock地址
// 当线上地址准备好后，直接切换
axios.defaults.baseURL = 'http://api.github.com/users/username';
export default axios;然后创建API接口文件：
js
// index.js
import axios from './config'
// todos接口 - 我们自己mock的
export const getTodos = () => {
return axios.get('/todos')
}
// repos接口 - 使用GitHub真实API
export const getRepos = () => {
return axios.get('/repos')
}第三步：在React组件中使用
最后，我们在React组件中调用这些接口：
jsx
// App.jsx
import {
useState,
useEffect
} from 'react'
import './App.css'
import {
getTodos,
getRepos
} from '@/api'
function App() {
const [todos, setTodos] = useState([]);
const [repos, setRepos] = useState([]);
useEffect(() => {
const fetchData = async () => {
// 这里注释掉了todos的调用，因为我们现在用的是GitHub API
// const todosResult = await getTodos();
// console.log(todosResult);
// setTodos(todosResult.data.data);
// 使用GitHub的repos接口作为示例
const reposResult = await getRepos();
setRepos(reposResult.data);
}
fetchData();
}, [])
return (
<>
{todos.map(todo => (
<div key={todo.id}>
{todo.title}
</div>
))}
{
repos.map(repo => (
<div key={repo.id}>
<h3>{repo.name}</h3>
<p>{repo.description}</p>
</div>
))
}
</>
)
}
export default App前后端联调：从纸上谈兵到真枪实战
1. 开会立项阶段
这个阶段最重要的就是接口文档的制定。一个标准的todo接口文档应该长这样：
bash
接口地址：/api/todos
请求方式：GET
响应格式：
[
{
id: '唯一标识',
title: '任务标题',
completed: true|false // 完成状态
}
]2. 开发阶段的"变脸"艺术
这就是Mock数据的精髓所在------无缝切换。
开发初期，你的baseURL指向本地mock服务：
js
axios.defaults.baseURL = 'http://localhost:5173';后端接口就绪后，只需要修改一行代码：
js
axios.defaults.baseURL = 'https://your-real-api.com';前端代码其他地方完全不用动，这就是良好架构设计的魅力。
实际项目中的最佳实践
1. 环境区分
js
const baseURL = process.env.NODE_ENV === 'development'
? 'http://localhost:5173' // 开发环境用mock
: 'https://api.production.com'; // 生产环境用真实接口2. Mock数据要"真实"
别写一些 test1、test2 这样的数据，写一些贴近真实场景的：
js
{
title: '完成用户登录功能开发',
priority: 'high',
deadline: '2024-03-15',
assignee: '张三'
}3. 保持接口文档同步
Mock数据的结构要和最终的接口文档保持一致，不然联调的时候就是一场灾难。
总结：Mock数据让开发更从容
Mock数据虽然是临时方案，但它给前端开发带来的价值是巨大的：
- 提高开发效率：不用等后端接口，前端可以并行开发
- 降低开发风险：提前发现数据结构问题
- 增强团队协作：给后端开发留出充足时间
- 改善开发体验：告别"等等等"的焦虑
好的Mock数据不仅仅是假数据，它更像是前后端之间的一座桥梁。用好它，我们的开发效率会有质的提升！