简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  快速上手前端框架layui

快速上手前端框架layui

尚
尚ke hadapan
2019-11-15 11:36:149995semak imbas

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

快速上手前端框架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([&#39;mod1&#39;, &#39;mod2&#39;],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([&#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>

效果图：

1.jpg

四、layui弹出层

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

使用layer的两种方式：

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

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

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

首先，从layer官网下载layer的文件，解压并放入自己的项目下，然后95d50663f3408e8847d7ff59ca2625022cacc6d41bbb37262a98f745aa00fbf0类似这样的形式引入layer.js文件。

Example：

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

效果图：

2.jpg

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

后端（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: &#39;#id&#39;
  ,url: &#39;/api/upload/&#39; //必填项
  ,method: &#39;&#39;  //可选项。HTTP类型，默认post
  ,data: {} //可选项。额外的参数，如：{id: 123, abc: &#39;xxx&#39;}
});   

//返回值
{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.layui.com/123.jpg"
  }
}

效果图：

3.jpg

layui的upload模块能够在前端进行配置文件大小、格式、预览，还可以做到批量上传、重传功能。

六、layui分页

在网站中也经常会用到分页，后端的分页是容易实现的，但对于前端来说就不是那么理想了。layui提供了自己的分页模块——laypage。

<div id="allNewsDiv"></div>
<div id="demo"></div>
layui.use([&#39;element&#39;,&#39;laypage&#39;], function(){
	  var element = layui.element
	  ,laypage = layui.laypage;
	  
	  $.ajax({
		 url:getRootPath()+&#39;/news/count&#39;
		 ,type:&#39;GET&#39;
		 ,async:true  //false表示非异步，即同步，即请求处理完毕后才能返回；
		 ,data:{"page":1, "limit":10}
		 ,dataType:&#39;json&#39;
		 ,success:function(alldata){
			var numbers = alldata.count;
		    //总页数大于页码总数
			laypage.render({
			    elem: &#39;demo&#39;
			    ,count: numbers//数据总数
			    ,first: &#39;首页&#39;
			    ,last: &#39;尾页&#39;
			    ,jump: function(obj){
			      $.ajax({
		            url:getRootPath()+&#39;/news/list&#39;
		            ,type:&#39;GET&#39;
		            ,async:true
		            ,data:{"page":obj.curr, "limit":obj.limit}
		            ,dataType:&#39;json&#39;
		            ,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(&#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>

效果图：

4.jpg

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

Atas ialah kandungan terperinci 快速上手前端框架layui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Java spring jquery css ajax layui html 前端框架 封装 接口 JS function 事件 alert th ui
Kenyataan：
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Layui使用入门教程Artikel seterusnya：layui常用方法

Artikel berkaitan

Lihat lagi