Boot Thymeleaf初步使用

注意：本页面内容为W3xue原创，未经授权禁止转载，违者必究！
来源：W3xue　　发布时间：2019/9/26 16:16:01

我们已经学会了数据的全套增删改查，那么怎么把它应用到网页中去呢？这就要使用thymeleaf了。

Thymeleaf是什么？简而言之，它是一个模板引擎，类似于以前的JSP。用一句话来总结就是：前端页面整一套标准的数据或逻辑标签，嵌入在html代码里面，然后后端逻辑把数据绑定到数据标签上，而逻辑标签可以直接执行。

Thymeleaf 在无网络的条件下也可以可运行，它可以让美工直接在浏览器看到效果，也可以直接应用成动态页面。因为Thymeleaf 可以在 html 标签里增加额外的属性，而浏览器解释 html 时会忽略这些未定义的标签属性，而当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。使用Thymeleaf 之后，我们就可以使用html 模板了！

本篇分为四个部分：

一、Thymeleaf 的配置和初步使用

二、JAVA中另外两种使用模板的方法

三，text、utext和href

四、JavaScript中嵌入Thymeleaf标签

一、Thymeleaf 的配置和初步使用

在使用Thymeleaf 之前，我们需要先配置一下。

首先，如果你使用的是application.properties，那么就在文件中增加如下配置：

#thymelea模板配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

在开发时建议将spring.thymeleaf.cache设置为false，否则会有缓存，导致页面更新不及时。

而我们之前已经建议你使用application.yml了，因此，我们在spring根节，增加如下配置：

thymeleaf:
  cache: false
  prefix: classpath:/templates/
  suffix: .html
  mode: HTML5
  encoding: UTF-8
  servlet:
    content-type: text/html

在配置好application.properties或application.yml后，我们需要在pom.xml里的<dependencies>大节增加如下依赖：

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

在增加之后，IntelliJ IDEA会提示你，Maven Projects need to be imported，点击“Import Changes”导入修改即可，IntelliJ IDEA会自动帮你下载、导入依赖包。

我们再在controller文件夹建立一个controller层的类，鼠标放到controller文件夹，点右键，New->Java Class，在弹出的窗口中输入类名：MainController，你可以命名为任意的名字，只要你觉得方便，但我们建议使用“作用+层名字”作为标准。

大家应该还记得，我们在建立MainRestController类的时候，在类的申明代码上，有一个@RestController注解，这实际上一般被用来返回不使用页面模板的路径，这里我们需要使用@Controller注解，在类申明的上一行加上这个注解，IntelliJ IDEA会帮你自动导包，完成的代码如下：

package com.w3xue.jiaocheng.controller;

import org.springframework.stereotype.Controller;

@Controller
public class MainController {
}

现在，让我们来建立第一个模板文件。你是否还记得和application.yml文件平行的 templates文件夹和 static文件夹，templates文件夹就是用来放模板文件的，而 static文件夹是用来存放图片、JS文件、CSS文件等静态文件的。

我们首先在templates文件夹建立一个lucky.html模板文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="color:red" th:text="'Hello, ' + ${welcomewords}"></p>
</body>
</html>

注意里面有一个夹杂着Thymeleaf语法的段落标签：

<p style="color:red" th:text="'Hello, ' + ${welcomewords}"></p>

建好之后，我们在MainController类添加如下的方法：

@RequestMapping(value = "/getlucky")
public ModelAndView getlucky(ModelAndView mv) {
    mv.setViewName("/lucky"); //设置模板为根目录的lucky.html
    String sWelcomeWords="欢迎使用Thymeleaf!";
    mv.addObject("welcomewords",sWelcomeWords); //将sWelcomeWords变量的值，绑定到该模板的welcomewords标签上
    return mv; //返回并渲染
}

这个方法的注释，我基本上写进注释里了。使用这个方法需要导入2个包：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

其中ModelAndView包是用来解析模板并呈现内容的。

