NodeJS博客实战22_前台博客分类展示_nodejs实现前台分类-CSDN博客

本文链接：https://blog.csdn.net/weixin_36185028/article/details/79946095

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

1.主要功能点及实现：

1）点击首页头部分类分别展示该分类下的文章，在头部a标签中添加href的category信息作为参数传到后端

2）后端接收category和page参数作为查询条件

3）使用模板语法处理前台分类展示的高亮状态

4）每个分类的分页传参加上category条件

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,
		category:req.query.category || '',
		categories:[],
		page:Number(req.query.page) || 1,
		limit:2,
		pages:0,
		count:0
	};
	var where = {};
	if(data.category){
		where.category = data.category;
	}
	//读取所有的分类信息
	Category.find().sort({_id:-1}).then(function(categories){
		data.categories = categories;
		//读取内容总记录数
		return 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);
	})

})

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>
				{% 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>
		<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}}&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>
			<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>