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

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

一、开始 & 安装

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

二、拦截 & 响应

拦截并响应浏览器的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/>'
});
复制代码

3、在vue模板访问

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

项目地址

转载于:https://juejin.im/post/5cee6bd7f265da1bcb4f0f1f