在日常工作中,往往会出现后端接口还没有开发完成。这时我们可以根据已有的接口文档来搭建web server
自己模拟假数据,拦截 Ajax
请求,返回模拟的响应数据。
一、开始 & 安装
1 2 3 4
| npm install axios --save
npm install mockjs --save-dev
|
二、拦截 & 响应
拦截并响应浏览器的http请求
1.在src
目录下新建mock
目录,结构如下:

2.index.js
内容如下:
1 2 3
| const Mock = require('mockjs');
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');
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); });
|

项目地址