Vue本地模拟服务器请求Mock数据的方法详解

在开发Vue项目的过程中，我们可能需要在本地预览和测试一些接口。但是在实际的开发中，如果后端接口还没有开发完毕，我们就无法进行测试了。这时候，模拟服务器请求Mock数据就显得尤为重要。本文将详细讲解Vue本地模拟服务器请求Mock数据的方法。

1. 创建Mock数据

首先需要创建Mock数据。在项目的src目录下新建一个mock文件夹，在此文件夹下创建mock数据，在本例中我们创建user.json文件：

{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "id": 1,
    "name": "john",
    "age": 18,
    "gender": "male"
  }
}

2. 安装依赖

在Vue项目中，我们需要安装两个依赖：axios和mockjs。其中，axios是Vue的官方推荐的HTTP请求库，而mockjs是一个用于生成随机数据的库。

npm install axios mockjs --save-dev

3. 编写拦截器

在项目的src目录下创建一个axios目录，在其中新建一个index.js文件。

import Mock from 'mockjs'
import axios from 'axios'

// 获取mock数据
Mock.mock('/api/user', 'get', () => {
  return {
    code: 200,
    msg: '操作成功',
    data: {
      id: 1,
      name: 'john',
      age: 18,
      gender: 'male'
    }
  }
});

// 发送真实请求前，拦截请求，并返回mock数据
axios.interceptors.request.use(config => {
  if (config.url === '/api/user' && config.method === 'get') {
    config.url = '/api/user';
  }
  return config;
});

// 发送真实请求后，拦截请求，并返回mock数据
axios.interceptors.response.use(response => {
  if (response.config.url === '/api/user' && response.config.method === 'get') {
    const { code, msg, data } = Mock.mock('/api/user');
    response.status = code;
    response.statusText = msg;
    response.data = data;
  }
  return response;
});

4. 修改配置

在项目的src目录下找到main.js文件，在其中导入axios和拦截器：

import axios from 'axios';
import './axios';

Vue.prototype.$axios = axios;

5. 测试

在组件中使用axios请求模拟数据：

this.$axios.get('/api/user').then(res => {
  console.log(res.data);
});

示例说明1

在本例中，我们创建一个名为user.json的Mock数据文件，内容如下：

{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "id": 1,
    "name": "john",
    "age": 18,
    "gender": "male"
  }
}

然后，我们使用拦截器拦截请求，将请求地址转换为/api/user，并在发送真实请求前返回Mock数据。在发送真实请求后，再次拦截请求，将返回的数据替换成Mock数据。在组件中使用axios请求模拟数据。

示例说明2

在该示例中，我们将Mock数据中的data字段替换成使用mockjs生成的随机数据。

import Mock from 'mockjs'
import axios from 'axios'

// 获取mock数据
Mock.mock('/api/user', 'get', () => {
  const data = Mock.mock({
    'id|+1': 1,
    name: '@cname',
    'age|18-24': 18,
    'gender|1': ['male', 'female']
  });
  return {
    code: 200,
    msg: '操作成功',
    data
  }
});

// 发送真实请求前，拦截请求，并返回mock数据
axios.interceptors.request.use(config => {
  if (config.url === '/api/user' && config.method === 'get') {
    config.url = '/api/user';
  }
  return config;
});

// 发送真实请求后，拦截请求，并返回mock数据
axios.interceptors.response.use(response => {
  if (response.config.url === '/api/user' && response.config.method === 'get') {
    const { code, msg, data } = Mock.mock('/api/user');
    response.status = code;
    response.statusText = msg;
    response.data = data;
  }
  return response;
});

在该示例中，我们使用mockjs生成了随机的用户数据，并将其放入Mock数据文件中。之后再次使用拦截器拦截请求并使用mockjs生成的数据替换返回的数据。在组件中使用axios请求模拟数据，可以看到返回的数据已经被替换成了使用mockjs生成的随机数据。