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

2019独角兽企业重金招聘Python工程师标准>>>

管理后台这个是摸索着做的，主要思路是，在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中判断一下。

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