Spring Boot快速入门(三)——使用Thymeleaf模板引擎

使用Thymeleaf模板引擎

Thymeleaf简介

Thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,基于Apache License 2.0许可。
Thymeleaf提供了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP或其他模板引擎,如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模 。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。
Thymeleaf主要通过HTML的标签属性渲染标签内容,浏览器在解析html时,当检查到Thymeleaf的属性时候会忽略,所以Thymeleaf的模板可以通过浏览器直接打开展现,这样非常有利于前后端的分离

添加依赖

添加模板引擎的依赖,可以在IntelliJ IDEA创建Spring Boot项目的时候选择对应的依赖,也可以在后期手动修改pom.xml文件增加依赖。

IntelliJ IDEA创建Spring Boot项目时增加

在选择依赖的界面,点击左边的“Template Engine”,在中间选择所需的模板引擎即可。

手动修改pom.xml

以Thymeleaf为例,修改pom.xml增加以下依赖:

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

可在resources/application.properties中对Thymeleaf进行配置。

目录结构

Thymeleaf默认将模板放在resources/templates目录下(可以通过application.properties文件进行配置,但建议保持默认值方便管理);同时,Spring Boot默认将静态资源放在resources/static(从根路径访问),于是,经典的目录结构是这样的:

其中640-100.jpg的访问路径为http://127.0.0.1:8080/640-100.jpg。

模板Demo

在resources/templates目录下新建temp.html,内容如下:

	<!DOCTYPE html>
	<html>
	  <head lang="en">
	    <meta charset="UTF-8" />
	    <title></title>
	  </head>
	  <body>
	    <h1 th:text="${host}">Hello World</h1>
	  </body>
 	</html>

其中h1的th:text="${host}" 即为Thymeleaf的属性,表示获取ModelMap中的host属性赋值给h1的文本;而这个文件直接用浏览器访问的时候h1元素则显示“Hello World”。 再编写一个Controller:

	@Controller
	@RequestMapping("/template")
	public class TemplateController {
	  @RequestMapping("/")
	  public String index(ModelMap map) {
	    // 加入一个属性,用来在模板中读取
	    map.addAttribute("host", "http://www.turingdi.com");
	    // return模板文件的名称,对应resources/templates/temp.html
	    return "temp";
	  }
	}

注意这里使用了@Controller注解而不是之前的@RestController,若使用后者,index()方法返回的”temp”会直接以JSON格式返回,页面显示“temp”。实际上我们使用@Controller注解并加入了Thymeleaf模板引擎后,index()方法返回的”temp”会被Thymeleaf模板引擎理解为src/main/resources/templates/temp.html文件,然后解析该文档并响应返回。在浏览器中接收到的html源码如下:

而这个模板文件直接用浏览器打开的效果:

可以看到,前端开发人员可以直接修改html并直接观察修改后的效果,修改时并不影响Thymeleaf的代码,因此可以方便前后端协同开发。

Thymeleaf简单表达式

变量表达式 ${……}

<input type="text" name="userName" value="James Carrot" th:value="${user.name}" />

上述代码为引用user对象的name属性值。

选择/星号表达式 *{……}

	<div th:object="${session.user}">
	  <p>Nationality:
	    <span th:text="*{nationality}">Saturn</span>.
	  </p>
	</div>

选择表达式一般跟在th:object后,直接取object中的属性。

文字国际化表达式 #{……}

<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>

URL表达式 @{……}

<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

@{……}支持决定路径和相对路径。其中相对路径又支持跨上下文调用url和协议的引用。 当URL为后台传出的参数时,代码如下:

<img src="../../static/assets/images/qr-code.jpg" th:src="@{${path}}" alt="二维码" />

Thymeleaf常用标签

简单数据转换(数字,日期)

	<dt>价格</dt>
	<dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">180</dd>
	<dt>进货日期</dt>
	<dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</dd>

字符串拼接

<dd th:text="${'$'+product.price}">235</dd>

表单

	<form th:action="@{/bb}" th:object="${user}" method="post" th:method="post">

	<input type="text" th:field="*{name}"/>
	<input type="text" th:field="*{msg}"/>

	<input type="submit"/>
	</form>

循环

渲染列表数据是一种非常常见的场景,例如现在有n条记录需要渲染成一个表格<table>,该数据集合必须是可以遍历的,使用th:each标签:

	<table>
	  <tr>
	    <th>NAME</th>
	    <th>PRICE</th>
	    <th>IN STOCK</th>
	  </tr>
	  <tr th:each="prod : ${prods}">
	    <td th:text="${prod.name}">Onions</td>
	    <td th:text="${prod.price}">2.41</td>
	   <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
	  </tr>
	</table>

条件判断If/Unless

Thymeleaf中使用th:if和th:unless属性进行条件判断,下面的例子中,<a>标签只有在th:if中条件成立时才显示:

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。

Switch

Thymeleaf同样支持多路选择Switch结构,默认属性default可以用*表示:

	<div th:switch="${user.role}">
	  <p th:case="'admin'">User is an administrator</p>
	  <p th:case="#{roles.manager}">User is a manager</p>
	  <p th:case="*">User is some other thing</p>
	</div>

Thymeleaf配置

可在resources/application.properties 中对Thymeleaf进行配置,配置如下:

	# Enable template caching.
	spring.thymeleaf.cache=true
	# Check that the templates location exists.
	spring.thymeleaf.check-template-location=true
	# Content-Type value.
	spring.thymeleaf.content-type=text/html
	# Enable MVC Thymeleaf view resolution.
	spring.thymeleaf.enabled=true
	# Template encoding.
	spring.thymeleaf.encoding=UTF-8
	# Comma-separated list of view names that should be excluded from resolution.
	spring.thymeleaf.excluded-view-names=
	# Template mode to be applied to templates. See also StandardTemplateModeHandlers.
	spring.thymeleaf.mode=HTML5
	# Prefix that gets prepended to view names when building a URL.
	spring.thymeleaf.prefix=classpath:/templates/
	# Suffix that gets appended to view names when building a URL.
	spring.thymeleaf.suffix=.html spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain. spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.
comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy