簡介
官網位址
簡單好用的線上接口 MOCK 平台
- 本地無需任何開發，講請求根位址指向到模拟位址即可輕松實作接口模拟
- 快速生成示範資料，隻需要開發前端即可向客戶示範真實效果
服務于前後端分離項目的接口 MOCK 平台
fastmock 讓接口 mock 變得更加簡單，讓團隊協作變得更加高效
- fastmock 可以讓你在沒有後端程式的情況下能真實地線上模拟 ajax 請求，實作前後端分離
- 用 fatmock 實作項目初期純前端的效果示範，再也不必為示範而開發全套程式
- 使用簡單，隻需簡單的配置，将根位址指向到 fastmock ，即可實作資料模拟，無需額外開發
其他的mock資料，基本上的原理都是前端在本地起一個伺服器，然後發起http請求來擷取資料。這樣一來，就需要在本地管理模拟的資料，但是随着前端的發展，已經有了不少線上的mock資料平台。由他們來提供伺服器，我們隻要在他們平台上建立好自己的模拟資料，就可以使用了。
原理：
我們将mock層獨立出來，通過中間服務的形式在前端和後端服務之前建立一道圍欄，使用fastmock，前端隻需要修改自己的XHR請求位址，後端隻需要在開發前和前端約定好接口文檔即可。等到後端服務開發完成，前端再将XHR請求位址替換回來進行聯調測試即可。
fastmock支援以下四種資料：
- restful連結參數：如/user/1，對應資料為{id: 1}，擷取方式為_req.params.id
- query查詢參數：如/user?username=Amour，擷取方式為_req.query.username。常用于get請求
- body請求體資料：參數在request body中，擷取方式為_req.body.key。常用于post請求
- headers頭部資訊：擷取方式為_req.headers.key。常用的場景是接口的token驗證，擷取方式為_req.headers.token
一.建立項目
在官網注冊登入後就可以開始建立項目了，如下圖：
二.建立接口
在剛剛建立的項目中點選新增接口，如下圖：
三.配置接口
依照提示填寫内容，如下圖：
四.調用接口
可以直接檢視接口
接口請求：
fetch(
'https://www.fastmock.site/mock/30404d2e9829c8a34c7c66993c0bf740/test/get/no',
)
.then((rsp) => rsp.json())
.then((data) => console.log(data));
五.動态傳參
fetch(
'https://www.fastmock.site/mock/30404d2e9829c8a34c7c66993c0bf740/test/postdata',
{
method: 'POST',
body: JSON.stringify({
username: 'admin',
password: '123456',
}),
headers: {
'Content-Type': 'application/json',
},
},
)
.then((resp) => resp.json())
.then((data) => console.log(data));
示例：
六.fastmock資料編寫小技巧
生成14個随機數組
{
"retcode":"000000",
"retinfo":"Succeeded",
"data":{
"results|15":[{
"updateTime":"@date('yyyy-MM-dd hh:mm:ss')",
"loginSystem|1":"[0,1]",
"documentNo":"登入版本",
"totalApplyNum":"1",
"status":"登入結果",
"documentId":"1",
"applyDate":"2020-09-09"
}]
}
}
日期
"updateTime":"@date('yyyy-MM-dd hh:mm:ss')",
"startDate":"@date('yyyy-MM-dd')",
"endDate":"@date('yyyy-MM-dd')",
資料從0與1之間随機抽取一個
資料從true與false之間随機抽取一個
生成url位址
{
"retcode": "000000",
"retinfo": "Succeeded",
"data": {
"codeUrl": ["@url","@url"]
}
}
生成6個文字
{
"retcode":"000000",
"retinfo":"Succeeded",
"data":{
"messages|10":[{
"content":"@cword(6)",
}]
}
}
a到b範圍之間的一個随機數
随機生成名稱
位址名稱
省："provinceName":"@province",
市： "cityName":"@city()",
區："areaName":"@region",
位址："address":"@county(true)",
攜帶圖檔的
{
"status":"200",
"msg":"請求成功",
"data": {
"list|5": [{ //生成5個圖檔的結構
"id|+1":1, //每一項都自加一
"image": "@image('750x440', '#ffcc33', '#FFF', 'png', 'Fast Mock')" //生成圖檔
}]
}
}
生成限定的随機數和文章标題
{
"status":"200",
"msg":"請求成功",
"data": {
"list|10": [{
"id|+1":1, //生成會自加的id
"title":"@ctitle(3, 8)", //随機生成3到8個中文，可用來模拟文章标題
"score|1-9.1":1, //随機生成1-9.9的浮點數，且屬性的名字是score
"image": "@image('200x270', '#ffcc33', '#FFF', 'png', 'image')" //随機生成圖檔
}]
}
}
生成帶随機時間的
{
"status":"200",
"msg":"請求成功",
"data": {
"list|10": [{
"id|+1":50,
"title":"@ctitle(3, 8)",
"score|1-9.1":1,
"listtag":"2018/美國/科幻/超級英雄",
"listtime":"@datetime('yyyy-MM-dd')", //生成諸如2018-20-19之類的随機時間
"image": "@image('200x270', '#ffcc33', '#FFF', 'png', 'image')"
}]
}
}