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

- 日理万妓 2022-05-27 08:19 643阅读 0赞

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

1.主要功能

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

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

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

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

2.主要代码

1）routers/main.js

  1. var express = require('express');
  2. var router = express.Router();
  3. var Category = require('../models/Category.js');
  4. var Content = require('../models/Content.js');
  5. //首页
  6. router.get('/',function(req,res,next){
  7.     var data = {
  8.         userInfo:req.userInfo,
  9.         categories:[],
  10.         page:Number(req.query.page) || 1,
  11.         limit:3,
  12.         pages:0,
  13.         count:0
  14.     };
  15.     //读取所有的分类信息
  16.     Category.find().sort({_id:-1}).then(function(categories){
  17.         data.categories = categories;
  18.         //读取内容总记录数
  19.         return Content.count();
  20.     }).then(function(count){
  21.         data.count = count;
  22.         //计算总页数向上取整
  23.         data.pages = Math.ceil(data.count / data.limit);
  24.         //page取值不能超过pages，去总页数和page中的最小值
  25.         data.page = Math.min(data.page,data.pages);
  26.         //page取值不能小于1
  27.         data.page = Math.max(data.page,1);
  28.         var skip = (data.page -1 ) * data.limit;
  29.         //读取内容,最新的展示在最前面
  30.         return Content.find().sort({_id:-1}).limit(data.limit).skip(skip).populate(['category','user']).sort({
  31.             addTime:-1
  32.         });
  33.     }).then(function(contents){
  34.         data.contents = contents; //将内容赋值给data属性
  35.         // console.log(data);
  36.         res.render('main/index',data);
  37.     })
  39. })
  41. module.exports = router;

2）views/main/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>博客</title>
  6.     <link rel="stylesheet" type="text/css" href="/public/css/main.css">
  7.     <script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>
  8.     <script type="text/javascript" src="public/js/index.js"></script>
  9. </head>
  10. <body>
  11.     <div class="wrap">
  12.         <div class="header">
  13.             <ul>
  14.                 <li><a href="">首页</a></li>
  15.                 {% for category in categories %}
  16.                 <li><a href="/">{
  17.    {category.name}}</a></li>
  18.                 {% endfor %}
  19.             </ul>
  20.         </div>
  21.         <div class="body">
  22.             <div class="cont">
  23.                 <ul>
  24.                     {% for content in contents %}
  25.                     <li>
  26.                         <h2>{
  27.    {content.title}}</h2>
  28.                         <div>
  29.                             <span>
  30.                                 <span>作者：</span><a href="">{
  31.    {content.user.username}}</a>
  32.                             </span>
  33.                             <span>
  34.                                 <span>时间：</span><a href="">{
  35.    {content.addTime|date('Y-m-d H:i:s',-8*60)}}</a>
  36.                             </span>
  37.                             <span>
  38.                                 <span>阅读：</span><a href="">{
  39.    {content.views}}</a>
  40.                             </span>
  41.                             <span>
  42.                                 <span>评论：</span><a href="">10</a>
  43.                             </span>
  44.                         </div>
  45.                         <div class="keyWords">
  46.                             {
  47.    {content.desciption}}
  48.                         </div>
  49.                         <div class="readAll"><button>阅读全文</button></div>
  51.                     </li>
  52.                     {% endfor %}
  53.                 </ul>
  54.                 <div class="a-page">
  55.                     <span>
  56.                     {% if  page <= 1 %}
  57.                         <span>没有上一页</span>
  58.                     {% else %}
  59.                         <a href="?page={
  60.    {page-1}}">上一页</a>
  61.                     {% endif %}
  62.                     </span>
  63.                         <span class="a-pageInfo">
  64.                             {
  65.    {page}}/{
  66.    {pages}}
  67.                         </span>
  68.                     <span>
  69.                         {% if  page >= pages %}
  70.                             <span>没有下一页</span>
  71.                         {% else %}
  72.                             <a href="?page={
  73.    {page+1}}">下一页</a>
  74.                         {% endif %}
  75.                     </span>
  76.                 </div>
  77.             </div>
  78.             <div class="info">
  79.                 {% if userInfo._id %}
  80.                 <div class="showInfo">
  81.                     <p class="infoTitle">用户信息</p>
  82.                     <div class="name">{
  83.    {userInfo.username}}
  84.                     </div>
  85.                     {% if userInfo.isAdmin %}
  86.                     <div class="info">你好管理员，欢迎来到博客
  87.                     <a href="/admin">进入管理</a>
  88.                     </div>
  89.                     {% else %}
  90.                     <div class="info">
  91.                     你好，欢迎来到博客
  92.                     </div>
  93.                     {% endif %}
  94.                     <button class="logout">退出</button>
  95.                 </div>
  96.                 {% else %}
  97.                 <div class="registerInfo">
  98.                     <form>
  99.                         <p class="infoTitle">注册</p>
  100.                         <div class="inputInfo">
  101.                             <label for="user">用户名</label>
  102.                             <input type="text" name="username" id="user">
  103.                         </div>
  104.                         <div class="inputInfo">
  105.                             <label for="pwd">密码</label>
  106.                             <input type="password" name="pwd" id="pwd">
  107.                         </div>
  108.                         <div class="inputInfo">
  109.                             <label for="rpwd">确认</label>
  110.                             <input type="password" name="rpwd" id="rpwd">
  111.                         </div>
  112.                         <div class="infoBtn">
  113.                             <input type="button" name="" value="注册" class="registerBtn">
  114.                         </div>
  115.                         <div class="infoBtn">
  116.                             <span>已有账号</span>
  117.                             <a href="javascript:void(0)" class="toLogin">马上登录</a>
  118.                         </div>
  119.                         <div class="registerRemind"></div>
  120.                     </form>
  121.                 </div>
  122.                 <div class="hide loginInfo">
  123.                     <form>
  124.                         <p class="infoTitle">登录</p>
  125.                         <div class="inputInfo">
  126.                             <label for="user2">用户名</label>
  127.                             <input type="text" name="user2" id="user2">
  128.                         </div>
  129.                         <div class="inputInfo">
  130.                             <label for="pwd2">密码</label>
  131.                             <input type="password" name="pwd2" id="pwd2">
  132.                         </div>
  133.                         <div class="infoBtn">
  134.                             <input type="button" name="" value="登录" class="loginBtn">
  135.                         </div>
  136.                         <div class="infoBtn">
  137.                             <span>还没注册</span>
  138.                             <a href="javascript:void(0)" class="toRegister">马上注册</a>
  139.                         </div>
  140.                         <div class="loginRemind"></div>
  141.                     </form>
  142.                 </div>
  143.                 {% endif %}
  144.                 <div>
  145.                     <p class="infoTitle">社区</p>
  146.                     <ul>
  147.                         <li>
  148.                             <a href="">制度规则</a>
  149.                         </li>
  150.                         <li>
  151.                             <a href="">社区之家</a>
  152.                         </li>
  153.                     </ul>
  154.                 </div>
  155.             </div>
  156.         </div>
  157.     </div>
  158. </body>
  159. </html>

发表评论

表情：
评论列表 （有 0 条评论，643人围观）

还没有评论，来说两句吧...

相关阅读