PHP结合LAYUI实现前台加后台操作

2018-05-03编程教程
124

一:前台加载出前端页面:
 
HTML:
 
lay-data="{width:800,height:400, url:'data.php', page:true, id:'test'}
 
js:
 
layui.use("table",function(){
var table=layui.table

})
 
表头加载下就行了主要讲解下对接数据库和返回对象的操作。
 
二:先连接数据库
 
header("Content-type:text/html;charset=utf-8");
$zhuji='localhost';
$user='root';
$port=3306;
$pwd='';
$name="test";

$conn=mysqli_connect($zhuji,$user,$pwd,$name,$port);
if(!$conn){
die("连接失败:".mysqli_connect_error());
}
mysqli_query($conn,'set names utf8');//防止数据库乱码必须要加
 
分页四要素:
 
1 当前页
 
2 每页多少条记录//每页多少条记录要和前台对接好,取名最好为limit
 
3从数据库读取出多少条记录
 
4总共多少页
 
$page=isset($_GET["page"])?$_GET["page"]:1; 
$limit=10;
$count=mysqli_num_rows(mysqli_query($conn,"select * from area"));
$perpage=ceil($count/$limit);

$sql="select `id`,`Names`,`parentid`,`shortname` from area limit ".($page-1)*$limit.",".$limit;
$result=mysqli_query($conn,$sql);
if(mysqli_num_rows($result)>0){
echo '{"code":0,"msg":"","count":1000,"data":[';
$i=1;
while($row = mysqli_fetch_assoc($result)) {
$i++;
echo json_encode($row);
if($i<mysqli_num_rows($result)+1){
echo ",";
}

}
echo "]}";
}
 
总结:后台返回的json数据必须和前台接口对好,否则会报错,json数据格式为
 
{"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57}]}

本文转载自:博客园
The End
layui

相关推荐

layui根据百度地图经纬度在弹出层中显示位置
首先你需要引入百度地图的js script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0ak=你的ak"/script ak ,注意是要浏览器端的ak,这个直接到百度开发者平台申请。 引入layui,这个大家可以到layui官网看看怎么引入layer, 注意:这里要提...
2025-01-09 编程教程
240

layui Table 设置title 字体加粗
在layui.css中加样式 : .layui-table th{font-weight: bold;} ,或者直接加在网页中即可。 style .layui-table th{ font-weight: bold;} /stylebodytable id="demo" lay-filter="demo" class="layui-hide"/table/body...
2022-10-17 编程教程
200

ThinkPHP5+Layui实现图片上传加预览
前端文件: label class=layui-form-label图片/labela class=layui-btn id=image style=float: left;i class=layui-icon#xe67c;/i上传图片/adiv class=layui-input-block style=margin-left: 220px; input type=text name=img value={$tptc.img} class=layui...
2018-05-15 编程教程
185

layui文件上传实现代码分享
本文主要为大家详细介绍了layui导航栏效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 !DOCTYPE htmlhtml head meta charset=UTF-8 title文件上传/title link rel=stylesheet href=layui/css/layui.css link rel=sty...
2018-05-15 编程教程
201

Layui + php + Smarty 实现分页
页面内容 (分页容器) div class=admin-table-page div id=page class=page/div/div javascript 代码 //调用分页laypage({ cont: page, //分页容器的id pages: {#$maxpage#} //总页数, groups: 5 //连续显示分页数, curr:{#$currentPage#} //当前页数, jump:...
2018-05-03 编程教程
157

PHP结合LAYUI实现前台加后台操作
一:前台加载出前端页面: HTML: lay-data={width:800,height:400, url:data.php, page:true, id:test} js: layui.use(table,function(){var table=layui.table}) 表头加载下就行了主要讲解下对接数据库和返回对象的操作。 二:先连接数据库 header(Conten...
2018-05-03 编程教程
124