在视图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;
原文:https://www.cnblogs.com/jiguiyan/p/11428146.html