在项目中使用Mock.js的基本步骤

在平常工做中，每每会出现后端接口尚未开发完成。这时咱们能够根据已有的接口文档来搭建web server本身模拟假数据,拦截 Ajax 请求,返回模拟的响应数据。

1、开始 & 安装

//咱们使用axios来发起http请求
npm install axios --save
//安装依赖mockjs
npm install mockjs --save-dev
复制代码

2、拦截 & 响应

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

1.在src目录下新建mock目录，结构以下：

2.index.js内容以下：

const Mock = require('mockjs');
//格式： Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/user/userInfo', 'get', require('./json/userInfo'));
复制代码

3.json文件内容以下，以userInfo.json为例：

{
  "data": {
    "userid": "@id()",
    "username": "@cname()",
    "date": "@date()",
    "avatar": "@image('200x100', '#02adea', 'Hello')",
    "description": "@paragraph()",
    "ip": "@ip()",
    "email": "@email()"
  }
}
复制代码

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

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/>'
});
复制代码

三、在vue模板访问

axios.get('/user/userInfo')
.then(function(res){
  console.log(res);
}).catch(function(err){
  console.log(err);
});
复制代码

项目地址