SpringBoot Thymeleaf 基于HTM

SpringBoot Thymeleaf 基于HTML5的現(xiàn)代模板引擎

文地址：https://www.jianshu.com/p/8dc48fa74e7e
作者：yizhiwazi

序言：
Thymeleaf 是Java服務(wù)端的模板引擎，與傳統(tǒng)的JSP不同，前者可以使用瀏覽器直接打開，因為可以忽略掉拓展屬性，相當(dāng)于打開原生頁面，給前端人員也帶來一定的便利。如果你已經(jīng)厭倦了JSP+JSTL的組合，Thymeleaf或許是個不錯的選擇！本工程傳送門：SpringBoot-Web-Thymeleaf

學(xué)習(xí)目標(biāo)

簡單三步！快速學(xué)會使用Thymealf的常用模板。

快速查閱

源碼下載：SpringBoot-Web-Thymeleaf

專題閱讀：《SpringBoot 布道系列》

開始使用

1.引入依賴

SpringBoot默認(rèn)提供了Thymeleaf的Starter，只需簡單引入依賴即可。

 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>

目前默認(rèn)版本是2.1，如果想升級版本到3.0，可以這樣修改。

 <properties>
 <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>
 <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
 </properties>

為了方便開發(fā)，項目案例采用了熱部署工具dev-tools ，這樣我們在修改頁面之后，IDEA會自動加載，從而達到實現(xiàn)熱更新的效果。

 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-devtools</artifactId>
 <scope>runtime</scope>
 </dependency>

注：由于IDEA默認(rèn)關(guān)閉了熱部署，需要做一些設(shè)置才能使其生效。解決方法：首先按住Ctrl+Shift+Alt+/ 然后進入 Registry （或者雙擊Shift搜索Registry...），然后勾選compiler.automake.allow.when.app.running 即可。另外，Build->Compiler 也要勾選上Build Project automatically .

2. 添加相關(guān)配置

Thymeleaf默認(rèn)開啟了頁面緩存，在開發(fā)的時候，應(yīng)該關(guān)閉緩存。此外，通常我們還會指定頁面的存放路徑。（默認(rèn)是classpath:/templates/）

application.yml 配置如下：
spring:
 thymeleaf:
 cache: false #關(guān)閉緩存
 prefix: classpath:/views/ #添加路徑前綴

3.編寫HTML

編寫Thymeleaf和書寫HTML5頁面沒有什么不同，最大的轉(zhuǎn)變就是使用拓展屬性（th:xx）去跟服務(wù)端進行數(shù)據(jù)交互，保留原始頁面風(fēng)格，也是Thymeleaf的推崇的風(fēng)格。例如下面這個簡單的案例，啟動項目，我們發(fā)現(xiàn)頁面跳轉(zhuǎn)的是簡書的連接，這一點也驗證了Thymeleaf覆蓋原生頁面數(shù)據(jù)的極佳能力。

頁面代碼：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <title>Thymeleaf</title>
</head>
<body>
 <h2>歡迎使用Thymeleaf!!</h2>
 <a href="http://www.baidu.com" th:href="${info}">戳我有驚喜</a>
</body>
</html>

后端代碼：

@Controller
public class UserController {

 @GetMapping("/")
 public String index(Model model) {
 model.addAttribute("info", "user/list");
 return "index";
 }

