Mock模擬後台介面資料的簡單使用

2021-09-12 23:09:19 字數 1981 閱讀 2111

在專案開發的過程中,有時候會出現後端資料還沒出來,而前端需要資料的情況。這時候,如果等著後端人員開發完再進行測試,聯調則會拖慢開發進度。這時候,mock就顯示出它的魅力。它可以進行生成隨機資料,模擬後端介面資料,從而實現開發時,前後端分離,提高效率。

在使用mock之前,應該先和後端人員討論介面文件的基本結構,確認介面文件的內容。在根據確認好的介面文件,使用mock模擬資料。

最近在vue-cli搭建的專案靜態頁面已逐漸完善,此時若能有資料模擬渲染,那作為前端新手更能熟悉開發流程。查閱文件和其他小夥伴的文章,開始了模擬資料之旅。

1、安裝

npm i mockjs -s
2、引入
在src檔案目錄下,新建mock.js檔案並引入:

const mock = require('mockjs')

之後,在main.js檔案中載入mock.js

require(./mock.js)

3、簡單使用

自己的**:

const mock = require('mockjs');

const random = mock.random; // 當需要生成隨機資料時使用,更多的隨機資料的生成使用參照官網示例

// 示例1

// 示例2

4、進一步使用

參照官方文件,在mock.js檔案中引入mock之後,根據資料模板生成模擬資料:mock.mock( rurl?, rtype?, template|function( options ))

rurl:可選。表示需要攔截的 url,可以是 url 字串或 url 正則,如/index.js => /^/index.js$/

rtype:可選。表示需要攔截的 ajax 請求型別。例如 get、post、put、delete 等。

template:可選。表示資料模板,可以是物件或字串。例如 ] }。

function(options):可選。表示用於生成響應資料的函式。options 指向本次請求的 ajax 選項集,含有 url、type 和 body 三個屬性。

① 記錄資料模板。當攔截到匹配 url 的 ajax 請求時,將根據資料模板 template 生成模擬資料,並作為響應資料返回。第三點的簡單使用採用的就是這種形式。

mock.mock( rurl, template )
② 記錄用於生成響應資料的函式。當攔截到匹配 rurl 的 ajax 請求時,函式 function(options) 將被執行,並把執行結果作為響應資料返回。

mock.mock( rurl, function( options ) )

mock.mock("http://localhost:8080/getnewslist", function(options));

③ 記錄資料模板。當攔截到匹配 rurl 和 rtype 的 ajax 請求時,將根據資料模板 template 生成模擬資料,並作為響應資料返回。

]});④ 記錄用於生成響應資料的函式。當攔截到匹配 rurl 和 rtype 的 ajax 請求時,函式 function(options) 將被執行,並把執行結果作為響應資料返回。

mock模擬介面返回資料

mock,是python中模擬介面返回資料 1.安裝 pip install mock import unittest from mock import mock def add a,b pass class testadd unittest.testcase def test add self m...

Mock 資料模擬

實現請求路由對映 資料介面 到生產或者測試環境 能渲染模板很簡單,在mock server中整合模板引擎就行了,然後提供模擬的頁面資料用於完整渲染頁面,不過有時候生產環境中的模板引擎可能有一些環境依賴的擴充套件,這個要單獨實現。請求路由對映,實現原理就是要讓本地的mock server有乙個rout...

mock模擬資料並設計介面

import mock from mockjs 引入mock const random mock.random 設定全域性延時,沒有延時的話,有時候會檢測不到資料變化 mock.setup 建立乙個陣列用來接收模擬的資料 const mocklist const count 7 模擬生成7條資料 f...