Vue+Mockjs模擬curd實現(xiàn)接口請求

3403771864 發(fā)布于2022-10-27 21:47 / 447人閱讀

　　當你遇見前端頁面開發(fā)完成，可后端接口還沒好，I這樣就直接無法聯(lián)調(diào)，這時候我們用到mock數(shù)據(jù)。

　　先說說curd接口模擬

　　注：這邊可以和后端先約定好接口路徑以及入?yún)⒎祬⒌淖侄危苊舛涡薷?/p>

　　1.我們先看看下面代碼，在安裝，新建js文件，在文件中導入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
　　})
　　// 模擬分頁
　　const pageList = mockData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
　　// 返回數(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找到需要刪除的元素索引
　　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) {
　　// 關鍵在于id，其他入?yún)⒉欢噘樖觯窬謎d找到那條數(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導出后，在調(diào)用時就會執(zhí)行mock的接口。

。

云服務器 GPU云服務器模擬HTTP請求模擬POST請求如何模擬webrtc請求 php模擬網(wǎng)頁請求

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/128225.html

vue-cli 中使用 Mockjs 詳解

摘要：想到函數(shù)有延遲網(wǎng)絡請求稀釋事件延遲執(zhí)行的效果，于是將模板函數(shù)用包裹起來，如下結(jié)果出現(xiàn)有意思的事情當請求比較頻繁，在延遲時間內(nèi)，本次請求得到的響應數(shù)據(jù)是上次請求的結(jié)果。 vue-cli 中使用 Mockjs 詳解背景前端在早期jQuery時代時，前端功能和后端工程基本上都是合在一起，典型的就是常見的maven工程下面的webapp目錄包含前端各類靜態(tài)資源文件。這個時候，我們總是會遇...

developerworks 2019-05-29 17:04 評論0 收藏0
vue+vuecli+webpack中使用mockjs模擬后端數(shù)據(jù)

摘要：前言使用可以事先模擬數(shù)據(jù)，前提是和后端約定好了數(shù)據(jù)接口，怎樣的數(shù)據(jù)。其主要功能是基于數(shù)據(jù)模板生成模擬數(shù)據(jù)。攔截并模擬請求。生成規(guī)則是可選的。占位符會優(yōu)先引用數(shù)據(jù)模板中的屬性。前言使用mockjs可以事先模擬數(shù)據(jù)，前提是和后端約定好了數(shù)據(jù)接口，怎樣的數(shù)據(jù)。使用mock就可以生成你要的數(shù)據(jù)了，從而實現(xiàn)開發(fā)時前后端分離。其主要功能是：基于數(shù)據(jù)模板生成模擬數(shù)據(jù)。基于HTML模板生成...

since1986 2019-08-21 17:13 評論0 收藏0
淺談前端mock

摘要：引言前端開發(fā)經(jīng)常需要等待后端的接口，嚴重影響了開發(fā)效率，我們一般采用方式來避免這個問題。可能會涉及到門技術，分別是服務端技術隨機生成特定格式數(shù)據(jù)的技術請求轉(zhuǎn)發(fā)請求攔截。引言前端開發(fā)經(jīng)常需要等待后端的接口，嚴重影響了開發(fā)效率，我們一般采用mock方式來避免這個問題。本人參考了大量文章，結(jié)合自己的經(jīng)驗，給出自己在mock上的一些理解。 1. 原理何為mock,我認為mock主要就是通...

elina 2019-08-23 15:24 評論0 收藏0
讓前端攻城師獨立于后端進行開發(fā): Mock.js

摘要：一是什么目前的大部分公司的項目都是采用的前后端分離后端接口的開發(fā)和前端人員是同時進行的那么這個時候就會存在一個問題在頁面需要使用大量數(shù)據(jù)進行渲染生成前后端開發(fā)人員的接口也許并沒有寫完作為前端的我們也就沒有辦法獲取數(shù)據(jù)所以前端工程師就需要自己 showImg(https://segmentfault.com/img/remote/1460000013022563); 一.Mock.js是...

Fundebug 2019-08-22 14:06 評論0 收藏0