Vue+Mockjs模擬curd實現接口請求

3403771864 發布于2022-10-27 21:47 / 437人閱讀

　　當你遇見前端頁面開發完成，可后端接口還沒好，I這樣就直接無法聯調，這時候我們用到mock數據。

　　先說說curd接口模擬

　　注：這邊可以和后端先約定好接口路徑以及入參返參的字段，避免二次修改

　　1.我們先看看下面代碼，在安裝，新建js文件，在文件中導入mock.js，模擬列表數據

　　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 => {
　　// 拿到入參
　　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)
　　// 返回數據
　　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
　　// 根據id找到需要刪除的元素索引
　　const index = list.findIndex(item => item.id === id)
　　// 調用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，其他入參不多贅述，格局id找到那條數據調用splice替換
　　const index = list.findIndex(item => item.id === id)
　　list.splice(index, 1, config.body)
　　} else {
　　// 如果id不存在則在列表添加一條數據
　　list.unshift(
　　Mock.mock({
　　id: '@id',
　　...config.body
　　})
　　)
　　}
　　return {
　　resultCode: "1",
　　messageCode: null,
　　message: null,
　　data: 'success'
　　}
　　}
　　},

　　這樣就可以鏈接curd接口模擬，具體mock-server.js的配置可以去問問度娘。注意哦！所有接口使用module.exports導出后，在調用時就會執行mock的接口。

。

云服務器 GPU云服務器模擬HTTP請求模擬POST請求如何模擬webrtc請求 php模擬網頁請求

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128225.html

vue-cli 中使用 Mockjs 詳解

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

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

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

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

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

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

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

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