在日常工作中,往往会出现后端接口还没有开发完成。这时我们可以根据已有的接口文档来搭建web server自己模拟假数据,拦截 Ajax 请求,返回模拟的响应数据。

一、开始 & 安装

1
2
3
4
//我们使用axios来发起http请求
npm install axios --save
//安装依赖mockjs
npm install mockjs --save-dev

二、拦截 & 响应

拦截并响应浏览器的http请求

1.在src目录下新建mock目录,结构如下:


2.index.js内容如下:

1
2
3
const Mock = require('mockjs');
//格式: Mock.mock( url, post/get , 返回的数据);
Mock.mock('/user/userInfo', 'get', require('./json/userInfo'));


3.json文件内容如下,以userInfo.json为例:

1
2
3
4
5
6
7
8
9
10
11
{
"data": {
"userid": "@id()",
"username": "@cname()",
"date": "@date()",
"avatar": "@image('200x100', '#02adea', 'Hello')",
"description": "@paragraph()",
"ip": "@ip()",
"email": "@email()"
}
}


4.在main.js入口文件中引入mock数据,不需要时,则注释掉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue';
import App from './App';
import router from './router';

require('./mock'); //引入mock数据,关闭则注释该行

Vue.config.productionTip = false;

new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});


3、在vue模板访问

1
2
3
4
5
6
axios.get('/user/userInfo')
.then(function(res){
console.log(res);
}).catch(function(err){
console.log(err);
});


项目地址