Quickly get started with the front-end framework layui

layui (homophone: UI-like) is a front-end UI framework written using its own module specifications. It follows the writing and organizational form of native HTML/CSS/JS. The threshold is extremely low and can be used out of the box.

1. Introduction

Before using layui, we must first understand layui What is it?

I think it can be summarized in one sentence of the author Xianxin: a front-end framework designed for back-end programmers.

A more detailed description is: This is a front-end framework that encapsulates various css, js, Ajax, etc. Its degree of encapsulation is so high that sometimes it is not even friendly to programmers. But for people with average front-end technology, layui is a good tool.

2. Start using layui

How to use: After downloading, import the project and then quote it

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

First reference jquery, then reference layui.js and layui.css.

Why does it have to be local? No CDN?

As mentioned above, layui is too encapsulated "good" and the programmer's autonomy is limited. At this time, the source code of layui needs to be modified, such as the style of css - this is also the case with layui. Correct usage, not just simple use.

layui modules: layui is modular, including form, layer, laydate, laypage and other modules. It is these modules that make up the complete layui. When using layui, you need to specify the module you are using.

Start using layui:

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

3. Layui form

The following is a demonstration of the most common form form in HTML The use of layui.

html part:

<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 part:

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

Rendering:

## 4. Layui pop-up layer

Let’s talk about the pop-up layer. Pop-up can be said to be a very common thing, but basic HTML/JS only has the ugly alert("") method. layui contains a pop-up layer module called layer.

Two ways to use layer:

1. Just like using the form module above, declare layui.use, and then use it in the function after use ;

2. Import the independent layer module file, and then use it directly;

The first method will not be discussed, and the second method will be introduced here.

First, download the layer file from the layer official website, unzip it and put it into your own project, then> ;Introduce the layer.js file in a form similar to this.

Example:

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

Rendering:

layer can not only pop up prompt boxes, but also do some interesting and practical things Dynamic effects can even load a pop-up HTML interface.

5. Layui file upload

The following introduces layui file upload, that is, the upload module

<!-- 上传图片-->
<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>    
        <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(&#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;
			}
		}
	});
});
</script>

Backend ( java-spring-controller class):

@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 interface and return value:

//上传接口
upload.render({
  elem: '#id'
  ,url: '/api/upload/' //必填项
  ,method: ''  //可选项。HTTP类型，默认post
  ,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
});   

//返回值
{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.layui.com/12Quickly get started with the front-end framework layui"
  }
}

Rendering:

layui The upload module can configure file size, format, and preview on the front end, and can also perform batch upload and retransmission functions.

6. Layui paging

Pagination is also often used in websites. Back-end paging is easy to implement, but for the front-end It's not that ideal. layui provides its own paging module-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;
		            }
			      });
			    }
			 });
		 } 
	  });
});

As above, the paging jump event is performed in jump. Write the AJAX request in it, obtain the page and limit parameters through the obj parameter of jump, and then process it after the request is executed and the data is returned. Can.

7. Layui data table

Table is a common function, but js splicing HTML table is a relatively tedious and error-prone thing. .

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

<script>
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 something
		layer.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
	  }
	});
});
</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>

Rendering:

For more layui knowledge, please pay attention to

layui framework.

The above is the detailed content of Quickly get started with the front-end framework layui. For more information, please follow other related articles on the PHP Chinese website!