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

标签: NodeJS博客
4人阅读 评论(0) 收藏 举报
分类:

源码地址: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 %}
查看评论

NodeJS实战

node实战计划
  • Phil_Young
  • Phil_Young
  • 2016-03-16 20:26:00
  • 243

8 - 博客文章详情页

首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容。现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样...
  • u014792107
  • u014792107
  • 2017-05-20 11:55:00
  • 486

基于nodejs的开源博客0.1发布了!!!!

基于nodejs实现的开源博客系统,主要用到的技术: 前端:自己写html+css+js 后端: nodejs, express 模板引擎:handlebars 数据库: mongodb 0.1版...
  • happyAnger6
  • happyAnger6
  • 2017-09-15 23:28:52
  • 352

NodeJS博客实战21_前台博客内容展示和分页

源码地址:https://github.com/RidingACodeToStray/Nodejs_blog1.主要功能1)前台首页获取博客的所有内容信息,包括时间,用户,页数,分类等内容信息,并按照...
  • weixin_36185028
  • weixin_36185028
  • 2018-04-15 00:29:56
  • 5

Express + MongoDB 搭建一个多人博客(node.js实战)

搭建多人博客的前置条件 Node.js: 6.9.1 MongoDB: 3.2.10 Express: 4.14.0 4.2.1 目录结构 我们停止 supervisor 并删除 my...
  • zhalcie2011
  • zhalcie2011
  • 2017-01-17 16:27:45
  • 6102

实战开发:nodejs(express)+mongodb+........简单博客系统代码

简单代码范例
  • liyeford
  • liyeford
  • 2016-06-11 23:47:06
  • 592

利用nodejs express mysql +boostrap构建一个博客

学习了一周的node.js 发现因为版本的原因,很多例子都无法使用,准备使用nodejs + express +mysql + boostrap构建一个简单博客。 一、前期准备: 1、自行安装node...
  • sindlly
  • sindlly
  • 2016-09-27 16:03:53
  • 1351

Django 学习小组:博客开发实战第五周教程 —— 实现评论功能

通过前四周的时间我们开发了一个简单的个人 Blog,前几期教程地址:第一周:Django 学习小组:博客开发实战第一周教程 —— 编写博客的 Model 和首页面第二周:Django 学习小组:博客开...
  • u014792107
  • u014792107
  • 2016-06-25 10:04:15
  • 1364

用Nodejs完成自己的个人博客

开始这个个人小项目已经有一段时间了,一直断断续续的,直到今天总算是初见雏形,所以就很想和大家分享一下实现的过程。首先这个的初衷就是学习nodejs,看了几天的书,自己就照着书上的代码来敲,可是由于自己...
  • Picking_up_stones
  • Picking_up_stones
  • 2017-06-03 14:06:20
  • 4093

博客前台模板

从 https://github.com/PomeloFoundation/YuukoBlog 这个博客上扒下来的一个静态页,当成自己的博客前台页面 下载:http://www.ni...
  • niunan
  • niunan
  • 2017-02-25 15:25:48
  • 667
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 20万+
    积分: 4613
    排名: 7969
    博客专栏
    最新评论