Mock分页
前后端分离开发时,一般会使用mock。
因为mock是用node运行的,行为与调用后台一致。
这样,不需要等后台写好,只要有接口文档,前端可以自己调接口,这样联调时遇到的问题会少很多,可以加快整体开发效率。
而mock作为模拟数据自然也可以做分页,用Js的方法即可。
export default {
'POST /api/xxxx/getDYDJ': (req, res) => {
console.log(req.body)
res.send({
status: 200,
message: 'ok',
"data": {
"total": "14",
"curPage": req.body.curPage ? req.body.curPage : 1,
"rows": getAllDYDJ(req.body)
}
});
}
}
const citys = ['A', 'B', 'C', 'D, 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']
const dydj = ['35kV', '110kV', '220kV', '330kV', '500kV']
const getDYDJ = () => {
const result = []
const base = {
"a": "1",
"b": "0%",
"c": "2",
"d": "0%",
"e": "3",
"f": "0%",
"g": "4",
"h": "0%",
"i": "0"
}
dydj.forEach((item, index) => {
const obj = {
...base,
id: index + 1,
name: item
}
result.push(obj)
})
return result
}
const getAllDYDJ = (body) => {
const curPage = parseInt(body.curPage)
const pageSize = parseInt(body.pageSize)
const indexArr = [(curPage-1)*pageSize, curPage*pageSize]
const result = []
citys.forEach((item, index) => {
const obj = {
orgId: index + 1,
seq: index + 1,
orgName: item,
dydj: getDYDJ()
}
result.push(obj)
})
return result.slice(indexArr[0], indexArr[1])
}
只要传入正确的分页参数就可以分页了。
Mock分页的更多相关文章
- vue+mock.js+element-ui模拟数据搞定分页
效果如图: 前提是搭好vue前端框架,npm install mockjs引入mock.js 当前页全部代码如下,其他有关element-ui的引入未提到,仅作参考用 <!-- 用户管理 --& ...
- Adding Pagination 添加分页
本文来自: http://www.bbsmvc.com/MVC3Framework/thread-206-1-1.html You can see from Figure 7-16 that all ...
- json-server mock数据
前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...
- Spring Boot(九)Swagger2自动生成接口文档和Mock模拟数据
一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...
- 前端使用Mock服务Json-server
前言 由于Jaguar服务目前还没有任何的API输出,一边写前端功能,一边写后端API显然不利于整体的项目进展.所以我计划先定义好接口,然后将所有的API都先部署在一个Mock服务器上,等前端界面和功 ...
- mock基本使用
**一.mock解决的问题** 开发时,后端还没完成数据输出,前端只好写静态模拟数据.数据太长了,将数据写在js文件里,完成后挨个改url.某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼.想要尽可 ...
- SSM_CRUD新手练习(7)Spring单元测试分页请求
好久没写这个系列博客了是因为本人去公司实习去了,公司用的是Spring+SpingMvc+Hibernate现在有时间了不管怎么样继续把这个项目写完. 因为机器的原因,我的环境变成了IDEA+orac ...
- 基于Vue的简单通用分页组件
分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...
- ant design pro (十一)advanced Mock 和联调
一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...
随机推荐
- 7000 字说清楚 HashMap,面试点都在里面了
我是风筝,公众号「古时的风筝」,一个兼具深度与广度的程序员鼓励师,一个本打算写诗却写起了代码的田园码农! 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在 ...
- django 报错处理汇总
运行 manage.py task时 ,makemigrations抛出以下错误, django.db.utils.OperationalError: (1045, "Access deni ...
- PHP字符串函数总结
字符串函数 addcslashes — 为字符串里面的部分字符添加反斜线转义字符 addslashes — 用指定的方式对字符串里面的字符进行转义 bin2hex — 将二进制数据转换成十六进制表示 ...
- python+opencv图像增强——拉普拉斯
img = cv2.imread(r'F:\python\work\cv_learn\clipboard.png',1) cv2.imshow('input',img) kernel = np.arr ...
- LQR算法如何跟随变化的期望状态
开门见山,通过LQR的能量函数可以看出,LQR算法是将状态量控制到零(关于能量函数请看我的随笔:LQR要点),但实际控制中我们希望状态量能够跟随期望值 下面将会解决如何用LQR算法跟随变化的期望值: ...
- 学习Java的Day04
知识点 接口: 1.接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的”类”. 2. 接口中只允许出现抽象方法,不能出现非抽象方法 3. 接口的源文件也是java文件,编译后的文件也是. ...
- ArcServer服务通过python备份,到另一台机器还原服务
通过python可以快速把服务器上所有的服务都备份下来(只能备份服务,无法备份缓存文件),然后可以把备份文件考到需要新装的服务器上进行还原.还原时所有的Server缓存.输出等文件夹地址都是按源备份地 ...
- c++ 宏定义调用不定参数的函数
假设有一下函数 void Logging(int nLevel, const char* szFormat, ...); 则宏定义如下 #define LOG(FCFL) Logging##FCFL ...
- Netty 源码解析(三): Netty 的 Future 和 Promise
今天是猿灯塔“365篇原创计划”第三篇. 接下来的时间灯塔君持续更新Netty系列一共九篇 Netty 源码解析(一): 开始 Netty 源码解析(二): Netty 的 Channel 当前:Ne ...
- 线程基础知识01-Thread类,Runnable接口
常见面试题:创建一个线程的常用方法有哪些?Thread创建线程和Runnable创建线程有什么区别? 答案通常集中在,继承类和实现接口的差别上面: 如果深入问一些问题:1.要执行的任务写在run()方 ...