Mock 数据
了解如何使用 Mock 数据进行开发和调试。
什么是 Mock？
Mock 是一种在前端开发中模拟后端接口返回数据的技术，可以在后端接口未完成时进行前端开发。
开启 Mock
在 .env.development 文件中配置：
bash
# 开启 Mock 服务
VITE_MOCK_DEV_SERVER = trueMock 配置
Mock 文件存放在 mock 目录下：
mock/
├── user.mock.ts # 用户相关 Mock
├── role.mock.ts # 角色相关 Mock
├── menu.mock.ts # 菜单相关 Mock
└── ...创建 Mock
基础示例
typescript
// mock/user.mock.ts
import { defineMock } from 'vite-plugin-mock-dev-server'
export default defineMock([
{
url: '/api/v1/users',
method: 'GET',
response: () => {
return {
code: '00000',
data: {
list: [
{
id: 1,
username: 'admin',
nickname: '管理员',
status: 1
}
],
total: 1
},
msg: '成功'
}
}
}
])带参数的 Mock
typescript
export default defineMock([
{
url: '/api/v1/users/:id',
method: 'GET',
response: (req) => {
const { id } = req.params
return {
code: '00000',
data: {
id: Number(id),
username: 'admin',
nickname: '管理员'
},
msg: '成功'
}
}
}
])Query 参数
typescript
export default defineMock([
{
url: '/api/v1/users',
method: 'GET',
response: (req) => {
const { pageNum = 1, pageSize = 10, username } = req.query
let list = mockData.filter(item => {
if (username && !item.username.includes(username)) {
return false
}
return true
})
const start = (pageNum - 1) * pageSize
const end = start + pageSize
return {
code: '00000',
data: {
list: list.slice(start, end),
total: list.length
},
msg: '成功'
}
}
}
])POST 请求
typescript
export default defineMock([
{
url: '/api/v1/users',
method: 'POST',
response: (req) => {
const { body } = req
return {
code: '00000',
data: {
id: Date.now(),
...body
},
msg: '添加成功'
}
}
}
])PUT 请求
typescript
export default defineMock([
{
url: '/api/v1/users/:id',
method: 'PUT',
response: (req) => {
const { id } = req.params
const { body } = req
return {
code: '00000',
data: {
id: Number(id),
...body
},
msg: '更新成功'
}
}
}
])DELETE 请求
typescript
export default defineMock([
{
url: '/api/v1/users/:id',
method: 'DELETE',
response: () => {
return {
code: '00000',
data: null,
msg: '删除成功'
}
}
}
])响应延迟
模拟网络延迟：
typescript
export default defineMock([
{
url: '/api/v1/users',
method: 'GET',
delay: 1000, // 延迟 1 秒
response: () => {
return {
code: '00000',
data: [],
msg: '成功'
}
}
}
])动态数据
使用 Mock.js 生成随机数据：
typescript
import { Random } from 'mockjs'
export default defineMock([
{
url: '/api/v1/users',
method: 'GET',
response: () => {
const list = []
for (let i = 0; i < 10; i++) {
list.push({
id: Random.id(),
username: Random.word(),
nickname: Random.cname(),
email: Random.email(),
phone: /^1[3-9]\d{9}$/,
createTime: Random.datetime()
})
}
return {
code: '00000',
data: { list, total: 100 },
msg: '成功'
}
}
}
])Mock 数据持久化
使用 localStorage 持久化数据：
typescript
const STORAGE_KEY = 'mock_users'
// 获取数据
function getData() {
const data = localStorage.getItem(STORAGE_KEY)
return data ? JSON.parse(data) : []
}
// 保存数据
function setData(data: any[]) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
}
export default defineMock([
{
url: '/api/v1/users',
method: 'GET',
response: () => {
return {
code: '00000',
data: { list: getData(), total: getData().length },
msg: '成功'
}
}
},
{
url: '/api/v1/users',
method: 'POST',
response: (req) => {
const list = getData()
const newUser = { id: Date.now(), ...req.body }
list.push(newUser)
setData(list)
return {
code: '00000',
data: newUser,
msg: '添加成功'
}
}
}
])切换 Mock 和真实接口
全局切换
在 .env.development 中配置：
bash
# 开启 Mock
VITE_MOCK_DEV_SERVER = true
# 关闭 Mock，使用真实接口
VITE_MOCK_DEV_SERVER = false部分接口使用 Mock
typescript
// utils/request.ts
import { isMockEnabled } from './env'
const request = axios.create({
baseURL: isMockEnabled ? '/mock' : import.meta.env.VITE_APP_API_URL
})最佳实践
1. 规范响应格式
保持 Mock 数据的响应格式与真实接口一致：
typescript
{
code: '00000', // 状态码
data: {}, // 响应数据
msg: '成功' // 提示信息
}2. 模拟真实场景
- 模拟分页
- 模拟搜索过滤
- 模拟错误情况
- 模拟网络延迟
3. 数据真实性
使用 Mock.js 生成接近真实的数据。
4. 注释说明
为 Mock 接口添加注释说明：
typescript
export default defineMock([
{
// 获取用户列表
// 支持分页、搜索过滤
url: '/api/v1/users',
method: 'GET',
response: () => {
// ...
}
}
])常见问题
1. Mock 不生效
解决方案：
- 检查
.env.development中VITE_MOCK_DEV_SERVER是否为true - 重启开发服务器
- 检查 Mock 文件路径和格式
2. Mock 数据无法持久化
解决方案：使用 localStorage 或 sessionStorage 存储数据
3. Mock 延迟太长
解决方案：调整 delay 参数或删除该配置