前端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>

效果图:

1.png

四、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);//关闭
	 });
}

效果图:

2.png

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"
  }
}

效果图:

3.png

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>

效果图:

4.png


推荐文章
layui调用弹层的方法

两种调用方法:1、引用独立的layer.js文件引入好layer.js后,直接用即可 layer.msg('hello'); 2、调用layui中的layer模块layui.use('layer',

layui 开源吗?

layui开源吗?layui是免费开源的。layui是一款开源和免费的前端UI框架,可随意使用;不过为了维持发展,在其生态下,也会推出一些基于layui的收费产品,比如:layuiAdmin和layI

layui open怎么更改按钮的颜色?

layuiopen中可以使用skin来设置按钮颜色。skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同

layui如何抓取表单数据?

注意事项:1、layui中提交按钮是基于“监听”机制实现的。2、form.on()的调用需置于layui.use的回调函数中。3、末尾的'returnfalse'不可或缺,以确保不会触发页面刷新。注意

浅谈layui时间控件闪退问题的解决方案

项目上线,发现后台管理系统layui的子页面出现时间控件闪退的问题,根本选取不到时间。其原因是:如果出现页面找到多个节点,只有第一个节点能正常使用后面的节点都会闪退,可以理解为目前laydate不支持

layui之关于表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

layui框架学习之flow组件常见用法总结

该模块包含信息流加载和图片懒加载两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。下边分别给出了这两种技术的使用方法:一、信息流加载信息流加载的核心方法时flow.load(optio

layui是基于vue的吗?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

layui有什么功能?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

layui中怎么设置select下拉框自动选中某项?

1、需求场景分析用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A。在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值。2、Layui的select

layui框架属于前端还是后端?

layui框架属于前端还是后端?layui框架属于前端,是前端框架。layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,

layui表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

浅谈layui文件上传、预览及修改

单文件上传1、HTML &#xe67c;上传客服二维码 * 开始上传 温馨提示:每次最多上传一张图片,单张图片的大小不超过2MB 2、js部分varform=layui.for

Layui的简易入门教程

获得layui后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:./layui/css/layui.css ./layui/layui.js //提示:如果是采用非模块化

layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

浅谈layui中的table字段筛选功能

table模块在layui2.0的版本中全新推出,是layui框架最核心的组成之一。本篇文章就来为大家介绍一下layui框架的table模块的字段筛选功能,希望对大家有一定的帮助。先看效果,使用过ex

layui怎么监听多个radio事件?

需求如下图:想要选中单选框3,是单选框3下的复选框全选如果面板信息不多的话,可以给每个单选框3添加一个固定的监听事件但是实际项目中,不仅仅只有两个,会有几十个,这时总不能绑定一个lay-filter,

layui怎么隐藏表格行?

layui数据表格隐藏列在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({ elem:'#test'

如何使用webpack打包layui?(实践)

总的来说打包webpack打包layui要解决几个问题:1、解决引入layui-src报错的问题2、layui插件的打包方式3、解决打包后样式不生效的问题解决上面几个问题,基本就能成功打包了首先安装l

layui表格中怎么显示图片?

layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了1、jsp代码 发布Banner 2、然后是js代码layui.use('table',function()