阿里百秀后台管理项目笔记 ---- 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:'«',
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>
阿里百秀后台管理项目笔记 ---- 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%; ...
随机推荐
- JK触发器与模12计数器
JK触发器 JK触发器具有保持,置0,置1和翻转四个功能. 则可得出次态方程:\(Q_{n+1} = JQ_n'+K'Q_n\) Design `timescale 1ns / 1ps module ...
- js高级之函数高级部分
基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解 github源码 博客下载 原型与原型链 prototype : 显式原型属性,它默认指向一个Object空对象(即称为: ...
- Linux内核替换的一种简单方法
前言 使用现有centos的镜像,在海光机器上出现了无法运行的情况,grub引导后就只剩下光标一直在闪,无任何字符输出.这种情况大概率是因为Linux的内核无法运行在海光的CPU上所导致的. 已得知L ...
- 【RPC和Protobuf】之RPC入门
一,概念 RPC:Remote procedure call(远程过程调用),分布式系统中不同节点之间流行的通信方式 服务端: 注: 1.执行下面的代码之后,会相应的启动一个tcp进程 C:\User ...
- 基于python的数学建模---Fuzzy C-Means（模糊C均值聚类）
簇数的确定: 要用到k-means里面的轮廓系数 基于python的数学建模---轮廓系数的确定 - 坤丶 - 博客园 (cnblogs.com) 模糊c的代码 import copy import ...
- 第2-3-8章 分片上传和分片合并的接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss
目录 5.10 接口开发-分片上传 5.10.1 分片上传介绍 5.10.2 前端分片上传插件webuploader 5.10.3 后端代码实现 5.10.3.1 接口文档 5.10.3.2 代码开发 ...
- Crypto - Caesar I
原题链接:http://www.wechall.net/challenge/training/crypto/caesar/index.php 告诉我们这是个古凯撒密码,让我们解...我们百度下古凯撒密 ...
- Day24.1：抽象类的详解
抽象类 1.1抽象类概述 一个动物类中,我们创建对象时会去new一个动物:但是我们不应该直接创建动物这个对象,因为动物本身就是抽象的,没有动物这种实例,我们创建的应该是一个具体的动物类,比如猫.狗等动 ...
- Vue3“直接”修改props
父组件 import { reactive } from 'vue'; //对话框数据 const show = reactive({ isshow: false, }); //打开对话框 const ...
- HCIE Routing&Switching之MPLS静态LSP配置
前文我们了解了MPLS基础理论部分,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16928096.html:今天我们来聊一聊MPLS静态LSP配置相关话题: ...