zoukankan      html  css  js  c++  java
  • 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="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;
    评论管理的路由
  • 相关阅读:
    jQuery:balloon气泡提示插件
    等高布局
    html5 语音搜索
    JS编码三种方法的区别:escape、encodeURI和encodeURIComponent
    为什么要两次调用encodeURI来解决乱码问题
    关于时间差查询的一个小技巧
    MySQL对时间的处理总结
    闭包总结:从执行环境来看闭包和垃圾回收
    闭包总结:闭包的7种形式
    JavaScript里面向对象的继承:不使用构造函数实现"继承"
  • 原文地址:https://www.cnblogs.com/jiguiyan/p/11428146.html
Copyright © 2011-2022 走看看