NodeJS博客实战23_前台博客内容详情页和阅读数处理

版权声明:在那最初的相遇中,我们都曾经为彼此心动过... https://blog.csdn.net/weixin_36185028/article/details/79946208

源码地址:https://github.com/RidingACodeToStray/Nodejs_blog

1.主要功能及实现

1)在前台点击阅读全文跳转到文章详情页面,因此需要在阅读全文按钮添加连接href为/view?contentid={{content.id}}

2)后端根据contentid在数据库中查找对应的文章

3)查找文章的同时就阅读数view自增1并保存

4)前端的头部和右侧信息版面是公共部分,因此抽出来作为layout.html进行渲染

2.相关代码:

routers/main.js

var express = require('express');
var router = express.Router();
var Category = require('../models/Category.js');
var Content = require('../models/Content.js');
var data;
//处理通用的数据
router.use(function(req,res,next){
	data = {
		userInfo:req.userInfo,
		categories:[]
	};
	Category.find().sort({_id:-1}).then(function(categories){
		data.categories = categories;
		next();
	})
})
//首页
router.get('/',function(req,res,next){
	data.category = req.query.category || '';
	data.page = Number(req.query.page) || 1;
	data.limit = 2;
	data.pages = 0;
	data.count = 0;
	var where = {};
	if(data.category){
		where.category = data.category;
	}
	//读取内容
	Content.where(where).count().then(function(count){
		data.count = count;
		//计算总页数向上取整
		data.pages = Math.ceil(data.count / data.limit);
		//page取值不能超过pages,去总页数和page中的最小值
		data.page = Math.min(data.page,data.pages);
		//page取值不能小于1
		data.page = Math.max(data.page,1);
		var skip = (data.page -1 ) * data.limit;

		//读取内容,最新的展示在最前面
		return Content.where(where).find().limit(data.limit).skip(skip).populate(['category','user']).sort({
			addTime:-1
		});
	}).then(function(contents){
		data.contents = contents; //将内容赋值给data属性
		// console.log(data);
		res.render('main/index',data);
	})

})
router.get('/view',function(req,res){
	var contentid = req.query.contentid || '';
	Content.findOne({
		_id:contentid
	}).then(function(content){
		data.content = content;
		content.views ++ ; //阅读量增加
		content.save(); //保存阅读量
		res.render('main/view',data)
	})
})
module.exports = router;

2.views/main/layout.html

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

<head>
    <meta charset="UTF-8">
    <title>博客</title>
    <link rel="stylesheet" type="text/css" href="/public/css/main.css">
    <script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="public/js/index.js"></script>
</head>

