课程表

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,那么就在文件中增加如下配置:

#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文件等静态文件的。

1.jpg

我们首先在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”,就可以发现,页面会弹出我们在后台绑定的数据:

0.jpg

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

<script th:inline="javascript">

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

2.jpg

可以看出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