SpringBoot整合thymeleaf

JavaEE领域有几种常用的模板引擎: Jsp, Thymeleaf, Freemarker, Velocity等.对于前端页面渲染效率来说 JSP 其实还是最快的, Velocity次之.Thymeleaf虽然渲染效率不是很快,但语法比较轻巧.Thymeleaf 支持html5标准, Thymeleaf页面无需部署到servlet开发到服务器上,以 .html 后缀结尾,可直接通过浏览器就能打开

剽悍一小兔

327人浏览 · 2023-08-29 16:04:11

剽悍一小兔 · 2023-08-29 16:04:11 发布

JavaEE领域有几种常用的模板引擎: Jsp, Thymeleaf, Freemarker, Velocity等.对于前端页面渲染效率来说 JSP 其实还是最快的, Velocity次之.Thymeleaf虽然渲染效率不是很快,但语法比较轻巧.

Thymeleaf 支持html5标准, Thymeleaf页面无需部署到servlet开发到服务器上,以 .html 后缀结尾,可直接通过浏览器就能打开.可完全替代JSP(前后端分离不是很好).

Thymeleaf可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.(支持html原型,在html标签增加额外的属性来达到模板+数据的展示方式).浏览器解锁html时会忽略未定义的标签属性,模板可以静态运行;当有数据返回到页面时,Thymeleaf标签会动态的替换静态内容,使页面动态显示.

Thymeleaf提供标准和spring标准两种方言,可以直接套用模板实现JSTL,OGNL表达式效果.提供spring标准方言和一个与springMVC完美集成的可选模块,可以快速实现表单绑定,属性编辑器,国际化等功能.

快速入门

1.添加依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.thymeleaf的配置

spring:
  thymeleaf:
    cache: false
    encoding: utf-8
    mode: HTML5
    suffix: .html
    prefix: classpath:/templates/

3.模板文件所在位置

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Thymeleaf Example</title>
</head>
<body>
<h1 th:text="${message}">Message</h1>
</body>
</html>

最后，用controller去访问

@Controller
public class IndexController {
    @RequestMapping("/")
    public String index(Model model) {
        model.addAttribute("message", "Hello Thymeleaf!");
        return "index";
    }
}

注意，这边要用 @Controller ，不能用 @RestController。

启动项目，访问 http://localhost:8080/

更新页面不生效解决

很多用themeleaf的小伙伴，都会发现修改了页面后必须要重启才能生效，还不如jsp呢，简直是技术的倒退！

其实，我们只需要在idea里面设置一下就解决了，网上很多说加这个那个配置的，很多都是胡扯，根本不是那个原因。

看步骤：

点这个

这两个

选择：

On ‘Update’ action: update classes and resources

On frame deactivation: update classes and resources

重启项目，你就会发现修改页面实时更新了，搞定。

thymeleaf常用指令

以下是thymeleaf常用指令的示例，包含前后端代码。

th:text指令：

前端代码：

<h1 th:text="${name}">默认名称</h1>

后端代码：

@GetMapping("/example")  
public String example(@RequestParam String name, Model model) {  
    model.addAttribute("name", name);  
    return "example";  
}

th:text 还可以拼接，有点类似于vue 比如：

<h1 th:text="${message} + ' 哈哈哈'">Message</h1>

th:each指令：

前端代码：

<ul th:each="item : ${items}">  
    <li th:text="${item}"></li>  
</ul>

后端代码：

@GetMapping("/example")  
public String example(Model model) {  
    List<String> items = Arrays.asList("Item 1", "Item 2", "Item 3");  
    model.addAttribute("items", items);  
    return "example";  
}

th:if指令：

前端代码：

<div th:if="${condition}">条件为真时显示</div>

后端代码：

@GetMapping("/example")  
public String example(Model model) {  
    boolean condition = true; // 根据实际情况设置条件值  
    model.addAttribute("condition", condition);  
    return "example";  
}

th:unless指令：

前端代码：

<div th:unless="${condition}">条件为假时显示</div>

后端代码：

@GetMapping("/example")  
public String example(Model model) {  
    boolean condition = false; // 根据实际情况设置条件值  
    model.addAttribute("condition", condition);  
    return "example";  
}