spring boot 2.1.5+mysql+druid+redis+jpa+ajax實現數據庫的增刪改查操作

 

上篇文檔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==&apos;男&apos;?true:false}">
	女:<input type="radio" class="form-control" name="sex" th:value="女" th:attr ="checked=${user.sex==&apos;女&apos;?true:false}">
    </div>
</div>

上述由於數據庫中性別存儲的是男、女,所以頁面上radio默認選中用的th:attr ="checked=${user.sex==&apos;男&apos;?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

上述所有純爲個人真實驗證總結,不喜勿噴,轉載請說明出處……

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章