😩 你还在等后端接口吗？
"后端接口还没好，我先摸鱼了..." 🐟
作为前端开发，我们经常遇到这种困境。但有了 Vite-Plugin-Mock + Axios 组合，就能 自己造接口 ，彻底摆脱对后端的依赖！今天就用你的项目代码为例，手把手教你搭建前端伪接口系统
核心武器介绍
1. Vite-Plugin-Mock：前端接口模拟器
就像给前端装了个"假后端"，不用等后端开发完成，我们自己定义接口和返回数据 。
2. Axios：HTTP请求专家
处理接口请求的利器，支持拦截器、请求取消、JSON自动转换等高级功能。
实战步骤：从0到1搭建伪接口
第一步：先搭建react项目
第二步：安装配置Vite-Plugin-Mock
1️⃣ 安装依赖
npm install vite-plugin-mock mockjs --save-dev
2️⃣ 配置vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
react(),
viteMockServe({
mockPath: 'mock', // 指定mock文件目录
localEnabled: true, // 开发环境启用mock
// prodEnabled: true, // 生产环境是否启用mock
// supportTs: false, // 是否支持TypeScript
})
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'), // 设置@别名
},
},
})
关键配置： localEnabled: true 这一行启用了开发环境的mock服务 vite.config.js 。
第三步：创建Mock接口文件
在项目根目录创建 mock 文件夹，添加接口定义文件：
// mock/test.js
// 模拟待办事项数据
const todos = [
{ id: 1, title: '学习Vite-Mock', completed: false },
{ id: 2, title: '封装Axios', completed: true }
]
// 模拟仓库数据
const repos = [
{ id: 1, name: 'react-demo' },
{ id: 2, name: 'vue-demo' }
]
export default [
// 待办事项接口
{
url: '/api/todos', // 接口路径
method: 'get', // 请求方法
response: () => { // 响应函数
return {
code: 0, // 状态码
msg: 'success', // 消息
data: todos // 数据
}
}
},
// 仓库列表接口
{
url: '/api/repos',
method: 'get',
response: () => {
return {
code: 0,
msg: 'success',
data: repos
}
}
}
]
第四步：配置Axios请求实例
在 src/api 目录下创建配置文件：
1️⃣ 创建axios实例（config.js）
import axios from 'axios'
// 创建axios实例
const instance = axios.create({
baseURL: '/', // 基础路径
timeout: 5000, // 超时时间
headers: {
'Content-Type': 'application/json'
}
})
// 请求拦截器
instance.interceptors.request.use(
(config) => {
// 可以在这里添加token等请求头
// config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
instance.interceptors.response.use(
(response) => {
// 统一处理响应数据
return response.data
},
(error) => {
// 统一处理错误
console.error('请求失败:', error.message)
return Promise.reject(error)
}
)
export default instance
2️⃣ 封装API请求（index.js）
import axios from './config'
// 获取待办事项
export const getTodos = () => {
return axios.get('/api/todos')
}
// 获取仓库列表
export const getRepos = () => {
return axios.get('/api/repos')
}
// 添加待办事项
export const addTodo = (data) => {
return axios.post('/api/todos', data)
}
第五步：组件中使用接口
在 App.jsx 中调用API：
import { useState, useEffect } from 'react'
import './App.css'
import {
getTodos,
getRepos
} from '@/api' // 从api目录导入
function App() {
const [todos, setTodos] = useState([])
const [repos, setRepos] = useState([])
useEffect(() => {
const fetchData = async () => {
// 获取待办事项
const todoResult = await getTodos()
setTodos(todoResult.data)
// 获取仓库列表
const reposResult = await getRepos()
setRepos(reposResult.data)
}
fetchData()
}, [])
return (
<div className="App">
<h2>待办事项</h2>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
<h2>仓库列表</h2>
<ul>
{repos.map(repo => (
<li key={repo.id}>{repo.name}</li>
))}
</ul>
</div>
)
}
export default App
🔄 前后端连调无缝切换
当后端接口准备好后，只需 两步 即可切换到真实接口：
1. 修改axios配置
// 将baseURL改为后端接口地址
const instance = axios.create({
baseURL: 'http://backend-server.com/api', // 后端真实接口地址
timeout: 5000,
})
2. 关闭mock服务
viteMockServe({
mockPath: 'mock',
localEnabled: false, // 关闭开发环境mock
})
最佳实践：使用环境变量区分开发/生产环境，自动切换接口地址和mock状态。
🚀 面试考点解析
考点1：Vite-Plugin-Mock是如何实现前端伪接口的？
答 ： 1.在Vite开发服务器启动时，插件会拦截指定路径的请求
2.根据mock文件夹中的配置文件匹配请求URL和方法
3.直接返回预设的模拟数据，无需发送真实网络请求
4.本质是利用了DevServer的中间件机制，在本地处理请求
考点2：Axios的请求/响应拦截器有哪些常用用途？
答 ：
- 请求拦截器：添加认证token、统一设置请求头、请求参数格式化
- 响应拦截器：统一处理错误（如401权限过期）、数据格式转换、loading状态管理
// 响应拦截器处理401错误示例
instance.interceptors.response.use(
response => response,
error => {
if (error.response?.status === 401) {
// 清除token并重定向到登录页
localStorage.removeItem('token')
window.location.href = '/login'
}
return Promise.reject(error)
}
)
考点3：为什么需要前端Mock？
答 ： 1.并行开发 ：前后端可以同时开发，无需等待对方
2.环境隔离 ：不受后端接口稳定性影响
3.异常测试 ：轻松模拟各种错误状态码和边界情况
4.数据控制 ：可以随意构造测试数据，覆盖更多场景
考点4：Mock数据的最佳实践
答 ： 1.目录规范 ：按业务模块组织mock文件
2.数据分离 ：数据和接口定义分离，便于维护
3.动态数据 ：使用Mock.js生成随机数据
4.接口文档 ：mock接口应与实际接口文档保持一致
// 使用Mock.js生成随机数据
import Mock from 'mockjs'
export default [
{
url: '/api/users',
method: 'get',
response: () => {
return Mock.mock({
'code': 0,
'data|10': [{
'id|+1': 1,
'name': '@cname',
'age|18-60': 1
}]
})
}
}
]
开发经验总结
1.接口文档先行：前后端开发前一定要约定好接口文档
2.模拟真实场景：mock数据结构应与真实接口完全一致
3.区分环境：使用环境变量控制mock开关，避免生产环境启用mock
4.错误处理：模拟各种错误状态，确保前端错误处理逻辑健壮
5.数据生成：结合Mock.js生成大量逼真测试数据
项目目录结构回顾
jwt-api-demo/
├── mock/ # mock接口定义
│ └── test.js # 接口配置文件
├── src/
│ ├── api/ # API请求封装
│ │ ├── config.js # axios配置
│ │ └── index.js # API函数
│ └── App.jsx # 组件使用API
└── vite.config.js # Vite配置
总结
前端伪接口开发是现代前端工程化的重要环节，掌握Vite-Plugin-Mock + Axios的组合，能让你彻底摆脱对后端的依赖，实现独立开发。这不仅能提高开发效率，也是面试中的加分项！
记住这个核心价值： 用工具解放生产力，用规范保障协作效率 。 最后，送大家一句前端开发的真理： 不要等，自己造！
