讓前端攻城師獨立於後端進行開發: Mock.js

一.Mock.js是什麼?

目前的大部分公司的項目都是採用的先後端分離, 後端接口的開發和前端人員是同時進行的. 那麼這個時候就會存在一個問題, 在頁面須要使用大量數據進行渲染生成前, 後端開發人員的接口也許並無寫完, 做爲前端的咱們也就沒有辦法獲取數據. 因此 前端工程師就須要本身按照接口文檔模擬後端人員提供的數據, 以此進行頁面的開發.

這個時候, Mock.js的做用就體現出來了, 在數據量較大的狀況下, 咱們不用一個一個的編寫數據, 只須要根據接口文檔將數據的格式填入, Mock.js就可以自動的按需生成大量的模擬數據. 且Mock.js提供了大量的數據類型, 包括文本, 數字, 布爾值, 日期, 郵箱, 連接, 圖片, 顏色等.

本文就簡單的介紹一下Mock.js提供的語法, 並介紹一下我平時在項目中是如何使用Mock.js去更方便的進行開發的.

二. 下載和引入Mock.js

1. 下載Mock.js

Mock.js提供多種下載方式, 本文以目前國內最經常使用的npm舉例, 只須要在命令行輸入npm install mockjs
便可完成Mock.js的下載.

2. 引入Mock.js

Mock.js暴露了一個全局的Mock對象, 咱們只須要將Mock對象引入到文件中, 調用Mock對象的方法便可

• CommonJS的引入方式

//CommonJS引入
let Mock = require('mockjs)

//調用Mock.mock()方法模擬數據
let data = Mock.mock({
'list|1-10': [{
  'id|+1': 1
}]
});
console.log(data);

• ES6的引入方式

//ES6的引入方式
import Mock from 'mockjs'

let data = Mock.mock({
'list|1-10': [{
  'id|+1': 1
}]
});
console.log(data);

三.Mock.js的簡單語法

Mock對象提供了4個方法, 分別是Mock.mock(), Mock.setup(), Mock.valid, Mock.toJSONSchema(), 一個工具庫Mock.Random. 其中咱們常常使用到的就是Mock.mock()和Mock.Random.

1. Mock.js的規範

第二部分引入Mock.js的代碼中的如下部分就能夠體現Mock.js的語法規範

'list|1-10': [{
  'id|+1': 1
}]

上面的代碼被稱爲數據模板, 用於告訴Mock.js生成什麼樣的數據, 其中數據模板中的每一個屬性由三部分構成: 屬性名, 生成規則, 屬性值:

• list爲數據模板中的屬性名;
• 1-10爲生成規則(表示生成最少1個, 最多10個重複數據)
• [{'id|+1': 1}]是屬性值, 屬性值中能夠嵌套使用屬性名和生成規則.

具體的生成規則參見: https://github.com/nuysoft/Mo...

2. Mock.mock()

Mock.mock()方法是用來根據數據模板生成模擬數據, 我經常使用到的是如下兩種傳參方式:

• Mock.mock(template): 根據數據模板template生成模擬數據

let data = Mock.mock({
data: {
  'products|10-20': [{
    name: '手機',
    price: 1000
  }]
}
})
console.log(data);

• Mock.mock(url, template): 攔截請求地址爲url的ajax請求, 並根據數據模板template生成模擬數據

let data = Mock.mock('api/products' , {
data: {
  'products|10-20': [{
    name: '手機',
    price: 1000
  }]
}
})

//使用jquery Ajax發送請求
$.ajax({
  url: 'api/products',
  type: 'GET',
  success: function(res) {
    console.log(res);
  }
})

3. Mock.Random

Mock.Random是Mock.js提供一個工具類, 用於生成經常使用的幾種數據.

• 生成布爾值

//使用@佔位符的方式
 let data = Mock.mock({
    data: {
      boolean: '@boolean'
    }
  })
  console.log(data);
  
//使用Mock.Random調用函數的方式
  let data = Mock.mock({
    data: {
      boolean: Mock.Random.boolean()
    }
  })
  console.log(data);

• 生成日期

let data = Mock.mock({
    data: {
      date: Mock.Random.date('yyyy-MM-dd')
    }
  })
  console.log(data);

Mock.js支持豐富的日期格式的自定義: https://github.com/nuysoft/Mo...

• 生成圖片

let data = Mock.mock({
    data: {
    //用於生成高度自定義的圖片地址
      imgURL: Mock.Random.image()
    }
  })
  console.log(data);

• 生成名字

let data = Mock.mock({
    data: {
      //生成一個英文名字
      name: Mock.Random.name(),
      //生成一箇中文名字
      chineseName: Mock.Random.cname()
    }
  })
  console.log(data);

更多Mock.Random工具庫提供的數據: https://github.com/nuysoft/Mo...

四.在Vue項目中使用Mock.js

以模擬一個登錄接口的數據爲例:

1. 單獨寫一個mockData.js文件做爲虛擬數據的生成文件.

//mockData.js

import Mock from 'mockjs'

let Random = Mock.Random;


//用戶登錄信息
let userInfo = Mock.mock({
  data: {
    responseCode: 200,
    responseMessage: 'success',
    userMessage: {
      email: Random.email(),
      'id|1-10': 1,
      realName: Random.cname(),
      roleCodes: 'admin',
      username: Random.first()
    }
  }
})



let mockData = {
  userInfo: userInfo
}

export default mockData;

2. 使用vuex去控制是否使用mock.js的數據

// src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

const state = {
  //使用模擬數據, 只是開發時使用, 若是不是開發時, 請務必設置爲false
  useMock: true
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

3. 在Login.vue中去實現請求登錄方法

//Login.vue

import mockData from '../utils/mockData.js'

exwport default {
  ...
  
  methods: {
    fetchUserInfo() {
      //若是vuex中userMock爲true
      if (this.$store.state.useMock) {
        //使用延時器模擬異步
        window.setTimeout(() => {
          let res = mockData.userInfo;
          //業務邏輯
        }, 1000);
        return;
      }
      
      //若是vuex中userMock爲false
      this.$axios.post('api/login', params).then(res => {
        //業務邏輯
      });
    }
  }
}

能夠看出在Login.vue的fetchUserInfo()方法中, 若是userMock爲true, 將使用的是mock.js中的模擬數據; 若是useMock爲false, 使用的是經過Ajax請求的數據. 這麼寫的好處是, 你只須要在vuex中修改一下, 就能夠控制全部請求接口函數中是使用Ajax請求數據, 仍是使用模擬數據. 這樣在進行和後臺聯調的時候, 就能夠自由的切換數據了!

參考連接

1. Mock.js官網: http://mockjs.com/