NodeJS博客实战12_后台管理功能和界面搭建

源码地址:点击打开链接

管理员登录后点击可以进入管理页面,管理页面位于views/admin文件夹下;

1)当非管理员用户通过url强制进入管理员页面时,需给出对应的提示并阻止其进入;

在views/admin文件夹下新建index.html文件,在routers/admin.js的路由配置中,对于非管理员给出提示,对于管理员则调用模板文件并返回信息

routers/admin.js:

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

router.use(function(req,res,next){
	if(!req.userInfo.isAdmin){
		res.send('对不起,只有管理员才可以进入后台管理');
	}
	next();
})

router.get('/',function(req,res,next){
	res.render('admin/index',{
		userInfo:req.userInfo
	});
})

module.exports = router;
 

2)进入管理员页面之后,提供了对应的展示信息,并将后台返回的userInfo对应信息展示上:


3)当点击后台管理页面上面的不同选项卡时,下面页面应展示不同的信息,可以使用swig的模板功能将头部作为公共部分提取出来,在每个模板页面中引入

在views/admin新建layout.html作为共模板,使用block模板语法引入main欢迎页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="/public/css/admin.css">
	<script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="public/js/admin.js"></script>
</head>
<body>
	<div class="a-wrap">
		<div>
			<ul class="a-header">
				<li class="a-item">
					<a href="/admin">后台管理</a>
				</li>
				<li class="a-item">
					<a href="">用户管理</a>
				</li>
				<li class="a-user">
					<span>{{userInfo.username}}</span>
					<span><a href="">退出</a></span>
				</li>
			</ul>
		</div>
		<div class="a-body">
			{% block main %}{% endblock %}
		</div>
	</div>
</body>
</html>

将views/admin/index,html修改为欢迎页面:

{% extends 'layout.html' %}

{% block main %}
	<p>你好,<span>{{userInfo.username}}</span></p>
	<div>欢迎进后台管理系统</div>
{% endblock %}
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值