Springboot整合Thymeleaf教程

目录

一、Thymeleaf

Thymeleaf简介

Thymeleaf特点

二、整合Thymeleaf

引入依赖

系统配置

文件位置

后端调用

效果展示

---

一、Thymeleaf

Thymeleaf简介

        Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面 。

Thymeleaf特点

• 动静结合：Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
• 开箱即用：Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速地实现表单绑定、属性编辑器、国际化等功能。
• 多方言支持：它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
• 与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。

二、整合Thymeleaf

引入依赖

<!-- thymeleaf整合springboot所需相关依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

系统配置

spring:
  #thymeleaf配置
  thymeleaf:
    #更改prefix对应的值可以改变Thymeleaf所访问的目录，但好像只能有一个目录。
    prefix: classpath:/templates/
    #访问文件类型
    suffix: .html
    #关闭缓存
    cache: false

        Thymeleaf默认会开启页面缓存，提高页面并发能力。但会导致我们修改页面不会立即被展现，因此我们关闭缓存：spring.thymeleaf.cache=false

        修改完毕页面，需要使用快捷键：Ctrl +F9（Build Project）来刷新工程。

文件位置

        根据application.yml的spring.thymeleaf.prefix决定，*.html文件普遍定义在resources下新建的templates文件夹中。

后端调用

        Controller层代码如下：

@Controller
@RequestMapping("cs")
public class LoginController {

    /**
     * html模板入口
     * @return 'resources/templates'下的html模板
     */
    @GetMapping("/login")
    public String hello(){
        return "login/login";
    }
} 

        注意！注意！注意！：如果controller层需要通过thymeleaf去访问页面，注入LoginController的注解必须为@Controller，而不是@RestConreoller（@ResponseBody＋@Controller）注解。

        @Controller和@RestController的区别主要有以下几点：

1. @RestController相当于@Controller和@ResponseBody合在一起的作用；
2. 如果使用@RestController注解Controller层的话，则返回的是return里面的内容，无法返回到指定的页面，配置的视图解析器InternalResourceViewResolver也就自然没有作用了；
3. 如果要返回到指定的页面，则需要用@Controller配合视图解析器InternalResourceViewResolver；
4. 如果需要返回JSON、XML或自定义mediaType内容到页面，则需要在对应的方法上加上@ResponseBody注解。

效果展示

        访问http://ip:port/项目名称/cs/login，效果如下：