layui（谐音：类ui) 是一款采用自身模块规范编写的前端 ui 框架，遵循原生 html/css/js 的书写与组织形式，门槛极低，拿来即用。
一、介绍
在使用layui之前，我们先要了解一下layui是什么？
二、开始使用layui
立即学习“前端免费学习笔记（深入）”；
使用方式：下载后导入项目，然后引用即可
<ｓｃｒｉｐｔ th:src="@{/jquery-3.3.1.min.js}"><ｓｃｒｉｐｔ th:src="@{/layui/layui.js}">先要引用jquery，然后再引用layui.js和layui.css。
为什么一定要本地呢？没有CDN？
layui的模块：layui是模块化的，包括form，layer，laydate，laypage等等模块，正是这些模块组成了完整的layui。使用layui的时候，需要指明自己使用的模块。
开始使用layui：
<ｓｃｒｉｐｔ> layui.use(['mod1', 'mod2'],function(args){ var mo1 = layui.mod1 ,mo2 = layui.mod2; });三、layui表单
下面以HTML中最常见的form表单来演示layui的使用。
html部分：
javscript部分：
<ｓｃｒｉｐｔ>layui.use(['form'], function(){ var form = layui.form; //自定义验证规则 form.verify({ pass: [/(.+){6,12}$/, '密码必须6到12位'] ,repass:function(value){ var pvalue = $("input[name='password']").val(); if(pvalue!=value){ return "两次输入的密码不一致"; } } }); //监听提交 form.on('submit(demo1)', function(data){var agreeChecked = data.field.agree; if(agreeChecked!="on"){ msg("未同意隐私条款"); return false;//阻止表单提交 } });});效果图：
四、layui弹出层
下面讲述一下弹出层，弹出可以说是一个很常见的东西了，但基础的HTML/JS只有丑陋的alert("")方法，layui包含了一个叫做layer的弹出层模块。
使用layer的两种方式：
关于第一种方式不予讨论，这里介绍一下第二种方式。
首先，从layer官网下载layer的文件，解压并放入自己的项目下，然后类似这样的形式引入layer.js文件。
Example：
function msg(msg){ //墨绿深蓝风 layer.alert(msg, { title:'消息' ,skin: 'layui-layer-molv' //样式类名 ,closeBtn: 0 },function(index){layer.close(index);//关闭 });}效果图：
layer不仅仅可以弹出提示框，还可以做到一些有趣且实用的动态效果，甚至可以加载一个弹出的HTML界面出来。
五、layui文件上传
下面介绍一下layui的文件上传，即upload模块
<ｓｃｒｉｐｔ>layui.use('upload',function(){var $ = layui.jquery,upload = layui.upload;//选完文件后不自动上传upload.render({elem: '#headButton',url: getRootPath()+'/user/uploadPicture',size: 10*1024 //10*1024KB = 10MB,accept: 'images',acceptMime: 'image/jpg,image/png,image/gif',auto: false,bindAction: '#headAddButton',done: function(res){msg(res.msg);//刷新头像地址var resUrl = res.url;if(resUrl!=""){document.getElementById("userImg").src=getRootPath()+ resUrl;}}});});后端（java-spring-controller类中）：
@AutowiredFileService fileService;@RequestMapping(path="/uploadPicture",method= {RequestMethod.POST})@ResponseBodypublic Map uploadFile(@RequestParam("file")MultipartFile file,HttpservletRequest request){Map map = new HashMap();String path = fileService.uploadImg(file, "head");//service层保存文件//返回值，必须按照这样写——要符合upload模块的回调接口才行map.put("code", 0); //0表示成功map.put("msg","上传成功");map.put("data", "");map.put("url", path);return map;} upload上传接口和返回值：
//上传接口upload.render({ elem: '#id' ,url: '/api/upload/' //必填项 ,method: '' //可选项。HTTP类型，默认post ,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}}); //返回值{ "code": 0 ,"msg": "" ,"data": { "src": "http://cdn.layui.com/123.jpg" }}效果图：
layui的upload模块能够在前端进行配置文件大小、格式、预览，还可以做到批量上传、重传功能。
六、layui分页
在网站中也经常会用到分页，后端的分页是容易实现的，但对于前端来说就不是那么理想了。layui提供了自己的分页模块——laypage。
layui.use(['element','laypage'], function(){ var element = layui.element ,laypage = layui.laypage; $.ajax({ url:getRootPath()+'/news/count' ,type:'GET' ,async:true //false表示非异步，即同步，即请求处理完毕后才能返回； ,data:{"page":1, "limit":10} ,dataType:'json' ,success:function(alldata){var numbers = alldata.count; //总页数大于页码总数laypage.render({ elem: 'demo' ,count: numbers//数据总数 ,first: '首页' ,last: '尾页' ,jump: function(obj){ $.ajax({ url:getRootPath()+'/news/list' ,type:'GET' ,async:true ,data:{"page":obj.curr, "limit":obj.limit} ,dataType:'json' ,success:function(data){ var shtml = getNewsContentHTML(data);//js处理数据并填充p document.getElementById("allNewsDiv").innerHTML=shtml; } }); } }); } });});如上，分页跳转的事件是在jump中进行的，在里面编写AJAX请求，通过jump的obj参数获得page和limit参数，然后在请求执行完毕并返回数据后进行处理即可。
七、layui数据表格
表格时常见的功能，但js拼接HTML表格算是一件比较繁琐且容易出错的事情。
<ｓｃｒｉｐｔ>layui.use('table',function(){ var table = layui.table;//模块声明table.render({elem:'#teamTable',method:'get',url:getRootPath()+'/team/admin/list' //返回一个List的list,cellMinWidth:80,cols:[[{field:'id', title:'ID', sort:true},{field:'name', title:'姓名'},{field:'birth', title:'出生日期'} //这里的templet值时模板元素的选择器,{field:'position', title:'身份'},{field:'information', title:'个人信息'} ,{field:'right', title:'操作', toolbar:'#barDemo'} ]] ,page:true //开启分页 });//监听工具条table.on('tool(teamTool)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） var tr = obj.tr; //获得当前行 tr 的DOM对象 console.log("id:"+data.id); if(layEvent === 'detail'){ //查看 //do somethinglayer.msg('ID：'+ data.id + ' 的查看操 } else if(layEvent === 'del'){ //删除 layer.confirm('确认删除人员信息？', function(index){ //do something layer.close(index); }); } else if(layEvent === 'edit'){ //编辑 //do something }});}); <ｓｃｒｉｐｔ type="text/html" id="barDemo"> 查看 编辑 删除 效果图：
更多layui知识请关注layui框架。
