前后端真正分離，網(wǎng)線(xiàn)被拔，也能請(qǐng)求數(shù)據(jù)（mock.js）

高璐發(fā)布于2019-05-23 13:53 / 3446人閱讀

摘要：六使用擴(kuò)展很多時(shí)候，服務(wù)器都有定義固定的返回值，如為則表示該請(qǐng)求有效。

做了一回標(biāo)題黨（別吐槽，說(shuō)的大實(shí)話(huà)，真的可以不用后臺(tái)，就能拿數(shù)據(jù)，快！，向下看...）一、mock.js 是什么？

官網(wǎng)機(jī)票?

簡(jiǎn)單的描述一下， mock.js 可以在后臺(tái)接口沒(méi)有更新時(shí)，來(lái)本地模擬數(shù)據(jù)達(dá)到測(cè)試界面功能的一個(gè)很方便的工具庫(kù)，mock.js 可以攔截ajax 請(qǐng)求，重指向并返回你定義的模板數(shù)據(jù)。更多細(xì)節(jié)，可查看官網(wǎng)。

二、安裝方式

? ? JS_CDN:??

? ?Yarn:

yarn add mockjs

? 其它安裝方式可看官網(wǎng)

三、簡(jiǎn)易使用教程 Mock.mock()

@parmas rul {string} 攔截請(qǐng)求url 地址，需要與請(qǐng)求地址保持一直，不然無(wú)法攔截請(qǐng)求
@params rtype {string} 請(qǐng)求方式，如果不傳該參數(shù)，則post/get請(qǐng)求均可獲得匹配數(shù)據(jù)，
                       注意該字段需要全部小寫(xiě)，否則無(wú)法匹配。
@params template {*} 默認(rèn)數(shù)據(jù) （最終請(qǐng)求返回結(jié)果）
@params function {function} options 為請(qǐng)求的數(shù)據(jù)，可在下面查看示例，這里不解釋了，
                            該函數(shù)結(jié)束需要return ,return 數(shù)據(jù)則為最終請(qǐng)求結(jié)果，
                            可根據(jù)options的參數(shù)，處理不同的邏輯

1. Mock.mock( template )

2. Mock.mock( rurl, template )

3. Mock.mock( rurl, function( options ) )

4. Mock.mock( rurl, rtype, template )

5. Mock.mock( rurl, rtype, function( options ) )

列舉基本的使用，更多細(xì)節(jié)描述，可查看官網(wǎng)。?

Mock.setup()

Mock.setup({
    timeout: 400 // 設(shè)置超時(shí)時(shí)間
})
Mock.setup({
    timeout: "300 - 6000" // 區(qū)間隨機(jī)超時(shí)時(shí)間
})
目前官網(wǎng)列舉的就一個(gè)參數(shù) timout (ajax 的請(qǐng)求超時(shí)時(shí)間)

Mock.Random?(該功能較多，只列舉部分常用的)?

  var Random = Mock.Random //聲明隨機(jī)函數(shù)對(duì)象var randomEmail = Random.email() //隨機(jī)生成郵箱
var randomBoolean = Random.boolean() //隨機(jī)生成布爾值
var randomBase64Img = Random.dataImage() //隨機(jī)生成圖片BASE 64 數(shù)據(jù)
var randomUrl = Random.url() //隨機(jī)生成Url 地址
var randomIp = Random.ip() //隨機(jī)生成ip 地址
var randomColor = Random.color() //隨機(jī)生成布爾值
/**
 @params size {String} 需要生成的圖片尺寸 （"600 X 300"）
 @params background {String} 生成圖片的背景色 默認(rèn)白色 （RBG）
 @params text {String} 生成圖片的中間文字 默認(rèn)為圖片尺寸
 @params format {Sting} 生成圖片的格式 默認(rèn)為png（可選：jpg/png/gif）
*/
Random.image()
Random.image( size )
Random.image( size, background )
Random.image( size, background, text )
Random.image( size, background, foreground, text )
Random.image( size, background, foreground, format, text )

官方的隨機(jī)支持功能很強(qiáng)大，也很全， 部分隨機(jī)函數(shù)可支持傳參，可定義適合場(chǎng)景的隨機(jī)數(shù)據(jù)，因?yàn)?功能太多了，無(wú)法一一列舉，可到官網(wǎng)尋找合適自己的。

官方支持隨機(jī)數(shù)據(jù)：

四、js 中的示例

let random = Mock.Random // 隨機(jī)函數(shù)

// 測(cè)試 get
Mock.mock("/get","get",{id: random.id(), name: "GET", email: random.email()})

// 測(cè)試 post
Mock.mock("/post","post",{id: random.id(), name: "POST", email: random.email()})

// 測(cè)試自定義模板
Mock.mock("/template","post", function (option) {
  console.log("我是自定義函數(shù)請(qǐng)求參數(shù)：", option)
  let data = {id: 1, name: "Template",image: random.image()}
  return data
})

  testRequest("/get", "GET") // 測(cè)試Get 請(qǐng)求
  testRequest("/post", "POST") // 測(cè)試Post 請(qǐng)求
  testRequest("/template", "POST", {key: "Test Params"}) // 測(cè)試Post 請(qǐng)求

  /**
   * @Description: Mock 測(cè)試請(qǐng)求
   */
  function testRequest (url, type,data = {}) {
    let baseUrl = ""
    $.ajax({
      url: baseUrl + url,
      type: type,
      data: data,
      dataType: "json",
      success: res => {
        console.log(res)
      },
    })
  }

