NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态

摘要:
管理员显示编写sql语句的功能,以查看是否可以查询数据库数据。从图中可以看出,可以查询和打印数据库数据。使用ejs模板引擎遍历数组:Use:˂!

管理员展示功能

书写sql语句看是否能查询出数据库的数据

NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第1张

由图中可以看出查询并打印出数据库的数据

 NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第2张

使用ejs的模板引擎,进行对数组的遍历:

使用:

<!--ejs的模板引擎-->
      <% data.forEach(item=>{%>
      
      <volist name="list" id="vo">
        <tr>
          <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
           1</td>
          <td><input type="text" name="sort[1]" value="1" style="50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
          <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
          <td>博客项目后台系统</td>
          <td><font color="#00CC99">首页</font></td>
          <td>产品分类</td>
          <td>2019-08</td>
          <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 删除</a> </div></td>
        </tr>
            
     <% }) %>

将上述代码该为从数据库获取的数据,将数据展示于页面上:

NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第3张

NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第4张

 <td style="text-align:left; padding-left:20px;"><%= item.id %></td>
          <td><%= item.username %></td>
          <td><%= item.time %></td>
          <td>
            <% if(item.status==0){ %>
              <a class="button border-green" href="javascript:;" onclick="status(this,<%= item.id %>,1)"> 白名单</a>
            <% }else{ %>
              <a class="button border-red" href="javascript:;" onclick="status(this,<%= item.id %>,0)">黑名单</a>
            <% } %>
          </td>

从显示的效果来看,可以看出时间并没有显示正确,需要对时间进行一下格式化:

在npm 中提供了一种方法:

https://www.npmjs.com/package/moment

在命令行中输入:cnpm install moment进行安装

NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第5张

安装完成后进行使用

在admin.js中导入moment模块

NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第6张

//导入moment模块
const moment =require("moment");

由于数组是二维的,在admin.js中进行数据的格式化:

