SpringBoot集成LayUI及組件使用_第1頁
SpringBoot集成LayUI及組件使用_第2頁
SpringBoot集成LayUI及組件使用_第3頁
SpringBoot集成LayUI及組件使用_第4頁
SpringBoot集成LayUI及組件使用_第5頁
已閱讀5頁，還剩3頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

SpringBoot集成LayUI及組件使?介紹：LayUI是?個使?簡單、上?容易的前端UI框架，?常適合后端開發?員構建后臺管理系統使?。這個框架與SpringBoot類似，模塊化各個組件，拿來即?。相?另?個后臺管理前端框架EasyUI相?，LayUI更加注重極簡?格，組件也更加的美觀。1.新建MAVEN項?，構建?錄結構，如圖：2.POM?件中引?Web和Thymeleaf依賴<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency></dependencies>3.新建簡單前端控制器/***@description:前端控制器*@author:xuzhihao*@create:2019-06-1410:36*/@ControllerpublicclassIndexController{@GetMapping("")publicStringindex(){return"index.html";}}4.在LayUI官?下載LayUI?件，添加到項?中，并新建HTML?件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>LayuiHTML</title><linkrel="stylesheet"href="../layui/css/layui.css"></head><body></body><scriptsrc="../layui/layui.js"></script><script>layui.use(['layer','form'],function(){varlayer=layui.layer,form=layui.form;layer.msg('HelloLayUI');});</script></html>注意：spring-boot對Thymeleaf很多配置有默認配置，如默認頁?映射路徑為：classpath:/templates/，默認的?件后綴為：.html。所以，上?HTML?件中引?的css和js?件路徑不要寫成如下這種寫法：<linkrel="stylesheet"href="../static/layui/css/layui.css"><scriptsrc="../static/layui/layui.js"></script>檢查資源?件是否加載，可在瀏覽器中調試模式下看是否加載成功，如下為加載不成功?例：如果是靜態資源直接調試，如在IDEA中直接打開HTML頁?，需要加上/static路徑，畢竟/static是SpringBoot項?啟動后才?效配置的默認路徑<linkrel="stylesheet"href="../static/layui/css/layui.css"><scriptsrc="../static/layui/layui.js"></script>5.JS中使?layui.use加載所需模塊layui.use(['laypage','layedit'],function(){varlaypage=layui.laypage,layedit=layui.layedit;//dosomethinglayer.msg('HelloLayUI');});6.常見頁?元素使?：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>LayuiHTML</title><linkrel="stylesheet"href="../static/layui/css/layui.css"></head><bodyclass="layui-layout-body"><bodyclass="layui-layout-body"><divclass="layui-layoutlayui-layout-admin"><divclass="layui-header"><divclass="layui-logo"><iclass="layui-iconlayui-icon-release"style="font-size:30px;color:#fff1fd;"></i>運營后臺管理系統</div><!--頭部區域（可配合layui已有的?平導航）--><!--<!--<!--<!--<!--<!--<!--<!--<!--<!--<!--<!--<!--<ulclass="layui-navlayui-layout-left">--><liclass="layui-nav-item"><a控制href="">臺</a></li>--><liclass="layui-nav-item"><a商品href="">管理</a></li>--><liclass="layui-nav-item"><a?戶href=""></a></li>--><liclass="layui-nav-item">--><ahref="javascript:;">其它系統</a>--><dlclass="layui-nav-child">--><dd><a郵件href="">管理</a></dd>--><dd><a消息href="">管理</a></dd>--><dd><a授權href="">管理</a></dd>--></dl>--></li>--></ul>--><ulclass="layui-navlayui-layout-left"lay-filter=""><liclass="layui-nav-item"><a最新href="">活動</a></li><liclass="layui-nav-itemlayui-this"><a產品<href=""/a></li><liclass="layui-nav-item"><a?數href="">據</a></li><liclass="layui-nav-item"><ahref="javascript:;">解決?案</a><dlclass="layui-nav-child">?級菜單<!><dd><a移href="">動模塊</a></dd><dd><a后href="">臺模版</a></dd><dd><a電href="">商平臺</a></dd></dl></li></ul><ulclass="layui-navlayui-layout-right"><liclass="layui-nav-item"><buttonclass="layui-btn"style="width:查看消130px;">息<spanclass="layui-badgelayui-bg-gray">10</span></button></li><liclass="layui-nav-item"style="width:120px;"><ahref="javascript:;">個?中?</a><dlclass="layui-nav-child"><dd><aid="userInfo">基本資料<spanclass="layui-badge-dotlayui-bg-orange"/></a></dd><dd><a安href="">全設置<spanclass="layui-badge">99+</span></a></dd></dl></li><liclass="layui-nav-item"><a退出href=""></a></li></ul></div><divclass="layui-sidelayui-bg-black"><divclass="layui-side-scroll">左<!--側導航區域（可配合layui已有的垂直導航）--><ulclass="layui-navlayui-nav-tree"lay-filter="test"><liclass="layui-nav-itemlayui-nav-itemed"><ahref="javascript:;">所有商品</a><dlclass="layui-nav-child"><dd><ahref="javascript:;">列表?</a></dd><dd><ahref="javascript:;">列表?</a></dd><dd><ahref="javascript:;">列表三</a></dd><dd><a超鏈href="">接</a></dd></dl></li><liclass="layui-nav-item"><liclass="layui-nav-item"><ahref="javascript:;">解決?案</a><dlclass="layui-nav-child"><dd><ahref="javascript:;">列表?</a></dd><dd><ahref="javascript:;">列表?</a></dd><dd><a超鏈href="">接</a></dd></dl></li><liclass="layui-nav-item"><a云市href="">場</a></li><liclass="layui-nav-item"><a發布href=""商品</a></li></ul></div></div><divclass="layui-body"><!--內容主體區域--><divstyle="padding:15px;"><divclass="layui-tab"><ulclass="layui-tab-title"><liclass="layui-this">?站設置</li>?戶管<li>理</li>權限分<li>配</li>商品管<li>理</li>訂單管<li>理</li></ul><divclass="layui-tab-content"><divclass="layui-tab-itemlayui-show"><formclass="layui-form"action=""><divclass="layui-form-item"><labelclass="layui-form-label"><divclass="layui-input-block"><inputtype="text"name="title"請輸?標題placeh"autolder="complete="off"class="layui-input">輸?框</label></div></div><divclass="layui-form-item"><labelclass="layui-form-label">開關</label><divclass="layui-input-block"><inputtype="checkbox"name="switch"lay-skin="switch"value="siwc"></div></div><selectname="city"lay-verify=""lay-search><option請選擇?value="">個城市</option><option成都value="010"></option><option重慶value="021"></option><optionvalue="022"上海（禁disabled>?效果）</option></select><inputtype="checkbox"name="checkbox"寫作"latitle="y-skin="primary"checked><divclass="layui-form-item"><divclass="layui-input-block"><buttonclass="layui-btn"lay-submitlay-filter="submitForm">?即提交</button><buttontype="reset"class="layui-btn重置<lay/buti-btn-primary">ton></div></div></form></div><divclass="layui-tab-item">進度條展?：<br/><divclass="layui-progress"lay-showPercent="yes"><divclass="layui-progress-barlayui-bg-red"lay-percent="30%"></div></div><ulclass="flow-default"id="flowTest"></ul><divclass="site-demo-flow"id="flowImageTest"><imglay-src="/dbebfc5a62245eb4d7b911f73f1bb9721fa0ee1c.png"></div></div><divclass="layui-tab-item"><divclass="layui-collapse"><divclass="layui-colla-item"><h2class="layui-colla-title">杜甫</h2><divclass="layui-colla-content內容區域layui-show"></div></div><divclass="layui-colla-item"><h2class="layui-colla-title"><divclass="layui-colla-content內容區域</div>李清照</h2>">"></div><divclass="layui-colla-item"><h2class="layui-colla-title"><divclass="layui-colla-content內容區域</div>魯迅</h2></div></div></div><divclass="layui-tab-item"><divclass="layui-carousel"id="carouse"><divcarousel-item>條?1</div<div>>條?2</div<div>>條?3</div<div>>條?4</div<div>>條?5</div<div>></div></div><tableclass="layui-table"><thead><tr>昵稱</th><th>加?時間</th><th>簽名</th><th></tr></thead><tbody><tr>賢?</td><td><td>2016-11-29</td>??就像是?<td>場修?</td></tr><tr>許閑?</td><td><td>2016-11-28</td>于千萬?之中<td>遇見你所遇見的?，于千萬年之中，時間的?涯的荒野?…</td></tr></tbody></table></div><divclass="layui-tab-item"><divid="test1"></div><buttontype="button"class="layui-btn"id="uploadFile"><iclass="layui-icon"></i>上傳圖?</button><divid="treeTest"></div></div></div></div></div></div><divclass="layui-footer"><!--底部固定區域-->?底部固-定區域</div></div></body><linkrel="stylesheet"href="../static/layui/css/layui.css"><scriptsrc="../static/layui/layui.js"></script><script>layui.use(['layer','form','element','laypage','upload','tree','carousel','flow'],function(){varlayer=layui.layer,form=layui.form,element=layui.element,$=layui.jquery,laypage=layui.laypage,upload=layui.upload,tree=layui.tree,carousel=layui.carousel,flow=layui.flow;//TODOdosomething監聽//提交form.on('submit(submitForm)',function(data){layer.msg(JSON.stringify(data.field));returnfalse;});$('#userInfo').on('click',function(){//layer.open({//type:1,//傳content:?任意的'?本或html'//});//layer.open({type:2,content:''這?content是//?個URL，如果你不想讓iframe出現滾動條，你還可以content:['','no']});});觸發//事件varactive={tabChange:function(){切換到指//定Tab項element.tabChange('demo',切換'22');到：?//戶管理}};vartablePage=laypage.render({elem:'test1',count:1000,limit:100,limits:[100,300,500]});執?//實例varuploadInst=upload.render({varuploadInst=upload.render({elem:'#uploadFile'綁定元素//,url:'/upload/'上傳接?//,done:function(res){layer.alert("回調完畢");},error:function(){layer.alert("回調異常");}});渲染//vartreeTest=tree.render({elem:'#treeTest',data:[{成都title:'/?/級'菜單,children:[{??區title:'/?/級'菜單,children:[{環球?title:場'/三/級'菜單,children:[{愛達樂'title:/三/級菜單'以此類//……推，可?//限層級}]}]

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論