NodeJS实战利用Express&MongoDB搭建博客（4）后台框架搭建

最新推荐文章于 2022-03-23 14:21:29 发布

cellinlab

最新推荐文章于 2022-03-23 14:21:29 发布

阅读量501

点赞数

分类专栏： NodeJS WebGIS 后端文章标签：后台框架搭建 Node实战 Express实战 MongoDB实战博客后台

本文链接：https://blog.csdn.net/funkstill/article/details/87861552

版权

NodeJS 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

后端

17 篇文章 0 订阅

订阅专栏

WebGIS

10 篇文章 0 订阅

订阅专栏

登录状态

cookies

app.js

//加载cookies模块
var Cookies = require('cookies');
//设置cookie
app.use(function (req,res,next) {
    req.cookies = new Cookies(req,res);
    //解析登录用户的cookie信息
    req.userInfo = {};
    if(req.cookies.get('userInfo')){
        try{
            req.userInfo = JSON.parse(req.cookies.get('userInfo'));
        }catch (e) {

        }
    }
    next();
});

/routers/api.js

/**
 * 登录
 */
router.post('/user/login',function (req,res) {
    var username = req.body.username;
    var password = req.body.username;

    if(username==''||password==''){
        responseData.code = 1;
        responseData.message = '用户名或密码不能为空';
        res.json(responseData);
        return;
    }
    //查询数据库
    User.findOne({
        username:username,
        password:password
    }).then(function (userInfo) {
        if(!userInfo){
            responseData.code = 2;
            responseData.message = '用户名或密码错误';
            res.json(responseData);
            return;
        }
        //登陆成功
        responseData.message = '登录成功';
        responseData.userInfo = {
            _id:userInfo._id,
            username:userInfo.username
        };
        req.cookies.set('userInfo',JSON.stringify({
            _id:userInfo._id,
            username:userInfo.username
        }));
        res.json(responseData);
        return;
    });
});

退出

/public/js/index.js

//退出
$('#logout').on('click', function() {
    $.ajax({
        url: '/api/user/logout',
        success: function(result) {
            if (!result.code) {
                window.location.reload();
            }
        }
    });
})

/views/api.js

/**
 * 退出
 * @type {Router|router}
 */
router.get('/user/logout',function (req,res) {
    req.cookies.set('userInfo',null);
    res.json(responseData);
});

新增用户类型

/schemas/users.js

var mongoose = require('mongoose');

//用户数据结构
module.exports = new mongoose.Schema({
    //用户名
    username:String,
    //密码
    password:String,
    //用户类型
    isAdmin:{
        type:Boolean,
        default:false
    }
});

app.js

var User = require('./models/User');

/.../
//设置cookie
app.use(function (req,res,next) {
    req.cookies = new Cookies(req,res);
    //解析登录用户的cookie信息
    req.userInfo = {};
    if(req.cookies.get('userInfo')){
        try{
            req.userInfo = JSON.parse(req.cookies.get('userInfo'));

            //获取当前登录用户类型
            User.findById(req.userInfo._id).then(function (userInfo) {
                req.userInfo.isAdmin = Boolean(userInfo.isAdmin);
                next();
            })
        }catch (e) {
            next();
        }

    }else {
        next();
    }
});

后台管理

/routers/admin.js

var express = require('express');
var router = express.Router();

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:req.userInfo
    })
});

module.exports = router;

/admin/index.js

<!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/jquery-1.12.4.min.js"></script>
    <script src="/public/js/bootstrap.min.js"></script>
</head>
<body>
<!--顶部导航-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="/admin">后台管理</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <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><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
    <div class="jumbotron">
        <h1>Hello, {{userInfo.username}}!</h1>
        <p>欢迎进入我的博客后台管理！</p>
    </div>
</div>
</body>
</html>

使用模板

将/admin/index.html剪切至/admin/layout.html,将/admin/index.html设为

{% extends 'layout.html' %}
{% extends 'layout.html' %}
{% block %}
<div class="jumbotron">
    <h1>Hello, {{userInfo.username}}!</h1>
    <p>欢迎进入我的博客后台管理！</p>
</div>
{% endblock %}

/admin/layout.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/jquery-1.12.4.min.js"></script>
    <script src="/public/js/bootstrap.min.js"></script>
</head>
<body>
<!--顶部导航-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="/admin">后台管理</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <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><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
    {%block main%}{%endblock%}
</div>
</body>
</html>

cellinlab

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
NodeJS实战利用Express&MongoDB搭建博客（4）后台框架搭建

登录状态 cookies app.js//加载cookies模块var Cookies = require('cookies');//设置cookieapp.use(function (req,res,next) { req.cookies = new Cookies(req,res); //解析登录用户的cookie信息 req.userI...
复制链接

扫一扫