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

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

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

一.Mock.js是什么?

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

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

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

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

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

2. 引入Mock.js

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

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的簡(jiǎn)單語(yǔ)法

Mock對(duì)象提供了4個(gè)方法, 分別是Mock.mock(), Mock.setup(), Mock.valid, Mock.toJSONSchema(), 一個(gè)工具庫(kù)Mock.Random. 其中我們經(jīng)常使用到的就是Mock.mock()和Mock.Random.

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

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

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

上面的代碼被稱(chēng)為數(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ī)則參見(jiàn):  https://github.com/nuysoft/Mo...

2. Mock.mock()

Mock.mock()方法是用來(lái)根據(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): 攔截請(qǐng)求地址為url的ajax請(qǐng)求, 并根據(jù)數(shù)據(jù)模板template生成模擬數(shù)據(jù)

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

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

3. Mock.Random

Mock.Random是Mock.js提供一個(gè)工具類(lèi), 用于生成常用的幾種數(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工具庫(kù)提供的數(shù)據(jù): https://github.com/nuysoft/Mo...

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

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

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

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

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

//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, 使用的是通過(guò)Ajax請(qǐng)求的數(shù)據(jù). 這么寫(xiě)的好處是, 你只需要在vuex中修改一下, 就可以控制所有請(qǐng)求接口函數(shù)中是使用Ajax請(qǐng)求數(shù)據(jù), 還是使用模擬數(shù)據(jù). 這樣在進(jìn)行和后臺(tái)聯(lián)調(diào)的時(shí)候, 就可以自由的切換數(shù)據(jù)了!

參考鏈接

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92858.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Fundebug

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

***mockjs讓前端開(kāi)發(fā)獨(dú)立于后端***

***mockjs讓前端開(kāi)發(fā)獨(dú)立于后端***

***mockjs讓前端開(kāi)發(fā)獨(dú)立于后端***

發(fā)表評(píng)論

0條評(píng)論

Fundebug

男|高級(jí)講師

TA的文章

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

2018.12.24 無(wú)障礙學(xué)習(xí)小計(jì)

z-index和層疊上下文

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

JavaScript面向?qū)ο笾械腟tring類(lèi)型個(gè)人分享

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

TP5整合 WorkerMan 以及 GatewayWorker

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

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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