快速上手前端框架layui

一、介绍

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

我觉得用作者贤心的一句话来概括就好了：为后端程序员设计的前端框架。

更加详细的描述是：这是一个封装了各种css和js、Ajax等等的前端框架，其封装程度之高，有时甚至对程序员来说不大友好。但对于前端技术一般的人来说，layui不失为一个好的工具。

二、开始使用layui

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

<script th:src="@{/jquery-3.3.1.min.js}"></script> <script th:src="@{/layui/layui.js}"></script> <link rel="stylesheet" th:href="@{/layui/css/layui.css}" />

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

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

上面说了，layui封装得太“好”了，程序员的自主性受到限制，这个时候需要修改layui的源码，比如css的样式——这也是layui的正确用法，而不只是简单地使用。

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

开始使用layui：

<script>   layui.use(['mod1', 'mod2'],function(args){     var mo1 = layui.mod1        ,mo2 = layui.mod2;   }); </script>

三、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">     <div class="layui-form-item">         <label class="layui-form-label">邮箱</label>         <div class="layui-input-block">         <input type="text" name="email" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input" />         </div>     </div>               <div class="layui-form-item">         <label class="layui-form-label">用户名</label>         <div class="layui-input-block">             <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />         </div>     </div>               <div class="layui-form-item">         <label class="layui-form-label">密码</label>         <div class="layui-input-block">             <input type="password" name="password"  lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input" />         </div>     </div>              <div class="layui-form-item">         <label class="layui-form-label">重复密码</label>         <div class="layui-input-block">             <input type="password" name="repassword"   lay-verify="repass" placeholder="请输入密码" autocomplete="off" class="layui-input" />         </div>     </div>              <div class="layui-form-item">         <button  class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">注册</button>     </div>              <div style="text-align:center;margin-top:15px;">         <input type="checkbox" name="agree"  lay-skin="primary" checked=""/>                                我已阅读并同意         <a href="#" id="agreementLink">《隐私条款》</a>     </div> </form>

javscript部分：

<!-- js for form input and submit --> <script> 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;//阻止表单提交     }   }); }); </script>

效果图：

四、layui弹出层

下面讲述一下弹出层，弹出可以说是一个很常见的东西了，但基础的HTML/JS只有丑陋的alert("")方法，layui包含了一个叫做layer的弹出层模块。

使用layer的两种方式：

一、像上面使用form模块一样，layui.use声明，然后在use后面的function里使用；

二、导入独立的layer模块文件，然后就可以直接使用；

关于第一种方式不予讨论，这里介绍一下第二种方式。

首先，从layer官网下载layer的文件，解压并放入自己的项目下，然后<script th:src="@{/layer/layer.js}"></script>类似这样的形式引入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模块

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

<!-- 文件上传 --> <script> 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; 			} 		} 	}); }); </script>

后端（java-spring-controller类中）：

@Autowired FileService fileService;  @RequestMapping(path="/uploadPicture",method= {RequestMethod.POST}) @ResponseBody public 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。

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

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处理数据并填充div 		            	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>

<script> layui.use('table',function(){  	var table = layui.table;//模块声明 	 	table.render({ 		elem:'#teamTable' 		,method:'get' 		,url:getRootPath()+'/team/admin/list' //返回一个List<TeamMember>的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 something 		layer.msg('ID：'+ data.id + ' 的查看操 	  } else if(layEvent === 'del'){ //删除  	    layer.confirm('确认删除人员信息？', function(index){  	      //do something  	      layer.close(index); 	    });  	  } else if(layEvent === 'edit'){ //编辑 		  //do something 	  } 	}); }); </script>    <!-- tools --> <script 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> </script>

效果图：

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

以上就是快速上手前端框架layui的详细内容，更多内容请关注技术你好其它相关文章！