上篇文檔https://blog.csdn.net/freedom_fire/article/details/9076978同樣介紹了用spring boot +mysql+druid+redis+jpa+ajax如何實現數據的增刪該查操作(未用thymeleaf),但是遺留了一個問題:控制層返回一個ModelAndView(或者Model),在.html頁面中用EL表達式無法展示對應數據,具體示例資源見https://download.csdn.net/download/freedom_fire/11225502,這篇文檔介紹運用thymeleaf解決前篇文檔遺漏的問題。
1、集成thymeleaf
spring boot已經整合了thymeleaf,只需要在pom.xml配置對應依賴即可
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、調整application.properties參數
必須配置spring.mvc.static-path-pattern,否則靜態資源加載有誤(親測確認),後續兩項沒配置也好使
spring.mvc.static-path-pattern=/static/**
#指定mvc視圖的前綴
spring.mvc.view.prefix=classpath:/templates/
#指定mvc視圖的後綴
spring.mvc.view.suffix=.html
3、resources目錄結構
4、訪問
http://ip:port/projectName 即可方法index.html
http://ip:port/omp/user/queryPage 即可進入pages/query.html進行後續操作
5、說明
運用thymeleaf後,/templates/pages目錄下的html文件不能直接訪問(這也是上面爲什麼通過http://ip:port/omp/user/queryPage方式進入查詢頁面的說明),都需要通過controller進行跳轉訪問(我現在用的是spring boot2.1.5,我得出結論是這樣, 不知道是否正確,供參考吧)
thymeleaf的一些簡單使用說明下:
第一:需在.html中增加xmlns:th="http://www.thymeleaf.org",這樣:<html xmlns:th="http://www.thymeleaf.org">
第二:引入css、js、image需要如下寫指定文件路徑(個人感覺這塊很好,免除了jsp中出現的相對路徑、絕對路徑問題)
<script language="JavaScript" type="text/javascript" th:src="@{/static/js/main.js}"></script>
<img th:src="@{/static/img/image.JPG}">
第三:.html中需要動態賦值的地方需要用th:表示,如後臺返回ModelAndView,ModelAndView中封裝User對象,需在前端展示
<div class="form-group">
<label for="tel" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="hidden" class="form-control" id="id" name="id" th:value="${user.id}">
<input type="text" class="form-control" id="username" name="username" placeholder="請輸入姓名" th:value="${user.username}">
</div>
</div>
<div class="form-group">
<label for="code" class="col-sm-2 control-label">年齡</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="age" name="age" placeholder="請輸入年齡" th:value="${user.age}">
</div>
</div>
<div class="form-group">
<label for="code" class="col-sm-2 control-label">性別</label>
<div class="col-sm-10">
男:<input type="radio" class="form-control" name="sex" th:value="男" th:attr ="checked=${user.sex=='男'?true:false}">
女:<input type="radio" class="form-control" name="sex" th:value="女" th:attr ="checked=${user.sex=='女'?true:false}">
</div>
</div>
上述由於數據庫中性別存儲的是男、女,所以頁面上radio默認選中用的th:attr ="checked=${user.sex=='男'?true:false}"這種方式判斷
上述三點就是我在驗證demo時遇到的常見操作,更多thymeleaf操作參見官網地址http://www.thymeleaf.org
spring boot中resources目錄下各文件夾作用:
1、新建public文件夾:相當於在eclipse的web項目中的web-inf文件夾外的文件,是不需要通過服務器內部進行訪問的。
2、templates文件夾,是放置模板文件的,因此需要視圖解析器來解析它。所以必須通過服務器內部進行訪問,也就是要走控制器--服務--視圖解析器這個流程纔行(這也是爲啥前面不能直接訪問templates下的.html文件的原因)
3、static文件夾,既不能直接訪問,也不能通過服務器訪問到。因此,這個文件夾,可能是放一些css、圖片這樣的文件供服務器內部引用。
最後,提供demo示例下載路徑:https://download.csdn.net/download/freedom_fire/11226452
上述所有純爲個人真實驗證總結,不喜勿噴,轉載請說明出處……