layui（谐音：类ui) 是一款采用自身模块规范编写的前端 ui 框架，遵循原生 html/css/js 的书写与组织形式，门槛极低，拿来即用。

一、介绍

在使用layui之前，我们先要了解一下layui是什么？

二、开始使用layui

立即学习“前端免费学习笔记（深入）”；

使用方式：下载后导入项目，然后引用即可

<ｓｃｒｉｐｔ th:src="@{/jquery-3.3.1.min.js}"></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ th:src="@{/layui/layui.js}"></ｓｃｒｉｐｔ><link rel="stylesheet" th:href="@{/layui/css/layui.css}" />

先要引用jquery，然后再引用layui.js和layui.css。

为什么一定要本地呢？没有CDN？

layui的模块：layui是模块化的，包括form，layer，laydate，laypage等等模块，正是这些模块组成了完整的layui。使用layui的时候，需要指明自己使用的模块。

开始使用layui：

<ｓｃｒｉｐｔ>  layui.use([&#39;mod1&#39;, &#39;mod2&#39;],function(args){    var mo1 = layui.mod1       ,mo2 = layui.mod2;  });</ｓｃｒｉｐｔ>

三、layui表单

下面以HTML中最常见的form表单来演示layui的使用。

html部分：

<fieldset class="layui-elem-field layui-field-title" style="margin-top:30px;">    <legend style="text-align:center;">注册新账户</legend></fieldset><form id="reform" class="layui-form layui-form-pane"  th:action="@{/user/register.html}" method="POST">    <p class="layui-form-item">        <label class="layui-form-label">邮箱</label>        <p class="layui-input-block">        <input type="text" name="email" lay-verify="email" 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="text" name="name" lay-verify="required" 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"  lay-verify="pass" 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="repassword"   lay-verify="repass" placeholder="请输入密码" autocomplete="off" class="layui-input" />        </p>    </p>            <p class="layui-form-item">        <button  class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">注册</button>    </p>            <p style="text-align:center;margin-top:15px;">        <input type="checkbox" name="agree"  lay-skin="primary" checked=""/>                               我已阅读并同意        <a href="#" id="agreementLink">《隐私条款》</a>    </p></form>

javscript部分：

<!-- js for form input and submit --><ｓｃｒｉｐｔ>layui.use([&#39;form&#39;], function(){  var form = layui.form;   //自定义验证规则  form.verify({    pass: [/(.+){6,12}$/, &#39;密码必须6到12位&#39;]    ,repass:function(value){    var pvalue = $("input[name=&#39;password&#39;]").val();    if(pvalue!=value){    return "两次输入的密码不一致";    }    }  });   //监听提交  form.on(&#39;submit(demo1)&#39;, 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模块

<!-- 上传图片--><p class="layui-tab-item">    <p class="layui-upload">        <button type="button" class="layui-btn layui-btn-normal" id="headButton">            <i class="layui-icon">&#xe67c;</i>选择图片        </button>            <button type="button" class="layui-btn" id="headAddButton">开始上传</button>    </p>                   <p class="layui-inline layui-word-aux" style="margin-top:20px;">        <label>注意：支持jpg，png和gif格式，文件大小应小于10MB</label>    </p></p>

<!-- 文件上传 --><ｓｃｒｉｐｔ>layui.use(&#39;upload&#39;,function(){var $ = layui.jquery,upload = layui.upload;//选完文件后不自动上传upload.render({elem: &#39;#headButton&#39;,url: getRootPath()+&#39;/user/uploadPicture&#39;,size: 10*1024 //10*1024KB = 10MB,accept: &#39;images&#39;,acceptMime: &#39;image/jpg,image/png,image/gif&#39;,auto: false,bindAction: &#39;#headAddButton&#39;,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<String,Object> uploadFile(@RequestParam("file")MultipartFile file,HttpservletRequest request){Map<String,Object> map = new HashMap<String,Object>();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。

<p id="allNewsDiv"></p><p id="demo"></p>

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表格算是一件比较繁琐且容易出错的事情。

<!-- team分页table --><table class="layui-hide" id="teamTable" lay-filter="teamTool"></table>

<ｓｃｒｉｐｔ>layui.use(&#39;table&#39;,function(){ var table = layui.table;//模块声明table.render({elem:&#39;#teamTable&#39;,method:&#39;get&#39;,url:getRootPath()+&#39;/team/admin/list&#39; //返回一个List<TeamMember>的list,cellMinWidth:80,cols:[[{field:&#39;id&#39;, title:&#39;ID&#39;, sort:true},{field:&#39;name&#39;, title:&#39;姓名&#39;},{field:&#39;birth&#39;, title:&#39;出生日期&#39;} //这里的templet值时模板元素的选择器,{field:&#39;position&#39;, title:&#39;身份&#39;},{field:&#39;information&#39;, title:&#39;个人信息&#39;}    ,{field:&#39;right&#39;, title:&#39;操作&#39;, toolbar:&#39;#barDemo&#39;}    ]]    ,page:true  //开启分页    });//监听工具条table.on(&#39;tool(teamTool)&#39;, 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 === &#39;detail&#39;){ //查看    //do somethinglayer.msg(&#39;ID：&#39;+ data.id + &#39; 的查看操  } else if(layEvent === &#39;del&#39;){ //删除     layer.confirm(&#39;确认删除人员信息？&#39;, function(index){       //do something       layer.close(index);    });   } else if(layEvent === &#39;edit&#39;){ //编辑  //do something  }});});</ｓｃｒｉｐｔ>  <!-- tools --><ｓｃｒｉｐｔ type="text/html" id="barDemo">    <a class="layui-btn layui-btn-primary 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></ｓｃｒｉｐｔ>

效果图：

更多layui知识请关注layui框架。