Vue+Mockjs模拟curd实现接口请求

3403771864 发布于2022-10-27 21:47 / 248人阅读

　　当你遇见前端页面开发完成，可后端接口还没好，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的接口。

。

服务器托管海外云主机模拟HTTP请求模拟POST请求如何模拟webrtc请求 php模拟网页请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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