layui前段框架使用php函数 layui框架怎么使用

在平时的学习生活当中，对于后端开发一定都很关心，今天我爱编程网小编为大家整理了layui前段框架使用php函数 layui框架怎么使用，希望能够帮助到大家。

layui数据表格使用的几个技巧

使用表格组件能提高大量的开发效率，目前主流的数据表格组件有bootstrap table、layui table、easyUI table等，本教程推荐使用layui框架设置数据表格。
推荐：layui框架快速入门
一、三种初始化渲染方式
我先从最简单的初始化表格写起，如果我直接把全部代码帖出来，你们可能会看得头晕
1，方法渲染：
<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>var table = layui.table
,form = layui.form;
layui.use('table', function () { // 引入 table模块
table.render({
id:"dataTable",//
elem: '#layui_table_id',//指定表格元素
url: '/menu/menuList.ajax', //请求路径
cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
//,even: true //隔行换色
,page: true //开启分页
,limits: [10,20,50] //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
,limit: 10 //每页默认显示的数量
,method:'post' //提交方式
,cols: [[
{type:'checkbox'}, //开启多选框
{
field: 'menuId', //json对应的key
title: 'ID', //列名
sort: true // 默认为 false,true为开启排序
}
]]
});
});java后台返回的json数据格式
{
code: 0,
count: 8, //总行数
data: [,?], //表格数据
msg: ""
} 2，自动渲染方法 （以下代码由官方提供，自动渲染的方法 适合复杂行头时使用，一般建议使用上面的方法渲染）
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">签名</th>
<th lay-data="{field:'experience', sort: true}">积分</th>
<th lay-data="{field:'score', sort: true}">评分</th>
<th lay-data="{field:'classify'}">职业</th>
<th lay-data="{field:'wealth', sort: true}">财富</th>
</tr>
</thead>
</table>二，如何添加编辑按钮
var table = layui.table
,form = layui.form;
layui.use('table', function () { // 引入 table模块
table.render({
id:"dataTable",//
elem: '#layui_table_id',//指定表格元素
url: '/menu/menuList.ajax', //请求路径
cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
//,even: true //隔行换色
,page: true //开启分页
,limits: [10,20,50] //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
,limit: 10 //每页默认显示的数量
,method:'post' //提交方式
,done: function(res, curr, count) { //表格数据加载完后的事件
//调用示例
layer.photos({//点击图片弹出
photos: '.layer-photos-demo'
,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
}
,cols: [[ {type:'checkbox'}, //开启多选框 { field: 'menuId', //json对应的key title: 'ID', //列名 sort: true // 默认为 false,true为开启排序 },{ fixed: 'right', title: '操作', width: 215, align:'center', toolbar: '#barDemo' //绑定按钮组 } ]] }); });
//监听工具条
table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'detail'){
layui.alert(JSON.stringifr(data)) ; //将编辑的行信息转为json字符串
layer.msg(data.attrId);
} else if(layEvent === 'del'){
layer.msg('删除'+data.menuId);
console.log(table)
} else if(layEvent === 'edit'){

});
}
});<script type="text/html" id="barDemo"> // id和toolbar 属性绑定
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>三，如何在表格中添加表单组件（以下我将推荐2种）
1，使用模块引擎的方式（这种方法比较麻烦，个人推荐第二种）
<!-- 是否显示 -->
<script type="text/html" id="isShow"> // 请注意 id之间的关联
{{# if(d.menuDisplay === 'Y'){ }}
<input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" checked>
{{# } else { }}
<input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" >
{{# } }}
</script>{ //在表格对象cols属性中添加
field: 'menuDisplay', /
title: '是否显示',
templet: '#isShow', //模板关联以上定义的
unresize: true,
filter: "isShow",
sort: false
}2，使用 函数的方法
{
field: 'menuDisplay',
title: '是否显示',
unresize: true,
filter: "isShow",
sort: false,
templet: function (d) {
if (d.menuDisplay == ‘Y’) {
return` <input type = "checkbox"
name = "menuDisplay"
value = "`+d.menuId+`"
lay - skin = "switch"
lay - text = "显示|隐藏"
lay - filter = "isShow" > `;
} else {
return` <input type = "checkbox"
name = "menuDisplay"
value = "`+d.menuId+`"
lay - skin = "switch"
lay - text = "显示|隐藏"
lay - filter = "isShow"
checked > `;
}
}
}四、 展示图片
{
field: 'img',
title: '图片',
unresize: true,
sort: false,
//style:'height:100px;',
templet:function (d) {
return `<div class="layer-photos-demo" onclick="img_click()" >
<img layer-pid="图片id，可以不写" layer-src="/images/bug-success-bg.jpg" src="/images/bug-success-bg.jpg" alt="图片名">
</div>`;
}
} 当表格数据加载完后再绑定属性
完整代码：

php如何实现登录的操作功能

php实现登录操作的方法：首先连接和创建数据库；然后使用layui框架创建前台页面；接着创建“login.php”文件，用来判断用户名密码的正确性；最后访问文件目录查看登录界面效果即可。
推荐：《PHP视频教程》
开始自然是从最简单的功能起步，我第一个任务选择了做一个登录操作，其实也没想象中那么简单。
1.首先自然是连接和创建数据库
这部分我写在model.php中
$userName='root';
$passWord='';
$host='localhost';
$dataBase='login';
//创建连接
$conn=mysqli_connect($host,$userName,$passWord,$dataBase);2.写前台页面，为了熟练前端框架，用了layui框架使界面，前面有一段js代码，来判断用户名密码输入是否为空
<!DOCTYPE html>
<html lang="en">
<script src="layui.js";></script>
<link rel="stylesheet" href="layui.css" ;>
<head>
<meta charset="UTF-8">
<title>注册登录</title>
</head>
<script language=JavaScript>
function InputCheck()
{
if (Login.username.value == "")
{
alert("请输入用户名!");
Login.username.focus();
return (false);
}
if (Login.password.value == "")
{
alert("请输入密码!");
Login.password.focus();
return (false);
}
}
</script>
<body >
<p >
<p >
<p class="layui-form">
<form action="login.php" method="post" name="Login" οnsubmit="return InputCheck()">
<p class="layui-form-item" >
<h3>注册登录系统</h3>
</p>
<hr>
<p class="layui-form-item">
<label class="layui-form-label">用户名</label>
<p class="layui-input-block">
<input type="text" name="username" id="username" placeholder="用户名" autocomplete="off" class="layui-input">
</p>
</p>
<p class="layui-form-item">
<label class="layui-form-label">密 码</label>
<p class="layui-input-block">
<input type="password" name="password" id="password" placeholder="密码" autocomplete="off" class="layui-input">
</p>
</p>
<p class="layui-form-item">
<p class="layui-input-block";>
<input type="submit" value="登录" class="layui-btn">
<input type="button" value="注册" class="layui-btn">
</p>
</p>
</form>
</p>
</p>
</p>
</body>
</html>3.login.php 用来判断用户名密码的正确性，关于这一点我看了网上的很多方法，五花八门，在我没遇到障碍之前，我决定先用简单的形式，就是用sql语句查询用户名配上密码的结果集，结果集为空，则不存在该用户。
<?php
//数据库连接
require_once 'model.php';
//从登录页接受来的数据
$name=$_POST['username'];
$pwd=$_POST['password'];
$sql="select id,username,password from user where username='$name' AND password='$pwd';";
$result=mysqli_query($conn,$sql);
$row=mysqli_num_rows($result);
if(!$row){
echo "<script>alert('密码错误，请重新输入');location='login.html'</script>";
}
else{
echo "<script>alert('登录成功');location='123'</script>";
};4.文件目录
5.效果




6.小结
总体上不是特别困难，因为功能十分简单，下一步的任务是加入注册功能，以及验证码功能。

我爱编程网

layui框架怎么使用

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。但是想用它，必须要按照他的规矩老干事，毕竟那人的手短，骚操作可以有，那也是规矩里的。
如果你想了解更多关于layui的知识，可以点击：layui教程
附上layui官网：
下载完后我们将其解压拿出 layui 文件夹。打开编辑器，将其放入。
然后在html中开始引入css文件和js文件。在这里我们需要的是 layui.css 和 layui.js 这两个layui核心文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
//模块和回调函数
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>到这里，我们还需要 声明需要使用的 模块 和 回调函数。当然，参照官方文档，选择自己想要的效果就行！！
比如：
接下来我们以一个实例作为结束
我在官方文档 导航做例子：
大家没看错，我就是拷贝下来，然后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
<ul lay-filter="">
<li><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li><a href="">大数据</a></li>
<li>
<a href="javascript:;">解决方案</a>
<dl> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li><a href="">社区</a></li>
</ul>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//?
});
</script>
</body>
</html>就没有然后了，这样子就好了，效果拿来了?

以上就是关于layui前段框架使用php函数 layui框架怎么使用的全部内容了，如果需要了解更多相关资讯敬请关注我爱编程网。