資訊專欄INFORMATION COLUMN
當(dāng)你遇見前端頁(yè)面開發(fā)完成，可后端接口還沒好，I這樣就直接無(wú)法聯(lián)調(diào)，這時(shí)候我們用到mock數(shù)據(jù)。
先說(shuō)說(shuō)curd接口模擬
注：這邊可以和后端先約定好接口路徑以及入?yún)⒎祬⒌淖侄危苊舛涡薷?/p>
1.我們先看看下面代碼，在安裝，新建js文件，在文件中導(dǎo)入mock.js，模擬列表數(shù)據(jù)
yarn add mockjs
const Mock = require("mockjs")
const list = []
const length = 18
for (let i = 0; i < length; i++) {
list.push(
Mock.mock({
id: '@id',
account: '@first',
name: '@name',
email: '@email',
mobile: '@phone',
sex: '@integer(0,1)',
type: "@integer(100,101)",
status: "@integer(0,1)",
})
)
}2.查詢列表接口模擬
{
url: "/user/getPageList",
type: "post",
response: config => {
// 拿到入?yún)? const {
name,
account,
status,
type,
pageNum,
pageSize,
} = config.body;
// 做一些查詢條件的處理
const mockData = list.filter(item => {
if (name && item.name.indexOf(name) < 0) return false
if (account && item.account.toString() !== account) return false
if (status && item.status.toString() !== status) return false
if (type && item.type.toString() !== type) return false
return true
})
// 模擬分頁(yè)
const pageList = mockData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
// 返回?cái)?shù)據(jù)
return {
resultCode: "1",
messageCode: null,
message: null,
data: {
list: pageList,
total: mockData.length
}
};
}
},3.刪除功能接口模擬
{
url: "/user/removeRow",
type: "post",
response: config => {
const {
id
} = config.body
// 根據(jù)id找到需要?jiǎng)h除的元素索引
const index = list.findIndex(item => item.id === id)
// 調(diào)用splice刪除
list.splice(index, 1)
return {
resultCode: "1",
messageCode: null,
message: null,
data: 'success'
}
}
},4.保存及編輯接口模擬
{
url: "/user/saveForm",
type: "post",
response: config => {
const {
id
} = config.body
if (id) {
// 關(guān)鍵在于id，其他入?yún)⒉欢噘樖?，格局id找到那條數(shù)據(jù)調(diào)用splice替換
const index = list.findIndex(item => item.id === id)
list.splice(index, 1, config.body)
} else {
// 如果id不存在則在列表添加一條數(shù)據(jù)
list.unshift(
Mock.mock({
id: '@id',
...config.body
})
)
}
return {
resultCode: "1",
messageCode: null,
message: null,
data: 'success'
}
}
},這樣就可以鏈接curd接口模擬，具體mock-server.js的配置可以去問問度娘。注意哦！所有接口使用module.exports導(dǎo)出后，在調(diào)用時(shí)就會(huì)執(zhí)行mock的接口。
。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/128225.html
摘要：想到函數(shù)有延遲網(wǎng)絡(luò)請(qǐng)求稀釋事件延遲執(zhí)行的效果，于是將模板函數(shù)用包裹起來(lái)，如下結(jié)果出現(xiàn)有意思的事情當(dāng)請(qǐng)求比較頻繁，在延遲時(shí)間內(nèi)，本次請(qǐng)求得到的響應(yīng)數(shù)據(jù)是上次請(qǐng)求的結(jié)果。 vue-cli 中使用 Mockjs 詳解 背景 前端在早期jQuery時(shí)代時(shí)，前端功能和后端工程基本上都是合在一起，典型的就是常見的maven工程下面的webapp目錄包含前端各類靜態(tài)資源文件。這個(gè)時(shí)候，我們總是會(huì)遇...
摘要：前言使用可以事先模擬數(shù)據(jù)，前提是和后端約定好了數(shù)據(jù)接口，怎樣的數(shù)據(jù)。其主要功能是基于數(shù)據(jù)模板生成模擬數(shù)據(jù)。攔截并模擬請(qǐng)求。生成規(guī)則是可選的。占位符會(huì)優(yōu)先引用數(shù)據(jù)模板中的屬性。 前言 使用mockjs可以事先模擬數(shù)據(jù)，前提是和后端約定好了數(shù)據(jù)接口，怎樣的數(shù)據(jù)。使用mock就可以生成你要的數(shù)據(jù)了，從而實(shí)現(xiàn)開發(fā)時(shí)前后端分離。 其主要功能是： 基于數(shù)據(jù)模板生成模擬數(shù)據(jù)。 基于HTML模板生成...
摘要：引言前端開發(fā)經(jīng)常需要等待后端的接口，嚴(yán)重影響了開發(fā)效率，我們一般采用方式來(lái)避免這個(gè)問題。可能會(huì)涉及到門技術(shù)，分別是服務(wù)端技術(shù)隨機(jī)生成特定格式數(shù)據(jù)的技術(shù)請(qǐng)求轉(zhuǎn)發(fā)請(qǐng)求攔截。 引言 前端開發(fā)經(jīng)常需要等待后端的接口，嚴(yán)重影響了開發(fā)效率，我們一般采用mock方式來(lái)避免這個(gè)問題。本人參考了大量文章，結(jié)合自己的經(jīng)驗(yàn)，給出自己在mock上的一些理解。 1. 原理 何為mock,我認(rèn)為mock主要就是通...
摘要：一是什么目前的大部分公司的項(xiàng)目都是采用的前后端分離后端接口的開發(fā)和前端人員是同時(shí)進(jìn)行的那么這個(gè)時(shí)候就會(huì)存在一個(gè)問題在頁(yè)面需要使用大量數(shù)據(jù)進(jìn)行渲染生成前后端開發(fā)人員的接口也許并沒有寫完作為前端的我們也就沒有辦法獲取數(shù)據(jù)所以前端工程師就需要自己 showImg(https://segmentfault.com/img/remote/1460000013022563); 一.Mock.js是...
閱讀 566·2023-03-27 18:33
閱讀 755·2023-03-26 17:27
閱讀 656·2023-03-26 17:14
閱讀 608·2023-03-17 21:13
閱讀 541·2023-03-17 08:28
閱讀 1829·2023-02-27 22:32
閱讀 1324·2023-02-27 22:27
閱讀 2207·2023-01-20 08:28
