Node写博客--后台管理功能及界面的搭建

最新推荐文章于 2024-10-28 11:19:07 发布

幽幽幽幽古溪

最新推荐文章于 2024-10-28 11:19:07 发布

阅读量1.3k

点赞数

分类专栏： Node-Blog

本文链接：https://blog.csdn.net/u011693964/article/details/81741943

版权

Node-Blog 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.首先将管理员的进入管理的接口做好，在routers/admin.js中加入

var express = require('express');
var router =express.Router();//Express.js 4.0 有加入一個新的 Router 功能，它就像一個迷你的應用程式，可以讓應用程式內部的路由撰寫更方便、更有彈性。添加非路由中间键

//监听以/admin开头的路由,不需要再写/admin/user了，
// router.get('/user',function(req,res,next) {
//     res.send('User');
// })

//每一个node.js执行文件，都自动创建一个module对象，同时，module对象会创建一个叫exports的属性，初始化的值是 {}
//module.exports属性可以被赋予一个新的值（例如函数或对象）,赋值给 `exports` 不会修改模块，必须使用 `module.exports`
// nodejs模块中的exports对象，你可以用它创建你的模块。例如：（假设这是rocker.js文件）
//
// exports.name = function() {
//     console.log('My name is Lemmy Kilmister');
// };
//
// 在另一个文件中你这样引用
//
// var rocker = require('./rocker.js');
// rocker.name(); // 'My name is Lemmy Kilmister'
// 其实，Module.exports才是真正的接口，exports只不过是它的一个辅助工具。　最终返回给调用的是Module.exports而不是exports。


router.use(function (req,res,next) {
    if(!req.userInfo.isAdmin){
        //如果当前用户是非管理员
        res.send('对不起，只有管理员才可以进入后台管理');
        return;
    }
    next();
});
router.get('/',function (req,res,next) {
    res.render('admin/index',{
        userInfo:userInfo
    });
});



module.exports = router;

2.在view/admin中添加一个index.html，该页面可以参考boostrap中的导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="/public/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="/public/css/bootstrap-theme.min.css" type="text/css"/>
    <script src="/public/js/bootstrap.min.js"></script>
    <script src="/public/js/jquery-1.12.4.min.js"></script>
</head>
<body>
<!--顶部导航-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/admin">后台管理</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">用户管理</a></li>
                <!--<li class="dropdown">-->
                    <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>-->
                    <!--<ul class="dropdown-menu">-->
                        <!--<li><a href="#">Action</a></li>-->
                        <!--<li><a href="#">Another action</a></li>-->
                        <!--<li><a href="#">Something else here</a></li>-->
                        <!--<li role="separator" class="divider"></li>-->
                        <!--<li><a href="#">Separated link</a></li>-->
                        <!--<li role="separator" class="divider"></li>-->
                        <!--<li><a href="#">One more separated link</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{userInfo.username}} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="jumbotron">
        <h1>Hello, {{userInfo.username}}!</h1>
        <p>欢迎进入我的博客后台管理！</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</div>
</body>
</html>

3.导航栏在什么情况下都是一致的，所以我们可以运用模板的一个功能实现它的复用

我们在view/admin文件夹下新建一个layout.html模板，将刚刚在Index.html中的代码拷贝过来，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="/public/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="/public/css/bootstrap-theme.min.css" type="text/css"/>
    <script src="/public/js/bootstrap.min.js"></script>
    <script src="/public/js/jquery-1.12.4.min.js"></script>
</head>
<body>
<!--顶部导航-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/admin">后台管理</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">用户管理</a></li>
               
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{userInfo.username}} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <!--加入模块-->
    {% block main %}{% endblock%}
</div>
</body>
</html>

在index.html加入以下一段代码，调用layout.html中的代码

{%extends 'layout.html' %}
{% block main%}
<div class="jumbotron">
    <h1>Hello, {{userInfo.username}}!</h1>
    <p>欢迎进入我的博客后台管理！</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
{% endblock %}