Node.js + Express + mongodb 的博客项目之博客内容的前台展示（八）

后端 / Node.js / 博客实战系列
5 分钟 读完 (大约 775 个字)

前言

前台内容的展示，是将博客的文章内容从数据库中查询出来，再将数据绑定给模板引擎，由模板引擎渲染出来。由于博客首页的数据是需要分页展示的所以就需要调用之前自己定义的的博客分页处理模块 /my_modules/pagination.js ，但在此之前得先将博客的文章分类信息从数据库中查询出来，在查询博客分类信息的回调函数中来调用 pagination.js 渲染内容。

首页路由修改

由前端使用 GET 方式向后端传递用户当前点击的文章分类的 ID ，后端根据文章分类 ID 的不同而从数据库中查询出相应的博客内容。
修改首页的路由处理文件 /router/main/main.js ，修改为如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// 引入相关模块
const express = require("express");
const categoryModel = require("../models/category");
const contentModel = require("../models/content");
// 引入自定义的分页渲染模块
const pagination = require("../my_modules/pagination");

// 实例化Router对象
const router = express.Router();

// 首页路由配置
router.get("/", (req, res) => {
    // 定义一个变量用来存放传递给模板的其他信息
    let other = {};
    // 分类查询条件
    let where = {};
    // 接收前端传递过来的需要查询分类的id
    if (req.query.categoryId) {
        other.categoryId = req.query.categoryId;
        where.category = req.query.categoryId;
    }

    // 从数据库中查询分类信息
    categoryModel.find({}, (err, categories) => {
        if (!err) {
            // 如果不出错
            other.categories = categories;
            // 调用分页渲染模块渲染内容
            pagination({
                // 每页显示的条数
                limit: 10,
                // 需要操作的数据库模型
                model: contentModel,
                // 需要控制分页的url
                url: "/",
                // 渲染的模板页面
                ejs: "main/index",
                // 查询的条件
                where: where,
                // 给模板绑定参数的名称
                res: res,
                req: req,
                populate: ["category", "author"],
                // 其他数据
                other: other
            });
        } else {
            throw err;
        }
    });
});

// 将其暴露给外部使用
module.exports = router;

博客首页模板视图的修改

修改 /views/main/index.ejs 为如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--引用bootstrap样式-->
  <link rel="stylesheet" href="/public/css/bootstrap.min.css">
  <title>TFLIN'BLOG</title>
</head>
<body>
  <!-- 页头 -->
  <header>
    <header>
      <nav class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">TFL'BLOG</a>
        </div>
        <div class="container">
          <ul class="nav navbar-nav">
              <% if (!other.categoryId) {%>
                <li  class="active"><a href="/">首页</a></li>
              <% } else {%>
                <li><a href="/">首页</a></li>
              <% } %>
              <% for (let i = 0, len = other.categories.length; i < len; i++) {%>
                <% if (other.categoryId === other.categories[i].id) {%>
                  <li class="active"><a href="/?categoryId=<%= other.categories[i].id %>"><%= other.categories[i].name %></a></li>
                <% } else {%>
                  <li><a href="/?categoryId=<%= other.categories[i].id %>"><%= other.categories[i].name %></a></li>
                <% } %>
              <% } %>
          </ul>
        </div>
      </nav>
    </header>
  </header>
  <!-- 主体 -->
  <div class="container">
    <!-- 内容部分 -->
    <div class="col-md-8">
      <% for(let i = 0, len = docs.length; i < len; i++) { %>
        <div class="well">
          <h3><%=docs[i].title%></h3>
          <p><%=docs[i].description%></p>
          <a href="javascript:;" class="btn btn-info">阅读全文</a>
          <span class="text-info pull-right">阅读量：<%=docs[i].views%> | 时间：<%=docs[i].addTime%> | 作者:<%=docs[i].author.username%> | 分类:<%=docs[i].category.name%></span>
        </div>
      <% } %>
        <!-- 分页 -->
        <%- include("../pagination") %>
    </div>
    <!-- 登录、注册、用户面板部分 -->
    <div class="col-md-4">
      <%if (!userInfo.userid) {%>
      <!-- 登录面板 -->
      <div id="login">
        <h2>登录</h2>
        <div class="input-group">
  			  <span class="input-group-addon">用户</span>
  			  <input type="text" class="form-control" name="username" placeholder="请输入用户名">
  		  </div>
        <br>
        <div class="input-group">
          <span class="input-group-addon">密码</span>
          <input type="password" class="form-control" name="password" placeholder="请输入密码">
        </div>
        <br>
        <button type="button" name="button" class="btn btn-primary form-control"  id="login-btn">登录</button>
        <br><br>
        <a href="javascripts:;" class="col-md-offset-4">没有账号？点击注册</a>
        <div class="alert alert-success alert-dismissable hide" role="alert">
          <button class="close" type="button">×</button>
          <span>恭喜您操作成功！</span>
        </div>
      </div>
      <!-- 注册面板 -->
      <div id="reg"  class="hide">
        <h2>注册</h2>
        <div class="input-group">
  			  <span class="input-group-addon">用户名称</span>
  			  <input type="text" class="form-control" name="username" placeholder="请输入用户名">
  		  </div>
        <br>
        <div class="input-group">
          <span class="input-group-addon">输入密码</span>
          <input type="password" class="form-control" name="password" placeholder="请输入密码">
        </div>
        <br>
        <div class="input-group">
          <span class="input-group-addon">确认密码</span>
          <input type="password" class="form-control" name="repassword" placeholder="请再次输入密码">
        </div>
        <br>
        <button type="button" name="button" class="btn btn-primary form-control" id="reg-btn">注册</button>
        <br><br>
        <a href="javascripts:;" class="col-md-offset-4">已有账号？点击登录</a>
        <!-- 警告框 -->
        <div class="alert alert-success alert-dismissable hide" role="alert">
          <button class="close" type="button">×</button>
          <span>恭喜您操作成功！</span>
        </div>
      </div>
      <%} else {%>
      <!-- 用户面板 -->
      <div id="user-info">
        <div class="panel panel-primary">
        	<div class="panel-heading">用户面板</div>
          <div class="panel-body">
            <%if (userInfo.isadmin) {%>
            <h3>欢迎尊贵的管理员，<%=userInfo.username%>!</h3>
            <p>
              <a href="/admin" class="btn btn-primary form-control">进入控制台</a>
            </p>
            <%} else {%>
            <h3>欢迎您，<%=userInfo.username%>！</h3>
            <%}%>
            <p>
              <button type="button" name="button" id="logout" class="btn btn-danger form-control">注销</button>
            </p>
          </div>
        </div>
      </div>
      <%}%>
    </div>
  </div>
  <script src="/public/js/3.3.1-jquery-min.js"></script>
  <script src="/public/js/bootstrap.min.js"></script>
  <script src="/public/js/main.js"></script>
</body>
</html>

测试

在管理员控制台，多添加几篇不同分类的文章，然后返回博客首页进行测试
前台展示测试

  Express, Node.js, 实战
Node.js + Express + mongodb 的博客项目之博客文章内容详情界面及文章评论（九）
Node.js + Express + mongodb 的博客项目之博客内容的后台管理（七）
PS: 最近接入了 gitTalk , 也可以手动提交 issues 进行讨论，我会在第一时间进行回复。
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×