来吧展示：

step 1 : 实现评论管理数据渲染

  1. 利用 ajax 创建接口得到数据使用模板引擎渲染页面

    1.1 引入文件
<script src="/static/assets/vendors/jquery/jquery.js"></script>

  <script src="/static/assets/vendors/bootstrap/js/bootstrap.js"></script>

  <script src="/static/assets/vendors/jsrender/jsrender.js"></script>

1.2 创建接口文件 comments.php

<?php

require_once '../../functions.php';

$comments = mysql_all('select * from comments;');

$json = json_encode($comments);

header('Content-type: application/json');

echo $json;

1.3 利用 ajax 获取数据渲染到页面

<script>

  $.get('/admin/api/comments.php',{},function(res){

    console.log(res)

   // 通过模板引擎渲染数据

  var html = $('#comment_tmpl').render({ comments : res })

  console.log(html)

  $('tbody').html(html)

  })

其中

 $.get('/admin/api/comments.php',{},function(res){

    console.log(res)

  })

打印的结果是

1.4 html 部分 将 tbody 里的内容都删除只剩 tbody

        <tbody>

          //<tr class="danger">

            //<td class="text-center"><input type="checkbox"></td>

           // <td>大大</td>

           // <td>楼主好人，顶一个</td>

           // <td>《Hello world》</td>

           // <td>2016/10/07</td>

            //<td>未批准</td>

            //<td class="text-center">

            // <a href="post-add.php" class="btn btn-info btn-xs">批准</a>

             // <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>

          //  </td>

          //</tr>

        </tbody>

1.5 模板引擎渲染数据

<script id="comment_tmpl" type="text/x-jsrender">

  {{for comments}}

  <tr{{if status == 'held'}} class="warning" {{else status == 'rejected'}} class="danger"

  {{/if}}>

      <td class="text-center"><input type="checkbox"></td>

      <td>{{:author}}</td>

      <td>{{:comments}}</td>

      <td>《Hello world》</td>

      <td>{{:created}}</td>

      <td>{{:status}}</td>

      <td class="text-center">

        <a href="post-add.html" class="btn btn-info btn-xs">批准</a>

        <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>

      </td>

   </tr>

  {{/for}}

  </script>

step 02 : 客户端关联数据查询以及删除批准颜色显示

//api/comments.php

$comments = mysql_all('select

comments.*,

posts.title as post_title

from comments

inner join posts on comments.post_id = posts.id;');

查询语句得到的数据

//Comments.php

{for comments}}

  <tr{{if status == 'held'}} class="warning" {{else status == 'rejected'}} class="danger"

  {{/if}}>

            <td class="text-center"><input type="checkbox"></td>

            <td>{{:author}}</td>

            <td>{{:comments}}</td>

            <td>《{{:post_title}}》</td>

            <td>{{:created}}</td>

            <td>{{:status}}</td>

            <td class="text-center">

            {{if status == 'held'}}

              <a href="post-add.html" class="btn btn-info btn-xs">批准</a>

              <a href="post-add.html" class="btn btn-warning btn-xs">拒绝</a>

             {{/if}}

              <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>

            </td>

          </tr>

  {{/for}}

step 03 ：服务端接口接收数据返回分页参数

//api/comments.php

<?php

require_once '../../functions.php';

// 取得url地址中传递过来的分页参数

// intval()将字符串传化为数字

$page = empty($_GET['page']) ? 1 : intval($_GET['page']);

$length = 5;

//越过多少条

$offset = ($page - 1) * $length;

