课程表

Spring Boot课程

工具箱
速查手册

Boot Thymeleaf初步使用

当前位置：免费教程 » Java相关 » Spring Boot
注意：本页面内容为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，那么就在文件中增加如下配置：

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

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

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

  1. thymeleaf:
  2.   cache: false
  3.   prefix: classpath:/templates/
  4.   suffix: .html
  5.   mode: HTML5
  6.   encoding: UTF-8
  7.   servlet:
  8.     content-type: text/html

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

  1. <dependency>
  2.     <groupId>org.springframework.boot</groupId>
  3.     <artifactId>spring-boot-starter-thymeleaf</artifactId>
  4. </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会帮你自动导包，完成的代码如下：

  1. package com.w3xue.jiaocheng.controller;
  2.  
  3. import org.springframework.stereotype.Controller;
  4.  
  5. @Controller
  6. public class MainController {
  7. }

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

1.jpg

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <p style="color:red" th:text="'Hello, ' + ${welcomewords}"></p>
  9. </body>
  10. </html>

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

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

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

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

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

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

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

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

  1. http://localhost:8080/jiaocheng/getlucky

会出现下面的字样：

Hello, 欢迎使用Thymeleaf!

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

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

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

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

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

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

  1. http://localhost:8080/jiaocheng/getlucky2

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

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

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

  1. http://localhost:8080/jiaocheng/getlucky3

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

三，text、utext和href

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

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

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

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

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

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

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

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

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

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

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

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

Hello, 欢迎使用Thymeleaf!

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

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

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

  1. 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>标签之间，加入如下代码：

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

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

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

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

0.jpg

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

  1. <script th:inline="javascript">

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

2.jpg

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

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

  1. mv.addObject("jsstr",3);

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

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

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

  1. 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代码警告框的单引号去掉：

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

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

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

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

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

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

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

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

或者其他测试的数据：

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

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

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

注意：本页面内容为W3xue原创，未经授权禁止转载，违者必究！
来源：W3xue　　发布时间：2019/9/26 16:16:01
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号