讓前端攻城師獨(dú)立于后端進(jìn)行開發(fā): Mock.js

Fundebug 發(fā)布于2019-08-22 14:06 / 1242人閱讀

摘要：一是什么目前的大部分公司的項(xiàng)目都是采用的前后端分離后端接口的開發(fā)和前端人員是同時(shí)進(jìn)行的那么這個(gè)時(shí)候就會存在一個(gè)問題在頁面需要使用大量數(shù)據(jù)進(jìn)行渲染生成前后端開發(fā)人員的接口也許并沒有寫完作為前端的我們也就沒有辦法獲取數(shù)據(jù)所以前端工程師就需要自己

一.Mock.js是什么?

目前的大部分公司的項(xiàng)目都是采用的前后端分離, 后端接口的開發(fā)和前端人員是同時(shí)進(jìn)行的. 那么這個(gè)時(shí)候就會存在一個(gè)問題, 在頁面需要使用大量數(shù)據(jù)進(jìn)行渲染生成前, 后端開發(fā)人員的接口也許并沒有寫完, 作為前端的我們也就沒有辦法獲取數(shù)據(jù). 所以前端工程師就需要自己按照接口文檔模擬后端人員提供的數(shù)據(jù), 以此進(jìn)行頁面的開發(fā).

這個(gè)時(shí)候, Mock.js的作用就體現(xiàn)出來了, 在數(shù)據(jù)量較大的情況下, 我們不用一個(gè)一個(gè)的編寫數(shù)據(jù), 只需要根據(jù)接口文檔將數(shù)據(jù)的格式填入, Mock.js就能夠自動(dòng)的按需生成大量的模擬數(shù)據(jù). 且Mock.js提供了大量的數(shù)據(jù)類型, 包括文本, 數(shù)字, 布爾值, 日期, 郵箱, 鏈接, 圖片, 顏色等.

本文就簡單的介紹一下Mock.js提供的語法, 并介紹一下我平時(shí)在項(xiàng)目中是如何使用Mock.js去更方便的進(jìn)行開發(fā)的.

二. 下載和引入Mock.js 1. 下載Mock.js

Mock.js提供多種下載方式, 本文以目前國內(nèi)最常用的npm舉例, 只需要在命令行輸入npm install mockjs
即可完成Mock.js的下載.

2. 引入Mock.js

Mock.js暴露了一個(gè)全局的Mock對象, 我們只需要將Mock對象引入到文件中, 調(diào)用Mock對象的方法即可

CommonJS的引入方式

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

//調(diào)用Mock.mock()方法模擬數(shù)據(jù)
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個(gè)方法, 分別是Mock.mock(), Mock.setup(), Mock.valid, Mock.toJSONSchema(), 一個(gè)工具庫Mock.Random. 其中我們經(jīng)常使用到的就是Mock.mock()和Mock.Random.

1. Mock.js的規(guī)范

第二部分引入Mock.js的代碼中的以下部分就可以體現(xiàn)Mock.js的語法規(guī)范

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

上面的代碼被稱為數(shù)據(jù)模板, 用于告訴Mock.js生成什么樣的數(shù)據(jù), 其中數(shù)據(jù)模板中的每個(gè)屬性由三部分構(gòu)成: 屬性名, 生成規(guī)則, 屬性值:

list為數(shù)據(jù)模板中的屬性名;

1-10為生成規(guī)則(表示生成最少1個(gè), 最多10個(gè)重復(fù)數(shù)據(jù))

[{"id|+1": 1}]是屬性值, 屬性值中可以嵌套使用屬性名和生成規(guī)則.

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

2. Mock.mock()

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

Mock.mock(template): 根據(jù)數(shù)據(jù)模板template生成模擬數(shù)據(jù)

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

Mock.mock(url, template): 攔截請求地址為url的ajax請求, 并根據(jù)數(shù)據(jù)模板template生成模擬數(shù)據(jù)

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

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

3. Mock.Random

Mock.Random是Mock.js提供一個(gè)工具類, 用于生成常用的幾種數(shù)據(jù).

生成布爾值

//使用@占位符的方式
 let data = Mock.mock({
    data: {
      boolean: "@boolean"
    }
  })
  console.log(data);
  
//使用Mock.Random調(diào)用函數(shù)的方式
  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: {
      //生成一個(gè)英文名字
      name: Mock.Random.name(),
      //生成一個(gè)中文名字
      chineseName: Mock.Random.cname()
    }
  })
  console.log(data);

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

四.在Vue項(xiàng)目中使用Mock.js

以模擬一個(gè)登陸接口的數(shù)據(jù)為例:

1. 多帶帶寫一個(gè)mockData.js文件作為虛擬數(shù)據(jù)的生成文件.

//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的數(shù)據(jù)

// 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 = {
  //使用模擬數(shù)據(jù), 只是開發(fā)時(shí)使用, 如果不是開發(fā)時(shí), 請務(wù)必設(shè)置為false
  useMock: true
}

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

3. 在Login.vue中去實(shí)現(xiàn)請求登陸方法

//Login.vue

import mockData from "../utils/mockData.js"

exwport default {
  ...
  
  methods: {
    fetchUserInfo() {
      //如果vuex中userMock為true
      if (this.$store.state.useMock) {
        //使用延時(shí)器模擬異步
        window.setTimeout(() => {
          let res = mockData.userInfo;
          //業(yè)務(wù)邏輯
        }, 1000);
        return;
      }
      
      //如果vuex中userMock為false
      this.$axios.post("api/login", params).then(res => {
        //業(yè)務(wù)邏輯
      });
    }
  }
}

可以看出在Login.vue的fetchUserInfo()方法中, 如果userMock為true, 將使用的是mock.js中的模擬數(shù)據(jù); 如果useMock為false, 使用的是通過Ajax請求的數(shù)據(jù). 這么寫的好處是, 你只需要在vuex中修改一下, 就可以控制所有請求接口函數(shù)中是使用Ajax請求數(shù)據(jù), 還是使用模擬數(shù)據(jù). 這樣在進(jìn)行和后臺聯(lián)調(diào)的時(shí)候, 就可以自由的切換數(shù)據(jù)了!

參考鏈接

Mock.js官網(wǎng): http://mockjs.com/