layui(諧音:類UI) 是一款採用自身模塊規範編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心代碼到 API 的每一處細節都經過精心雕琢,非常適合界面的快速開發。layui 首個版本發佈於2016年金秋,她區別於那些基於 MVVM 底層的 UI 框架,卻並非逆道而行,而是信奉返璞歸真之道。準確地說,她更多是為服務端程序員量身定做,你無需涉足各種前端工具的複雜配置,只需面對瀏覽器本身,讓一切你所需要的元素與交互,從這裡信手拈來。
獲得 layui
- 官網首頁下載 https://www.layui.com/
將下載完的包解壓後放入項目中。
注:1.Springboot環境搭建 2.Redis集成 3.shiro集成 均可訪問之前的文章 此處不做詳解
編寫一個測試的Controller
@Controller (此處不能用RestController標籤 @RestController註解相當於@ResponseBody + @Controller合在一起的作用。)
public class UserController {
@RequestMapping("/index")
// @ResponseBody(此處不能加@ResponseBody標籤,因為加上後就當做字符串返回頁面了)
public String index(){
return "/user/index";
}
編寫index.html
默認情況下:
spring-boot項目靜態文件目錄:/src/java/resources/static (比如:js、css、img等靜態資源)
spring-boot項目模板文件目錄:/src/java/resources/templates
Springboot本身不支持Jsp 所以這邊使用Thymeleaf Thymeleaf對頁面驗證比較嚴格 尤其是html元素的結束標籤
如果結束標籤沒有容易報錯(加粗字體)
/>
<title>Insert title here/<title><link>/>
賢心
<script>
//JavaScript代碼區域
layui.use('element', function(){
var element = layui.element;
});
當然,也可以在application.properties中,去掉
#thymeleaf模板使用
#關閉thymeleaf緩存
spring.thymeleaf.cache=false
#去掉thymeleaf的嚴格的模板校驗
spring.thymeleaf.mode=LEGACYHTML5
啟動服務,訪問主頁
由於集成了shiro框架,我們在未登陸的情況下是不能直接訪問主頁的 系統會自動跳轉到登陸界面
輸入賬號密碼後
閱讀更多 JAVA君 的文章