Node.js博客系统--22.前台内容分页展示

最新推荐文章于 2023-07-24 15:56:48 发布

jiaojsun

最新推荐文章于 2023-07-24 15:56:48 发布

阅读量441

点赞数

分类专栏： Node.js博客系统

本文链接：https://blog.csdn.net/jiaojsun/article/details/84481418

版权

Node.js博客系统专栏收录该内容

27 篇文章 6 订阅

订阅专栏

首先写相关逻辑

具体代码如下所示

var express = require('express');
var router = express.Router();
var Category = require("../models/category");
var Content = require("../models/content");

router.get('/', function(req, res, next) {
    var data = {
        userInfo: req.userInfo,
        categories: [],

        page: Number(req.query.page || 1),
        count: 0,
        limit: 5,
        pages: 0
    };

    // 读取所有分类信息
    Category.find().then(function(categories) {
        data.categories = categories;
        return Content.count();

    }).then(function(count) {
        data.count = count;
        // 计算总页数
        data.pages = Math.ceil(data.count / data.limit);
        // 取值不能超过pages
        data.page = Math.min(data.page, data.pages);
        // 取值不能小于1
        data.page = Math.max(data.page, 1);
        var skip = (data.page - 1) * data.limit;
        return Content.find().limit(data.limit).skip(skip).populate(['category', 'user']).sort({
            addTime: -1
        });
    }).then(function(contents) {
        data.contents = contents;
        console.log(data);
        res.render("main/index", data);
    });
});

module.exports = router;

接着写ui部分

这两个文件里面的代码有所变化

index.html

{% extends 'layout.html' %} {% block content %}
<ul class="articleWrap">
    {% for content in contents %}
    <li>
        <h2>{{content.title}}</h2>
        <div class="title-info">
            <span>作者:{{content.user.username}}</span>
            <span>时间:{{content.addTime|date('Y年m月d日 H:i:s', -8*60)}}</span>
            <span>阅读:{{content.views}}</span>
            <span>评论:{{content.comments.length}}</span>
        </div>
        <div class="content">
            {{content.description}}
        </div>
        <button><a target="_blank" href="/view?contentid={{content.id}}">阅读详情</a></button>
    </li>
    {% endfor %}
</ul>
<ul class="mainIndexPagination">
    <li>
        {% if page
        <=1 %} <span>没有上一页了</span>
            {% else %}
            <a href="/?category={{category}}&page={{page-1}}">上一页</a> {% endif %}
    </li>
    <li>{{page}}/{{pages}}</li>
    <li>
        {% if page>= pages %}
        <span>没有下一页了</span> {% else %}
        <a href="/?category={{category}}&page={{page+1}}">下一页</a> {% endif %}
    </li>
</ul>
{% endblock %}

layout.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>前端圈 - 路虽远，无所畏</title>
    <link rel="stylesheet" type="text/css" href="/public/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" href="/public/bootstrap.min.css" />
    <script src="/public/js/jquery-3.2.1.min.js"></script>
    <script src="/public/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="public/main.css" />
    <script src="public/js/index.js"></script>
</head>

<body>
    <div style="width: 100%; height: 100%">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    {% if category == '' %}
                    <a class="navbar-brand focus" href="/">首页</a> {% else %}
                    <a class="navbar-brand " href="/">首页</a> {% endif %}
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        {% for cate in categories %}
                        <li>
                            {% if category == cate.id %}
                            <a href="/?category={{cate.id}}" class="focus">{{cate.name}}</a> {% else %}
                            <a href="/?category={{cate.id}}">{{cate.name}}</a> {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </nav>
        <div class="wrap">
            <div class="fl">
                {% block content%}{% endblock %}
            </div>
            <div class="fr">
                {% if userInfo._id %}
                <div id="userInfo" class="userForm">
                    <div>用户信息</div>
                    <ul>
                        <li class="username">用户名: {{userInfo.username}}</li>
                        {% if userInfo.isAdmin %}
                        <li class="info">你好，管理员 <a target="_blank" href="./admin">进入后台管理系统</a></li>
                        {% else %}
                        <li class="info">欢迎登录</li>
                        {% endif %}
                        <li id="logout"><a href="javascript:void(0)">退出</a></li>
                    </ul>
                </div>

                {% else %}
                <div id="loginBox" class="userForm">
                    <div>用户登录</div>
                    <ul>
                        <li><span>用户名:</span><input class="form-control" type="text" name="username" /></li>
                        <li><span>密码:</span><input class="form-control" type="password" name="password" /></li>
                        <li><button type="button" class="btn btn-primary">登录</button></li>
                        <li>还没账号？<a href="javascript:void(0)">立即注册</a></li>
                        <li id="loginInfo"></li>
                    </ul>
                </div>

                <div id="registerBox" class="userForm" style="display: none">
                    <div>新用户注册</div>
                    <ul>
                        <li><span>用户名:</span><input class="form-control" type="text" name="username" /></li>
                        <li><span>密码:</span><input class="form-control" type="password" name="password" /></li>
                        <li><span>确认密码:</span><input class="form-control" type="password" name="repassword" /></li>
                        <li><button type="button" class="btn btn-primary">注册</button></li>
                        <li>已经注册？<a href="javascript:void(0)">现在登录</a></li>
                        <li id="messageShow"></li>
                    </ul>
                </div>

                {% endif %}
            </div>
        </div>
    </div>
</body>

</html>

看一下效果

jiaojsun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Node.js博客系统--22.前台内容分页展示

首先写相关逻辑具体代码如下所示var express = require('express');var router = express.Router();var Category = require("../models/category");var Content = require("../models/content");router.get('/', functi...
复制链接

扫一扫

专栏目录