前后端分离开发时,一般会使用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分页的更多相关文章

  1. vue+mock.js+element-ui模拟数据搞定分页

    效果如图: 前提是搭好vue前端框架,npm install mockjs引入mock.js 当前页全部代码如下,其他有关element-ui的引入未提到,仅作参考用 <!-- 用户管理 --& ...

  2. Adding Pagination 添加分页

    本文来自: http://www.bbsmvc.com/MVC3Framework/thread-206-1-1.html You can see from Figure 7-16 that all ...

  3. json-server mock数据

    前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...

  4. Spring Boot(九)Swagger2自动生成接口文档和Mock模拟数据

    一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...

  5. 前端使用Mock服务Json-server

    前言 由于Jaguar服务目前还没有任何的API输出,一边写前端功能,一边写后端API显然不利于整体的项目进展.所以我计划先定义好接口,然后将所有的API都先部署在一个Mock服务器上,等前端界面和功 ...

  6. mock基本使用

    **一.mock解决的问题** 开发时,后端还没完成数据输出,前端只好写静态模拟数据.数据太长了,将数据写在js文件里,完成后挨个改url.某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼.想要尽可 ...

  7. SSM_CRUD新手练习(7)Spring单元测试分页请求

    好久没写这个系列博客了是因为本人去公司实习去了,公司用的是Spring+SpingMvc+Hibernate现在有时间了不管怎么样继续把这个项目写完. 因为机器的原因,我的环境变成了IDEA+orac ...

  8. 基于Vue的简单通用分页组件

    分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...

  9. ant design pro (十一)advanced Mock 和联调

    一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...

随机推荐

  1. GitHub 热点速览 Vol.25:距离优雅编程你差个它

    作者:HelloGitHub-小鱼干 摘要:如何优雅地夸一个程序员呢?vscode-rainbow-fart 作为一个彩虹屁的项目,深得程序员心,能在你编程时疯狂称赞你的除了你自己,还有它.除了鼓励之 ...

  2. 入门大数据---Spark累加器与广播变量

    一.简介 在 Spark 中,提供了两种类型的共享变量:累加器 (accumulator) 与广播变量 (broadcast variable): 累加器:用来对信息进行聚合,主要用于累计计数等场景: ...

  3. vue全家桶(1)

    1.环境搭建 1.1.脚手架搭建 1.1.1什么是脚手架 百度搜索一下脚手架长什么样子,它们是这样的: 从百度百科抄过来一段话: 脚手架是为了保证各施工过程顺利进行而搭设的工作平台.如果明白了脚手架在 ...

  4. Oracle数据库中,误删除或者修改数据恢复方法

    在我们实际工作中,误删除或者修改Oracle数据库中的数据,怎么办呢?这里给大家分享一种解决办法.假如你误操作的时间不超过30分钟(数据库默认的回滚保持段里的数据时间,可以在pl/sql执行窗口按ct ...

  5. 缺少对公共可见类型或成员的XML注释

    最近突然心血来潮,想清理下代码,结果看到了一堆这样的警告——缺少对公共可见类型或成员“XXX”的 XML 注释: 其实要想取消上面的警告,仅仅需要在项目属性里找到生成页签里的”错误和警告“项,在禁止显 ...

  6. .NET 开源工作流: Slickflow流程引擎高级开发(七)--消息队列(RabbitMQ)的集成使用

    前言:工作流流程过程中,除了正常的人工审批类型的节点外,事件类型的节点处理也尤为重要.比如比较常见的事件类型的节点有:Timer/Message/Signal等.本文重点阐述消息类型的节点处理,以及实 ...

  7. 洛谷 P1215 【[USACO1.4]母亲的牛奶 Mother's Milk】

    这道题\(DFS\)就好了,六种情况,\(ab,ac,ba,bc,ca,cb\),我们直接枚举就可.什么?这样不会结束?用一个\(vis\)数组判断走过没有就可以了.最后排序输出即可. \(code: ...

  8. ant design pro---ProTable关闭Table上的提示信息

    toolBarRender={false} tableAlertRender={false}

  9. C#模拟HTTP协议请求

    1       前言 http协议详解参考HTTP协议. WEB常用Get和Post请求. 地址栏参数:url为www.viwofer.com?id=12&name=viwofer则id=12 ...

  10. 硬刚 lodash 源码之路,compact & concat

    前置 本篇随笔包含 _.compact 和 _.concat 及其依赖的工具函数. 你可能需要一些 JavaScript 基础知识才能看懂一些没有注释的细节. compact _.compact(ar ...