前后交互--创建一个属于自己的博客网站(三）_搭建简单的交互式网站 csdn-CSDN博客

本文链接：https://blog.csdn.net/weixin_46610818/article/details/116088778

读取和展示用户信息

接下来我们要实现用户界面的分页功能，我们希望在展示数据时，不完全展示，即分页显示。这样做的目的是当我们数据库中数据量较大时，若全部读取展示，将耗费大量时间，用户体验不佳，我们可以通过限制每一页的数据查询量来提高运行效率。

思路：首先获取数据库中数据的条数count,将条数除以每页我们想要显示的数据条数pagesize，向上取整后即为页数，即total = Math.ceil(conunt / pageSize)。
其次是页码的获取，我们可以通过get请求参数得到页码，利用页码，我们可以控制查询跳过之前页码查询的数据，跳过的数据量的计算公式为：(page-1)*pageSize

代码实现：

admin.get('/user', async (req, res) => {
    //获取页码
    let page=req.query.page
    //设置一页显示的数据量
    let pageSize=6
    //查询用户总数
    let conunt = await user.find().countDocuments({})
    //总页数
    let total = Math.ceil(conunt / pageSize)
    //数据查询的起点
    let start=(page-1)*pageSize
    let users = await user.find().limit(6).skip(start)
    
    res.render('admin/admin', {
        users: users,
        total:total,
        page:page
    })
})

页面渲染

在模板中我们拿到到传过来总页数，通过总页数，动态生成页码元素

//获取页码列表
let ul=document.querySelector('.pagination')
//动态生成页码
for( let i=1;i<{{total}};i++){
    let li=ul.children[1].cloneNode(true)
    li.children[0].innerText=i+1
    li.children[0].href='/admin/user?page='+(i+1)
    ul.insertBefore(li,ul.lastElementChild)
    //高亮显示当前页面的页码
    if((i+1)=={{page}}){
        li.children[0].style.backgroundColor='#E6E3E5'
    }
}