<body>
    <div class="wrap">
	    <div class="header">
		    <ul>
		        {% if category == '' %}
		        <li><a href="/" class="focus">首页</a></li>
		        {% else %}
		        <li><a href="/">首页</a></li>
		        {% endif %} {% for cate in categories %} {% if category == cate.id %}
		        <li>
		            <a href="?category={{cate.id}}" class="focus">{{cate.name}}</a>
		        </li>
		        {% else %}
		        <li>
		            <a href="?category={{cate.id}}">{{cate.name}}</a>
		        </li>
		        {% endif %} {% endfor %}
		    </ul>
		</div>
        {% block content %}{% endblock %}
        <div class="info">
            {% if userInfo._id %}
            <div class="showInfo">
                <p class="infoTitle">用户信息</p>
                <div class="name">{{userInfo.username}}
                </div>
                {% if userInfo.isAdmin %}
                <div class="info">你好管理员,欢迎来到博客
                    <a href="/admin">进入管理</a>
                </div>
                {% else %}
                <div class="info">
                    你好,欢迎来到博客
                </div>
                {% endif %}
                <button class="logout">退出</button>
            </div>
            {% else %}
            <div class="registerInfo">
                <form>
                    <p class="infoTitle">注册</p>
                    <div class="inputInfo">
                        <label for="user">用户名</label>
                        <input type="text" name="username" id="user">
                    </div>
                    <div class="inputInfo">
                        <label for="pwd">密码</label>
                        <input type="password" name="pwd" id="pwd">
                    </div>
                    <div class="inputInfo">
                        <label for="rpwd">确认</label>
                        <input type="password" name="rpwd" id="rpwd">
                    </div>
                    <div class="infoBtn">
                        <input type="button" name="" value="注册" class="registerBtn">
                    </div>
                    <div class="infoBtn">
                        <span>已有账号</span>
                        <a href="javascript:void(0)" class="toLogin">马上登录</a>
                    </div>
                    <div class="registerRemind"></div>
                </form>
            </div>
            <div class="hide loginInfo">
                <form>
                    <p class="infoTitle">登录</p>
                    <div class="inputInfo">
                        <label for="user2">用户名</label>
                        <input type="text" name="user2" id="user2">
                    </div>
                    <div class="inputInfo">
                        <label for="pwd2">密码</label>
                        <input type="password" name="pwd2" id="pwd2">
                    </div>
                    <div class="infoBtn">
                        <input type="button" name="" value="登录" class="loginBtn">
                    </div>
                    <div class="infoBtn">
                        <span>还没注册</span>
                        <a href="javascript:void(0)" class="toRegister">马上注册</a>
                    </div>
                    <div class="loginRemind"></div>
                </form>
            </div>
            {% endif %}
            <div>
                <p class="infoTitle">社区</p>
                <ul>
                    <li>
                        <a href="">制度规则</a>
                    </li>
                    <li>
                        <a href="">社区之家</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

views/main/view.html

{% extends 'layout.html' %} {% block content %}
<div style="display: inline-block;vertical-align: top;background-color: #eae3e3;padding: 10px;box-shadow: 5px 5px 5px #c3baba;width: calc(100% - 250px);">
    <h2>{{content.title}}</h2>
            <div>
                <span>
                                <span>作者:</span><a href="">{{content.user.username}}</a>
                </span>
                <span>
                                <span>时间:</span><a href="">{{content.addTime|date('Y-m-d H:i:s',-8*60)}}</a>
                </span>
                <span>
                                <span>阅读:</span><a href="">{{content.views}}</a>
                </span>
                <span>
                                <span>评论:</span><a href="">10</a>
                </span>
            </div>
            <div style="text-align: left;margin-top: 10px;">
                {{content.content}}
            </div>
</div>
{% endblock %}

views/main/index.html

{% extends 'layout.html' %} {% block content %}
<div class="cont">
    <ul>
        {% for content in contents %}
        <li>
            <h2>{{content.title}}</h2>
            <div>
                <span>
								<span>作者:</span><a href="">{{content.user.username}}</a>
                </span>
                <span>
								<span>时间:</span><a href="">{{content.addTime|date('Y-m-d H:i:s',-8*60)}}</a>
                </span>
                <span>
								<span>阅读:</span><a href="">{{content.views}}</a>
                </span>
                <span>
								<span>评论:</span><a href="">10</a>
                </span>
            </div>
            <div class="keyWords">
                {{content.desciption}}
            </div>
            <div class="readAll">
                <button>
                    <a href="/view?contentid={{content.id}}">阅读全文</a>
                </button>
            </div>
        </li>
        {% endfor %}
    </ul>
    <div class="a-page">
        <span>
						{% if  page <= 1 %}
							<span>没有上一页</span> {% else %}
        <a href="?page={{page-1}}&category={{category}}">上一页</a> {% endif %}
        </span>
        {% if pages > 0 %}
        <span class="a-pageInfo">
							{{page}}/{{pages}}
						</span> {% endif %}
        <span>
						{% if  page >= pages %}
							<span>没有下一页</span> {% else %}
        <a href="?page={{page+1}}&category={{category}}">下一页</a> {% endif %}
        </span>
    </div>
</div>
{% endblock %}
阅读更多
换一批

没有更多推荐了,返回首页