Node寫部落格--後臺管理功能及介面的搭建

幽幽幽幽古溪發表於2018-08-16

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 %}

 

相關文章