SpringBoot——整合thymeleaf模板

落日映苍穹つ 2022-05-24 02:10 327阅读 0赞

SpringBoot常用模板引擎有 freemarker 和 thymeleaf，更推荐使用 thymeleaf。整合 thymeleaf 模板引擎很简单，只有两个步骤：

## 整合 ##

添加依赖：

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

添加 application.yml 配置：

spring:
      thymeleaf:
        prefix: classpath:/templates/
        suffix: .html
        mode: HTML5
        encoding: UTF-8
        cache: false #关闭缓存，生产环境建议设为true
        servlet:
          content-type: text/html

## 基本使用 ##

在resources/templates下创建一个index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1 th:text="${name}">你好</h1>
    </body>
    </html>

代码中h1标签中的`th:text="${name}"` 是thymeleaf模板引擎的语法，如果控制器中有给name的值，那么`你好` 就会被替换为name的值

创建一个Controller，使用`@Controller` 注解，注意不能使用`@RestController` ，因为 `@RestController` 注解会将结果转化为JSON，而我们需要使用模板引擎。

package com.example.demo.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.ModelMap;
    import org.springframework.web.bind.annotation.GetMapping;
    
    
    @Controller
    public class HelloController { 
    
        @GetMapping("/index")
        public String index(ModelMap map){
            //传递name值给模板引擎
            map.addAttribute("name","SpringBoot");
            //return模板名称，不用写后缀
            return "index";
        }
    }

就这么简单。

## 常用标签 ##

### 变量显示 ###

上面简单介绍了`th:text` ，现在再来介绍一些常用的模板标签

thymeleaf 基本都是以th开头，例如：

控制器：

@GetMapping("/index")
     public String index(ModelMap map){
         User user = new User();
         user.setUsername("springboot");
         map.addAttribute("user",user);
         return "index";
     }

最后渲染结果：  
![这里写图片描述][70]

对象中取值还有另外一种写法：

### 日期转换 ###

### text 和 utext ###

在文章最开头有一个`<h1 th:text="${name}">你好</h1>` 例子，`text` 会将文本内容原原本本显示，哪怕内容是一段html，也会被原原本本显示。

而`utext` 就会转换为html，例如：

@GetMapping("/index")
    public String index(ModelMap map){
        map.addAttribute("name","<strong>SpringBoot</strong>");
        return "index";
    }

效果：  
![这里写图片描述][70 1]

### 地址 ###

模板中引用地址的格式是：`@{地址}` ，例如：

效果：  
![这里写图片描述][70 2]

### 引入静态资源 ###

先配置application.yml:

spring:
      mvc:
        static-path-pattern: /static/**

静态资源放在resources/static目录下

引用：

### 表单 ###

在表单中我们可以使用th:field，如：

用了th:field，模板引擎会自动帮我们写好id，name，value属性，十分方便：  
![这里写图片描述][70 3]

### 条件判断 ###

if判断：

比较符号有：

*  == 或 eq ：等于
 *  gt：大于
 *  lt：小于
 *  ge：大等于
 *  le：小等于

selected判断：

switch判断：

### 列表循环 ###

[70]: /images/20220524/c7db5d97164348a6af61866ef3f28c0b.png
[70 1]: /images/20220524/6859b5b1f7e645e3a2f3f421aa14ce11.png
[70 2]: /images/20220524/6ed4abb9c6f04639a34717a787b7b417.png
[70 3]: /images/20220524/a29d86972aab4f19942068f450a8016b.png