当前位置:   article > 正文

nodejs实战案例(Express框架+mongoDB)——(16)——管理后台

nodejs + express+mongodb实现后台管理权限控制

管理后台这个是摸索着做的,主要思路是,在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()

   });

});


登陆页面如下:

30200933_MIRj.jpg

然后是修改登陆的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 %>

登录成功后如下图所示:

30200933_q3KL.jpg


在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中判断一下。


转载于:https://my.oschina.net/u/200898/blog/188980

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/118872
推荐阅读
相关标签
  

闽ICP备14008679号