阿里百秀后台管理项目笔记 ---- Day04
2024-09-08 10:06:05
来吧展示：
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:'«',
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:'«',
last:'»',
pre:'<',
next:'>',
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 « 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:'«',
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:'«',
last:'»',
pre:'<',
next:'>',
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>
最新文章
- CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）
- [WPF系列]- Style - Specify width/height as resource in WPF
- Java日志系统及框架分析
- 微信小程序即将开放申请？微信小论坛小程序专场16日或可见分晓
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
- hdu 3336 kmp+next数组应用
- PDO数据库
- C#程序通过模板自动创建Word文档
- Mybatis 插入操作时获取主键 （Oracle 触发器与SEQ）
- 漂亮竖向菜单 有缓存 javascript
- NBUT 1120 线段树
- java中的ConcurrentModificationException异常
- Asp.Net 常用工具类---Config操作（7）
- ES6入门2
- HI3531编译helloworld，执行错误
- Django入门四之数据库相关
- SSH隧道：端口转发功能详解
- PAT Basic 1026
- eosio.cdt：EOS智能合约工具集
- [Android Pro] 关于Android 7.0无法进行https抓包的问题