搜尋

首頁  >  文章  >  web前端  >  快速上手前端框架layui

快速上手前端框架layui

尚
尚轉載
2019-11-15 11:36:1410009瀏覽

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>

效果圖：

快速上手前端框架layui

四、layui彈出層

下面講述一下彈出層，彈出可以說是一個很常見的東西了，但基礎的HTML/JS只有醜陋的alert("")方法， layui包含了一個叫做layer的彈出層模組。

使用layer的兩種方式：

一、像上面使用form模組一樣，layui.use聲明，然後在use後面的function裡使用;

二、導入獨立的layer模組文件，然後就可以直接使用；

#關於第一種方式不予討論，這裡介紹一下第二種方式。

首先，從layer官網下載layer的文件，解壓縮並放入自己的專案下，然後> ;類似這樣的形式引入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);//关闭
	 });
}

效果圖：

快速上手前端框架layui

#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/12快速上手前端框架layui"
  }
}

效果圖：

快速上手前端框架layui

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

效果圖：

快速上手前端框架layui

更多layui知識請關注layui框架。

以上是快速上手前端框架layui的詳細內容。更多資訊請關注PHP中文網其他相關文章！

Java spring jquery css ajax layui html 前端框架 封装 接口 JS function 事件 alert th ui
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除
上一篇：Layui使用入門教程下一篇：Layui使用入門教程

相關文章

看更多