Node.js + Express + mongodb 的博客项目之后台管理界面及用户管理（五）

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

前言

前面的几篇博文中，基本实现了博客的登录注册，及区分管理员账户和普通账户。在本节中，将搭建管理员的后台管理页面，还有对注册用户的管理。

后台管理页面

管理员用户登录之后，可以进入后台管理页面控制台，后台管理界面的路由处理全都放在 /routes/admin.js 中，在进入后天管理界面中会有一个中间件来验证当前用户是否是管理员。
首先在 app.js 中添加如下代码进行路由文件处理：

1
2
// 所有"/admin"的url，都由./routes/admin.js文件进行处理
app.use("/admin", require("./routes/admin.js"));

后台管理界面的静态模板

在视图文件夹 /views 中新建一个 ejs 模板文件 /views/admin/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
<!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>控制台</title>
</head>
<body>
  <header>
    <nav class="navbar navbar-default navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/admin">后台管理</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="/admin/user">用户管理</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      分类管理
                      <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                      <li><a href="/admin/category">分类首页</a></li>
                      <li><a href="/admin/category/add">添加分类</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      内容管理
                      <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                      <li><a href="/admin/content">内容首页</a></li>
                      <li><a href="/admin/content/add">添加内容</a></li>
                  </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav pull-right">
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <%=userInfo.username%>
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                      <li><a href="/">返回主页</a></li>
                      <li class="divider"></li>
                      <li><a href="javascript:;" id="logout">退出</a></li>
                  </ul>
              </li>
            </ul>
        </div>
      </div>
    </nav>
  </header>
  <div class="container-fluid">
    <div class="jumbotron">
      <h1>Hello, <%=userInfo.username%></h1>
      <p>欢迎进入后台管理界面</p>
      <p><a class="btn btn-primary btn-lg" href="/admin/content/add" role="button">立即开始</a></p>
    </div>
  </div>

  <script src="/public/js/3.3.1-jquery-min.js"></script>
  <script src="/public/js/bootstrap.min.js"></script>
</body>
</html>

后台路由文件

此时后台的视图文件有了，我们就到 admin.js 中去渲染它，admin.js 的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 引入相关模块
const express = require("express");
const userModel = require("../models/user");

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

// 后台首页路由
router.get("/", (req, res, next) => {
    // 渲染后台模板页面
    console.log("dd");
    res.render("admin/index", {
        userInfo: req.userInfo
    });
});

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

然后重启服务器，前往浏览器进行测试：
后台界面
此时虽然可以进入管理员界面，但并没有对用户的身份进行相应的验证，非管理员的用户也可以在地址栏中输入 /admin 进入后台管理界面如果所示：
后台漏洞
所以我们要对用户的身份进行验证，非管理员的用户不允许访问 /admin 相关的路由，在路由文件 admin.js 中添加如下代码对用户身份进行验证：

1
2
3
4
5
6
7
8
9
10
11
// 进行管理员验证
router.use((req, res, next) => {
    if (req.userInfo.isadmin) {
        // 如果当前登录用户是管理员
        // 则继续向下一个中间件执行
        next();
    } else {
        // 不是管理员
        res.render("无权限！");
    }
});

重启服务器进行验证：
漏洞测试
到此，由管理员进入后台界面的部分就基本上处理完了。

用户管理

用户管理主要就是在服务器查询出所有用户的信息，然后在将数据发送给前端去进行相应的展示。在本项目中，用户管理界面界面的路由设计为 GET /admin/user ，目前功能设计就将数据库中所有注册的用户信息展示出来，并未对其进行更多的更能设计，后续会对其增加增删改功能的实现。
在 /routes/admin.js 中添加用户管理的路由：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 用户管理首页
router.get("/user", (req, res, next) => {
    // 从数据库中查询所有注册用户
    userModel.find({}, (err, users) => {
        if (!err) {
            // 渲染用户管理模板
            res.render("admin/user/index", {
                userInfo: req.userInfo,
                users: users
            });
        } else {
            // 抛出错误
            throw err;
        }
    });
});

然后新建一个用户管理的 ejs 模板文件 /views/user/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
<!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>控制台</title>
</head>
<body>
  <header>
    <nav class="navbar navbar-default navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/admin">后台管理</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="/admin/user">用户管理</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      分类管理
                      <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                      <li><a href="/admin/category">分类首页</a></li>
                      <li><a href="/admin/category/add">添加分类</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      内容管理
                      <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                      <li><a href="/admin/content">内容首页</a></li>
                      <li><a href="/admin/content/add">添加内容</a></li>
                  </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav pull-right">
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <%=userInfo.username%>
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                      <li><a href="/">返回主页</a></li>
                      <li class="divider"></li>
                      <li><a href="javascript:;" id="logout">退出</a></li>
                  </ul>
              </li>
            </ul>
        </div>
      </div>
    </nav>
  </header>
  <div class="container-fluid">
    <div class="jumbotron">
      <h1>Hello, <%=userInfo.username%></h1>
      <p>欢迎进入后台管理界面</p>
      <p><a class="btn btn-primary btn-lg" href="/admin/content/add" role="button">立即开始</a></p>
    </div>
  </div>

  <script src="/public/js/3.3.1-jquery-min.js"></script>
  <script src="/public/js/bootstrap.min.js"></script>
</body>
</html>

重启服务器进入浏览器中管理员账户登陆过后点击用户管理进行测试，发现测试所有的注册用户都已经展示出来了
用户管理

  Express, Node.js, 实战
Node.js + Express + mongodb 的博客项目之前端ejs模块化及博客分类管理、分页功能实现（六）
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

×