SpringBoot web开发--模板引擎（Thymeleaf）学习

模板引擎

对于web开发的同学我们应该知道很多常用的模板引擎，例如jsp、Velocity、Freemarker、Thymeleaf等。以前我们可以使用jsp在jsp中遍历后端传递的值或者判断等等。那现在我们如果使用springboot开发了该怎么办呢？
当然是springboot给我们提供了强大的模板引擎Thymeleaf，语法更简单，功能更强大；

1、引入thymeleaf；

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
<!--切换thymeleaf版本-->
<properties>
		<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
		<!-- 布局功能的支持程序  thymeleaf3主程序  layout2以上版本 -->
		<!-- thymeleaf2   layout1-->
		<thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
  </properties>

这是ThymeleafAutoConfiguration自动配置类，我们可以通过ThymeleafProperties类看看一些默认配置

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

	private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;

	public static final String DEFAULT_PREFIX = "classpath:/templates/";

	public static final String DEFAULT_SUFFIX = ".html";

	/**
	 * Whether to check that the template exists before rendering it.
	 */
	private boolean checkTemplate = true;

里面有很多默认的配置，这里只列举一部分，有兴趣的同学可以自己查看，从上面的默认配置我们可以看出来，springboot回去类路径下的templates去查看以.html结尾的文件，什么意思呢？我们可以举个例子来学习：

编写一个successcontroller

@RestController
public class SuccessController {

    @RequestMapping("/success")
    public String success(){
        return "success";
    }
}

然后我们在resouces目录下创建templates目录，在该目录下创建一个success.html,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>
    success
</h1>

</body>
</html>

启动项目发送请求http://localhost:8080/success查看结果。

是不是很方便，只要我们把HTML页面放在classpath:/templates/，thymeleaf就能自动渲染；

什么是Thymeleaf

官方网站

Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。

Thymeleaf的主要目标是提供一种优雅且高度可维护的模板创建方式。为实现这一目标，它以自然模板的概念为基础，将其逻辑注入模板文件，其方式不会影响模板被用作设计原型。这改善了设计沟通，缩小了设计和开发团队之间的差距。

借助Spring Framework的模块，与您喜欢的工具的大量集成，以及插入您自己的功能的能力，Thymeleaf是现代HTML5 JVM Web开发的理想选择。

用Thymeleaf编写的HTML模板看起来和HTML一样工作，让在您的应用程序中运行的实际模板继续作为有用的设计工件。

Thymeleaf是一个适用于Web和独立环境的现代服务器端Java模板引擎，能够处理HTML，XML，JavaScript，CSS甚至纯文本。

特点

Out-of-the-box，Thymeleaf允许您处理六种模板，每种模板称为模板模式：

HTML
XML
文本
JAVASCRIPT
CSS
生的
有两种标记模板模式（HTML和XML），三种文本模板模式（TEXT，JAVASCRIPT和CSS）和无操作模板模式（RAW）。

语法规则

thymeleaf官方使用手册
这里只做一些常用的介绍，大家平时遇到问题可以去官方网站去查看相关的语法规则。

使用：

1、导入thymeleaf的名称空间

<html lang="en" xmlns:th="http://www.thymeleaf.org">

导入thymeleaf的名称空间可以方便我们使用，不导入也不会报错。

我们通过一个实例进行学习：

@Controller
public class HelloController {

  //传递数据在页面显示
  @RequestMapping(method = RequestMethod.GET,path = "/success")
  public String success(Map<String,Object> map){
      map.put("hello","<h1>你好</h1>");
      map.put("users", Arrays.asList("zhangsan","lisi","wangwu"));
      return "success";
  }

}

然后我们在resouces目录下创建templates目录，在该目录下创建一个success.html,

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--text 与utext 的区别在于能不能转义字符-->
<div th:id="${hello}" th:class="${hello}" th:text="${hello}"> 欢迎新用户 </div>
<!--行内写法-->
<div th:utext="${hello}"> [[${hello}]]欢迎新用户 </div>


<!--遍历-->
<h1 th:text="${user}" th:each="user:${users}"></h1>

<h1>
  <span th:each="user:${users}">[[${user}]] </span>
</h1>
</body>
</html>

结果

<h1>你好</h1>
你好
zhangsan
lisi
wangwu

zhangsan lisi wangwu

小技巧

我们开发期间可能要对于页面进行修改，那怎么才能实时生效呢？

禁用模板引擎缓存：spring.thymeleaf.cache=false
页面修改完成后（IDEA）ctrl+f9:重新编译。