layui框架(layui框架的基礎使用方法)

layui(諧音:類UI) 是一款采用自身模塊規范編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。

一、介紹

在使用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">    <p class="layui-form-item">        <label class="layui-form-label">郵箱</label>        <p class="layui-input-block">        <input type="text" name="email" lay-verify="email" placeholder="請輸入" autocomplete="off" class="layui-input" />        </p>    </p>             <p class="layui-form-item">        <label class="layui-form-label">用戶名</label>        <p class="layui-input-block">            <input type="text" name="name" lay-verify="required" placeholder="請輸入" autocomplete="off" class="layui-input" />        </p>    </p>             <p class="layui-form-item">        <label class="layui-form-label">密碼</label>        <p class="layui-input-block">            <input type="password" name="password"  lay-verify="pass" placeholder="請輸入密碼" autocomplete="off" class="layui-input" />        </p>    </p>            <p class="layui-form-item">        <label class="layui-form-label">重復密碼</label>        <p class="layui-input-block">            <input type="password" name="repassword"   lay-verify="repass" placeholder="請輸入密碼" autocomplete="off" class="layui-input" />        </p>    </p>            <p class="layui-form-item">        <button  class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">注冊</button>    </p>            <p style="text-align:center;margin-top:15px;">        <input type="checkbox" name="agree"  lay-skin="primary" checked=""/>                               我已閱讀并同意        <a href="#" id="agreementLink">《隱私條款》</a>    </p></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>

效果圖:

四、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);//關閉 });}

效果圖:

layer不僅僅可以彈出提示框,還可以做到一些有趣且實用的動態效果,甚至可以加載一個彈出的HTML界面出來。

五、layui文件上傳

下面介紹一下layui的文件上傳,即upload模塊

<!-- 上傳圖片--><p class="layui-tab-item">    <p 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>    </p>                   <p class="layui-inline layui-word-aux" style="margin-top:20px;">        <label>注意:支持jpg,png和gif格式,文件大小應小于10MB</label>    </p></p>

<!-- 文件上傳 --><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類中):

@AutowiredFileService fileService;@RequestMapping(path="/uploadPicture",method= {RequestMethod.POST})@ResponseBodypublic 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"  }}

效果圖:

layui的upload模塊能夠在前端進行配置文件大小、格式、預覽,還可以做到批量上傳、重傳功能。

六、layui分頁

在網站中也經常會用到分頁,后端的分頁是容易實現的,但對于前端來說就不是那么理想了。layui提供了自己的分頁模塊——laypage。

<p id="allNewsDiv"></p><p id="demo"></p>

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處理數據并填充p            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 somethinglayer.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框架的基礎使用方法就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。