在項目中使用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);
});
複製代碼

項目地址