来吧展示：

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. Rust Aya 编写 eBPF 程序

    本文地址:https://www.ebpf.top/post/ebpf_rust_aya 1. 前言 Linux 内核 6.1 版本中有一个非常引人注意的变化:引入了对 Rust 编程语言的支持.Ru ...

  2. Windows版CheatSheet——一键显示当前程序快捷键列表

    Windows系统上的各种软件有太多的快捷键,想要记住是几乎不可能的,推荐一个一键显示当前软件快捷键的软件,在使用其他程序的时候,只要按下Ctrl+`就可以理解弹出该软件的所有快捷键列表,还支持收藏功 ...

  3. Latex数学公式学习

    要想博客写的更详细,更好,那么具体详细的数学推导这一部分是少不了的,不仅要好看还要方便输入那些更为复杂的符号,因此学习Latex就是必不可少的啦,说不定过几天就要用嘞! 本篇文章参考自超详细 LaTe ...

  4. Go语言核心36讲25

    你好,我是郝林,今天我分享的主题是:测试的基本规则和流程(上). 你很棒,已经学完了本专栏最大的一个模块!这涉及了Go语言的所有内建数据类型,以及非常有特色的那些流程和语句. 你已经完全可以去独立编写 ...

  5. vcenter的虚拟机开机进入bios

  6. uniapp 实现小程序中自定义tabBar 的方法

    uniapp 实现小程序中自定义tabBar 的方法 第一种方式: page.json中配置 "tabBar": { "color": "#7A7E8 ...

  7. 【大数据面试】【框架】Flume：Source的断点续传、重复数据、Channel选择

    〇.用途 流式结构 获取磁盘日志,拦截器过滤后,传递指定数据,写入HDFS或kafka 一.组成-Source.Channel.Sink 事务(put/take) 1.Source---taildir ...

  8. 关于JavaScript每句结尾是否需要添加分号问题

    最近在学习JS的时候遇到这么一个问题.由于我之前的学习中一直是写一句JS代码,加一个分号.但是最近我才发现原来JS代码是可以不添加分号的.如果可以不写分号的话会不会更省事呢?于是我在网上查了相关资料整 ...

  9. 如何基于 Redis 实现分布式锁

    什么是分布式锁 分布式锁:不同进程必须以互斥方式使用共享资源的一种锁方法实现. 实现分布式锁的基础 互斥.任何时刻,只有一个客户端持有锁. 无死锁.最终总是有可能获得锁,即使持有锁的客户端已经崩溃. ...

  10. CCS选择器 选择器优先级 选择器常见属性

    目录 CSS前戏 1.css语法结构 2.css注释语法 3.引入css的多种方式 CSS基本选择器 1.标签选择器 2.类选择器 3.id选择器 4.通用选择器 CSS组合选择器 1.后代选择器(空 ...