資訊專欄INFORMATION COLUMN
摘要：后端在層造假數(shù)據(jù)返回給前端。上面的方式中，不管哪一種方式，都會要求開發(fā)人員寫一些跟項目本無任何關(guān)聯(lián)的代碼，第一個和第二個方式還會需要前端項目在本地引入不必要的文件。等到后端服務(wù)開發(fā)完成，前端再將請求地址替換回來進行聯(lián)調(diào)測試即可。
如果想直接進入實戰(zhàn)請猛戳這里fastmock線上地址www.fastmock.site
fastmock可以讓你在沒有后端程序的情況下能真實地在線模擬ajax請求，你可以用fatmock實現(xiàn)項目初期純前端的效果演示，也可以用fastmock實現(xiàn)開發(fā)中的數(shù)據(jù)模擬從而實現(xiàn)前后端分離。如下面的接口模擬一個用戶列表https://www.fastmock.site/moc...
模擬各種特殊類型的數(shù)據(jù)https://www.fastmock.site/moc...
您可以直接在瀏覽器打開上面的鏈接或者用ajax請求查看返回的數(shù)據(jù)
在使用fastmock之前，你的團隊實現(xiàn)數(shù)據(jù)模擬可能是下面的方案中的一種或者多種
本地手寫數(shù)據(jù)模擬，在前端代碼中產(chǎn)生一大堆的mock代碼。
利用mockjs或者canjs的can-fixture實現(xiàn)ajax攔截，本地配置必要的json規(guī)則。
后端在Controller層造假數(shù)據(jù)返回給前端。
上面的方式中，不管哪一種方式，都會要求開發(fā)人員寫一些跟項目本無任何關(guān)聯(lián)的代碼，第一個和第二個方式還會需要前端項目在本地引入不必要的js文件。比如下面的mock數(shù)據(jù)
// 產(chǎn)品配置
{
url: "/pms/product/list",
on: true,
type: "get",
resp: Mock.mock({
"body": {
"currentPage": 1,
"isMore": 0,
"pageSize": 15,
"resultList|10": [
{
"productNo": "11111",
"productName|1": ["產(chǎn)品名稱1", "產(chǎn)品名稱2", "產(chǎn)品名稱3", "產(chǎn)品名稱4", "產(chǎn)品名稱5"],
"productType|1": ["1", "2", "3", "4", "5"],
"status|1": ["1", "2"],
"gmtCreate": "@DATETIME("yyyy-MM-dd HH:mm:ss")",
"gmtModified": "@now("yyyy-MM-dd HH:mm:ss")",
"createUserCode": "@name"
}
],
"startIndex": 0,
"totalNum": 100,
"totalPage": 1
},
"reCode": "0000",
"reMsg": "成功",
"success": true
})
},
// 產(chǎn)品配置-貸款材料配置
{
url: "/pms/cfgLoanDoc/list",
on: true,
resp: Mock.mock({
"body": {
"currentPage": 1,
"isMore": 0,
"pageSize": 15,
"resultList|10": [
{
"loanDocCode|+1": 1,
"loanDocName": /[測試字體]{4,30}/
}
],
"startIndex": 0,
"totalNum": 100,
"totalPage": 1
},
"reCode": "0000",
"reMsg": "成功",
"success": true
})
}
上面的代碼為mockjs的事例代碼，更多mockjs相關(guān)資料參考鏈接mockjs文檔
為此，我們將mock層獨立出來，通過中間服務(wù)的形式在前端和后端服務(wù)之前建立一道圍欄，使用fastmock，前端只需要修改自己的XHR請求地址，后端只需要在開發(fā)前和前端約定好接口文檔即可。等到后端服務(wù)開發(fā)完成，前端再將XHR請求地址替換回來進行聯(lián)調(diào)測試即可。
tip:當(dāng)然，你也可以通過npm script不同命令加載不同配置文件的形式切換你的XHR地址，這里不作詳細介紹。
還是不了解fastmock？讓我們跟著教程一探究竟吧了解并開始使用fastmock
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108924.html
摘要：缺點需要增加本地的代碼量，以及需要配置實現(xiàn)攔截優(yōu)點數(shù)據(jù)通過會更豐富。缺點修改內(nèi)容溝通成本高，跟后端扯皮利用去模擬優(yōu)點可控內(nèi)容以及實現(xiàn)動態(tài)。三本地周邊知識本地的思想就是利用完成。注意接口的和自己的接口不要沖突。 VueCli3.0中集成MockApi 一：使用場景 哎喲，好煩啊，這個需求還么結(jié)束就來下一個需求，程序員不要排期的嗎？ 沒辦法啊，資本主義的XX嘴臉啊 來吧，技術(shù)評審我倆把接口...
摘要：前端開發(fā)如何做好本地接口模擬之前有寫過一篇本地化接口模擬前后端并行開發(fā)，講到過本地接口模擬，但不太細致。有哪些途徑本地接口模擬一般分為工具層面和代碼層面。因為本地接口模擬功能主要是針對的返回值為格式的異步請求，所以這種方式主要用文件。 前端開發(fā)如何做好本地接口模擬 之前有寫過一篇 本地化接口模擬、前后端并行開發(fā)，講到過本地接口模擬，但不太細致。這次細細的說說本地接口模擬。 1. 有什么...
摘要：引言前端開發(fā)經(jīng)常需要等待后端的接口，嚴(yán)重影響了開發(fā)效率，我們一般采用方式來避免這個問題。可能會涉及到門技術(shù)，分別是服務(wù)端技術(shù)隨機生成特定格式數(shù)據(jù)的技術(shù)請求轉(zhuǎn)發(fā)請求攔截。 引言 前端開發(fā)經(jīng)常需要等待后端的接口，嚴(yán)重影響了開發(fā)效率，我們一般采用mock方式來避免這個問題。本人參考了大量文章，結(jié)合自己的經(jīng)驗，給出自己在mock上的一些理解。 1. 原理 何為mock,我認(rèn)為mock主要就是通...
摘要：同時還有對應(yīng)的返回值字段描述通過這個方法，可以隨時隨地的測試以及更新文檔，簡直是后端小伙伴的福音但是，不知道小伙伴們有沒有發(fā)現(xiàn)一個問題，就是在生成接口文檔的時候，還是需要自己填寫參數(shù)描述。對于測試同學(xué)來說，這是一個非常不錯的功能。 我們都知道在一個團隊中是由很多角色組成的，例如：業(yè)務(wù)、產(chǎn)品、...
閱讀 1395·2021-10-11 10:58
閱讀 1477·2021-09-04 16:41
閱讀 677·2019-08-30 15:55
閱讀 802·2019-08-29 18:46
閱讀 3140·2019-08-29 14:05
閱讀 3530·2019-08-26 14:00
閱讀 2452·2019-08-26 13:53
閱讀 3176·2019-08-26 13:29
