今天是学习做后台页面布局,用得是bootcss。那么效果展示一下。
布局的代码
[html]
瀑布流留言板管理系统
瀑布流留言板管理系统
从中学到javascript函数
str.substr(0,20)意思是从0个字符开始取20个字符
Math.random()取随机数
switch语句
这后台是ajax的噢。写了好久的分页呢。好吧,直接上代码。
[javascript] // JavaScript Document
$('body').off('.data-api');
$(document).ready(function(e) {
$("#menu a").click(function() {
switch ($(this).text()) {
case '所有留言':
admin_content(1);
break;
case '基本设置':
$("#main #mainData").load('admin_config.html?r='+Math.random());
break;
default:
break;
}
});
$("#start").click();
});
/**
*留言管理
*/
function admin_content(page) {
$.ajax({
url: 'http://localhost/l/admin.php?m=admin&a=content&page=' + page + '&rand=' + Math.random(),
type: 'get',
dataType: 'json',
data: {},
complete: function(xhr, textStatus) {
//called when complete
},
success: function(json, textStatus, xhr) {
if (json['state'] == 'ok') {
var page_start = json['start'];//分页开始
var page_end = json['end'];//分页结束
var page_page = json['page'];//分页当前页面
var data = json['data'];//分页数据
/**
* 生成 表格内容
*/
var table_html = '
操作 | 用户名 | 留言内容 | 发表时间 |
---|---|---|---|
删除 | ' + data[i].userName + ' | ' + data[i].content + ' |
' + getLocalTime(data[i].time) + ' |
/**
*生成分页
*/
var page_html = '
- ';
- « ';
- « ';
- ' + i + ' ';
- ' + i + ' ';
- » ';
- » ';
if (page_end !== 0) {
if (page_page == 1) {
page_html = page_html + '
} else {
page_html = page_html + '
}
}
for (var i = page_start; i if (page_page == i) {
page_html = page_html + '
} else {
page_html = page_html + '
}
}
if (page_end !== 0) {
if (page_page == page_end) {
page_html = page_html + '
} else {
page_html = page_html + '
}
}
page_html = page_html + '
var mainData = $("#main #mainData");
mainData.html(table_html);
mainData.append(page_html);
admin_content_page(page_page,page_end); //挂接分页点击事件
}
//alert(json.data);
},
error: function(xhr, textStatus, errorThrown) {
//called when there is an error
}
});
}
/**
* 挂机分页事件
* 参数 page_page 当前分页
* 参数 page_end 分页数量
*/
function admin_content_page(page_page,page_end) {
$("#mainPage a").click(function() {
var charStr = $(this).text();
var num = charStr;
if (charStr == "»") {
num = parseInt(page_page) + 1;
if (page_end return;
}
} else if (charStr == "«") {
num = parseInt(page_page) - 1;
if (num return;
}
}
admin_content(num);
});
}
function admin_content_del (id) {
alert(id);
}
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
}
// JavaScript Document
$('body').off('.data-api');
$(document).ready(function(e) {
$("#menu a").click(function() {
switch ($(this).text()) {
case '所有留言':
admin_content(1);
break;
case '基本设置':
$("#main #mainData").load('admin_config.html?r='+Math.random());
break;
default:
break;
}
});
$("#start").click();
});
/**
*留言管理
*/
function admin_content(page) {
$.ajax({
url: 'http://localhost/l/admin.php?m=admin&a=content&page=' + page + '&rand=' + Math.random(),
type: 'get',
dataType: 'json',
data: {},
complete: function(xhr, textStatus) {
//called when complete
},
success: function(json, textStatus, xhr) {
if (json['state'] == 'ok') {
var page_start = json['start'];//分页开始
var page_end = json['end'];//分页结束
var page_page = json['page'];//分页当前页面
var data = json['data'];//分页数据
/**
* 生成 表格内容
*/
var table_html = '
操作 | 用户名 | 留言内容 | 发表时间 |
---|---|---|---|
删除 | ' + data[i].userName + ' | ' + data[i].content + ' |
' + getLocalTime(data[i].time) + ' |
/**
*生成分页
*/
var page_html = '
- ';
- « ';
- « ';
- ' + i + ' ';
- ' + i + ' ';
- » ';
- » ';
if (page_end !== 0) {
if (page_page == 1) {
page_html = page_html + '
} else {
page_html = page_html + '
}
}
for (var i = page_start; i if (page_page == i) {
page_html = page_html + '
} else {
page_html = page_html + '
}
}
if (page_end !== 0) {
if (page_page == page_end) {
page_html = page_html + '
} else {
page_html = page_html + '
}
}
page_html = page_html + '
var mainData = $("#main #mainData");
mainData.html(table_html);
mainData.append(page_html);
admin_content_page(page_page,page_end); //挂接分页点击事件
}
//alert(json.data);
},
error: function(xhr, textStatus, errorThrown) {
//called when there is an error
}
});
}
/**
* 挂机分页事件
* 参数 page_page 当前分页
* 参数 page_end 分页数量
*/
function admin_content_page(page_page,page_end) {
$("#mainPage a").click(function() {
var charStr = $(this).text();
var num = charStr;
if (charStr == "»") {
num = parseInt(page_page) + 1;
if (page_end
return;
}
} else if (charStr == "«") {
num = parseInt(page_page) - 1;
if (num
return;
}
}
admin_content(num);
});
}
function admin_content_del (id) {
alert(id);
}
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
}这是分页请求的服务端代码
[php] public function content()
{
//引入分页类
include "page.class.php";
//得到data表的数据数量
$rows = $this->db->count('select * from data');
//创建分页对象
$page = new Page($rows, 5, "");
$list=$this->db
->order('id DESC')
->table('data')
->limit($page->getLimit())
->select();
/*
echo "
";<br> var_dump($list);<br> echo "";
*/
$json['state']='ok';
$json['start']=$page->getStart();
$json['end']=$page->getEnd();
$json['page']=$page->getPage();
$json['data']=$list;
echo json_encode($json);
//exit();
}
public function content()
{
//引入分页类
include "page.class.php";
//得到data表的数据数量
$rows = $this->db->count('select * from data');
//创建分页对象
$page = new Page($rows, 5, "");
$list=$this->db
->order('id DESC')
->table('data')
->limit($page->getLimit())
->select();
/*
echo "
";<br> var_dump($list);<br> echo "";
*/
$json['state']='ok';
$json['start']=$page->getStart();
$json['end']=$page->getEnd();
$json['page']=$page->getPage();
$json['data']=$list;
echo json_encode($json);
//exit();
}
做这分页的时候由于是ajax,html代码生成都在客户端。经过我观察这分页类存在问题。实际上许多代码都没必要存在。有时间我去把他干掉。
附上代码 page.class.php
[php]
/**
file: page.class.php
完美分页类 Page
@微凉 QQ496928838
*/
class Page {
private $total; //数据表中总记录数
private $listRows; //每页显示行数
private $limit; //SQL语句使用limit从句,限制获取记录个数
private $uri; //自动获取url的请求地址
private $pageNum; //总页数
private $page; //当前页
private $config = array(
'head' => "条记录",
'prev' => "上一页",
'next' => "下一页",
'first'=> "首页",
'last' => "末页"
); //在分页信息中显示内容,可以自己通过set()方法设置
private $listNum = 10; //默认分页列表显示的个数
/**
构造方法,可以设置分页类的属性
@param int $total 计算分页的总记录数
@param int $listRows 可选的,设置每页需要显示的记录数,默认为25条
@param mixed $query 可选的,为向目标页面传递参数,可以是数组,也可以是查询字符串格式
@param bool $ord 可选的,默认值为true, 页面从第一页开始显示,false则为最后一页
*/
public function __construct($total, $listRows=25, $query="", $ord=true){
$this->total = $total;
$this->listRows = $listRows;
$this->uri = $this->getUri($query);
$this->pageNum = ceil($this->total / $this->listRows);
/*以下判断用来设置当前面*/
if(!empty($_GET["page"])) {
$page = $_GET["page"];
}else{
if($ord)
$page = 1;
else
$page = $this->pageNum;
}
if($total > 0) {
if(preg_match('/\D/', $page) ){
$this->page = 1;
}else{
$this->page = $page;
}
}else{
$this->page = 0;
}
$this->limit = "LIMIT ".$this->getLimit();
}
/**
用于设置显示分页的信息,可以进行连贯操作
@param string $param 是成员属性数组config的下标
@param string $value 用于设置config下标对应的元素值
@return object 返回本对象自己$this, 用于连惯操作
*/
function set($param, $value){
if(array_key_exists($param, $this->config)){
$this->config[$param] = $value;
}
return $this;
}
/* 不是直接去调用,通过该方法,可以使用在对象外部直接获取私有成员属性limit和page的值 */
function __get($args){
if($args == "limit" || $args == "page")
return $this->$args;
else
return null;
}
/**
按指定的格式输出分页
@param int 0-7的数字分别作为参数,用于自定义输出分页结构和调整结构的顺序,默认输出全部结构
@return string 分页信息内容
*/
function fpage(){
$arr = func_get_args();
$html[0] = " 共 {$this->total} {$this->config["head"]} ";
$html[1] = " 本页 ".$this->disnum()." 条 ";
$html[2] = " 本页从 {$this->start()}-{$this->end()} 条 ";
$html[3] = " {$this->page}/{$this->pageNum}页 ";
$html[4] = $this->firstprev();
$html[5] = $this->pageList();
$html[6] = $this->nextlast();
$html[7] = $this->goPage();
$fpage = '
if(count($arr) $arr = array(0, 1,2,3,4,5,6,7);
for($i = 0; $i $fpage .= $html[$arr[$i]];
$fpage .= '
return $fpage;
}
/* 格式为 1,5,*/
function getLimit(){
if($this->page > 0)
return ($this->page-1)*$this->listRows.",{$this->listRows}";
else
return 0;
}
//当前的页面
function getPage(){
return $this->page;
}
//分页的开始
function getStart(){
$num1=$this->page-4;
return $num1>0?$num1:1;
}
//分页的结束
function getEnd(){
$num1=$this->pageNum;
$num2=$this->page+5;
return $num1 }
/* 在对象内部使用的私有方法,用于自动获取访问的当前URL */
private function getUri($query){
$request_uri = $_SERVER["REQUEST_URI"];
$url = strstr($request_uri,'?') ? $request_uri : $request_uri.'?';
if(is_array($query))
$url .= http_build_query($query);
else if($query != "")
$url .= "&".trim($query, "?&");
$arr = parse_url($url);
if(isset($arr["query"])){
parse_str($arr["query"], $arrs);
unset($arrs["page"]);
$url = $arr["path"].'?'.http_build_query($arrs);
}
if(strstr($url, '?')) {
if(substr($url, -1)!='?')
$url = $url.'&';
}else{
$url = $url.'?';
}
return $url;
}
/* 在对象内部使用的私有方法,用于获取当前页开始的记录数 */
private function start(){
if($this->total == 0)
return 0;
else
return ($this->page-1) * $this->listRows+1;
}
/* 在对象内部使用的私有方法,用于获取当前页结束的记录数 */
private function end(){
return min($this->page * $this->listRows, $this->total);
}
/* 在对象内部使用的私有方法,用于获取上一页和首页的操作信息 */
private function firstprev(){
if($this->page > 1) {
$str = " uri}page=1'>{$this->config["first"]} ";
$str .= "uri}page=".($this->page-1)."'>{$this->config["prev"]} ";
return $str;
}
}
/* 在对象内部使用的私有方法,用于获取页数列表信息 */
private function pageList(){
$linkPage = " ";
$inum = floor($this->listNum/2);
/*当前页前面的列表 */
for($i = $inum; $i >= 1; $i--){
$page = $this->page-$i;
if($page >= 1)
$linkPage .= "uri}page={$page}'>{$page} ";
}
/*当前页的信息 */
if($this->pageNum > 1)
$linkPage .= "{$this->page} ";
/*当前页后面的列表 */
for($i=1; $i $page = $this->page+$i;
if($page pageNum)
$linkPage .= "uri}page={$page}'>{$page} ";
else
break;
}
$linkPage .= '';
return $linkPage;
}
/* 在对象内部使用的私有方法,获取下一页和尾页的操作信息 */
private function nextlast(){
if($this->page != $this->pageNum) {
$str = " uri}page=".($this->page+1)."'>{$this->config["next"]} ";
$str .= " uri}page=".($this->pageNum)."'>{$this->config["last"]} ";
return $str;
}
}
/* 在对象内部使用的私有方法,用于显示和处理表单跳转页面 */
private function goPage(){
if($this->pageNum > 1) {
return ' ';
}
}
/* 在对象内部使用的私有方法,用于获取本页显示的记录条数 */
private function disnum(){
if($this->total > 0){
return $this->end()-$this->start()+1;
}else{
return 0;
}
}
}
/**
file: page.class.php
完美分页类 Page
@微凉 QQ496928838
*/
class Page {
private $total; //数据表中总记录数
private $listRows; //每页显示行数
private $limit; //SQL语句使用limit从句,限制获取记录个数
private $uri; //自动获取url的请求地址
private $pageNum; //总页数
private $page; //当前页
private $config = array(
'head' => "条记录",
'prev' => "上一页",
'next' => "下一页",
'first'=> "首页",
'last' => "末页"
); //在分页信息中显示内容,可以自己通过set()方法设置
private $listNum = 10; //默认分页列表显示的个数
/**
构造方法,可以设置分页类的属性
@param int $total 计算分页的总记录数
@param int $listRows 可选的,设置每页需要显示的记录数,默认为25条
@param mixed $query 可选的,为向目标页面传递参数,可以是数组,也可以是查询字符串格式
@param bool $ord 可选的,默认值为true, 页面从第一页开始显示,false则为最后一页
*/
public function __construct($total, $listRows=25, $query="", $ord=true){
$this->total = $total;
$this->listRows = $listRows;
$this->uri = $this->getUri($query);
$this->pageNum = ceil($this->total / $this->listRows);
/*以下判断用来设置当前面*/
if(!empty($_GET["page"])) {
$page = $_GET["page"];
}else{
if($ord)
$page = 1;
else
$page = $this->pageNum;
}
if($total > 0) {
if(preg_match('/\D/', $page) ){
$this->page = 1;
}else{
$this->page = $page;
}
}else{
$this->page = 0;
}
$this->limit = "LIMIT ".$this->getLimit();
}
/**
用于设置显示分页的信息,可以进行连贯操作
@param string $param 是成员属性数组config的下标
@param string $value 用于设置config下标对应的元素值
@return object 返回本对象自己$this, 用于连惯操作
*/
function set($param, $value){
if(array_key_exists($param, $this->config)){
$this->config[$param] = $value;
}
return $this;
}
/* 不是直接去调用,通过该方法,可以使用在对象外部直接获取私有成员属性limit和page的值 */
function __get($args){
if($args == "limit" || $args == "page")
return $this->$args;
else
return null;
}
/**
按指定的格式输出分页
@param int 0-7的数字分别作为参数,用于自定义输出分页结构和调整结构的顺序,默认输出全部结构
@return string 分页信息内容
*/
function fpage(){
$arr = func_get_args();
$html[0] = " 共 {$this->total} {$this->config["head"]} ";
$html[1] = " 本页 ".$this->disnum()." 条 ";
$html[2] = " 本页从 {$this->start()}-{$this->end()} 条 ";
$html[3] = " {$this->page}/{$this->pageNum}页 ";
$html[4] = $this->firstprev();
$html[5] = $this->pageList();
$html[6] = $this->nextlast();
$html[7] = $this->goPage();
$fpage = '
if(count($arr) $arr = array(0, 1,2,3,4,5,6,7);
for($i = 0; $i $fpage .= $html[$arr[$i]];
$fpage .= '
return $fpage;
}
/* 格式为 1,5,*/
function getLimit(){
if($this->page > 0)
return ($this->page-1)*$this->listRows.",{$this->listRows}";
else
return 0;
}
//当前的页面
function getPage(){
return $this->page;
}
//分页的开始
function getStart(){
$num1=$this->page-4;
return $num1>0?$num1:1;
}
//分页的结束
function getEnd(){
$num1=$this->pageNum;
$num2=$this->page+5;
return $num1 }
/* 在对象内部使用的私有方法,用于自动获取访问的当前URL */
private function getUri($query){
$request_uri = $_SERVER["REQUEST_URI"];
$url = strstr($request_uri,'?') ? $request_uri : $request_uri.'?';
if(is_array($query))
$url .= http_build_query($query);
else if($query != "")
$url .= "&".trim($query, "?&");
$arr = parse_url($url);
if(isset($arr["query"])){
parse_str($arr["query"], $arrs);
unset($arrs["page"]);
$url = $arr["path"].'?'.http_build_query($arrs);
}
if(strstr($url, '?')) {
if(substr($url, -1)!='?')
$url = $url.'&';
}else{
$url = $url.'?';
}
return $url;
}
/* 在对象内部使用的私有方法,用于获取当前页开始的记录数 */
private function start(){
if($this->total == 0)
return 0;
else
return ($this->page-1) * $this->listRows+1;
}
/* 在对象内部使用的私有方法,用于获取当前页结束的记录数 */
private function end(){
return min($this->page * $this->listRows, $this->total);
}
/* 在对象内部使用的私有方法,用于获取上一页和首页的操作信息 */
private function firstprev(){
if($this->page > 1) {
$str = " uri}page=1'>{$this->config["first"]} ";
$str .= "uri}page=".($this->page-1)."'>{$this->config["prev"]} ";
return $str;
}
}
/* 在对象内部使用的私有方法,用于获取页数列表信息 */
private function pageList(){
$linkPage = " ";
 

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