//管理员管理的首页
router.get('/',function(req,res,next){
    
//    res.send("管理员管理的首页");
//从数据库中查询数据
        mysql.query("select * from admin order by id desc ",function(err,data){
    
    //判断是否执行成功
    if(err){
        
        return " ";
        
    }else{
        
        data.forEach(item=>{
            item.time=moment(item.time*1000).format("YYYY-MM-DD HH:mm:ss");
            
        });
        
//        console.log(data);
//加载页面,将数据传递给我们的页面
//加载页面
res.render("admin/admin/index.html",{data:data});
     
        
    }
    
})

显示效果:

NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第7张

搜索功能

NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第8张

 需要获取地址栏的数据:req.query

获取表单数据:req.body

NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第9张

表单部分代码:

  <li>
             <form action="" method="get">
          <input type="text" value="<%= search %>" placeholder="请输入搜索关键字" name="search" class="input" style="250px; line-height:17px;display:inline-block" />
          <button class="button border-main icon-search">搜索</button>
          </form>
        </li>

admin.js:

/管理员管理的首页
router.get('/',function(req,res,next){
    //获取地址栏数据
    console.log(req.query);
    // 获取地址栏数据 req.query
    // 获取表单数据 req.body

    let search = req.query.search ? req.query.search :"";
    // res.send("管理员管理首页");

    
    
    
//    res.send("管理员管理的首页");
//从数据库中查询数据
       mysql.query("select * from admin where username like ? order by id desc",[`%${search}%`],function(err,data){
    //判断是否执行成功
    if(err){
        
        return " ";
        
    }else{
        
        data.forEach(item=>{
            item.time=moment(item.time*1000).format("YYYY-MM-DD HH:mm:ss");
            
        });
        
//        console.log(data);
//加载页面,将数据传递给我们的页面
//加载页面
res.render("admin/admin/index.html",{data:data,search:search});
     
        
    }
    
})

由于管理员没几个人,就不实现分页功能

NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第10张

 修改管理员状态

         实现描述:点击白名单变为黑名单,点击黑名单变为白名单,需要通过ajax

 当点击状态按钮时,弹出需要改变管理员的id:

NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第11张

<script>
      
      //无刷新修改状态
      function status(obj,id,statu){
          
          //发送请求
          alert(id);
          
      }
      
  </script>

 NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态第12张

在管理员的首页index.js中写入相应的js代码:

<script>
      
      //无刷新修改状态
      function status(obj,id,statu){
          
          //发送请求
          //alert(id);
          
           $.get("/admin/admin/ajax_status",{id:id,status:statu},function(data){
      // 判断是否执行成功
      if (data==1) {
        // 判断需要更改的状态
        if (statu==1) {
          $(obj).parent().html(`<a class="button border-red" href="javascript:;" onclick="status(this,${id},0)"> 黑名单</a>`);

        }else{
          $(obj).parent().html(`<a class="button border-green" href="javascript:;" onclick="status(this,${id},1)"> 白名单</a>`);

        }
      }
    })
          
      }
      
  </script>

 在admin.js中

写入ajax_status方法

/无刷新修改状态
  router.get("/ajax_status",function(req,res,next){
      
      //console.log(req.query);
      
      //接收对应的数据
      let {id, status}=req.query;
      
      //修改数据
      mysql.query("update admin set status=? where id = ?",[status,id],function(err,data){
        if (err) {
            return "";
        }else{
            if (data.affectedRows==1) {
                res.send("1");
            }else{
                res.send("0");
            }
        }
    });
      
      
  })

免责声明:文章转载自《NodeJS Express博客项目实战 之 管理员查看功能和无刷新修改状态》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇一个程序员的奋斗历程(绝对励志!)MFC编程入门之二十八(常用控件:列表视图控件List Control上)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

14款优秀的JavaScript调试工具大盘点

官方网站:http://www.jshint.com/4.Grunt Grunt是一个基于任务的命令行构建工具,适用于JavaScript项目。Venkman旨在为Mozilla提供一个基于浏览器的强大JavaScript调试环境。官方网站:http://www.my-debugbar.com/wiki/CompanionJS/HomePage10.Simp...

前端er们如何最快开发h5移动端页面?

因此,它总结了移动终端H5最快发展的最佳方案。web移动终端的发展应注重简化,以满足基本业务需求,设计应尽可能扁平化。前视图层angularjs或react作为框架,node作为中间层,js处理从后端接口获取的数据并操作渲染模板文件,这相当于在MVC中完成控制器层的工作。底层是数据库和后端。...

实用干货丨如何使用Prometheus配置自定义告警规则

前言普罗米修斯是一个用于监控和报警的开源系统。在普罗米修斯的术语中,它所监视的事物被称为目标。在本文中,我们将逐步展示如何安装Prometheus来监控/创建报警,并根据自定义事件配置自定义报警规则。当条件满足时,它将发出警报集成Alertmanager来处理客户端应用程序发送的警报。警报管理器将与发送警报通知的电子邮件帐户集成。了解普罗米修斯操作员根据普罗...

Sublime Text3注册激活和部分配置

此时,我们可以输入要安装的插件包ConvertToUTF85。设置中文对齐方式、字体等//设置默认代码“default_encoding”:“UTF-8”,//显示代码“show_encoding”:true,//显示行号“show_line_endings”:true,//设置字号“font_size”:14,//设置字体对齐方式“font_options...

uniapp 实现动态切换全局主题色

要求:要在开发的应用程序中切换主题颜色,如果只需要一种主题颜色,但不需要切换,则可以使用uniappSCSS文件文档思想:预先在公共css中定义所需的主题颜色。这里只是一个定义两种颜色的参考文档的示例,可以从中获得想法。您可以使用css属性选择器动态设置数据xx以动态更改主题颜色。最初,您希望将一个变量直接混合到mixin中,以实现主题颜色的全局控制,忽略了...

Matlab自定义函数的五种方法 [转]

子函数lfg2只能被主函数和主函数中的其他子函数调用。特点是,它是基于Matlab的数值运算内核的,所以它的运算速度较快,程序效率更高。...