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

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

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

NodeJS博客实战25_前台博客评论分页展示

源码地址:https://github.com/RidingACodeToStray/Nodejs_blog1.主要功能1)每次打开文章加载评论2)若该文章没有评论则展示没有评论的信息3)对于上一页和...
  • weixin_36185028
  • weixin_36185028
  • 2018-04-15 14:32:06
  • 6

一个前端写的php博客系统2--前台展示+后台登录

部署的演示地址我的博客地址: http://www.weber.pub 可以查看到具体的站点展示github 地址:https://github.com/baiyuming/byblog前台首页展示首...
  • canglingyue
  • canglingyue
  • 2016-08-01 14:29:11
  • 2732

NodeJS实战

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

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
  • 6101

NodeJS博客实战22_前台博客分类展示

源码地址:https://github.com/RidingACodeToStray/Nodejs_blog1.主要功能点及实现:1)点击首页头部分类分别展示该分类下的文章,在头部a标签中添加href...
  • weixin_36185028
  • weixin_36185028
  • 2018-04-15 13:10:20
  • 5

NodeJS博客实战24_前台博客评论展示

源码地址:https://github.com/RidingACodeToStray/Nodejs_blog1.主要功能以及实现1)登录和未登录在评论区给出提示,使用模板条件判断,对未登录的给出登录提...
  • weixin_36185028
  • weixin_36185028
  • 2018-04-15 13:17:37
  • 6

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

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

nodejs实战express笔记之实现用户和文章页面

概念 用户页面:单击某个用户链接名,跳转到:域名/u/用户,并列出该用户的所有文章 文章页面:同理,某个文章的页面当访问这些页面的时候,会从路径中提取用户名,时间,标题等查询数据库并返回查询的文章信息...
  • doujiao_pengpeng
  • doujiao_pengpeng
  • 2015-10-21 17:25:29
  • 949

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

源码地址:https://github.com/RidingACodeToStray/Nodejs_blog1.主要功能及实现1)在前台点击阅读全文跳转到文章详情页面,因此需要在阅读全文按钮添加连接h...
  • weixin_36185028
  • weixin_36185028
  • 2018-04-15 13:10:08
  • 4

纯js实现分页 原理:所有数据已加载好 js通过遍历部分显示 实现分页效果

废话不多说,直接上代码! html> head> meta charset='utf-8'> script type="text/javascript" src="page.js">sc...
  • mzd8341
  • mzd8341
  • 2017-09-18 20:28:06
  • 435
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 20万+
    积分: 4613
    排名: 7969
    博客专栏
    最新评论