1.分页主要字段
download : https://www.97yrbl.com/t-1383.html
【体系吃透前端工程化,大厂级实战项目以战带练mkw】分页主要字段包括
pageSize
每页条数、pageNum 第几页、startRow 当前开始页编号、endRow 当前结束页编号、total
总数量。主要是根据前端分页的参数,进行处理后,返回前端正确的数据,其实是一个很常见且简单的功能。但是是非常也是非常重要的。pageSize 每页条数
pageNum第几页
startRow 当前开始页编号
endRow 当前结束页编号
total 总数量
计算 3.startRow 和 endRow
封装成一个函数/* 分页公共函数*/
module.exports = handlePages = (pageNum, pageSize, total) => {
let startRow = total > 0 ? ((pageNum - 1) * pageSize + 1) : 0;
let endRow = pageNum * pageSize <= total ? pageNum * pageSize : total;
return {
pageNum,
pageSize,
recordCounts:total,
startRow,
endRow
}
}
4.接口函数中使用该函数
从前端传参中获取,分页所需要的数据。 let { nickname, name, role, pageSize, pageNum } = ctx.request.body;
//此处进行处理
let pageNum1 = (pageNum - 1) * pageSize
//获取用户信息列表
async getAllUserList(ctx) {
let { nickname, name, role, pageSize, pageNum } = ctx.request.body
let res = []
let pageNum1 = (pageNum - 1) * pageSize
let total = (await User.getAllUserListTotal())[0].recordCounts
if (!nickname && !name && !role) {
res = (await User.getAllUserListNotCond(pageSize, pageNum1))
} else {
res = (await User.getAllUserList(nickname, name, role, pageSize, pageNum1))
}
ctx.body = {
code: 0,
data: res.map(v => {
if (v.password) {
delete v.password
}
return v
}),
//分页所有的参数
...handlePages(pageNum, pageSize, total)
}
}
2.分页中的MySql语句
根据分页查询数据库的数据
//根据分页查询用户列表
async getAllUserListNotCond(pageSize, pageNum) {
return await query(`SELECT * FROM user LIMIT ${pageNum},${pageSize}`)
}
mySql获取数据库数据总条数
//获取用户信息列表的总条数
async getAllUserListTotal() {
return await query(`SELECT COUNT(*) as recordCounts FROM user`)
}
推荐阅读
- 项目开发|用node+WebSocket+MySQL+vue仿做学习通的一些功能(二)(主页的展示)
- 前端|js和vue如何调用百度地图
- 开发工具|小马带你认识前端开发神器WebStorm(WebStorm及Git的相关配置与使用)
- 简单响应式的实现(1)
- JavaScript中集合引用类型就这么点东西
- 前端高效开发必备的 js 库
- java|Spring Boot + Vue 如此强大(你可能想不到的功能!)
- JS的面向对象(理解对象,原型,原型链,继承,类)
- JS几种数组遍历方式以及性能分析对比