Vue利用mockjs编写假数据并应用的问题记录

当后端并未编写后台json数据，但是前端又要使用数据进行页面的编写，这是便可用mockjs编写一个假的数据源，发送ajax请求并获取数据

1.使用命令行下载mockjs

npm install mockjs --save-dev

2.在src文件目录下新建一个mock文件夹

3.在新增的mock文件夹下新建一个json文件，例：list.json 和一个mockServe.js文件

list.json文件如下

[
   {
       "date": '2016-05-02',
       "name": '王小虎',
       "address": '上海市普陀区金沙江路 1518 弄'
   },
   {
       "date": '2016-05-02',
       "name": '王小虎',
       "address": '上海市普陀区金沙江路 1518 弄'
   },
   {
       "date": '2016-05-02',
       "name": '王小虎',
       "address": '上海市普陀区金沙江路 1518 弄'
   },
   {
       "date": '2016-05-02',
       "name": '王小虎',
       "address": '上海市普陀区金沙江路 1518 弄'
   },
]

4.mockServe.js如下

// 先引入mockjs模块
import Mock from 'mockjs';
// 引入你编写json所在文件的路径
import list from './list.json';

// 模拟数据返回
Mock.mock("/mock/list", {
   code: 200,
   data: list
});

5.把mockServe.js文件引入到src文件夹下的main.js入口文件中

import '@/mock/mockServe'

6.在src目录下的api文件夹中新建一个mockAjax.js文件

// 对于axios进行二次封装
import axios from 'axios';

// 1.利用axios对象的方法create，去创建一个axios实例
// 2.request就是axios，只不过稍微配置一下
const request = axios.create({
   // 配置对象
   // 基础路径：发请求的时候，路径中会出现mock
   baseURL:"/mock",
   // 代表请求超时的时间
   timeout:5000
})

//请求 * ----在项目中发请求（请求没有发出去）可以做一些事情
request.interceptors.request.use((config) => {
   return config;
 });

//响应 * ----当服务器手动请求之后，做出响应（相应成功）会执行的
 request.interceptors.response.use((res) => {
     //相应成功做的事情
     return res.data;
   },
   (err) => {
     alert("服务器响应数据失败");
   }
 );
// 对外暴露
export default request;

7.在src目录下的api文件夹中新建一个index.js文件

import mockRequest from './mockAjax'

export const reqGetList = () => mockRequest({url:'/list',methods:'get'})

8.在相应要发送请求的页面编写请求代码

import {reqGetList} from '@/api/index.js

mouted(){
   reqGetList().then(res=>{
       console.log(res)
   })
}

经过以上步骤，便可在页面中请求到相对应的假数据

也可将api文件在入口文件统一管理

在main.js中

// 任意组件可以使用API相关的接口
import * as API from '@/api'
Vue.prototype.api = API;

然后在相应请求的页面中发送请求的代码为

this.api.reqGetList().then(res=>{
this.dataList = res.data;
})

来源：https://blog.csdn.net/jinann0/article/details/128082846