📚前言
在项目开发中，模拟数据（Mock）是一个至关重要的技术方案。本文将系统介绍Mock的核心概念及其在实际开发中的应用指南。
❓为什么会有Mock？
在前后端分离的开发模式下，我们经常会遇到这样的困境：假设你负责前端开发，同事负责后端接口实现。按照常规流程，你必须等待后端完成开发并交付接口文档后，才能开始前端API层的开发工作。然而现实情况是，当你已经完成页面UI开发，迫切需要进行数据交互时，后端接口却迟迟未能就绪。这种前后端进度不匹配的情况，不仅影响开发效率，还会阻碍整体项目进展。而Mock技术的出现，正是为了解决这一关键痛点。
🛠️Mock
Mock就像餐厅的样品菜，后厨（后端）还在备菜，服务员（前端）先用塑料模型（Mock）摆盘展示给顾客看，等真菜做好直接替换就行。
它是指在前端开发阶段，通过创建虚拟的API接口来模拟真实后端服务的行为。其核心价值在于：
- 独立开发：前端无需等待后端接口完成即可进行开发
- 接口契约：基于预定义的接口规范开发，降低联调风险
- 快速验证：支持各种边界条件的测试用例模拟
- 性能优化：本地Mock响应速度极快，提升开发体验
前端在后端给出真实接口前，需要mock一下，前端自己造接口
🎯如何使用mock？
在前端开发中，我们经常需要与后端API交互，但在后端接口尚未完成时，我们可以使用Mock数据来模拟后端响应。下面通过一个Demo详细讲解Mock的使用方法。
在这个Demo中，我们是前端开发者，此时我们想要向后端拿到repos数据，但是我们没有写后端呀，于是我们就用Mock来模拟后端接口
📥1.安装vite-plugin-mock插件
首先需要安装相关依赖：
npm install vite-plugin-mock mockjs -D
然后在vite.config.js中配置插件：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
vue(),
viteMockServe({
mockPath: 'mock', // mock文件存放目录
localEnabled: true, // 开发环境启用
prodEnabled: false, // 生产环境禁用
})
]
})
📁2. 创建mock文件夹和数据
在项目根目录下创建mock文件夹，并添加index.js文件：
export default [
{
url: '/api/repos', // 接口路径
method: 'get', // 请求方法
timeout: 500, // 模拟延迟
response: () => {
// 模拟数据
const repos = [
{
id: 1,
title: 'vue3源码分析',
description: '深入理解Vue3响应式原理',
stars: 1200
},
{
id: 2,
title: 'react hooks指南',
description: '全面掌握React Hooks用法',
stars: 800
}
]
return {
code: 200, // 状态码
message: 'success',
data: repos
}
}
}
]
这里其实就是Mock的核心步骤了！这里就是在模拟后端的接口，让前端不需要等到后端开发完成，而是先通过Mock提供数据，看看拿到数据后页面的渲染是否能够正常的进行。
注意事项：
- 建议所有mock接口统一添加
/api前缀 - 可以设置timeout模拟网络延迟
- 数据结构应尽量与真实接口保持一致
🔍3. 使用接口测试工具验证
我们使用foxapi测试我们刚刚写的模拟后端的接口，发现可以成功拿到数据
🌐4. 创建API请求层
接下来，就是将Mock模拟成后端，然后用前端发送请求的过程了
在src/api目录下创建以下文件：
config.js - 全局axios配置
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://localhost:5174/api', // 注意添加/api前缀
timeout: 5000
})
// 请求拦截器
instance.interceptors.request.use(config => {
// 可以在这里添加token等
return config
})
// 响应拦截器
instance.interceptors.response.use(response => {
if (response.data.code !== 200) {
return Promise.reject(response.data.message)
}
return response.data
})
export default instance
repos.js - 仓库相关API
import request from './config'
export const getRepos = () => {
return request.get('/repos')
}
// 可以添加更多方法
export const addRepo = (data) => {
return request.post('/repos', data)
}
✅5.成功渲染
import { useState, useEffect } from 'react'
import { getRepos } from '@/api/repos'
function App() {
const [repos, setRepos] = useState([])
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true)
const res = await getRepos()
setRepos(res.data)
} catch (err) {
setError(err.message)
} finally {
setLoading(false)
}
}
fetchData()
}, [])
if (loading) return <div>Loading...</div>
if (error) return <div>Error: {error}</div>
return (
<div className="repo-container">
<h1>项目仓库</h1>
<ul className="repo-list">
{repos.map(repo => (
<li key={repo.id} className="repo-item">
<h3>{repo.title}</h3>
<p>{repo.description}</p>
<div>⭐ {repo.stars}</div>
</li>
))}
</ul>
</div>
)
}
export default App
现在我们就能看到mock中的数据啦！
📝总结
通过这个DEMO，我们就能掌握了Mock的基本用法。
通过这种方式，前端开发不再受后端进度限制，可以高效地完成开发和测试工作。
