快速上手前端框架layui

时间 2019-12-06

标签快速上手前端框架 layui 繁體版

原文原文链接

1、介绍

在使用layui以前，咱们先要了解一下layui是什么？我以为用做者贤心的一句话来归纳就行了：为后端程序员设计的前端框架。更加详细的描述是：这是一个封装了各类css和js、Ajax等等的前端框架，其封装程度之高，有时甚至对程序员来讲不大友好。但对于前端技术通常的人来讲，layui不失为一个好的工具。javascript

2、开始使用layui

官网地址：layui 使用方式：下载后导入项目，而后引用便可css

<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的正确用法，而不仅是简单地使用。html

layui的模块：layui是模块化的，包括form，layer，laydate，laypage等等模块，正是这些模块组成了完整的layui。使用layui的时候，须要指明本身使用的模块。前端

开始使用layui：java

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

3、layui表单

下面以HTML中最多见的form表单来演示layui的使用。 html部分：jquery

<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>
复制代码

效果图： web

4、layui弹出层

下面讲述一下弹出层，弹出能够说是一个很常见的东西了，但基础的HTML/JS只有丑陋的alert("")方法，layui包含了一个叫作layer的弹出层模块。使用layer的两种方式：1、像上面使用form模块同样，layui.use声明，而后在use后面的function里使用； 2、导入独立的layer模块文件，而后就能够直接使用；关于第一种方式不予讨论，这里介绍一下第二种方式。ajax

首先，从layer官网下载layer的文件，解压并放入本身的项目下，而后<script th:src="@{/layer/layer.js}"></script>相似这样的形式引入layer.js文件。spring

Example：

function msg(msg){
 	//墨绿深蓝风
    layer.alert(msg, {
      title:'消息'
      ,skin: 'layui-layer-molv' //样式类名
	  ,closeBtn: 0
	 },function(index){
		layer.close(index);//关闭
	 });
}
复制代码

效果图：

layer不只仅能够弹出提示框，还能够作到一些有趣且实用的动态效果，甚至能够加载一个弹出的HTML界面出来。更多的东西请参考layer官网。

5、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"
  }
} 
复制代码

有关Javaweb文件上传能够参照个人另外一篇博客：轻松实现Javaweb文件上传

效果图：

layui的upload模块可以在前端进行配置文件大小、格式、预览，还能够作到批量上传、重传功能。更多的内容请参照layui的upload模块。

6、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参数，而后在请求执行完毕并返回数据后进行处理便可

7、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官网。