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

来吧展示：

step 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/

先引入组件文件

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

在分页中更改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的更多相关文章

阿里百秀后台管理项目笔记 ---- Day01
摘要在此记录一下阿里百秀项目的教学视频的学习笔记,部分页面被我修改了,某些页面效果会不一样,基本操作是一致的,好记性不如烂笔头,加油叭!!! step 1 : 整合全部静态页面将静态页面全部拷贝到 ...
vue，vuex的后台管理项目架子structure-admin，后端服务nodejs
之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能接下来,针对structure-admin-web的不足,进行了补充,开发了具有登 ...
vue初始化项目，构建vuex的后台管理项目架子
构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装可以参考这篇文章http://www.mwcxs.top/ ...
SSM 电影后台管理项目
SSM 电影后台管理项目概述通过对数据库中一张表的CRUD,将相应的操作结果渲染到页面上. 笔者通过这篇博客还原了项目(当然有一些隐藏的坑),然后将该项目上传到了Github.Gitee,在末尾会 ...
docloud后台管理项目(开篇)
最近朋友做app需要web做后台管理,所以花了一周时间做了这个项目. 废话不多说,开发环境是nginx+php5.3,使用thinkphp框架.是一个医疗器械数据统计的后台,业务功能很简单就是查看用户 ...
【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo
¶项目分析一个完整的网站服务架构,包括: 1.web frame ---这里应用express框架 2.web server ---这里应用nodejs 3.Database ---这里 ...
项目：Vue+node+后台管理项目小结
序:本文主要分两块说:项目机制,具体用到的知识块. 1. 项目机制项目的原型以vue-cli为原型,进行项目的初步构建.项目以node.js服务和webpack打包机制为依托,将.vue文件打包为浏 ...
docloud后台管理项目(前端篇)
以下内容与主题无关,如果不想看可以直接忽视 !--忽视开始--! 给大家推荐一款强大的编辑器,那就是集响应快.体验好.逼格高.功能丰富为一体的sublime text 3.它除了以上特点,还有一个最重 ...
基于 Ant Desigin 的后台管理项目打包优化实践
背景按照 Ant Design 官网用 React 脚手构建的后台项目,刚接手项目的时候大概30条路由左右,我的用的机子是 Mac 8G 内存,打包完成需要耗时2分钟左右,决定优化一下. 项目技术栈 ...
vue后台管理项目中菜单栏切换的三种方法
第一种方法:vue嵌套路由(二) <el-menu :default-active="defaultActive" style="min-height: 100%; ...

随机推荐

ES6 学习笔记（四）基本类型Number
1.数值 1.1 .JavaScript数值的特点不区分整数值和浮点数值. 所有数值均用浮点数值表示. 采用IEEE-754标准定义的64位浮点数格式表示. 整数在实际操作时(如数组索引),则是基于 ...
BI系统打包Docker镜像及部署的技术难度和实现
BI系统打包Docker镜像及部署的技术难度和实现随着容器化技术盛行,Docker在前端领域也有着越来越广泛的应用:传统的前端部署方式需要我们将项目打包生成一系列的静态文件,然后上传到服务器,配置n ...
MindStudio模型训练场景精度比对全流程和结果分析
摘要:MindStudio是一套基于华为昇腾AI处理器开发的AI全栈开发平台本文分享自华为云社区<MindStudio模型训练场景精度比对全流程和结果分析>,作者:yd_24730208 ...
perl中 use strict会出现“requires explicit package name”错误
转载 perl中use strict的用法如果你使用 use strict 的话,它会强迫你用 my 声明变量,否则将会报上述错误.
vue3和vue2 的区别，vue3和vu2到底哪个好呢？
vue3 正式发布有两年多了,之前也做过一些学习和研究.vue3 发布后给某培训机构开发了一套vue3课程课件,自己也开源了一套基于vue3的后台管理系统(因为个人懒的原因,半年后才上传到gitHub ...
Qt_CLion
目录安装Qt和CLion 配置 CLion配置Qt的资源文件系统在项目根文件夹下创建一个资源文件夹在项目根目录下创建一个qrc文件安装Qt和CLion 相关的安装网上有很多教程,安装步骤这里不 ...
【每日一题】【DFS】【BFS】【队列】2021年12月5日-199. 二叉树的右视图
解答: /** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * ...
在windows下导入react项目并且打包编译后部署到nginx上
在windows下导入react项目并且打包编译后部署到nginx上一.安装npm 二.创建react项目三.安装nginx 四.总结最近接手了公司的一个django项目,这是应该前后端分离的项 ...
微软出品自动化神器【Playwright+Java】系列（六）之字符输入、单元素键盘事件操作、上传文件、聚焦、拖拽、悬浮操作
前言: 今天一早起床,就一直太阳穴疼,吃了四片去痛片已经无效,真的是疼的直恶心. 如果说学习或者写文章,能够或者头疼的话,那我想说,我还能坚持一会..... 很久没更新这系列的文章了,那么我们将Pla ...
Blazor组件自做十二 : Blazor Pdf Reader PDF阅读器组件 (新版 7.1 移除pdfobject)
Blazor Pdf Reader PDF阅读器组件示例: https://www.blazor.zone/PdfReaders https://blazor.app1.es/pdfReaders ...

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

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

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

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

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

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

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

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

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

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

随机推荐

热门专题