springboot中使用thymeleaf模板

简介: 整体步骤:1.在pom.xml中引入thymeleaf依赖,(Jan 30, 2017)的版本 org.springframework.boot spring-boot-starter-thymeleaf 1.

整体步骤:
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标记。且不会检查标记是否完整闭合。此时,标记的作用范围按可能的最大化处理。

3.片段(Fragment)表达式;
4.无操作标记;
5.模板逻辑解耦:Thymeleaf 3.0 允许 HTML和XML模式下的模板内容和控制逻辑完全解耦。
6.性能提示:
7.不依赖于Servlet API;
8.新的方言系统;
9.重构了核心API;

具体可见http://www.tuicool.com/articles/ayeQ3qn

目录
相关文章
|
4月前
|
前端开发 Java
SpringBoot下载xlsx模板,导出excel数据
SpringBoot下载xlsx模板,导出excel数据
57 0
|
9月前
|
Java API Spring
Java SpringBoot 公众号集成模板推送消息
Java SpringBoot 公众号集成模板推送消息
|
8月前
|
Java Maven
springboot项目--freemarker使用ftl模板文件动态生成图片
springboot项目--freemarker使用ftl模板文件动态生成图片
242 0
|
3月前
|
算法 Java
制作SpringBoot工程模板
制作SpringBoot工程模板
31 0
|
9月前
|
存储 JavaScript 前端开发
【开发模板】Vue和SpringBoot的前后端分离开发模板(二)
【开发模板】Vue和SpringBoot的前后端分离开发模板
|
4月前
|
Java
application.properties模板+application.yml模板+pom模板+mapper.xml模板(springboot)
application.properties模板+application.yml模板+pom模板+mapper.xml模板(springboot)
35 0
|
9月前
|
JavaScript 前端开发 Java
【开发模板】Vue和SpringBoot的前后端分离开发模板(三)
【开发模板】Vue和SpringBoot的前后端分离开发模板
|
9月前
|
JavaScript 前端开发 NoSQL
【开发模板】Vue和SpringBoot的前后端分离开发模板(一)
【开发模板】Vue和SpringBoot的前后端分离开发模板
121 0
|
10月前
|
前端开发 JavaScript Java
前端|如何在SpringBoot中通过thymeleaf模板访问页面
前端|如何在SpringBoot中通过thymeleaf模板访问页面
240 0
|
10月前
|
前端开发 JavaScript
SpringBoot+html+vue模板开发
SpringBoot+html+vue模板开发
77 0