然后我们运行下项目，访问如下地址就能看到效果啦（如果看不到，需要使用Maven重新清理打包，在右上角，之前已经介绍过）：

http://localhost:8080/jiaocheng/getlucky

会出现下面的字样：

Hello, 欢迎使用Thymeleaf!

这说明配置已经成功了，我们第一使用了Thymeleaf模板引擎。

二、JAVA中另外两种使用模板的方法

除了上面介绍的使用Thymeleaf模板引擎的方法，我们还可以使用另外2种方法。

我们可以用返回String的方法，来使用模板：

@RequestMapping(value = "/getlucky2")
public String getlucky2(Map<String,Object> map){
    String sWelcomeWords="欢迎使用Thymeleaf!";
    map.put("welcomewords",sWelcomeWords); //直接将sWelcomeWords的值添加到map对象中
    return "/lucky"; //使用lucky模板并返回
}

该方法需要引用“java.util.Map”这个包，我们访问如下地址也可以出现一样的效果：

http://localhost:8080/jiaocheng/getlucky2

我们还可以使用带入Model对象的办法来使用模板：

@RequestMapping("/getlucky3")
public String getlucky3(Model model) { //自动带入Model对象
    String sWelcomeWords="欢迎使用Thymeleaf!";
    model.addAttribute("welcomewords", sWelcomeWords); //设置Model对象的welcomewords属性的值为sWelcomeWords
    return "/lucky"; //使用lucky模板并返回
}

该方法需要引用“org.springframework.ui.Model”这个包，我们访问如下地址也可以出现一样的效果：

http://localhost:8080/jiaocheng/getlucky3

但是我们一般不建议使用这2种办法。

三，text、utext和href

我们再来看下lucky模板的标签：

<p style="color:red" th:text="'Hello, ' + ${welcomewords}"></p>

“th:text”标签的作用，就是替换文本，将标记该标签的html标记内的文本，替换为“th:text”标签规定的值。例如，我们把lucky.html里面的p标签加上文字：

<p style="color:red" th:text="'Hello, ' + ${welcomewords}">即将被替换的文本</p>

我们会发现，这里面的文本被替换掉了，根本没有起到作用。

但是，th:text标签并不支持html代码，就是说，如果你在后端绑定了带有html代码的值，例如，我们在“getlucky”方法体里面，把“sWelcomeWords”变量的值加上html代码：

String sWelcomeWords="<b>欢迎使用Thymeleaf!</b>";

访问“http://localhost:8080/jiaocheng/getlucky”之后，发现html代码没有被渲染，被完完整整的打印出来了：

Hello, <b>欢迎使用Thymeleaf!</b>

这时，我们就需要使用另外一个标签“th:utext”。我们在lucky.html模板文件中，修改标签如下：

<p style="color:red" th:utext="'Hello, ' + ${welcomewords}">即将被替换的文本</p>

重新运行项目之后，就会发现后端的html标签起作用了：

Hello, 欢迎使用Thymeleaf!

我们在lucky.html中添加一个链接标签：

<a href="https://www.baidu.com" th:href="${url}">查看链接</a>

这个链接本来是链接到百度的，但是它不会起到任何作用，而是会被替换成后台绑定的数据，我们在“getlucky”方法体中增加如下一行绑定数据：

mv.addObject("url","https://www.w3xue.com/");

我们再访问“http://localhost:8080/jiaocheng/getlucky”，就会发现这个链接是指向“https://www.w3xue.com/”的。

四、JavaScript中嵌入Thymeleaf标签

我们已经学习了html代码中Thymeleaf的基本使用方法，那么，如何在JS代码中嵌入Thymeleaf标签呢？我们使用双中括号把Thymeleaf标签包裹起来，就可以实现这一点！

首先，我们在lucky.html的<head>与</head>标签之间，加入如下代码：

<script>
    alert('[[${jsstr}]]'); //注意alert部分使用的是单引号
</script>

