当前位置：首页 > news >正文

前端如何使用Mock模拟数据实现前后端并行开发，提升项目整体效率

news 来源：原创 2025/4/29 13:28:35

1. 安装 Mock.js

npm install mockjs --save-dev
# 或使用 CDN
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>

2. 创建 Mock 数据文件

在项目中新建 mock 目录，创建 mock.js 文件：

// mock/mock.js
import Mock from 'mockjs';// 模拟用户列表接口
Mock.mock('/api/user/list', 'get', {'code': 200,'message': 'success','data|10': [{'id|+1': 1,'name': '@cname', // 随机中文名'age|18-60': 1,'email': '@email','avatar': '@image("100x100")'}]
});// 模拟登录接口
Mock.mock('/api/login', 'post', function(options) {const { username, password } = JSON.parse(options.body);if (username === 'admin' && password === '123456') {return Mock.mock({code: 200,message: '登录成功',token: '@guid' // 随机生成 token});} else {return { code: 401, message: '账号或密码错误' };}
});

3. 在入口文件中引入 Mock

根据环境判断是否启用 Mock（开发环境启用，生产环境关闭）：

// main.js（Vue/React 入口文件）
if (process.env.NODE_ENV === 'development') {require('./mock/mock.js');
}

4. 发送请求（无需修改业务代码）

前端正常发送请求，Mock.js 会自动拦截匹配的请求并返回模拟数据：

// 使用 axios 发送请求（与真实接口调用方式一致）
axios.get('/api/user/list').then(response => {console.log(response.data);});axios.post('/api/login', { username: 'admin', password: '123456' }).then(response => {console.log(response.data.token);});

5. 高级用法

5.1 随机数据生成

Mock.js 提供丰富的占位符生成随机数据：

Mock.mock('/api/data', {'name': '@cname','date': '@date("yyyy-MM-dd")','color': '@color','text': '@paragraph(3)'
});

5.2 动态参数处理

根据请求参数返回不同数据：

Mock.mock(/\/api\/user\/detail/, 'get', (options) => {const userId = options.url.split('/').pop();return {id: userId,name: '@cname'};
});

5.3 延迟响应

模拟网络延迟：

Mock.setup({timeout: '500-1000' // 随机 0.5~1 秒延迟
});

6. 环境切换配置

通过 webpack 或 vite 配置动态开关 Mock：

Vue CLI 配置（vue.config.js）

module.exports = {devServer: {before: require('./mock/mock.js') // 仅在开发环境引入}
};

Vite 配置（vite.config.js）

export default defineConfig({plugins: [{name: 'mock',configureServer(server) {if (process.env.NODE_ENV === 'development') {require('./mock/mock.js');}}}]
});