快速上手layui

一、介紹

在使用layui之前，我們先要了解一下layui是什麼？
我覺得用賢心大大的一句話來概括就好了：爲後端程序員設計的前端框架。
更加詳細的描述是：這是一個封裝了各種css和js、Ajax等等的前端框架，其封裝程度之高，有時甚至對程序員來說不大友好。但對於前端技術一般的人來說，layui不失爲一個好的工具。

二、開始使用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>

效果圖：

四、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界面出來。更多的東西請參考layer官網。

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

有關Javaweb文件上傳可以參照我的另一篇博客：輕鬆實現Javaweb文件上傳

效果圖：

layui的upload模塊能夠在前端進行配置文件大小、格式、預覽，還可以做到批量上傳、重傳功能。更多的內容請參照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>

效果圖：

好了，有關layui的介紹就到此爲止，更加詳細和深入的瞭解請移步layui官網。

一、介紹

二、開始使用layui

三、layui表單

四、layui彈出層

五、layui文件上傳

六、layui分頁

七、layui數據表格

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

markdown編輯器推薦

Mybatis查詢返回特定屬性的集合List<Map>而非對象的集合

json字符串解析與類型轉換

Set、List和數組互相轉換

java發送http請求的兩種方式：HTTPClient和CloseableHttpClient

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結