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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

SpringBoot集成LayUI及組件使?介紹：LayUI是?個使?簡單、上?容易的前端UI框架，?常適合后端開發(fā)?員構(gòu)建后臺管理系統(tǒng)使?。這個框架與SpringBoot類似，模塊化各個組件，拿來即?。相?另?個后臺管理前端框架EasyUI相?，LayUI更加注重極簡?格，組件也更加的美觀。1.新建MAVEN項?，構(gòu)建?錄結(jié)構(gòu)，如圖：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很多配置有默認(rèn)配置，如默認(rèn)頁?映射路徑為：classpath:/templates/，默認(rèn)的?件后綴為：.html。所以，上?HTML?件中引?的css和js?件路徑不要寫成如下這種寫法：<linkrel="stylesheet"href="../static/layui/css/layui.css"><scriptsrc="../static/layui/layui.js"></script>檢查資源?件是否加載，可在瀏覽器中調(diào)試模式下看是否加載成功，如下為加載不成功?例：如果是靜態(tài)資源直接調(diào)試，如在IDEA中直接打開HTML頁?，需要加上/static路徑，畢竟/static是SpringBoot項?啟動后才?效配置的默認(rèn)路徑<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>運(yùn)營后臺管理系統(tǒng)</div><!--頭部區(qū)域（可配合layui已有的?平導(dǎo)航）--><!--<!--<!--<!--<!--<!--<!--<!--<!--<!--<!--<!--<!--<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:;">其它系統(tǒng)</a>--><dlclass="layui-nav-child">--><dd><a郵件href="">管理</a></dd>--><dd><a消息href="">管理</a></dd>--><dd><a授權(quán)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產(chǎn)品<href=""/a></li><liclass="layui-nav-item"><a?數(shù)href="">據(jù)</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="">全設(shè)置<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">左<!--側(cè)導(dǎo)航區(qū)域（可配合layui已有的垂直導(dǎo)航）--><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發(fā)布href=""商品</a></li></ul></div></div><divclass="layui-body"><!--內(nèi)容主體區(qū)域--><divstyle="padding:15px;"><divclass="layui-tab"><ulclass="layui-tab-title"><liclass="layui-this">?站設(shè)置</li>?戶管<li>理</li>權(quán)限分<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"請輸?標(biāo)題placeh"autolder="complete="off"class="layui-input">輸?框</label></div></div><divclass="layui-form-item"><labelclass="layui-form-label">開關(guān)</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">進(jìn)度條展?：<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內(nèi)容區(qū)域layui-show"></div></div><divclass="layui-colla-item"><h2class="layui-colla-title"><divclass="layui-colla-content內(nèi)容區(qū)域</div>李清照</h2>">"></div><divclass="layui-colla-item"><h2class="layui-colla-title"><divclass="layui-colla-content內(nèi)容區(qū)域</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"><!--底部固定區(qū)域-->?底部固-定區(qū)域</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監(jiān)聽//提交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出現(xiàn)滾動條，你還可以content:['','no']});});觸發(fā)//事件varactive={tabChange:function(){切換到指//定Tab項element.tabChange('demo',切換'22');到：?//戶管理}};vartablePage=laypage.render({elem:'test1',count:1000,limit:100,limits:[100,300,500]});執(zhí)?//實(shí)例varuploadInst=upload.render({varuploadInst=upload.render({elem:'#uploadFile'綁定元素//,url:'/upload/'上傳接?//,done:function(res){layer.alert("回調(diào)完畢");},error:function(){layer.alert("回調(diào)異常");}});渲染//vartreeTest=tree.render({elem:'#treeTest',data:[{成都title:'/?/級'菜單,children:[{??區(qū)title:'/?/級'菜單,children:[{環(huán)球?title:場'/三/級'菜單,children:[{愛達(dá)樂'title:/三/級菜單'以此類//……推，可?//限層級}]}]

溫馨提示

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

評論

0/150

提交評論