Express框架开发接口之实现分页功能

1、是什么？

在我们做数据查询的时候，如果数据量很大，比如几万条数据，放在一个页面显示的话显然不友好，这时候就需要采用分页显示的形式，如每次只显示10条数据
 

要实现分页功能，实际上就是从结果集中显示第110条记录作为第1页，显示第1120条记录作为第2页，以此类推
因此，分页实际上就是从结果集中截取出第M~N条记录

2、实现方法

前端实现分页功能，需要后端返回必要的数据，如总的页数，总的数据量，当前页，当前的数据

{
"totalCount": 1836,   // 总的条数
"totalPages": 92,  // 总页数
"currentPage": 1   // 当前页数
"data": [     // 当前页的数据
{
...
}
]]

后端采用mysql作为数据的持久性存储
下面以用户列表为例：当前数据共有八条

实现

前端向后端发送页面数page以及每页显示数据的数量pageSize，默认情况每条取10条数据，则每一条的数据的起始位置start为

 const startIndex = (page - 1) * pageSize;
        console.log(startIndex);//当page=1时startIndex=0

当我们确定了limit和start值后就可以查询数据库

const sql =`select *from users limit ${pageSize} offset ${start}`

上诉的代码意思是截取从start到start+pageSize之间的数据

//获取所有用户
exports.allUser = (req, res) => {
    (async function () {
        // 先定义获取的参数
        var param = ''
        //   根据请求方法接收params
        if (req.method == "POST") {
            param = req.body
        } else {
            param = req.query || req.param
        }
        console.log(param);
        if (param.page == '' || param.page == null || param.page == undefined) {
            res.send({ status: 1, message: "缺少必传参数page" });
        }
        // 从请求中获取页码和每页数据项数量
        const page = param.page  //页码
        const pageSize = param.pageSize || 5// 默认每页显示 10 条数据

        // 计算查询的起始索引
        const startIndex = (page - 1) * pageSize;
        console.log(startIndex);//当page=1时startIndex=0
        // 查询数据库获取所有用户
        let result = await handleDB(res, "users", "limit", "users数据库查询出错", { startIndex, pageSize });
        // 判断用户列表是否为空，用户为空返回用户列表为空
        if (result.length == 0) return res.send({ stutus: 1, message: '用户列表为空！' })

        // 创建一个新的对象，排除 password 属性
        const dataWithoutPassword = result.map(({ password, ...rest }) => rest);
        // 查询总记录数
        let results = await handleDB(res, "users", "find", "users数据库查询出错",);
        const total = results.length
        res.send({
            status: 0, message: '获取所有用户成功',
            total: total,
            totalPages: Math.ceil(total / pageSize),
            currentPage: page,
            data: dataWithoutPassword,

        });
    })();
}

1. totalPages: 这个属性表示总共有多少页数据。它的计算通常是通过将总记录数 (total) 除以每页显示的记录数 (pageSize) 来得到的，然后使用 Math.ceil 函数向上取整以确保总页数是整数。总页数告诉你有多少页数据可供用户浏览。如果有100条记录，每页显示10条，那么总页数就是10页。
2. currentPage: 这个属性表示当前所处的页数。用户通常能够浏览多个页，这个属性用来标识用户当前正在浏览的页数。例如，如果用户点击了第三页，那么currentPage 就会被设置为3。这对于跟踪用户浏览数据非常有用，以便正确地显示用户所在的位置。
3. total:这个属性表示总共有多少条数据

3、测试

下面数据也是5条，由于窗口可视有限看不到

当前数据3条

4、总结

// 从请求中获取页码和每页数据项数量
        const page = param.page  //页码
        const pageSize = param.pageSize || 5// 默认每页显示 10 条数据

首页要获取到page（页码）和pageSize（每页显示多少条数据）然后根据当前页面的索引page

5、优化

规范接收的page和pageSize参数

接收的page和pageSize参数转化为整数

且page大于等于1

且pageSize大于等于0

//获取所有用户
exports.allUser = (req, res) => {
    (async function () {
        // 先定义获取的参数
        var param = '';
        // 根据请求方法接收params
        if (req.method == "POST") {
            param = req.body;
        } else {
            param = req.query || req.param;
        }
        if (param.page == '' || param.page == null || param.page == undefined) {
            res.send({ status: 1, message: "缺少必传参数page" });
        } else {
            // 从请求中获取页码和每页数据项数量
            const page = parseInt(param.page, 10); // 将page参数解析为整数，使用十进制表示
            const pageSize = parseInt(param.pageSize, 10); // 将pageSize参数解析为整数

            // 验证page和pageSize是否是有效的整数
            if (!Number.isInteger(page) || page < 1) {
                res.send({ status: 1, message: "参数page必须是有效的整数且大于等于1" });
            } else if (!Number.isInteger(pageSize) || pageSize < 0) {
                res.send({ status: 1, message: "参数pageSize必须是有效的整数且大于等于0" });
            } else {
                // 计算查询的起始索引
                const startIndex = (page - 1) * pageSize;
                console.log(startIndex); // 当page=1时startIndex=0
                // 查询数据库获取所有用户
                let result = await handleDB(res, "users", "limit", "users数据库查询出错", { startIndex, pageSize });
                // 判断用户列表是否为空，用户为空返回用户列表为空
                if (result.length == 0) return res.send({ status: 1, message: '用户列表为空！' });

                // 创建一个新的对象，排除 password 属性
                const dataWithoutPassword = result.map(({ password, ...rest }) => rest);
                // 查询总记录数
                let results = await handleDB(res, "users", "find", "users数据库查询出错");
                const total = results.length;
                res.send({
                    status: 0, message: '获取所有用户成功',
                    total: total,
                    totalPages: Math.ceil(total / pageSize),
                    currentPage: page,
                    data: dataWithoutPassword,
                });
            }
        }

    })();
}