前言
Springboot默認是不支持JSP的，默認使用thymeleaf模板引擎。所以這里介紹一下Springboot使用Thymeleaf的實例以及遇到的問題。
配置與使用
1.在application.properties文件中增加Thymeleaf模板的配置。
#關閉thymeleaf的緩存，不然在開發過程中修改頁面不會立刻生效需要重啟，生產可配置為true
#關閉thymeleaf的緩存，不然在開發過程中修改頁面不會立刻生效需要重啟，生產可配置為true spring.thymeleaf.cache=false spring.thymeleaf.prefix=classpath:/web/ spring.thymeleaf.suffix=.html spring.thymeleaf.mode=HTML5 spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.resources.chain.strategy.content.enabled=true spring.resources.chain.strategy.content.paths=/**
說明一下，這些配置不是必須的，如果配置了會覆蓋默認的。
2.在pom.xml中添加thymeleaf的依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
3、編寫一個測試的Controller
package com.lynch.web; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("/layui") public class LayuiController { @RequestMapping("/index") public String demo() { return "layui/index"; } }
可以看到，Controller與普通的SpringMVC的Controller無異。
4、編寫index.html
默認情況下：
spring-boot項目靜態文件目錄：/src/java/resources/static （比如：js、css、img等靜態資源）
spring-boot項目模板文件目錄：/src/java/resources/templates （所有的頁面文件，這個地方我已經通過application.properties 將 templates 改為了web）
所以index.html文件在/src/java/resources/web/layui下。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>layout 后台大布局 - Layui</title>
<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 頭部區域（可配合layui已有的水平導航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用戶</a></li>
<li class="layui-nav-item"><a href="javascript:;">其它系統</a>
<dl class="layui-nav-child">
<dd>
<a href="">郵件管理</a>
</dd>
<dd>
<a href="">消息管理</a>
</dd>
<dd>
<a href="">授權管理</a>
</dd>
</dl></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item"><a href="javascript:;"> aaa 賢心 </a>
<dl class="layui-nav-child">
<dd>
<a href="">基本資料</a>
</dd>
<dd>
<a href="">安全設置</a>
</dd>
</dl></li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed"><a class=""
href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;">列表一</a>
</dd>
<dd>
<a href="javascript:;">列表二</a>
</dd>
<dd>
<a href="javascript:;">列表三</a>
</dd>
<dd>
<a href="">超鏈接</a>
</dd>
</dl></li>
<li class="layui-nav-item"><a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;">列表一</a>
</dd>
<dd>
<a href="javascript:;">列表二</a>
</dd>
<dd>
<a href="">超鏈接</a>
</dd>
</dl></li>
<li class="layui-nav-item"><a href="">雲市場</a></li>
<li class="layui-nav-item"><a href="">發布商品</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 內容主體區域 -->
<div style="padding: 15px;">內容主體區域</div>
</div>
<div class="layui-footer">
<!-- 底部固定區域 -->
© layui.com - 底部固定區域
</div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
//JavaScript代碼區域
layui.use('element', function() {
var element = layui.element;
});
</script>
</body>
</html>
5、引入layui
從https://www.layui.com/下載layui-v2.4.5.zip，解壓后把layui-v2.4.5目錄下的layui文件夾拷貝到/src/java/resources/static目錄下。
6、效果圖
項目啟動成功，訪問http://localhost:8080/layui/index，運行效果如下：