然后，在“getlucky”方法中，加入一个变量绑定：

mv.addObject("jsstr","w3xue教程Thymeleaf的使用\\n我是欢迎使用Thymeleaf传给JS执行的变量！");

接着，我们访问“http://localhost:8080/jiaocheng/getlucky”，就可以发现，页面会弹出我们在后台绑定的数据：

我们还可以在<script>标签上加上一个属性：

<script th:inline="javascript">

加上th:inline="javascript"这个内联属性后，取得后台绑定数据的方式会有改变，首先，我们不改动其他的代码，只看看加上这个属性后的效果：

可以看出2处异样：一是弹出的信息都带了双引号，二是JAVA代码中的双反斜杠的换行符“\\n”，并没有被浏览器解释为警告框的换行。

关于第一点，这是由于加了th:inline="javascript"这个内联属性后，由于后台赋的值是JAVA的String类型，因此标签会被自动加上双引号，如果后台赋的值是JAVA的int或其他数字类型，就会没有双引号。比如，如果我要在后台数据中绑定含有单引号的数据，如果不用这个标签，是无法输出的，因为Thymeleaf 会自动把单引号还原。又比如，我在后台将jsstr这个标签赋值3，就不会出现双引号：

mv.addObject("jsstr",3);

好了，为方便，我们把它改回来：

mv.addObject("jsstr","w3xue教程Thymeleaf的使用\\n我是欢迎使用Thymeleaf传给JS执行的变量！");

现在我们来看第二点，我们在浏览器查看源代码后，发现为什么“\\n”没有被解释为警告框的换行了：

alert('"w3xue\u6559\u7A0BThymeleaf\u7684\u4F7F\u7528\\n\u6211\u662F\u6B22\u8FCE\u4F7F\u7528Thymeleaf\u4F20\u7ED9JS\u6267\u884C\u7684\u53D8\u91CF\uFF01"'); //注意alert部分使用的是单引号

可以看出，文本都被转为Unicode编码了，原本的“\\n”也被完完整整的交给了浏览器。

因此，如果我们使用th:inline="javascript"这个内联属性，就必须做2点改动：一是把模板页lucky.html中JS代码警告框的单引号去掉：

alert([[${jsstr}]]);

而在后台，如果要输出数字格式，就要考虑在JS中是否适用，比如不能将其赋值给需要使用string数字格式的地方（虽然JS对变量类型没有那么严格，但使用不当还是会导致错误）。

二是，把代码中的“\\n”改为“\n”，它会被转为Unicode编码，完完整整的被输出给浏览器：

mv.addObject("jsstr","w3xue教程Thymeleaf的使用\n我是欢迎使用Thymeleaf传给JS执行的变量！");

我们还可以在模板页面lucky.html中，把警告框这样写：

alert(/*[[${jsstr}]]*/);

这样，前端在写页面的时候，就不会出现JS错误，影响后面JS的执行。而Thymeleaf引擎会把这个注释自动去掉，因此并不影响使用。如果有点地方需要加点东西，前端才能显示正常，那么就这样写：

alert(/*[[${jsstr}]]*/ null);

或者其他测试的数据：

alert(/*[[${jsstr}]]*/ "这里是后端给的jsstr数据");

一样的道理，这些null、字符串会被Thymeleaf引擎干掉，只剩下后台传的数据。

好了，Thymeleaf 的简单使用就介绍到这里，其实，如果项目不是很复杂，这些在日常工作中已经基本够用了，但Thymeleaf 引擎是很强大的，下一节，我们来介绍它的高级功能。

注意：本页面内容为W3xue原创，未经授权禁止转载，违者必究！
来源：W3xue　　发布时间：2019/9/26 16:16:01

上一节:Boot 常用文件夹布局

下一节:Boot Thymeleaf高级教程

优化或报错有奖

友情链接：直通硅谷　点职佳　北美留学生论坛

Spring Boot课程

Boot Thymeleaf初步使用