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

Fundebug 發布于2019-08-22 14:06 / 1227人閱讀

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

一.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請求數據, 還是使用模擬數據. 這樣在進行和后臺聯調的時候, 就可以自由的切換數據了!

參考鏈接

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

GPU云服務器云服務器后端開發和前端開發前端開發后端開發后端和前端開發前端后端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92858.html

前后端開發分離之Mock

摘要：為了使得前端減輕對后端的依賴，在后端功能尚未實現的情況下保證前端進度的開發，我們一般會手動進行一些數據模擬，即假數據。覆蓋攔截請求，目前內置支持。序有時候我們開發一般會分為前后端，前端負責數據顯示和UI交互，后端負責數據IO等等。因此造成前端對后端有嚴重依賴，使得前端的開發進度普遍滯后于后端。為了使得前端減輕對后端的依賴，在后端功能尚未實現的情況下保證前端進度的開發，我們一般會手...

phpmatt 2019-08-21 17:49 評論0 收藏0
前后端開發分離之Mock

摘要：為了使得前端減輕對后端的依賴，在后端功能尚未實現的情況下保證前端進度的開發，我們一般會手動進行一些數據模擬，即假數據。覆蓋攔截請求，目前內置支持。序有時候我們開發一般會分為前后端，前端負責數據顯示和UI交互，后端負責數據IO等等。因此造成前端對后端有嚴重依賴，使得前端的開發進度普遍滯后于后端。為了使得前端減輕對后端的依賴，在后端功能尚未實現的情況下保證前端進度的開發，我們一般會手...

tyheist 2019-05-29 17:03 評論0 收藏0
mockjs讓前端開發獨立于后端

摘要：可以模擬數據，攔截請求，返回模擬數據，無需后端返回就可以測試前端程序官網原文首先在頭中引入我們需要的文件在請求之前，用定義返回數據表示成功，表示錯誤信息不完整彈出錯誤信息在中的要與中的相同，比如我這里是那么好了，說到這里，我們進行測試一下調 mock.js 可以模擬ajax數據，攔截ajax請求，返回模擬數據，無需后端返回就可以測試前端程序 mockjs官網原文：http://i.j...

Half 2019-08-29 11:31 評論0 收藏0
mockjs讓前端開發獨立于后端

摘要：可以模擬數據，攔截請求，返回模擬數據，無需后端返回就可以測試前端程序官網原文首先在頭中引入我們需要的文件在請求之前，用定義返回數據表示成功，表示錯誤信息不完整彈出錯誤信息在中的要與中的相同，比如我這里是那么好了，說到這里，我們進行測試一下調 mock.js 可以模擬ajax數據，攔截ajax請求，返回模擬數據，無需后端返回就可以測試前端程序 mockjs官網原文：http://i.j...

Ali_ 2019-08-20 12:01 評論0 收藏0
mockjs讓前端開發獨立于后端

摘要：可以模擬數據，攔截請求，返回模擬數據，無需后端返回就可以測試前端程序官網原文首先在頭中引入我們需要的文件在請求之前，用定義返回數據表示成功，表示錯誤信息不完整彈出錯誤信息在中的要與中的相同，比如我這里是那么好了，說到這里，我們進行測試一下調 mock.js 可以模擬ajax數據，攔截ajax請求，返回模擬數據，無需后端返回就可以測試前端程序 mockjs官網原文：http://i.j...

Terry_Tai 2019-08-01 15:55 評論0 收藏0