五、Vue 中的使用

==> mock/index.js 

import Mock from "mockjs"

// 測(cè)試 get
Mock.mock("/get","get",{id: 1, name: "GET"})

// 測(cè)試 post
Mock.mock("/post","post",{id: 1, name: "POST"})

// 測(cè)試自定義模板
Mock.mock("/template","post", function (option) {
  console.log("我是自定義函數(shù)請(qǐng)求參數(shù)：", option)
  let data = {id: 1, name: "Template"}
  return data
})


==> main.js  // 在main.js 的代碼里引用模擬數(shù)據(jù)文件
*****
import "./mock/index.js"
*****

import axios form "axios"

// 測(cè)試get 請(qǐng)求
axios.get("/get").then(res => { console.log(res) }
// 測(cè)試post 請(qǐng)求
axios.post("/post").then(res => { console.log(res) }
// 測(cè)試自定義模板請(qǐng)求
axios.post("/post", {key: "Test Params"}).then(res => { console.log(res) }

踩坑注意：

?mock.js 的攔截地址，需要與請(qǐng)求地址保持一直，不然無(wú)法攔截請(qǐng)求

?mock.js 攔截的請(qǐng)求，不會(huì)出現(xiàn)在 network 請(qǐng)求列表中。

?mock.js? Mock.mock(..rtype)? rtype參數(shù)注意該字段需要全部小寫(xiě)，否則無(wú)法匹配。

六、使用擴(kuò)展

很多時(shí)候，服務(wù)器都有定義固定的返回值，如code 為0 則表示該請(qǐng)求有效。那么我們可以封裝一個(gè)函數(shù)，每次返回?cái)?shù)據(jù)前都調(diào)用函數(shù)，來(lái)格式化服務(wù)器固定的返回模板。

/**
 * @Description: 格式化mock 返回?cái)?shù)據(jù)
 * @param data {*}  請(qǐng)求數(shù)據(jù)結(jié)果
 * @param code {number} 請(qǐng)求狀態(tài)值
 * @param msg {Sting} 請(qǐng)求狀態(tài)消息
*/
function formattingData (data, code = 0,msg) {
  return {
    data: data,
    code: code,
    msg: msg || (code === 0 ");"請(qǐng)求成功" : "請(qǐng)求失敗")
  }
}

 // 測(cè)試 get
 Mock.mock("/get","get",formattingData({id: 1, name: "GET"}))
 // 測(cè)試 get 請(qǐng)求失敗
 Mock.mock("/get/err","get",formattingData(undefined,1))

對(duì)吧，沒(méi)騙你吧（手動(dòng)滑稽），如果覺(jué)得可以，請(qǐng)把你敲鍵盤(pán)的速度給我點(diǎn)個(gè)贊吧。

GPU云服務(wù)器云服務(wù)器前后端分離前后端分離開(kāi)發(fā) js前后端分離框架前后端不分離 jsp

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

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

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

登陸后可評(píng)論

0條評(píng)論

高璐

男|高級(jí)講師

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

TA的文章

RackNerd：$19.99/年KVM-1.8GB/28GB/3TB/洛杉磯機(jī)房

閱讀 2932·2021-07-30 15:30
Web前端開(kāi)發(fā)標(biāo)準(zhǔn)規(guī)范

閱讀 628·2019-08-30 15:55
讀redux源碼總結(jié)

閱讀 1693·2019-08-26 17:04
History對(duì)象

閱讀 723·2019-08-26 11:36
閾值報(bào)警功能

閱讀 2197·2019-08-26 10:58
如何開(kāi)發(fā)一個(gè)基于 Vue 的 ui 組件庫(kù)（一）

閱讀 3649·2019-08-23 14:34
在Ubuntu Server中安裝apache

閱讀 1633·2019-08-22 18:48
記一次簡(jiǎn)單的DOM XSS攻擊實(shí)驗(yàn)

閱讀 2614·2019-08-21 17:51

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

資訊專(zhuān)欄INFORMATION COLUMN

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

前后端真正分離，網(wǎng)線(xiàn)被拔，也能請(qǐng)求數(shù)據(jù)（mock.js）

相關(guān)文章

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

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

前后分離的總結(jié)

丁香園開(kāi)源接口管理系統(tǒng)

**用gulp+mock實(shí)現(xiàn)前后端分離**

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

0條評(píng)論

高璐

男|高級(jí)講師

TA的文章

RackNerd：$19.99/年KVM-1.8GB/28GB/3TB/洛杉磯機(jī)房

Web前端開(kāi)發(fā)標(biāo)準(zhǔn)規(guī)范

讀redux源碼總結(jié)

History對(duì)象

閾值報(bào)警功能

如何開(kāi)發(fā)一個(gè)基于 Vue 的 ui 組件庫(kù)（一）

在Ubuntu Server中安裝apache

記一次簡(jiǎn)單的DOM XSS攻擊實(shí)驗(yàn)

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

前后端真正分離，網(wǎng)線(xiàn)被拔，也能請(qǐng)求數(shù)據(jù)（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)！

前后端真正分離，網(wǎng)線(xiàn)被拔，也能請(qǐng)求數(shù)據(jù)（mock.js）