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

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

1.主要功能

1)前台首页获取博客的所有内容信息,包括时间,用户,页数,分类等内容信息,并按照创建时间越晚越靠前的顺序返回给前台

2)前台对数据进行模板渲染

3)前台使用模板引擎进行分页

使用到的都是之前用过的一些功能点

2.主要代码

1)routers/main.js

var express = require('express');
var router = express.Router();
var Category = require('../models/Category.js');
var Content = require('../models/Content.js');
//首页
router.get('/',function(req,res,next){
	var data = {
		userInfo:req.userInfo,
		categories:[],
		page:Number(req.query.page) || 1,
		limit:3,
		pages:0,
		count:0
	};
	//读取所有的分类信息
	Category.find().sort({_id:-1}).then(function(categories){
		data.categories = categories;
		//读取内容总记录数
		return Content.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.find().sort({_id:-1}).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);
	})

})

module.exports = router;

2)views/main/index.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>
				<li><a href="">首页</a></li>
				{% for category in categories %}
				<li><a href="/">{{category.name}}</a></li>
				{% endfor %}
			</ul>
		</div>
		<div class="body">
			<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>阅读全文</button></div>
						
					</li>
					{% endfor %}
				</ul>
				<div class="a-page">
					<span>
					{% if  page <= 1 %}
						<span>没有上一页</span>
					{% else %}
						<a href="?page={{page-1}}">上一页</a>
					{% endif %}
					</span>
						<span class="a-pageInfo">
							{{page}}/{{pages}}
						</span>
					<span>
						{% if  page >= pages %}
							<span>没有下一页</span>
						{% else %}
							<a href="?page={{page+1}}">下一页</a>
						{% endif %}
					</span>
				</div>
			</div>
			<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>
	</div>
</body>
</html>
阅读更多
版权声明:在那最初的相遇中,我们都曾经为彼此心动过... https://blog.csdn.net/weixin_36185028/article/details/79945972
文章标签: NodeJS博客
个人分类: NodeJS博客实战
所属专栏: NodeJS博客实战
想对作者说点什么? 我来说一句

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

关闭
关闭
关闭