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

news2025/7/15 12:36:46

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');
        }
      }
    }
  ]
});