node实现数据分页（两种）

ゞ浴缸里的玫瑰 2023-05-22 22:03 5阅读 0赞

## 分页 ##

分页在数据较多的项目中是必不可少的，对于没有可视化开发环境的我们必须掌握手动分页方法。  
好了装不下去啦，开始吧。分页方法有很多，在此介绍两种，希望对大家有帮助

*  使用经典方法分页（数据库查询时传入页码）  
    1，先看看分页前的准备工作（直接上代码吧，注释里都有）  
    代码块

// 引入express框架
    const express = require('express');
    //引入mongoose第三方模块
    const mongoose = require('mongoose');
    //引入用户集合
    const {  User } = require('./model/user');
    //引入模板引擎
    const template = require('art-template');
    //引入路径模块拼接模板引擎路径
    const path = require('path');
    //搭建网站服务器
    const app = express();
    
    //配置模板引擎
    app.engine('art', require('express-art-template'));
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'art');
    //连接数据库
    mongoose.connect('mongodb://localhost/blog', {  useNewUrlParser: true, useUnifiedTopology: true })
        .then(() => console.log('数据库连接成功'))
        .catch(err => console.log('数据库连接失败'))
    
    app.get('/admin', async(req, res) => { 
    
        //接收客户通过按钮页传过来的参数
        let page = req.query.page;
        //定义每页数据数
        let pageSize = 2;
        //数据总条数
        let count = await User.countDocuments({ });
        //总页数(Math.ceil向上取整)
        let total = Math.ceil(count / pageSize);
        //开始查询页数
        let start = (page - 1) * pageSize;
    
        //limit(限制查询数量，传入页面的数据数量)，skip(跳过多少条数据，传入显示数据的开始位置)
        const users = await User.find({ }).limit(pageSize).skip(start);
        //渲染模板
        res.render('mongooseSizePage', { 
            users: users,
            total: total,
            page: page
        });
    })
    
    //监听端口
    app.listen(3000);
    console.log('服务器启动成功，端口3000');

这是在express框架下配置的服务器，并进行了模板渲染。手动定义分页功能涉及的各个属性值，然后传入模板  
2，模板内容

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>数据分页显示</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            
            table { 
                margin: 0 auto;
                border: 1px solid black;
            }
            
            table td { 
                height: 30px;
                width: 200px;
                border: 1px solid #ccc;
                text-align: center;
                line-height: 30px;
            }
            
            .page { 
                list-style: none;
                width: 600px;
                height: 30px;
                margin: 0 auto;
                text-align: center;
            }
            
            .page li { 
                float: left;
                height: 100%;
                width: 100px;
            }
        </style>
    </head>
    
    <body>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>密码</th>
                </tr>
            </thead>
            <tbody>
            { { each users}}
                <tr>
                    <td>{ { $value.username}}</td>
                    <td>{ { $value.email}}</td>
                    <td>{ { $value.password}}</td>
                </tr>
            { { /each}}
            </tbody>
        </table>
        <ul class="page">
            <li><a href="/admin?page={ {page - 1}}">上一页</a></li>
            <% for(var i = 1 ; i<total; i++) { %>
            <li><a href="/admin?page=<%= i %>">{ { i}}</a></li>
            <% }%>
            <li><a href="/admin?page={ {page - 0 + 1}}">下一页</a></li>
        </ul>
    </body>
    
    </html>

模板为自己为实现功能临时写的，丑是丑了点，但功能都还在（哈哈哈）  
3，效果展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]  
这是第一页（地址栏内传入page=1成功）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]  
这是第二页（page=2）

*  使用第三方模块分页（mongoose-sex-page）  
    1，第三方，顾名思义先安装呀（哈哈）  
    2，核心代码（细节在注释）

//引入分页模块
    const pagination = require('mongoose-sex-page');
    app.get('/admin', async(req, res) => { 
    
        //接收客户通过按钮页传过来的参数
        let page = req.query.page;
        //利用模块实现分页功能
        //size 指定每页显示数据条数
        //display 指定客户端显示的页码数量
        //exec 向数据库发送查询请求
        const users = await pagination(User).find().page(page).size(2).display(2).exec();
        //渲染模板
        res.render('mongooseSizePage', { 
            users: users
        });
    })

（1）让我们来康康它接受的返回值（不渲染页面，直接响应客户端users）  
![在这里插入图片描述][20200418125626577.PNG_pic_center]  
可以看出它返回一个对象，page：1，size：2（自定义传入）；total为数据库数据总数；records为查询到的两条数据，用数组显示（两条是因为size为2），pages：3，总页数；display显示的页码(自定义传入)  
（2）模板内容

<table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>密码</th>
                </tr>
            </thead>
            <tbody>
            { { each users.records}}
                <tr>
                    <td>{ { $value.username}}</td>
                    <td>{ { $value.email}}</td>
                    <td>{ { $value.password}}</td>
                </tr>
            { { /each}}
            </tbody>
        </table>
        <ul class="page">
            <li><a href="/admin?page={ {users.page - 1}}">上一页</a></li>
            { { each users.display}}
            <li><a href="/admin?page={ {$value}}">{ { $value}}</a></li>
            { { /each}}
            <li><a href="/admin?page={ {users.page - 0 + 1}}">下一页</a></li>
        </ul>

3，结果展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 2]  
这是第二页（page=2）display显示的页码为1,2  
![在这里插入图片描述][20200418130358151.PNG_pic_center]  
这是第三页（page=3）display显示的页码为2,3（display定义显示的页码个数，一直显示两个页码（此处display=2））

OVER  
**冲冲冲**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]: /images/20230521/704d218099ba4317bc9c3eca29cbbd0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230521/e7b038d812804475b230314443664058.png
[20200418125626577.PNG_pic_center]: /images/20230521/4591e2478ea64ed68c167d9599250f32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230521/0db27e69f7e5439ebeae45ca7762742b.png
[20200418130358151.PNG_pic_center]: /images/20230521/0e52dff51cac492aac8339aa5a7841cb.png