 @GetMapping("/user")
 public String hehe(Model model) {
 model.addAttribute("user", new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
 return "user";
 }

 @GetMapping("/user/list")
 public String userlist(Model model) {
 List<User> userList=new ArrayList<>();
 userList.add(new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
 userList.add(new User(UUID.randomUUID().toString(), "kumamon", "123456"));
 userList.add(new User(UUID.randomUUID().toString(), "admin", "admin"));
 model.addAttribute("userList", userList);
 return "userList";
 }

}

現(xiàn)在我們嘗試回填一個表單，展示單個用戶信息。

<!-- 使用th:object 搭配*{} 可以省略對象名 -->
<form action="/" th:object="${user}" >
 <input type="hidden" name="userId" th:value="*{userId}" />
 <input type="text" name="username" th:value="*{username}" />
 <input type="text" name="password" th:value="*{password}" />
</form>

接下來，我們進入一個更復(fù)雜的案例，例如展示一個用戶列表信息，
不需要編寫新的標(biāo)簽，就可以完成對批量用戶的遍歷。

<h2>用戶列表</h2>
<!--說明： th:each="obj,stat:${objects}" 分別代表單個實例,狀態(tài)(可省略),待遍歷對象-->
<div th:each="user:${userList}">
 <input type="hidden" name="userId" th:value="${user.userId}"/>
 用戶姓名：<input type="text" name="password" th:value="${user.username}"/>
 登錄密碼：<input type="text" name="username" th:value="${user.password}"/>
</div>

好了，Thymeleaf簡單介紹到這里

我自己是一名從事了多年開發(fā)的Java老程序員，辭職目前在做自己的Java私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的Java學(xué)習(xí)干貨，從最基礎(chǔ)的JavaSE到Spring各種框架都有整理，送給每一位Java小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：Java，即可免費獲取。

否知否網(wǎng)頁設(shè)計源代碼有6個頁面組成，帶css動畫效果，留言表單。

如果有需要還可以增加js圖片輪播及其他js效果。

網(wǎng)頁設(shè)計效果圖

知否知否首頁HTML源代碼

	<!DOCTYPE html>
	<!-- index.html -->
	<html lang="cn">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<meta name="renderer" content="webkit">
	<title>知否</title>
	<meta content="" name="keywords">
	<meta content="" name="description">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
	<div class="header">
	<div class="headercon clearfloat"> <a href="index.html">知否知否</a>
	<p>知否知否應(yīng)是綠肥紅瘦</p>
	</div>
	</div>
	<div class="headernav">
	<ul>
	<li class="active"><a href="index.html">首頁</a></li>
	<li><a href="jianjie.html">劇情簡介</a></li>
	<li><a href="list.html">角色介紹</a></li>
	<li><a href="juqing.html">分集劇情</a></li>
	<li><a href="pingjia.html">影視評價</a></li>
	<li><a href="liuyan.html">給我留言</a></li>
	</ul>
	</div>
	<div class="banner"> <img src="images/banner.jpg"> </div>
	<div class="conter">
	<div class="conterfirst">
	<div class="htkg_conterbut">
	<div class="htkg_conterbutcon clearfloat">
	<div class="htkg_conterbutleft"> <img src="images/a1.jpg" alt=""> </div>
	<div class="htkg_conterbutright">
	<div class="htkg_conterbutrightcon">
	<h5>知否知否應(yīng)是綠肥紅瘦</h5>
	<p>《知否知否應(yīng)是綠肥紅瘦》是由侯鴻亮擔(dān)任制片人，張開宙執(zhí)導(dǎo)，曾璐、吳桐編劇，趙麗穎、馮紹峰領(lǐng)銜主演，朱一龍、施詩、張佳寧、曹翠芬、劉鈞、劉琳、高露、王仁君、李依曉、王鶴潤、張曉謙、李洪濤主演，王一楠、陳瑾、張棪琰、鄧莎特別出演的古代社會家庭題材劇 </p>
	<a href="jianjie.html"></a> </div>
	</div>
	<div class="htkg_conterbutlast">
	<div class="htkg_conterbutlastcon">
	<p>該劇于2018年12月25日在湖南衛(wèi)視金鷹獨播劇場首播，并在愛奇藝、騰訊視頻、優(yōu)酷視頻、YouTube同步播出</p>
	<p>2019年5月，入圍第25屆上海電視節(jié)白玉蘭獎最佳中國電視劇。 [3]2020年2月，入選國家廣播電視總局推薦的《2019中國電視劇選集》 [4]。10月18日，獲得第30屆中國電視金鷹獎優(yōu)秀電視劇獎</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="htkg_list">
	<div class="htkg_listcon">
	<ul class="clearfloat">
	<li> <a href="#"> <img src="images/htkg3.png" alt=""> </a> </li>
	<li> <a href="#"> <img src="images/htkg1.png" alt=""> </a> </li>
	<li> <a href="#"> <img src="images/htkg2.png" alt=""> </a> </li>
	</ul>
	</div>
	</div>
	<div class="introducecon">
	<div class="newxqtitle">
	<h5>播出信息</h5>
	</div>
	<div class="newxqcon" deep="3">
	<h6>幕后花絮</h6>
	<p>兩位編劇曾璐、吳桐與導(dǎo)演張開宙都是《戰(zhàn)長沙》的原班制作團隊 [32]。</p>
	<p> 原著作者關(guān)心則亂在男主官宣前3個月就發(fā)博文暗示過男主是馮紹峰，并在官宣后承認(rèn)自己早就猜到 [33]。</p>
	<p> 該劇夜戲全部采用蠟燭打光，力求呈現(xiàn)真實自然的古代生活畫面 [34]。</p>
	<p> 有一場從五米高臺跳入湖中的戲，趙麗穎在冬天自己親自跳下水拍攝</p>
	<h6>劇本創(chuàng)作</h6>
	<p> 《知否知否應(yīng)是綠肥紅瘦》劇本是由曾璐和吳桐兩位編劇共同創(chuàng)作，而兩位編劇及導(dǎo)演張開宙正是《戰(zhàn)長沙》的原班制作團隊
	</p>
	<h6>拍攝過程</h6>
	<p>2017年4月，電視劇《知否知否應(yīng)是綠肥紅瘦》進入前期籌備階段[16]。</p>

	<p>2017年9月6日，電視劇《知否知否應(yīng)是綠肥紅瘦》在橫店開機，并在當(dāng)天公布了王氏和盛華蘭的扮演者[9]。</p>

	<p>2018年3月19日，劇組在十九峰景區(qū)重陽宮開始為期三天的拍攝。4月1日，歷時208天的拍攝，該劇全劇正式殺青</p>
	<h6>早期宣傳</h6>
	<p>2017年3月13日，正午陽光影業(yè)攜其出品電視劇《知否知否應(yīng)是綠肥紅瘦》赴港參加第21屆香港國際影視展，并在展覽會上公布了第二張概念海報和制作團隊 [43]。5月28日，劇方首次公布主演名單，女主角盛明蘭由趙麗穎出演 [11]。6月20日，劇方公布男主角顧廷燁由馮紹峰出演 [44]。8月8日，該劇公布了9位主演名單，并宣布前期籌備工作接近尾聲，劇集于9月初開機 [20]。10月13日，片方公布男女主演首款定妝海報 [45]；26日，開機一個多月后片方首次曝光90秒花絮 [46]。11月14日，片方公布了一組主要角色花絮照 [47]。 </p>
	<p> 2018年3月6日，《知否知否應(yīng)是綠肥紅瘦》片方發(fā)布首批人物劇照。3月20日，該劇制作出品方正午陽光攜該劇參加香港國際影視展 [48]。3月25日，該劇登錄春季北京電視節(jié)目交易會 [32]。4月26日，該劇發(fā)布“關(guān)雎”版片花，即正式發(fā)布的首版片花 [34]。12月20日，該劇發(fā)布片花，宣布定檔與12月25日，并宣布除中國大陸地區(qū)外，中國香港地區(qū)、中國臺灣地區(qū)、馬來西亞及新加坡等國家和地區(qū)同步播出；24日，片方發(fā)布終極片花 [ </p>
	</div>
	</div>
	</div>
	<div class="footer">
	<div class="footerbut">
	<div class="footerbutup"> <span>版權(quán)所有：<strong>知否</strong></span> </div>
	</div>
	</div>
	<div>
	<object id="ClCache" click="sendMsg" host="" width="0" height="0">
	</object>
	</div>
	</body>
	</html>

整合營銷服務(wù)商