Thymeleaf的介紹
進行JavaWeb開發時主要用到的是JSP,傳統的JSP需要在頁面中加入大量的JSTL標簽,這些標簽只能運行在服務器中,前端開發人員維護這些頁面比較困難,頁面加載速度也比較慢。 Thymeleaf是一種全新的頁面模板引擎,在Thymeleaf中使用的標簽都是基本的HTML標簽,可以脫離服務器獨立運行,這樣前端開發人員可以維護靜態頁面,后台開發人員將數據綁定上去,利於分工合作,Thymeleaf的語法也比較簡潔優雅,比較容易使用。
SpringMVC整合Thymeleaf
下面介紹下在SpringMVC框架中如何使用Thymeleaf:<br>
1. 首先使用Maven導入需要的庫:
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.3.14.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.3.14.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.14.RELEASE</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.9.RELEASE</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>3.0.9.RELEASE</version>
</dependency>
說明:spring-context、spring-web、spring-webmvc是Spring和SpringMVC的相關庫,thymeleaf是Thymeleaf模板庫thymeleaf-spring4是Spring整合Thymeleaf所需的庫。
1. 在SpringMVC的配置文件中添加:
<!--thymeleaf模板解析器-->
<bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
<!--前綴配置-->
<property name="prefix" value="/WEB-INF/"></property>
<!--后綴配置-->
<property name="suffix" value=".html"></property>
<!--模板類型-->
<property name="templateMode" value="HTML"></property>
<!--不使用緩存-->
<property name="cacheable" value="false"></property>
<!--編碼類型-->
<property name="characterEncoding" value="UTF-8"></property>
</bean>
<!--模板引擎配置-->
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver"></property>
</bean>
<!--視圖處理器-->
<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine"></property>
<property name="characterEncoding" value="UTF-8"></property>
</bean>
1. 添加實體類和Controller類
//商品類
public class Goods{
private int id;
private String name;
private double price;
private String type;
//set\get...
}
//商品控制器
@Controller
public class GoodsController {
@RequestMapping("/goods")
public String test1(Model model){
//添加
List<Goods> goods = new ArrayList<>();
goods.add(new Goods(1,"小米9手機",3999,"數碼");
goods.add(new Goods(2,"小米8手機",2999,"數碼");
goods.add(new Goods(3,"小米7手機",1999,"數碼");
model.addAttribute("goods",goods);
return "goods";
}
}
1. 編寫Thymeleaf頁面
在html標簽中加入命名空間:
<html xmlns:th="http://www.thymeleaf.org">
使用表格顯示后台數據:
<table>
<tr th:each="g:${goods}">
<td th:text="${g.id}">1</td>
<td th:text="${g.name}">牙膏</td>
<td th:text="${g.price}">200</td>
<td th:text="${g.type}">100</td>
</tr>
</table>
1. 啟動服務器,輸入URL后可以看到Thymeleaf將后台數據展示到頁面中
Thymeleaf的屬性用法
前面案例中th:each是將標簽進行循環迭代,綁定集合中的數據;th:text是用來綁定每個對象的文本數據。 我們在看看還有哪些常用的屬性:
1、變量,這種寫法類似EL表達式和OGNL:
<h1 th:text="${msg}">Test</h1>
如果變量是user對象,可以寫成:
<h1 th:text="${user.name}">Test</h1>
注意:h1標簽之間的內容是靜態頁面顯示的,當連接上服務器后會被替換為th:text中的內容。
2、超鏈接
使用th:href標簽,內容格式是@{...}
如:<a href=”index.html” th:href=”@{http://localhost:8080/list(uid=${user.id})}”>測試</a>
注意:這里list(uid=${user.id})會被替換為list?uid=8類似的格式
3、文本替換
<p th:text="'Welcome , ' + ${user.name} + '!'">xxx</p>
或:
<p th:text="|Welcome , ${user.name}!|">xxx</p>
4、運算符
Java中的算術運算符、關系運算符、邏輯運算符等都可以使用,
不過在使用<和>時由於是特殊符號,需要進行轉義:
th:if="${count} > 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"
5、循環
th:each=”變量:${集合對象}”
<table>
<tr th:each="emp : ${empList}">
<td th:text="${emp.id}">1</td>
<td th:text="${emp.name}">張三</td>
<td th:text="${emp.age}">18</td>
</tr>
</table>
6、條件
th:if和th:unless,th:if是條件成立是顯示標簽,th:unless則相反
下面標簽的效果相同,都是當user為空時顯示Login超鏈接
<a th:href=”@{/login}” th:if=”${user==null}”>Login</a>
<a th:href=”@{/login}” th:unless=”${user!=null}”>Login</a>
7、switch
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="'manager'">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>
以上就是Thymeleaf的基本用法,可以看到Thymeleaf的用法比較簡單,可以很好的代替JSP完成頁面開發。