一、layUI的介紹
layui(諧音：類UI) 是一款采用自身子產品規範編寫的前端 UI 架構，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的内在，體積輕盈，元件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常适合界面的快速開發。layui 差別于那些基于 MVVM 底層的 UI 架構，卻并非逆道而行，而是信奉返璞歸真之道。準确地說，她更多是為服務端程式員量身定做，你無需涉足各種前端工具的複雜配置，隻需面對浏覽器本身，讓一切你所需要的元素與互動，從這裡信手拈來。
二、環境的建立
官網下載下傳檔案位址：https://www.layui.com/
點選【立即下載下傳】按鈕進行下載下傳
1、建立springboot項目将layUI進行引入
2、說明layUI加載情況
獲得 layui 後，将其完整地部署到你的項目目錄(或靜态資源伺服器)，你隻需要引入下述兩個檔案：./layui/css/layui.css./layui/layui.js //提示：如果是采用非子產品化方式(最下面有講解)，此處可換成：./layui/layui.all.js
沒錯，不用去管其它任何檔案。因為他們(比如各子產品)都是在最終使用的時候才會自動加載。這是一個基本的入門頁面：
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>開始使用layuititle><link rel="stylesheet" href="../layui/css/layui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >head><body><script src="../layui/layui.js">script><script>//一般直接寫在一個js檔案中layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;layer.msg('Hello World');});script>body>html>
如果你想采用非子產品化方式(即所有子產品一次性加載，盡管我們并不推薦你這麼做)，你也可以按照下面的方式使用：
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>非子產品化方式使用layuititle><link rel="stylesheet" href="../layui/css/layui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >head><body><script src="../layui/layui.all.js">script><script>//由于子產品都一次性加載，是以不用執行 layui.use() 來加載對應子產品，直接使用即可：;!function(){var layer = layui.layer,form = layui.form;layer.msg('Hello World');}();script>body>html>
3、建立一個HTML界面用springboot的方式進入界面
(1)spring-boot 對Thymeleaf很多配置有預設配置，如預設頁面映射路徑為：classpath:/templates/， 預設的檔案為界面字尾為：.html。是以，上面HTML檔案中引入的css和js檔案路徑不要寫成如下這種寫法：
<link rel="stylesheet" href="../layui/css/layui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><script src="../layui/layui.js">script>
(2)如果像上面的方式引入在檢查資源檔案是否加載的時候在浏覽器中調試模式下看是否加載成功，如下為加載不成功示例：
如果安如下加載沒有起作用可以重新開機idea試一試<link rel="stylesheet" href="/static/layui/css/layui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><script type="text/javascript" src="/static/layui/layui.js">script>或<link rel="stylesheet" href="../static/layui/css/layui.css" target="_blank" rel="external nofollow" ><script type="text/javascript" src="../static/layui/layui.js">script>當項目為war的<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" target="_blank" rel="external nofollow" ><script type="text/javascript" th:src="@{/static/layui/layui.js}">script>時候
4、小界面
<html><head> <meta charset="utf-8"> <title>layui.form小例子title> <link rel="stylesheet" href="/static/layui/css/layui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" > <script type="text/javascript" src="/static/layui/layui.js">script>head><body><form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">輸入框label> <div class="layui-input-block"> <input type="text" name="" placeholder="請輸入" autocomplete="off" class="layui-input"> div> div> <div class="layui-form-item"> <label class="layui-form-label">下拉選擇框label> <div class="layui-input-block"> <select name="interest" lay-filter="aihao"> <option value="0">寫作option> <option value="1">閱讀option> select> div> div> <div class="layui-form-item"> <label class="layui-form-label">複選框label> <div class="layui-input-block"> <input type="checkbox" name="like[write]" title="寫作"> <input type="checkbox" name="like[read]" title="閱讀"> div> div> <div class="layui-form-item"> <label class="layui-form-label">開關關label> <div class="layui-input-block"> <input type="checkbox" lay-skin="switch"> div> div> <div class="layui-form-item"> <label class="layui-form-label">開關開label> <div class="layui-input-block"> <input type="checkbox" checked lay-skin="switch"> div> div> <div class="layui-form-item"> <label class="layui-form-label">單選框label> <div class="layui-input-block"> <input type="radio" name="sex" value="0" title="男"> <input type="radio" name="sex" value="1" title="女" checked> div> div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">請填寫描述label> <div class="layui-input-block"> <textarea placeholder="請輸入内容" class="layui-textarea">textarea> div> div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="*">立即送出button> <button type="reset" class="layui-btn layui-btn-primary">重置button> div> div> form><script> layui.use('form', function(){ var form = layui.form; //各種基于事件的操作，下面會有進一步介紹 });script>body>html>
5、js的寫法(資料的顯示demo)
<link rel="stylesheet" href="/static/layui/css/layui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" > <script type="text/javascript" src="/static/layui/layui.js">script> <script type="text/javascript" src="/static/layui/layui.all.js">script>
<html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>layui線上調試title> <link rel="stylesheet" href="/static/layui/css/layui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" > <script type="text/javascript" src="/static/layui/layui.js">script> <script type="text/javascript" src="/static/layui/layui.all.js">script> <style> body{margin: 10px;} .demo-carousel{height: 200px; line-height: 200px; text-align: center;}style>head><body><table class="layui-hide" id="demo" lay-filter="test">table><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><div class="layui-tab layui-tab-brief" lay-filter="demo"> <ul class="layui-tab-title"> <li class="layui-this">示範說明li> <li>日期li> <li>分頁li> <li>上傳li> <li>滑塊li> ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <div class="layui-carousel" id="test1"> <div carousel-item> <div><p class="layui-bg-green demo-carousel">在這裡，你将以最直覺的形式體驗 layui！p>div> <div><p class="layui-bg-red demo-carousel">在編輯器中可以執行 layui 相關的一切代碼p>div> <div><p class="layui-bg-blue demo-carousel">你也可以點選左側導航針對性地試驗我們提供的示例p>div> <div><p class="layui-bg-orange demo-carousel">如果最左側的導航的高度超出了你的螢幕p>div> <div><p class="layui-bg-cyan demo-carousel">你可以将滑鼠移入導航區域，然後滑動滑鼠滾輪即可p>div> div> div> div> <div class="layui-tab-item"> <div id="laydateDemo">div> div> <div class="layui-tab-item"> <div id="pageDemo">div> div> <div class="layui-tab-item"> <div class="layui-upload-drag" id="uploadDemo"> <i class="layui-icon">i> <p>點選上傳，或将檔案拖拽到此處p> <div class="layui-hide" id="uploadDemoView"> <hr> <img src="" alt="上傳成功後渲染" style="max-width: 100%"> div> div> div> <div class="layui-tab-item"> <div id="sliderDemo" style="margin: 50px 20px;">div> div> div>div><blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供強力驅動blockquote><script> layui.config({ version: '1598935358940' //為了更新 js 緩存，可忽略 }); layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){ var laydate = layui.laydate //日期 ,laypage = layui.laypage //分頁 ,layer = layui.layer //彈層 ,table = layui.table //表格 ,carousel = layui.carousel //輪播 ,upload = layui.upload //上傳 ,element = layui.element //元素操作 ,slider = layui.slider //滑塊 //向世界問個好 layer.msg('Hello World'); //監聽Tab切換 element.on('tab(demo)', function(data){ layer.tips('切換了 '+ data.index +'：'+ this.innerHTML, this, { tips: 1 }); }); //執行一個 table 執行個體 table.render({ elem: '#demo' ,height: 420 ,url: '/demo/table/user/' //資料接口 ,title: '使用者表' ,page: true //開啟分頁 ,toolbar: 'default' //開啟工具欄，此處顯示預設圖示，可以自定義模闆，詳見文檔 ,totalRow: true //開啟合計行 ,cols: [[ //表頭 {type: 'checkbox', fixed: 'left'} ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合計：'} ,{field: 'username', title: '使用者名', width:80} ,{field: 'experience', title: '積分', width: 90, sort: true, totalRow: true} ,{field: 'sex', title: '性别', width:80, sort: true} ,{field: 'score', title: '評分', width: 80, sort: true, totalRow: true} ,{field: 'city', title: '城市', width:150} ,{field: 'sign', title: '簽名', width: 200} ,{field: 'classify', title: '職業', width: 100} ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true} ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'} ]] }); //監聽頭工具欄事件 table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id) ,data = checkStatus.data; //擷取選中的資料 switch(obj.event){ case 'add': layer.msg('添加'); break; case 'update': if(data.length === 0){ layer.msg('請選擇一行'); } else if(data.length > 1){ layer.msg('隻能同時編輯一個'); } else { layer.alert('編輯 [id]：'+ checkStatus.data[0].id); } break; case 'delete': if(data.length === 0){ layer.msg('請選擇一行'); } else { layer.msg('删除'); } break; }; }); //監聽行工具事件 table.on('tool(test)', function(obj){ //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值" var data = obj.data //獲得目前行資料 ,layEvent = obj.event; //獲得 lay-event 對應的值 if(layEvent === 'detail'){ layer.msg('檢視操作'); } else if(layEvent === 'del'){ layer.confirm('真的删除行麼', function(index){ obj.del(); //删除對應行(tr)的DOM結構 layer.close(index); //向服務端發送删除指令 }); } else if(layEvent === 'edit'){ layer.msg('編輯操作'); } }); //執行一個輪播執行個體 carousel.render({ elem: '#test1' ,width: '100%' //設定容器寬度 ,height: 200 ,arrow: 'none' //不顯示箭頭 ,anim: 'fade' //切換動畫方式 }); //将日期直接嵌套在指定容器中 var dateIns = laydate.render({ elem: '#laydateDemo' ,position: 'static' ,calendar: true //是否開啟公曆重要節日 ,mark: { //标記重要日子 '0-10-14': '生日' ,'2020-01-18': '小年' ,'2020-01-24': '除夕' ,'2020-01-25': '春節' ,'2020-02-01': '上班' } ,done: function(value, date, endDate){ if(date.year == 2017 && date.month == 11 && date.date == 30){ dateIns.hint('一不小心就月底了呢'); } } ,change: function(value, date, endDate){ layer.msg(value) } }); //分頁 laypage.render({ elem: 'pageDemo' //分頁容器的id ,count: 100 //總頁數 ,skin: '#1E9FFF' //自定義選中色值 //,skip: true //開啟跳頁 ,jump: function(obj, first){ if(!first){ layer.msg('第'+ obj.curr +'頁', {offset: 'b'}); } } }); //上傳 upload.render({ elem: '#uploadDemo' ,url: 'https://httpbin.org/post' //改成您自己的上傳接口 ,done: function(res){ layer.msg('上傳成功'); layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file); console.log(res) } }); //滑塊 var sliderInst = slider.render({ elem: '#sliderDemo' ,input: true //輸入框 }); //底部資訊 var footerTpl = lay('#footer')[0].innerHTML; lay('#footer').html(layui.laytpl(footerTpl).render({})) .removeClass('layui-hide'); });script>body>html>