SpringBoot中默認(rèn)不支持JSP（其認(rèn)為JSP已是一種“過時”的技術(shù)）免都，所以很多時候需要使用html來顯示數(shù)據(jù)湾盒，而html本身不具備動態(tài)顯示數(shù)據(jù)的能力哲泊，由此我們需要借助ajax或模板引擎來完成動態(tài)數(shù)據(jù)的渲染
1.Thymeleaf介紹
Thymeleaf 是一個跟 Velocity疤祭、FreeMarker 類似的模板引擎湾揽，它可以完全替代 JSP 旅挤。相較與其他的模板引擎踢关，它有如下三個極吸引人的特點：
1.Thymeleaf 在有網(wǎng)絡(luò)和無網(wǎng)絡(luò)的環(huán)境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態(tài)效果粘茄，也可以讓程序員在服務(wù)器查看帶數(shù)據(jù)的動態(tài)頁面效果签舞。這是由于它支持 html 原型，然后在 html 標(biāo)簽里增加額外的屬性來達到模板+數(shù)據(jù)的展示方式柒瓣。瀏覽器解釋 html 時會忽略未定義的標(biāo)簽屬性嘹朗，所以 thymeleaf 的模板可以靜態(tài)地運行默穴；當(dāng)有數(shù)據(jù)返回到頁面時怔檩，Thymeleaf 標(biāo)簽會動態(tài)地替換掉靜態(tài)內(nèi)容，使頁面動態(tài)顯示仑氛。
2.Thymeleaf 開箱即用的特性乙埃。它提供標(biāo)準(zhǔn)和spring標(biāo)準(zhǔn)兩種方言，可以直接套用模板實現(xiàn)JSTL锯岖、 OGNL表達式效果介袜，避免每天套模板、該jstl出吹、改標(biāo)簽的困擾遇伞。同時開發(fā)人員也可以擴展和創(chuàng)建自定義的方言。
3. Thymeleaf 提供spring標(biāo)準(zhǔn)方言和一個與 SpringMVC 完美集成的可選模塊捶牢，可以快速的實現(xiàn)表單綁定、屬性編輯器秋麸、國際化等功能渐排。
2.搭建環(huán)境
(1)添加依賴
在pom.xml中添加依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
或者在新建項目時勾選相應(yīng)的組件
(2)添加配置
在application.yml中，添加Thymeleaf的配置
server:
port: 8080
servlet:
context-path: /myproj1
tomcat:
uri-encoding: utf-8
spring:
datasource:
name: test
url: jdbc:mysql://localhost/s1?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
username: root
password: root
type: com.alibaba.druid.pool.DruidDataSource
driver-class-name: com.mysql.jdbc.Driver
#Thymeleaf配置
thymeleaf:
prefix: classpath:/templates/
suffix: .html
mode: HTML5
encoding: UTF-8
cache: false
#取消緩存，修改即可見
resources:
chain:
strategy:
content:
enabled: true
paths: /**
mybatis:
mapper-locations: classpath:mapper/*.xml
3.應(yīng)用示例
(1)數(shù)據(jù)準(zhǔn)備
在mysql數(shù)據(jù)庫中新建userinfo表票腰，如下
任意新增兩條數(shù)據(jù)
(2)編寫mapper
完成UserPO類的改造
public class UserPO {
private String userid;
private String lname;
private String lpass;
private Date birthday;
private Integer sex;
private Double income;
//set和get方法略...
}
UserMapper.xml，添加相關(guān)statement
<select id="getUserList" resultType="com.neuedu.po.UserPO">
SELECT
userid,
lname,
lpass,
birthday,
sex,
income
FROM userinfo
</select>
UserMapper.java女气，添加相關(guān)方法描述
public List<UserPO>getUserList() throws Exception;
(3)完成service
在UserService接口和UserServiceImpl實現(xiàn)類中添加相關(guān)方法
UserService.java
public List<UserPO> getUserList() throws Exception;
UserServiceImpl.java
@Override
public List<UserPO> getUserList() throws Exception {
return mapper.getUserList();
}
(4)完成處理器Controller程序
@RequestMapping("/ulist")
public ModelAndView ulist(Model model) throws Exception{
model.addAttribute("u_list_info", us.getUserList());
return new ModelAndView("user/userlist", "umodel", model);
}
@RequestMapping("/view")
public ModelAndView view(String userid,int ttt) throws Exception{
System.out.println(userid);
System.out.println(ttt);
return null;
}
@RequestMapping("/modify")
public ModelAndView modify(String userid,int ttt) throws Exception{
System.out.println(userid);
System.out.println(ttt);
return null;
}
(5)Thymeleaf展示數(shù)據(jù)
在resources/templates新建user文件夾杏慰，在user中新建userlist.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="1200">
<thead>
<tr>
<td>用戶ID</td>
<td>賬號</td>
<td>密碼</td>
<td>生日</td>
<td>性別</td>
<td>收入</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr th:if="${umodel.u_list_info.size()} eq 0">
<td colspan="6">沒有數(shù)據(jù)</td>
</tr>
<tr th:each="user : ${umodel.u_list_info}">
<td th:text="${user.userid}">1</td>
<td th:text="${user.lname}">admin</td>
<td th:text="${user.lpass}">xxxxx</td>
<td th:text="${#dates.format(user.birthday, 'yyyy年MM月dd日')}">1970-01-01</td>
<td th:if="${user.sex} eq 1">男</td>
<td th:if="${user.sex} eq 2">女</td>
<td th:text="${#numbers.formatDecimal(user.income, 1, 2)}">2000.00</td>
<td>
<a th:href="@{~/myproj1/view(userid=${user.userid},ttt=1)}">查看</a>
<a th:href="@{/modify(userid=${user.userid},ttt=2)}">修改</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
(6)測試
打開url: http://localhost:8080/myproj1/ulist
顯示效果
4.Thymeleaf用法介紹
(1)在<html>中添加引用
<html xmlns:th="http://www.thymeleaf.org">
(2)用th標(biāo)簽動態(tài)替換掉靜態(tài)數(shù)據(jù)。如下圖炼鞠，后臺傳出的user.lname會將靜態(tài)數(shù)據(jù)“admin”替換掉缘滥，若訪問靜態(tài)頁面，則顯示默認(rèn)數(shù)據(jù)“admin”谒主。
<td th:text="${user.lname}">admin</td>
(3)日期格式化朝扼。將后臺傳出的user.birthday的輸出格式更改為"yyyy年MM月dd日格式"，若訪問靜態(tài)頁面霎肯，則顯示默認(rèn)數(shù)據(jù)"1970-01-01"
<td th:text="${#dates.format(user.birthday, 'yyyy年MM月dd日')}">1970-01-01</td>
(4)數(shù)字格式化擎颖。將后臺傳出的user.income的輸出格式更改為至少1位整數(shù)榛斯，小數(shù)點后顯示兩位，即0.23或100.20這種格式搂捧。若訪問靜態(tài)頁面驮俗，則顯示默認(rèn)數(shù)據(jù)2000.00
<td th:text="${#numbers.formatDecimal(user.income, 1, 2)}">2000.00</td>
(5)數(shù)據(jù)迭代。th:each="user : ${umodel.u_list_info}"允跑，讀取后臺傳出的數(shù)據(jù)umodel.u_list_info王凑，每次迭代使用user來取得該次迭代的對象
<tr th:each="user : ${umodel.u_list_info}">
<td th:text="${user.userid}">1</td>
<td th:text="${user.lname}">admin</td>
<td th:text="${user.lpass}">xxxxx</td>
<td th:text="${#dates.format(user.birthday, 'yyyy年MM月dd日')}">1970-01-01</td>
<td th:if="${user.sex} eq 1">男</td>
<td th:if="${user.sex} eq 2">女</td>
<td th:text="${#numbers.formatDecimal(user.income, 1, 2)}">2000.00</td>
<td>
<a th:href="@{~/myproj1/view(userid=${user.userid},ttt=1)}">查看</a>
<a th:href="@{/modify(userid=${user.userid},ttt=2)}">修改</a>
</td>
</tr>
(6)條件判斷。判斷后臺迭代數(shù)據(jù)的size是否“==”0
<tr th:if="${umodel.u_list_info.size()} eq 0">
<td colspan="6">沒有數(shù)據(jù)</td>
</tr>
比較運算符
== 使用 eq
!= 使用 ne
> 使用 gt
< 使用 lt
>= 使用 ge
<= 使用 le
(7)url及傳值
以站內(nèi)絕對路徑訪問/myproj1/view聋丝，同時利用url提交userid和ttt兩個數(shù)據(jù)
userid的值為循環(huán)遍歷出的后臺數(shù)據(jù)索烹，ttt的值為1
<a th:href="@{~/myproj1/view(userid=${user.userid},ttt=1)}">查看</a>
以站內(nèi)相對路徑訪問/myproj1/modify，同時利用url提交userid和ttt兩個數(shù)據(jù)
userid的值為循環(huán)遍歷出的后臺數(shù)據(jù)潮针，ttt的值為2
<a th:href="@{/modify(userid=${user.userid},ttt=2)}">修改</a>
在之前已經(jīng)編寫了相關(guān)的處理器程序术荤，點擊超鏈接后控制臺均能正常打印userid和ttt數(shù)據(jù)
更多Thymeleaf使用介紹，請訪問官方文檔 https://www.thymeleaf.org/documentation.html