$sql = sprintf('select

comments.*,

posts.title as post_title

from comments

inner join posts on comments.post_id = posts.id

order by comments.created desc

limit %d,%d;', $offset, $length);

$comments = mysql_all($sql);

$json = json_encode($comments);

header('Content-type: application/json');

echo $json;

step 04 : 使用组件实现分页功能

组件网址: https://esimakin.github.io/twbs-pagination/

  1. 先引入组件文件
<script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
  1. 在分页中更改ul，将123分页的 li 都删掉，只留下 ul
<ul class="pagination pagination-sm pull-right">

         // <li><a href="#">上一页</a></li>

         // <li><a href="#">1</a></li>

         // <li><a href="#">2</a></li>

         // <li><a href="#">3</a></li>

         // <li><a href="#">下一页</a></li>

</ul>

3.在 comments.php 中去使用组件

function loadPageData(page){

   $.get('/admin/api/comments.php',{ page: page},function(res){

   //   console.log(res)

   //  // 通过模板引擎渲染数据

   var html = $('#comment_tmpl').render({ comments : res })

 // console.log(html)

   $('tbody').html(html)

 })

}

loadPageData(1)

  $('.pagination').twbsPagination({

    //最大页码

    totalPages:100,

    //页码展示个数

    visiablePages:5,

    onPageClick:function(e,page){

    //该组件默认打开page = 1

    //所以将ajax方式获取数据封装成一个函数，传入参数1

      console.log(page)

      loadPageData(page)

    }

  })

step 05 : 实现分页数据显示动画

$('tbody').fadeOut()

  $.get('/admin/api/comments.php',{ page: page},function(res){

  console.log(res)

    var html  =$('#comment_tmpl').render({comments:res})

   $('tbody').html(html).fadeIn()

   })

step 06 : 利用ajax方式实现分页功能

//comments.php

<script>

function loadPageData(page){

   $('tbody').fadeOut()

   $.get('/admin/api/comments.php',{ page: page},function(res){

    $('.pagination').twbsPagination({

    totalPages:res.total_pages,

    visiablePages:5,

    onPageClick:function(e,page){

      console.log(page)

      loadPageData(page)

    }

  })

  console.log(res)

    var html  =$('#comment_tmpl').render({comments:res.comments})

   $('tbody').html(html).fadeIn()

   })

}

loadPageData(1)

  </script>


//api/comments.php

添加语句

// 先查询到所有的数据的数量

$total_count = mysql_one('select count(1) as num

	from comments

	inner join posts on comments.post_id = posts.id')['num'];

$total_pages = ceil($total_count / $length);

 // $json = json_encode($comments);

$json = json_encode(array(

'total_pages' => $total_pages,

'comments'=> $comments

	));

step 07 : 利用ajax方式实现分页删除

//Comments-delete.php文件

<?php

require_once '../../functions.php';

if (empty($_GET['id'])) {

  exit('缺少必要参数');

}

$id = $_GET['id'];

$rows = mysql_change('delete from comments where id in (' . $id . ');');

// if ($rows > 0) {}

// header('Location: /admin/comments.php');

header('Content-Type:application/json');

echo json_encode($rows > 0);


//comments.php文件

$('tbody').on('click','.btn-delete',function(){

  var $tr = $(this).parent().parent()

  var id = $tr.data('id')

  $.get('/admin/api/comment-delete.php', { id: id }, function (res) {

    console.log(res)

    if(!res) return

      // $tr.remove()这个方法不好，当删除一个数据时，该数据的下一个数据会自动顶上去，

    // 最后一页都删除时，再次刷新就会自动减少一页数据

// 解决办法：

1. 在loadPageData函数的开头就定义 var currentPage = 1

2. $('tbody').html(html).fadeIn()

   }) 中去定义  currentPage = page

3. 在$('tbody').on('click','.btn-delete',function(){

中去执行 loadPageData(currentPage)

4.在 $.get('/admin/api/comment-delete.php', { id: id }, function (res) { 中再去执行 loadPageData(currentPage)

  })

})


//comments.php文件中的html部分

1. <a href="javascript:;"  class="btn btn-danger btn-xs btn-delete">删除</a>

加了 class = "btn-delete" 类

2. <tr{{if status == 'held'}} class="warning" {{else status == 'rejected'}} class="danger"

  {{/if}}  data-id="{{: id }}">

tr中加了 自定义属性 data-id="{{: id }}"

step 08 : 解决分页删除最后一页数据，自动跳转到前一页数据

// comments.php

var currentPage = 1

function loadPageData(page){

    $('tbody').fadeOut()

    $.get('/admin/api/comments.php',{ page: page},function(res){

      if(page > res.total_pages){

        loadPageData(res.total_pages)

        return

      }

    $('.pagination').twbsPagination('destroy')

    $('.pagination').twbsPagination({

    first:'&laquo;',

    last:'&raquo;',

    prev:'&lt;',

    next:'&gt;',

    startPage:page,

    totalPages:res.total_pages,

    visiablePages:5,

    initiateStartPageClick: false,

    onPageClick:function(e,page){

      console.log(page)

      loadPageData(page)

    }

  })

  // console.log(res)

    var html  =$('#comment_tmpl').render({comments:res.comments})

   $('tbody').html(html).fadeIn()

   currentPage = page

   })

}

$('.pagination').twbsPagination({

  first:'&laquo',

  last:'&raquo',

  pre:'&lt',

  next:'&gt',

    totalPages:100,

    visiablePages:5,

    onPageClick:function(e,page){

      console.log(page)

      loadPageData(page)

    }

  })

loadPageData(currentPage)

comments.php完整代码

<?php

require '../functions.php';

get_userinfo();

?>

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="utf-8">

  <title>Comments &laquo; Admin</title>

  <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">

  <link rel="stylesheet" href="/static/assets/vendors/font-awesome/css/font-awesome.css">

  <link rel="stylesheet" href="/static/assets/vendors/nprogress/nprogress.css">

  <link rel="stylesheet" href="/static/assets/css/admin.css">

  <script src="/static/assets/vendors/nprogress/nprogress.js"></script>

</head>

<body>

  <script>NProgress.start()</script>

  <div class="main">

 <?php include 'com/nav.php';?>

    <div class="container-fluid">

      <div class="page-title">

        <h1>所有评论</h1>

      </div>

      <!-- 有错误信息时展示 -->

      <!-- <div class="alert alert-danger">

        <strong>错误！</strong>发生XXX错误

      </div> -->

      <div class="page-action">

        <!-- show when multiple checked -->

        <div class="btn-batch" style="display: none">

          <button class="btn btn-info btn-sm">批量批准</button>

          <button class="btn btn-warning btn-sm">批量拒绝</button>

          <button class="btn btn-danger btn-sm">批量删除</button>

        </div>

         <ul class="pagination pagination-sm pull-right"></ul>

      </div>

      <table class="table table-striped table-bordered table-hover">

        <thead>

          <tr>

            <th class="text-center" width="40"><input type="checkbox"></th>

            <th>作者</th>

            <th>评论</th>

            <th>评论在</th>

            <th>提交于</th>

            <th>状态</th>

            <th class="text-center" width="140">操作</th>

          </tr>

        </thead>

        <tbody>

          <!-- <tr class="danger">

            <td class="text-center"><input type="checkbox"></td>

            <td>大大</td>

            <td>楼主好人，顶一个</td>

            <td>《Hello world》</td>

            <td>2016/10/07</td>

            <td>未批准</td>

            <td class="text-center">

              <a href="post-add.php" class="btn btn-info btn-xs">批准</a>

              <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>

            </td>

          </tr> -->

        </tbody>

      </table>

    </div>

  </div>

 <?php $current_page='comments';?>

 <?php include 'com/sidebar.php';?>

  <script src="/static/assets/vendors/jquery/jquery.js"></script>

  <script src="/static/assets/vendors/bootstrap/js/bootstrap.js"></script>

  <script src="/static/assets/vendors/jsrender/jsrender.js"></script>

  <script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>

  <script id="comment_tmpl" type="text/x-jsrender">

 {{for comments}}

  <tr{{if status == 'held'}} class="warning" {{else status == 'rejected'}} class="danger"

  {{/if}}  data-id="{{: id }}">

            <td class="text-center"><input type="checkbox"></td>

           <td>{{:author}}</td>

            <td>{{:comments}}</td>

            <td>《{{:post_title}}》</td>

            <td>{{:created}}</td>

            <td>{{:status}}</td>

            <td class="text-center">

            {{if status == 'held'}}

              <a href="post-add.php" class="btn btn-info btn-xs">批准</a>

               <a href="post-add.php" class="btn btn-warning btn-xs">拒绝</a>

             {{/if}}

              <a href="javascript:;"  class="btn btn-danger btn-xs btn-delete">删除</a>

            </td>

          </tr> 

   {{/for}}

  </script>

  <script>

   $(document)

  .ajaxStart(function () {

    NProgress.start()

  })

  .ajaxStop(function () {

    NProgress.done()

  })

var currentPage = 1

function loadPageData(page){

    $('tbody').fadeOut()

    $.get('/admin/api/comments.php',{ page: page},function(res){

      if(page > res.total_pages){

        loadPageData(res.total_pages)

        return

      }

    $('.pagination').twbsPagination('destroy')

    $('.pagination').twbsPagination({

    first:'&laquo;',

    last:'&raquo;',

    prev:'&lt;',

    next:'&gt;',

    startPage:page,

    totalPages:res.total_pages,

    visiablePages:5,

    initiateStartPageClick: false,

    onPageClick:function(e,page){

      console.log(page)

      loadPageData(page)

    }

  })

  // console.log(res)

    var html  =$('#comment_tmpl').render({comments:res.comments})

   $('tbody').html(html).fadeIn()

   currentPage = page

   })

}

$('.pagination').twbsPagination({

  first:'&laquo',

  last:'&raquo',

  pre:'&lt',

  next:'&gt',

    totalPages:100,

    visiablePages:5,

    onPageClick:function(e,page){

      console.log(page)

      loadPageData(page)

    }

  })

loadPageData(currentPage)

$('tbody').on('click','.btn-delete',function(){

  var $tr = $(this).parent().parent()

  var id = $tr.data('id')

  $.get('/admin/api/comment-delete.php', { id: id }, function (res) {

    console.log(res)

    if(!res) return

  loadPageData(currentPage)

  })

})

  </script>

  <script>NProgress.done()</script>

</body>

</html>

阿里百秀后台管理项目笔记 ---- Day04的更多相关文章

  1. 阿里百秀后台管理项目笔记 ---- Day01

    摘要 在此记录一下阿里百秀项目的教学视频的学习笔记,部分页面被我修改了,某些页面效果会不一样,基本操作是一致的,好记性不如烂笔头,加油叭!!! step 1 : 整合全部静态页面 将静态页面全部拷贝到 ...

  2. vue，vuex的后台管理项目架子structure-admin，后端服务nodejs

    之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能 接下来,针对structure-admin-web的不足,进行了补充,开发了具有登 ...

  3. vue初始化项目，构建vuex的后台管理项目架子

    构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...

  4. SSM 电影后台管理项目

    SSM 电影后台管理项目 概述 通过对数据库中一张表的CRUD,将相应的操作结果渲染到页面上. 笔者通过这篇博客还原了项目(当然有一些隐藏的坑),然后将该项目上传到了Github.Gitee,在末尾会 ...

  5. docloud后台管理项目(开篇)

    最近朋友做app需要web做后台管理,所以花了一周时间做了这个项目. 废话不多说,开发环境是nginx+php5.3,使用thinkphp框架.是一个医疗器械数据统计的后台,业务功能很简单就是查看用户 ...

  6. 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

    ¶项目分析 一个完整的网站服务架构,包括:   1.web frame ---这里应用express框架   2.web server ---这里应用nodejs   3.Database ---这里 ...

  7. 项目：Vue+node+后台管理项目小结

    序:本文主要分两块说:项目机制,具体用到的知识块. 1. 项目机制 项目的原型以vue-cli为原型,进行项目的初步构建.项目以node.js服务和webpack打包机制为依托,将.vue文件打包为浏 ...

  8. docloud后台管理项目(前端篇)

    以下内容与主题无关,如果不想看可以直接忽视 !--忽视开始--! 给大家推荐一款强大的编辑器,那就是集响应快.体验好.逼格高.功能丰富为一体的sublime text 3.它除了以上特点,还有一个最重 ...

  9. 基于 Ant Desigin 的后台管理项目打包优化实践

    背景 按照 Ant Design 官网用 React 脚手构建的后台项目,刚接手项目的时候大概30条路由左右,我的用的机子是 Mac 8G 内存,打包完成需要耗时2分钟左右,决定优化一下. 项目技术栈 ...

  10. vue后台管理项目中菜单栏切换的三种方法

    第一种方法:vue嵌套路由(二) <el-menu :default-active="defaultActive" style="min-height: 100%; ...

随机推荐

  1. 小菜鸡学习---<正则表达式学习笔记2>

    正则表达式学习笔记2 一.修饰符 前面我们学习的都是用于匹配的基本的关键的一些表达式符号,现在我们来学习修饰符.修饰符不写在正则表达式里,修饰符位于表达式之外,比如/runoob/g,这个最后的g就是 ...

  2. 版本控制工具Git介绍-01

    使用版本控制工具是为了方便团队开发,比如多人共同维护一个项目的时候,用版本控制工具可以很方便的维护项目代码,如果哪天你改了一个版本,出问题了,我们也可以很快的找到你改了什么,这里介绍使用比较多的版本控 ...

  3. ifconfig命令的使用

    ifconfig命令 用途:配置或显示TCP/IP网络的网络接口参数. *1.通过--help学习ifconfig的使用 点击查看代码 [root@rocky8 ~]# ifconfig --help ...

  4. AFL源码分析（一）

    AFL源码分析(一) 文章首发于:ChaMd5公众号 https://mp.weixin.qq.com/s/E-D_M25xv5gIpRa6k8xOvw a.alf-gcc.c 1.find_as 这 ...

  5. c++题目：数迷

    c++题目:数迷 题目 [题目描述] 给出含有N×N个格子的正方形表格,要求每个格子都填上一个个位数(范围1-N),使得每行.每列以及同一斜线上的数字都不同.部分格子已经填好数字.求满足题意的方案数. ...

  6. Class文件解析

    1 准备工作 获取class文件byte[] public static byte[] getFileBytes(File file) { try (FileInputStream fileInput ...

  7. 现代 CSS 之高阶图片渐隐消失术

    在过往,我们想要实现一个图片的渐隐消失.最常见的莫过于整体透明度的变化,像是这样: <div class="img"></div> div { width: ...

  8. 一步步带你设计MySQL索引数据结构

    前言 MySQL的索引是一个非常重要的知识点,也基本上是面试必考的一个技术点,所以非常重要.那你了解MySQL索引的数据结构是怎么样的吗?为什么要采用这样的数据结构? 现在化身为MySQL的架构师,一 ...

  9. 视图 触发器 事务 MVCC 存储过程 MySQL函数 MySQL流程控制 索引的数据结构 索引失效 慢查询优化explain 数据库设计三范式

    目录 视图 create view ... as 触发器 简介 创建触发器的语法 create trigger 触发器命名有一定的规律 临时修改SQL语句的结束符 delimiter 触发器的实际运用 ...

  10. 同步与异步 multiprocessing 进程对象多种方法

    目录 同步与异步 阻塞与非阻塞 综合使用 创建进程的多种方式 前言 windows系统创建进程的问题(重要) multiprocessing模块之Process 展现异步 创建进程的方式(一):使用P ...