vue使用mock模拟后台接口返回数据

一、项目引入mock依赖

npm install mockjs --save
或
cnpm install mockjs --save

二、准备数据文件和模拟接口的文件

1. src 文件夹下新建 mock 文件夹。

2. 在 mock 文件夹下新建 mockData 文件夹存放模拟数据的 json 文件。

     如 login.js：

{
    "token": "12333"
}

 3. 在 mock 文件夹下新建 index.js 文件，用于引用 mockjs 实现拦截请求模拟接口。

文件内容如下：

//通过mockjs模块实现模拟数据
//对外暴露的是一个对象
import Mock from 'mockjs';
//模拟的数据需要引入进来
//对于一些模块：图片、json文件默认对外暴露【虽然你没有书写但是它已经暴露了】
import loginData from './mockData/login.json';

// 配置拦截 ajax 的请求时的行为，支持的配置项目有 timeout。
 Mock.setup({
    timeout: '200 - 400'
})

//Mock依赖包对外暴露的是一个Mock对象，这个对象提供的一个mock方法可以模拟数据
//参数:第一个参数  模块数据将来axios请求的地址   第二个参数:获取到的数据
Mock.mock("/mock/login", 'post', { code: 200, data: loginData });

三、在main.js文件中引入模拟接口的文件

在 vue 项目的 main.js 文件中引入刚刚写好的模拟数据接口的文件 mock / index.js 文件。

import '@/mock/index'

四、发送请求测试模拟的接口是否生效

main.js 中引入 axios 依赖，也可以自己封装一个发请求的文件。

//引入axios
import axios from 'axios';
Vue.prototype.$axios = axios;

在组件中发送请求，请求刚刚 mock 接口写好的那个路径。

mounted() {
    this.$axios.post('/mock/login').then(function(res){
      console.log('虚拟接口返回的数据：', res.data)
    })
  },

此时返回的数据 res.data 是模拟接口返回的数据：

{ code: 200, data:  { "token": "12333"}}