整体步骤:
1.在pom.xml
中引入thymeleaf
依赖,(Jan 30, 2017)的版本
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>1.5.1.RELEASE</version>
</dependency>
2.application.yml
设置 thyemleaf
Thymeleaf缓存在开发过程中,肯定是不行的,那么就要在开发的时候把缓存关闭
在 resource/templates
下面创建 用来存放我们的html页面
顺便设置下编码
spring:
thymeleaf:
cache: false
prefix: classpath:/templates/
suffix: .html
encoding: UTF-8
content-type: text/html
mode: HTML5
这里我创建的是HTML5
HTML5相比XHTML,新增一些特性:
1. 用于绘画的 canvas 元素;
2. 用于媒介回放的 video 和 audio 元素;
3. 对本地离线存储的更好的支持;
4. 新的特殊内容元素,比如 article、footer、header、nav、section;
5. 新的表单控件,比如 calendar、date、time、email、url、search。
新建的HTML5是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
我们需要改写下
这个一开始是没有结束符号的,不改会报404
<meta charset="UTF-8">
这是因为springboot默认使用的版本是thymeleaf2.0,如果要使用3.0的话需要加上
<properties>
<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version>
</properties>
要么改写为
<meta charset="UTF-8"/>
要么就删掉吧 在yaml文件中已经设置了编码
引入所需的th标签
xmlns:th="http://www.thymeleaf.org"
xmlns 属性可以在文档中定义一个或多个可供选择的命名空间
详细的可以参考http://www.w3school.com.cn/tags/tag_prop_xmlns.asp
<html xmlns="http://www.w3.org/1999/xhtml">
${hello}中的hello可能会标红,但是不影响
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello World!</title>
</head>
<body>
<h1 th:inline="text">Hello</h1>
<p th:text="${hello}"></p>
</body>
</html>
编写访问的controller
注意,这里只能用@Controller
不能用@RestController
,后者会直接输出json
格式的/index
,而不是跳转页面@RequestMapping("/helloHtml")
和@GetMapping("/helloHtml")
两种方式都是可以的,springboot中允许有不同类型的请求方式
另外,我试了下 在返回页面是写成index
或者//index
也是可以的.
@Controller
//@RestController
public class TemplateController {
//@RequestMapping("/helloHtml")
@GetMapping("/helloHtml")
public String helloHtml(Map<String,Object> map){
map.put("hello","你好");
return "/index";
}
}
填写访问地址的时候记得是
http://localhost:8080/
如果是
https://localhost:8080/
会报java.lang.IllegalArgumentException:Invalid character found in method name. HTTP method names must be tokens
也就是说访问的头必须是http
而不是https
在浏览器中输入http://127.0.0.1:8080/helloHtml
得到的结果就是
Hello
你好
title不作为输出
关于thymeleaf2.0和3.0也是有很大区别的:
1.完整的HTML5 标记支持
Thymeleaf 3.0 不再是基于XML结构的。由于引入新的解析引擎,模板的内容格式不再需要严格遵守XML规范。即不在要求标签闭合,属性加引号等等。
2.模板类型
Thymeleaf 3 移除了之前版本的模板类型,新的模板类型为:
HTML
XML
TEXT
JAVASCRIPT
CSS
RAW
2个标记型模板(HTML和XML),3个文本型模板(TEXT, JAVASCRIPT和CSS) 一个无操作(no-op)模板 (RAW)。
HTML模板支持包括HTML5,HTML4和XHTML在内的所有类型的HTML标记。且不会检查标记是否完整闭合。此时,标记的作用范围按可能的最大化处理。