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";  
}

 

更多推荐