阿里百秀后台管理项目笔记 ---- Day04

来吧展示：

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:'«',
    last:'»',
    prev:'<',
    next:'>',
    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>