Node.js Express博客项目实战 之 评论管理

查看功能:

在视图views中新建文件夹comment用来存放评论管理的页面:

当点击侧边栏的评论管理,因此需要路由的跳转,在后台路由中新建comment.js用来实现评论管理所需要的路由:

在使用该路由之前需要对该路由进行注册:

// 评论管理
let commentRouter = require('./admin/comment.js');
router.use('/comment',commentRouter);

在评论管理的路由中进行书写加载页面的代码,并展示相关数据:

 1 // 展示评论管理
 2 
 3 router.get("/",function(req,res,data){
 4     // 执行sql语句
 5     mysql.query("select comment.*,user.username,news.title,news.img from comment,user,news where comment.user_id = user.id and comment.news_id = news.id order by comment.id desc",function(err,data){
 6         if (err) {
 7             return "";
 8         }else{
 9             data.forEach(item=>{
10                 item.time = moment(item.time*1000).format("YYYY-MM-DD HH:mm:ss");
11             })
12             // 加载页面
13             res.render("admin/comment/index.html",{data:data});
14         }
15     });
16     
17 });

其展示出的界面:

 在页面中进行书写对评论内容的审核:

<!-- ejs 的模板引擎 -->

      <% data.forEach(item=>{ %>
        <tr>
          <td><%= item.id %></td>
          <td><%= item.username %></td>
          <td><%= item.title %></td>
          <td><img width="200px" src="<%= item.img %>" alt=""></td>
          <td><%= item.text %></td>
          <td><%= item.time %></td>
          <td>
            <select name="" id="" onchange="status(this,<%= item.id %>)">
              <option <%= item.status == 0 ? 'selected' : '' %> value="0">未审核</option>
              <option <%= item.status == 1 ? 'selected' : '' %> value="1">审核通过</option>
              <option <%= item.status == 2 ? 'selected' : '' %> value="2">审核失败</option>
            </select>
          </td>

        </tr>
      <% }) %>

修改功能:

书写有关评论管理的修改路由:

// 无刷新修改状态

router.get("/ajax_status",function(req,res,data){
    // 接受数据
    let {id,status} = req.query;

    // 修改数据库中的数据
    mysql.query("update comment set status = ? where id = ?",[status,id],function(err,data){
        if (err) {
            return "";
        }else{
            if (data.affectedRows == 1) {
                res.send("1");
            }else{
                res.send("0");
            }
        }
    });
});
在页面中写关于ajax_status方法:
<script>
  function status(obj,id){
    // 状态值
    let zhuan = $(obj).val();
    // 发送ajax请求修改数据
    $.get("/admin/comment/ajax_status",{id:id,status:zhuan},function(data){
      if (data==1) {
        alert('修改成功');
      }else{
        alert('修改失败');

      }
    });
  }
</script>

修改功能的效果:

当修改审核的状态的效果;

 index.html:

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 7 <meta name="renderer" content="webkit">
 8 <title></title>
 9 <link rel="stylesheet" href="/public/admin/css/pintuer.css">
10 <link rel="stylesheet" href="/public/admin/css/admin.css">
11 <script src="/public/admin/js/jquery.js"></script>
12 <script src="/public/admin/js/pintuer.js"></script>
13 </head>
14 <body>
15   <div class="panel admin-panel">
16     <div class="panel-head"><strong class="icon-reorder"> 评论列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
17     <div class="padding border-bottom">
18       <ul class="search" style="padding-left:10px;">
19         <li>搜索:</li>
20        
21         <li>
22           <form action="" method="get">
23           <input type="text"  placeholder="请输入搜索关键字" name="search" class="input" style="width:250px; line-height:17px;display:inline-block" />
24           <button class="button border-main icon-search">搜索</button>
25           </form>
26         </li>
27       </ul>
28     </div>
29     <table class="table table-hover text-center">
30       <tr>
31         <th width="100" style="text-align:left; padding-left:20px;">ID</th>
32         <th>用户名</th>
33         <th>新闻标题</th>
34         <th>新闻图片</th>
35         <th>评论内容</th>
36         <th>评论时间</th>
37         <th>评论状态</th>
38       </tr>
39       <!-- ejs 的模板引擎 -->
40 
41       <% data.forEach(item=>{ %>
42         <tr>
43           <td><%= item.id %></td>
44           <td><%= item.username %></td>
45           <td><%= item.title %></td>
46           <td><img width="200px" src="<%= item.img %>" alt=""></td>
47           <td><%= item.text %></td>
48           <td><%= item.time %></td>
49           <td>
50             <select name="" id="" onchange="status(this,<%= item.id %>)">
51               <option <%= item.status == 0 ? 'selected' : '' %> value="0">未审核</option>
52               <option <%= item.status == 1 ? 'selected' : '' %> value="1">审核通过</option>
53               <option <%= item.status == 2 ? 'selected' : '' %> value="2">审核失败</option>
54             </select>
55           </td>
56 
57         </tr>
58       <% }) %>
59       
60     </table>
61   </div>
62 <script>
63   function status(obj,id){
64     // 状态值
65     let zhuan = $(obj).val();
66     // 发送ajax请求修改数据
67     $.get("/admin/comment/ajax_status",{id:id,status:zhuan},function(data){
68       if (data==1) {
69         alert('修改成功');
70       }else{
71         alert('修改失败');
72 
73       }
74     });
75   }
76 </script>
77 </body>
78 </html>
评论管理的首页

comment.js:

 1 // 导入express
 2 const express = require("express");
 3 
 4 // 实例化
 5 const router = express.Router();
 6 
 7 // 导入数据库
 8 const mysql = require("../../config/db.js");
 9 
10 // 导入moment
11 const moment = require("moment");
12 
13 // 展示评论管理
14 
15 router.get("/",function(req,res,data){
16     // 执行sql语句
17     mysql.query("select comment.*,user.username,news.title,news.img from comment,user,news where comment.user_id = user.id and comment.news_id = news.id order by comment.id desc",function(err,data){
18         if (err) {
19             return "";
20         }else{
21             data.forEach(item=>{
22                 item.time = moment(item.time*1000).format("YYYY-MM-DD HH:mm:ss");
23             })
24             // 加载页面
25             res.render("admin/comment/index.html",{data:data});
26         }
27     });
28     
29 });
30 
31 // 无刷新修改状态
32 
33 router.get("/ajax_status",function(req,res,data){
34     // 接受数据
35     let {id,status} = req.query;
36 
37     // 修改数据库中的数据
38     mysql.query("update comment set status = ? where id = ?",[status,id],function(err,data){
39         if (err) {
40             return "";
41         }else{
42             if (data.affectedRows == 1) {
43                 res.send("1");
44             }else{
45                 res.send("0");
46             }
47         }
48     });
49 });
50 
51 // 抛出
52 module.exports = router;
评论管理的路由

猜你喜欢

转载自www.cnblogs.com/jiguiyan/p/11428146.html