如何快速使用LayUI MINI框架


是什么

LayUI MINI是基於LayUI框架開發的一套最簡潔、易用的后台框架模板,它已經是一個非常完整的腳手架,有現成的頁面模板可以參考甚至是直接使用。
通常來說,如果我們准備開發一套管理系統的WEB界面,一定是需要基於某個前端技術或框架來做的。實際上,可供選擇的組件也比較多,比如最原始的HTML+CSS+JavaScript三件套,或者直接使用某個Bootstrap框架,如:AdminLTE,又或者是某個MVC框架,如:AngularJSVue
選擇不同的框架是需要根據實際的需求而定的,不同框架實現技術不同,使用難易程度不同,適用的場景也不同。有的框架直接是一個腳手架項目,可以直接基於它就能快速地開發出業務系統的WEB界面,有的框架僅僅提供的了滿足各種需求的組件,還需要開發者自己基於此搭建起不同風格的整體界面。
LayUI MINI比LayUI更易於使用的地方在於:它已經是一個現成且完整的后台管理系統框架模板,直接拿來使用即可;而LayUI本身只是提供了一些封裝好的組件模塊,完整的界面框架還是需要使用者根據具體需求來實現。不論如何,在涉及到具體的UI組件使用上,還是LayUI框架提供的。
由於一些未知的原因,LayUI框架的官網已經不在繼續維護了,作者將LayUI完全托管於Gitee鏡像在線文檔地址
LayUI MINI的官網是正常運行的,詳見:http://layuimini.99php.cn/

如何做

使用Lay MINI框架模板可以有2種方式:
方式一:作為獨立的前端項目運行,數據通過REST接口從后端獲取,需要API接口解決跨域訪問問題。
方式二:如果后台管理系統是Java Web項目,可以將LayUI MINI作為靜態頁面部分;當然,如果是基於其他語言的Web項目,也是類似的。

上述兩種使用方式都各有利弊,根據使用情況選擇即可。

方式一:管理系統界面作為獨立的前端項目運行

這種方式其實就是完全的前后端分離的開發模式,管理后台的數據部分由API提供,而前端界面部分獨立布署,例如可以直接布署在Nginx中。
在這種模式下,由於前端和數據API部分是不能運行在相同的域名和端口的,所以前端在訪問數據時會遇到跨域限制的問題,該問題需要API來解決,具體實現參考解決瀏覽器跨域限制方案之CORS 。這種方式的好處在於,數據與界面完全分離,互不影響。當然,與之相對應的是增加了布署工作量和復雜度。

該方式下使用LayUI MINI框架的方式非常簡單,直接下載LayUI MINI的壓縮包,如:layuimini-2.0.4.3-iframe.tar.gz,然后解壓到指定目錄,根據需要重新命名下目錄名稱,然后就可以開始在該框架模板的基礎上開發了,根據需要創建新的頁面即可。
前端開發可以使用靜態服務器進行調試,參考:前端開發利器之靜態服務器

方式二:作為Java Web項目的靜態頁面部分

此時基於LayUI MINI框架模板開發的靜態頁面部分,本質上使用了Servlet容器(如:Tomcat,Jetty)作為HTTP服務器。
以使用Spring Boot作為Java Web項目的開發框架為例:將LayUI MINI壓縮包中解壓出來的所有靜態文件直接拷貝到項目目錄src/main/resources/static下,啟動Java Web項目,訪問:http://host:post/index.html就可以訪問到頁面了。
在Spring Boot中使用LayUI MINI框架

這種方式最終是將靜態頁面跟數據代碼一起打包為一個完整的可運行jar包運行,非常方便,這通常也是廣大后端開發人員在基於LayUI MINI開發后台管理系統時常用的方式。
該方式是一種非常傳統的Java Web項目開發模式,可使用一些模板引擎技術進行數據渲染,如:freemarker。

如果希望修改前端界面之后無需重啟程序就能生效,可以通過參數spring.web.resources.static-locations指定靜態資源目錄即可。
SpringBoot_Statics_Reload_Auto

總結

LayUI MINI框架完全做到了拿來即用的目標,非常簡單,但是很強大,甚至比AdminLTE還更加簡潔和方便。
LayUI MINI框架的基礎LayUI框架,所以其中涉及的各種組件的用法直接參考LayUI框架文檔即可。

【參考】
layui學習筆記


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM