Mock 基本使用

2022-07-21 06:12:12 字數 1380 閱讀 6186

一、mock解決的問題

開發時,後端還沒完成資料輸出,前端只好寫靜態模擬資料。資料太長了,將資料寫在js檔案裡,完成後挨個改url。某些邏輯複雜的**,加入或去除模擬資料時得小心翼翼。想要盡可能還原真實的資料,要麼編寫更多**,要麼手動修改模擬資料。特殊的格式,例如ip,隨機數,,位址,需要去收集

二、mock優點

1、前後端分離

讓前端工程師獨立於後端進行開發。

2、增加測試的真實性

通過隨機資料,模擬各種場景。

3、開發無侵入

不需要修改既有**,就可以攔截ajax請求,返回模擬的響應資料。

4、用法簡單

符合直覺的介面。

5、資料型別豐富

6、方便擴充套件

支援支援擴充套件更多資料型別,支援自定義函式和正則。

7、在已有介面文件的情況下,我們可以直接按照介面文件來開發,將相應的字段寫好,在介面完成 之後,只需要改變url位址即可。

8、不涉及跨域問題,

三、案例demo

cnpm install mockjs -s

2.然後可以在scr下建立乙個資料夾,用於存放模擬的資料的檔案 例如 /src/mock/index.js,在這個檔案中

const mock = require("mockjs");

let data =mock.mock($/,//

生成隨機**號

"shopaddress": "@county(true)", //

隨機生成位址

"shopstar|1-5": "★", //

隨機生成1-5個星星

"salesvolume|30-1000": 30, //

隨機生成商品** 在30-1000之間

"shoplogo": "@image('100x40','#c33', '#ffffff','小北鼻')", //

生成隨機,大小/背景色/字型顏色/文字資訊

"food|7": [ //

每個商品中再隨機生成七個food]}

]}

]})mock.mock(/goods\/goodall/, 'post', () => )

3.模擬完資料後,需要在入口主檔案 main.js中 引入這個模擬資料的檔案

import "./mock/index.js"

4.在頁面中,我們直接可以進行axios請求,(這裡懶省事了,正常情況下,要把每個介面都封裝到api裡面,後期便於修改維護等一系列操作)

import axios from "axios";

mounted () ,

methods: )

} }

Mock的使用教程

element ui手冊 中文文件 1 在專案裡面新建乙個mock資料夾,在mock資料夾裡面新建乙個test.json檔案 2 在build目錄下找到webpack.dev.conf.js檔案,編寫以下 mock code const express require express const p...

四 使用Mock物件

很多情況下,需要與外部依賴打交道,如乙個rest位址,資料庫鏈結 外部io等 這些依賴有些速度過慢 有些不夠穩定,不符合單元測試要求的快速 可重複等原則性要求,因此引入了mock物件這一概念。與mock相關的還有stub這個單詞。一般來說,在編寫stub之後,需要將其注入依賴物件中,也即依賴注入 d...

何時應該使用Mock物件?

英文原文 中文原文 在 ode to code 上,k scott allen理性地分析了如何在單元測試中使用mock物件,並分享了他針對mock物件框架使用情況的想法。首先,allen就人們對mock的常見誤解,丟擲了尖銳的意見 我們知道,像與smtp伺服器通訊的物件這樣的資源,是很難在單元測試中...