管理后台这个是摸索着做的,主要思路是,在user表中给用户多设置一个字段,通过判断字段的值来判断用户的权限,例如1为普通用户可以提问和回答,2为普通管理员可以屏蔽问题,3为超级管理员可以屏蔽问题和给用户安排权限。
这个核心就是对数据库的操作
下面首先管理员登陆页面:
我们这里因为在建站初期没有考虑这一个需求,所以先默认认为admin用户为超级管理员,我们需要用admin注册一下
在views中间添加adminlogin.ejs,内容如下:
<%- include header %>
<div class="container">
<h1>后台管理</h1>
<form action="/adminLogin" method="post">
<fieldset>
<legend>登陆</legend>
<input type="text" name="name" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<button type="submit" class="btn">提交</button>
</fieldset>
</form>
</div>
<%- include footer %>
在路由index.js中修改
app.get('/admin',function(req,res){ });
为:
app.get('/admin',function(req,res){
res.render('adminlogin', {
user:req.session.user,
error: req.flash('error').toString()
});
});
登陆页面如下:
然后是修改登陆的post请求:
修改路由index.js的
app.post('/adminLogin',function(req,res){})
为:
app.post('/adminLogin',function(req,res){
var adminName=req.body.name;
var md5 = crypto.createHash('md5'),
adminPwd = md5.update(req.body.password).digest('hex');
User.superAdmin(adminName,adminPwd,function(info){
if(info.admin=="1"){//超级管理员
res.render('admincon',{
user:req.session.user
});
}else if(info.admin=="2"){//普通管理员
res.render('admincon',{
user:req.session.user
});
}else{
res.redirect('/show');
}
});
});
里面用到了superAdmin函数,我们在user.js中添加
User.superAdmin=function(name,psd,callback){
mongodb.open(function(err, db){
if(err){
return callback(err);
}
db.collection('user', function(err, collection){
if(err){
mongodb.close();
return callback(err);
}
//判断是否是超级管理
if(name=="admin"){
collection.find({ name : 'admin' }).toArray(function(err,items){
if(err) throw err;
mongodb.close();
if(psd==items[0].password){
return callback({admin:"1"});
}else{
return callback({admin:"3"});
}
});
}else{
mongodb.close();
return callback({admin:"3"});
}
});
});
};
在view中添加admincon.ejs 内容如下:
<%- include header %>
<div class="container">
<h1>管理员账号管理</h1>
</div>
<%- include footer %>
此时,用admin账户登录时,能成功跳转到http://localhost:3000/adminLogin 页面,为了安全性,这个页面只能通过登录跳转访问,无法直接访问。
登录错误就跳转到http://localhost:3000/show 页面
下面我们先用管理员账户管理登录用户
首先我们在路由index.js修改
app.get('/admincon',function(req,res){})
为:
app.get('/admincon',function(req,res){
res.redirect('/admin');
});
防止能直接访问,这个入口我们放在登录跳转的地方
然后继续修改
app.post('/adminLogin',function(req,res){})
的内容
修改:
if(info.admin=="1"){//超级管理员
res.render('admincon',{
user:req.session.user
});
}else if(info.admin=="2"){//普通管理员
res.render('admincon',{
user:req.session.user
});
}else{
res.redirect('/show');
}
为:
if(info.admin=="1"){//超级管理员
//获取管理内容
User.getQuestionAdmin(function(data){
res.render('admincon',{
lists:data,
user:req.session.user,
});
});
}else if(info.admin=="2"){//普通管理员
User.getQuestionAdmin(function(data){
res.render('admincon',{
lists:data,
user:req.session.user,
});
});
}else{
res.redirect('/show');
}
我们使用到User.getQuestionAdmin 函数,用户获取管理的内容,
我们继续在user.js中添加
User.getQuestionAdmin=function(callback){
mongodb.open(function(err, db){
if(err){
return callback(err);
}
db.collection('question', function(err, collection){
if(err){
mongodb.close();
return callback(err);
}
//这里我们仅仅查找10个出来,作为示范,
collection.find().limit(10).sort({time:-1}).toArray(function(err,items){
if(err) throw err;
mongodb.close();
return callback(items);
});
});
});
};
修改admincon.ejs的展示内容
<%- include header %>
<div class="container">
<h1>管理员账号管理</h1>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th style="width:10%">用户</th>
<th style="width:5%">ID</th>
<th style="width:20%">提问</th>
<th style="width:30%">问题</th>
<th style="width:23%">回答</th>
<th style="width:7%">操作</th>
</tr>
</thead>
<tbody>
<% lists.forEach(function(list, index){ %>
<% if(list.answer.length>0){%>
<% list.answer.forEach(function(answer, index){
if(list.hide){
%>
<tr>
<td><%= list.name %></td>
<td><%= list._id %></td>
<td><%= list.title %></td>
<td><%= list.askText %></td>
<td><%= answer.answer %></td>
<td><span class="btn btn-danger">屏蔽</span><span class="btn disabled">恢复</span></td>
</tr>
<% }else{ %>
<tr>
<td><%= list.name %></td>
<td><%= list._id %></td>
<td><%= list.title %></td>
<td><%= list.askText %></td>
<td><%= answer.answer %></td>
<td><span class="btn disabled">屏蔽</span><span class="btn btn-success">恢复</span></td>
</tr>
<% }%>
<% })%>
<% }else{
if(list.hide){
%>
<tr>
<td><%= list.name %></td>
<td><%= list._id %></td>
<td><%= list.title %></td>
<td><%= list.askText %></td>
<td uid="false">暂无回答</td>
<td><span class="btn btn-danger">屏蔽</span><span class="btn disabled">恢复</span></td>
</tr>
<% }else{%>
<tr class="warning">
<td><%= list.name %></td>
<td><%= list._id %></td>
<td><%= list.title %></td>
<td><%= list.askText %></td>
<td uid="false">暂无回答</td>
<td><span class="btn disabled">屏蔽</span><span class="btn btn-success">恢复</span></td>
</tr>
<% }%>
<% }%>
<% }) %>
</tbody>
</table>
<form action="/adminchange" method="post" style="display:none">
<input type="text" name="change">
<input type="text" name="id">
<input type="text" name="childId">
<input type="text" name="delAndRe">
</form>
<script>
$(".btn-danger").on("click",function(e){
var change="close",
id=$(e.target).parent().parent().find("td:eq(1)").text(),
childId=$(e.target).parent().parent().find("td:eq(4)").attr("uid")!=="false"?
$(e.target).parent().parent().find("td:eq(4)").text():null;
$("form input:eq(0)").val(change);
$("form input:eq(1)").val(id);
$("form input:eq(2)").val(childId);
$("form input:eq(3)").val("del");
$("form").submit();
});
$(".btn-success").on("click",function(e){
var change="close",
id=$(e.target).parent().parent().find("td:eq(1)").text(),
childId=$(e.target).parent().parent().find("td:eq(4)").attr("uid")!=="false"?
$(e.target).parent().parent().find("td:eq(4)").text():null;
$("form input:eq(0)").val(change);
$("form input:eq(1)").val(id);
$("form input:eq(2)").val(childId);
$("form input:eq(3)").val("re");
$("form").submit();
});
</script>
</div>
<%- include footer %>
登录成功后如下图所示:
在admincon.ejs 的前端我们做了一些处理,我们提交一个隐藏的表单来处理提问是否需要隐藏,
表单的提交地址:“/adminchange”
我们继续增加修改功能,在index.js中
修改
app.post('/adminchange',function(req,res){
});
为:
app.post('/adminchange',function(req,res){
//获取表单提交的信息
var change=req.body.change,
id=req.body.id,
childId=req.body.childId,
delAndRe=req.body.delAndRe
//在数据库中处理
User.adminChange(change,id,childId,delAndRe,function(data){
if(data==1){
User.getQuestionAdmin(function(data){
res.render('admincon',{
lists:data,
user:req.session.user,
});
});
}
});
});
然后我们在user.js中添加
User.adminChange=function(change,id,childId,delAndRe,callback){
mongodb.open(function(err, db){
if(err){
return callback(err);
}
db.collection('question', function(err, collection){
if(err){
mongodb.close();
return callback(err);
}
if(delAndRe=="del"){//del表示屏蔽用户
if(childId==""){//表示这个问题没有被回答
collection.update({'_id':Number(id)},{$set:{hide:false}},function(err,info){
//给这个问题加了一个hide字段false表示隐藏,true表示显示
if(err) throw err;
mongodb.close();
callback(info);//成功!返回插入的用户信息
});
}else{
//表示这个问题被回答了,我这里的逻辑其实有的问题,因为在mongodb存储时没有规划好,所以导致的,我这里当我需要屏蔽一个回答时,把整个提问都屏蔽了,这里大家可以在后面改改,这样就只用屏蔽回复,不影响提问
collection.update({"answer.answer":childId},{$set:{hide:false}},function(err,info){
if(err) throw err;
mongodb.close();
callback(info);//成功!返回插入的用户信息
});
}
}else{
if(childId==""){
collection.update({'_id':Number(id)},{$set:{hide:true}},function(err,info){
if(err) throw err;
mongodb.close();
callback(info);//成功!返回插入的用户信息
});
}else{
collection.update({"answer.answer":childId},{$set:{hide:true}},function(err,info){
if(err) throw err;
mongodb.close();
callback(info);//成功!返回插入的用户信息
});
}
}
});
});
}
好了,这时我们在打开首页,我们的屏蔽的内容就不会在页面显示了。
最后我留了一点内容没有继续开发,大家可以尝试下,就是添加一个超级管理员设置用户是否成为管理员的功能。这个大家可以尝试下,前面我们已经留了管理员权限的判断,这里就是需要在moongodb中判断一下。