前后端真正分離，網線被拔，也能請求數據（mock.js）

高璐發布于2019-05-23 13:53 / 3318人閱讀

摘要：六使用擴展很多時候，服務器都有定義固定的返回值，如為則表示該請求有效。

做了一回標題黨（別吐槽，說的大實話，真的可以不用后臺，就能拿數據，快！，向下看...）一、mock.js 是什么？

官網機票?

簡單的描述一下， mock.js 可以在后臺接口沒有更新時，來本地模擬數據達到測試界面功能的一個很方便的工具庫，mock.js 可以攔截ajax 請求，重指向并返回你定義的模板數據。更多細節，可查看官網。

二、安裝方式

? ? JS_CDN:??

? ?Yarn:

yarn add mockjs

? 其它安裝方式可看官網

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

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

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 ) )

列舉基本的使用，更多細節描述，可查看官網。?

Mock.setup()

Mock.setup({
    timeout: 400 // 設置超時時間
})
Mock.setup({
    timeout: "300 - 6000" // 區間隨機超時時間
})
目前官網列舉的就一個參數 timout (ajax 的請求超時時間)

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

  var Random = Mock.Random //聲明隨機函數對象var randomEmail = Random.email() //隨機生成郵箱
var randomBoolean = Random.boolean() //隨機生成布爾值
var randomBase64Img = Random.dataImage() //隨機生成圖片BASE 64 數據
var randomUrl = Random.url() //隨機生成Url 地址
var randomIp = Random.ip() //隨機生成ip 地址
var randomColor = Random.color() //隨機生成布爾值
/**
 @params size {String} 需要生成的圖片尺寸 （"600 X 300"）
 @params background {String} 生成圖片的背景色 默認白色 （RBG）
 @params text {String} 生成圖片的中間文字 默認為圖片尺寸
 @params format {Sting} 生成圖片的格式 默認為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 )

官方的隨機支持功能很強大，也很全， 部分隨機函數可支持傳參，可定義適合場景的隨機數據，因為
功能太多了，無法一一列舉，可到官網尋找合適自己的。

官方支持隨機數據：

四、js 中的示例

let random = Mock.Random // 隨機函數

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

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

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

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

  /**
   * @Description: Mock 測試請求
   */
  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"

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

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

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


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

import axios form "axios"

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

踩坑注意：

?mock.js 的攔截地址，需要與請求地址保持一直，不然無法攔截請求

?mock.js 攔截的請求，不會出現在 network 請求列表中。

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

六、使用擴展

很多時候，服務器都有定義固定的返回值，如code 為0 則表示該請求有效。那么我們可以封裝一個函數，每次返回數據前都調用函數，來格式化服務器固定的返回模板。

/**
 * @Description: 格式化mock 返回數據
 * @param data {*}  請求數據結果
 * @param code {number} 請求狀態值
 * @param msg {Sting} 請求狀態消息
*/
function formattingData (data, code = 0,msg) {
  return {
    data: data,
    code: code,
    msg: msg || (code === 0 ");"請求成功" : "請求失敗")
  }
}

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

對吧，沒騙你吧（手動滑稽），如果覺得可以，請把你敲鍵盤的速度給我點個贊吧。

GPU云服務器云服務器前后端分離前后端分離開發 js前后端分離框架前后端不分離 jsp

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

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

前后端開發分離之Mock

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

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

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

tyheist 2019-05-29 17:03 評論0 收藏0
前后分離的總結

摘要：如何去解決這些問題前后端分離大部分的互聯網公司都分成了前端團隊和后端團隊。方案一采用架構業界很多公司會采用，單頁應用的架構，這種架構是天然的前后端分離的。方案二淘寶的大前端方案中途島上圖是淘寶基于的前后端分離分層，以及的職責范圍。我們遇到了什么問題？ 1.前端無法調試后端未完成的 API：如果后端同學還沒有完成 API 開發，那么前端同學就不能對這個 API 進行開發。之前我們都是在...

enrecul101 2019-08-26 11:56 評論0 收藏0
丁香園開源接口管理系統

摘要：致力于解決前后端開發協作過程中出現的各類問題，提高開發效率，對接口做統一管理，同時也能為后續的迭代維護提供更便捷的方式。丁香園也將努力持續的做技術輸出產品輸出，為開源社區做出自己的一份力量。 API Mocker 先貼上項目地址：DXY-F2E/api-mocker 隨著web發展，前后端分離的演進，網頁的交互變的越來越復雜。在項目開發過程中，前后端并行開發時，在涉及到接口的部分，總是...

mingde 2019-08-22 11:08 評論0 收藏0
用gulp+mock實現前后端分離

摘要：當然需要的工具不只有這些，其他的一些可選工具還有文件壓縮壓縮時用到的文件重命名檢查一般編輯器自帶校驗提示工具等等，具體根據項目需要安裝。 gulp 前端自動化構建工具需要配置nodejs環境, 利用npm安裝全局gulp,安裝后可以輸入gulp指令。 npm install gulp -g 創建項目目錄、初始化npm包、gulp npm init gulp init 下載gul...

dailybird 2019-08-20 18:08 評論0 收藏0