传统的分页（不重要；渲染模板）

最新推荐文章于 2021-08-24 12:01:34 发布

予倾

最新推荐文章于 2021-08-24 12:01:34 发布

阅读量108

点赞数

分类专栏：数据库前端显示，分页的实现

本文链接：https://blog.youkuaiyun.com/QZ9420/article/details/110335329

版权

数据库前端显示，分页的实现专栏收录该内容

6 篇文章

订阅专栏

index：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin:0; padding: 0;}
        li {list-style: none;}
        body {background: #eee;}
        .wrapper {background: #fff;width: 970px; margin:20px auto; padding: 15px;}
        h1 {text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 20px;}
        li {margin:20px 0; border-bottom: 1px dotted #eee; padding-bottom: 20px;}
        p { line-height: 25px;}
    </style>
</head>
<body>
    <div class="wrapper">
        <h1>新闻列表(传统分页)<script>document.write(new Date().toLocaleString())</script></h1>
        <ul>
            <% news.forEach(item=>{  %>
                <li>
                    <h2><a href="#"><%= item.title %></a></h2>
                    <p class="time"><%= item.time %></p>
                    <p class="summary"><%= item.summary %></p>
                </li>
            <% }) %>
        </ul>
        <div class="footer">
        //“？”表示查询数据
            <p>总共有<%= total %>条新闻，每页显示<%= pageSize %>条，当前是<%= page %>/<%= size %>页
                <% if(page == 1){ %>
                    上一页
                <% }else{ %>
                    <a href="?page=<%= page*1 - 1 %>">上一页</a>
                <% } %>

                <% if(page == size){ %>
                    下一页
                <% }else{ %>
                    <a href="?page=<%= page*1 + 1 %>">下一页</a>
                <% } %>
            </p>
        </div>
    </div>
</body>

# JS：

let express = require("express");
let path = require("path");
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

let app = express();

app.get("/",(req,res)=>{
    let page = req.query.page || 1; // page表示当前是第几页
    // page如果小于等于0
    (page <= 0) && (page = 1)
    /*if(page <= 0){
        page = 1;
    }*/

    // console.log(page)
    let pageSize = 3; // 每页显示多少条
    let offset = (page-1)*pageSize;
    MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
        if (err) throw err;
        var dbo = db.db("news");
        dbo.collection("newslist").find({}).skip(offset).limit(pageSize).toArray(function(err, result) {
            if (err) throw err;
            // console.log(result); // 获取每一页的数据
            dbo.collection("newslist").count().then(result2=>{
                // result2表示一共有多少条数据
                let total = result2;
                let size = Math.ceil(total / pageSize)
                res.render(path.resolve(__dirname,"./views/index.ejs"),{
                    news:result,
                    total, // 总共多少条数据
                    pageSize, // 每页显示多少条
                    page, // 当前是第几页
                    size, // 一菜有多少页
                })
            });
            db.close();
        });
    });

})

app.listen(3000,()=>{
    console.log("3000 ok~")
})

/*
    模板中都需要什么数据？
    1）新闻数据  news  来自于数据库
    2）统计一共有多少条新闻  tatal
    3）每页显示多少条数据 pageSize
    4）当前是第几页   page
    6）一共有多少页 size


    limit(3)  一次查询出3条数据
    skip(3)   跳过第3条数据

    pageSize = 3; // 每页显示3条
    page = 1;   limit(3)     skip(0)
    page = 2;   limit(3)     skip(3)
    page = 3;   limit(3)     skip(6)
    page = 4;   limit(3)     skip(9)
    page = 5;   limit(3)     skip(12)
    ....
    page = n;   limit(3)     skip((n-1)*3)
* */