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

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

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

一.Mock.js是什么?

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

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

本文就簡單的介紹一下Mock.js提供的語法, 并介紹一下我平時在項目中是如何使用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暴露了一個全局的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個方法, 分別是Mock.mock(), Mock.setup(), Mock.valid, Mock.toJSONSchema(), 一個工具庫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òu)成: 屬性名, 生成規(guī)則, 屬性值:

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

1-10為生成規(guī)則(表示生成最少1個, 最多10個重復(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: "手機",
    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: "手機",
    price: 1000
  }]
}
})

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

3. Mock.Random

Mock.Random是Mock.js提供一個工具類, 用于生成常用的幾種數(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: {
      //生成一個英文名字
      name: Mock.Random.name(),
      //生成一個中文名字
      chineseName: Mock.Random.cname()
    }
  })
  console.log(data);

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

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

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

1. 多帶帶寫一個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ā)時使用, 如果不是開發(fā)時, 請務(wù)必設(shè)置為false
  useMock: true
}

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

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

//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;
          //業(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ù)據(jù)了!

參考鏈接

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

GPU云服務(wù)器云服務(wù)器后端開發(fā)和前端開發(fā) 前端開發(fā)后端開發(fā) 后端和前端開發(fā) 前端后端開發(fā)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/92858.html

發(fā)表評論

登陸后可評論

0條評論

Fundebug

男|高級講師

我要關(guān)注我要私信

TA的文章

HostNamaste：全線產(chǎn)品特惠，多機房VPS年付$25起，混合專用服務(wù)器$240/年

閱讀 3579·2021-11-08 13:30
2018.12.24 無障礙學(xué)習(xí)小計

閱讀 3651·2019-08-30 15:55
z-index和層疊上下文

閱讀 774·2019-08-29 15:16
數(shù)組查詢算法（JavaScript）

閱讀 1833·2019-08-26 13:57
JavaScript面向?qū)ο笾械腟tring類型個人分享

閱讀 2166·2019-08-26 12:18
【webpack】: 記一次jsbundle體積優(yōu)化

閱讀 878·2019-08-26 11:36
TP5整合 WorkerMan 以及 GatewayWorker

閱讀 1826·2019-08-26 11:30
前后端聯(lián)調(diào)之Form Data與Request Payload，你真的了解嗎？

閱讀 3260·2019-08-23 16:46

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

前后端開發(fā)分離之Mock

前后端開發(fā)分離之Mock

***mockjs讓前端開發(fā)獨立于后端***

***mockjs讓前端開發(fā)獨立于后端***

***mockjs讓前端開發(fā)獨立于后端***

發(fā)表評論

0條評論

Fundebug

男|高級講師

TA的文章

HostNamaste：全線產(chǎn)品特惠，多機房VPS年付$25起，混合專用服務(wù)器$240/年

2018.12.24 無障礙學(xué)習(xí)小計

z-index和層疊上下文

數(shù)組查詢算法（JavaScript）

JavaScript面向?qū)ο笾械腟tring類型個人分享

【webpack】: 記一次jsbundle體積優(yōu)化

TP5整合 WorkerMan 以及 GatewayWorker

前后端聯(lián)調(diào)之Form Data與Request Payload，你真的了解嗎？

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！