Vue3+Nuxt3打造SSR网站应用，0到1实现服务端渲染MKW vue3

1.分页主要字段

download : https://www.97yrbl.com/t-1376.html

分页主要字段包括 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 } }

2.接口函数中使用该函数 【Vue3+Nuxt3打造SSR网站应用，0到1实现服务端渲染MKW】从前端传参中获取，分页所需要的数据。

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) } }

3.分页中的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`) }