Spring Boot 学习笔记 4 : Thymeleaf

最新推荐文章于 2024-05-31 09:33:06 发布

SmileorSilence

最新推荐文章于 2024-05-31 09:33:06 发布

阅读量7.8k

点赞数 7

分类专栏： springboot 文章标签： spring-boot thymeleaf

本文链接：https://blog.csdn.net/SmileorSilence/article/details/79148938

版权

springboot 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在 pom.xml 文件中添加依赖：

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

在 application.properties 文件中添加（默认）配置：

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

创建 JavaBean：

public class Person {

    private String name;
    private Integer age;

    public Person() {
    }

    public Person(String name, Integer age) {
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

编写 Controller：

package com.springboot.controller;

import com.springboot.domain.Person;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
@Slf4j
public class HelloController {

    @RequestMapping("/hello")
    public String index(Model model) {
        log.info("收到请求");
        Person person1 = new Person("长相思", 18);
        Person person2 = new Person("花似伊", 19);
        Person person3 = new Person("柳似伊", 20);

        List<Person> people = new ArrayList<>();
        people.add(person1);
        people.add(person2);
        people.add(person3);

        model.addAttribute("people", people);

        return "index";
    }
}

在 src/main/resources/templates 目录下创建 index.html 文件：

<!DOCTYPE html>
<html xml:th = "http://www.thymeleaf.org">
<head>
    <title>mail</title>
    <meta charset="UTF-8"/>
</head>
<body>
    <div data-th-unless="${#lists.isEmpty(people)}">
        <h3>列表</h3>
        <div>
            <ul>
                <li data-th-each="person:${people}">
                    <span data-th-text="${person.name}"></span>
                    <span data-th-text="${person.age}"></span>
                    <button data-th-"'getName(\''+${person.name}+'\')'">获取名字</button>
                </li>
            </ul>
        </div>
    </div>
    <script data-th-inline="javascript">
        function getName(name) {
            alert(name);
        }
    </script>
</body>
</html>

在 application.properties 文件中添加配置，使用浏览器测试：
```
server.port=80
```

需要注意的地方：

• 在控制器类中使用的是 @Controller 注解而不是 @RestController 注解，@RestController 注解返回 json 格式，而 thymeleaf 解析的是 html 格式。

使用restcontroller

• 在 html 文件中使用 data- 前缀的 th 表达式，以免 IDEA 语法检查时飘红。

data-

• 在 html 文件中使用 onclick 属性的 th 表达式调用 js 函数传递参数时，参数如果是表达式，在进行字符串拼接时需要用单引号包裹起来，并且单引号需要使用反斜杠 “\” 进行转义，如以下示例：

data-th-" 'getName(\'' + ${person.name} + '\')' "

• 在 html 文件中使用 th 表达式时会有作用范围，因此注意正确的嵌套 html 标签，以避免 thymeleaf 解析时出现错误：

标签需要正确嵌套

<li> 标签提前关闭后，<span> 标签中的 person 变量失效，person.name 无法获取：

2018-01-24 13:09:34.661 ERROR 5640 --- [p-nio-80-exec-1] org.thymeleaf.TemplateEngine             :
[THYMELEAF][http-nio-80-exec-1] Exception processing template "index": Exception evaluating SpringEL expression: "person.name" (index:13)

2018-01-24 13:09:34.668 ERROR 5640 --- [p-nio-80-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet]    :
Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed;
nested exception is org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "person.name" (index:13)] with root cause

org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'name' cannot be found on null

EL1007E

• 如果 html 文件不是严格的 html5 格式，使用如下配置会抛出异常。

spring.thymeleaf.mode=HTML5

抛出异常：

[THYMELEAF][http-nio-8080-exec-2] Fatal error during parsing
	org.xml.sax.SAXParseException: 元素类型 "link" 必须由匹配的结束标记 "</link>" 终止。

可以将配置修改为：

spring.thymeleaf.mode=LEGACYHTML5

并添加如下依赖即可：

<dependency>
	<groupId>net.sourceforge.nekohtml</groupId>
	<artifactId>nekohtml</artifactId>
</dependency>

SmileorSilence

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
4
评论
Spring Boot 学习笔记 4 : Thymeleaf

spring boot 学习笔记 : thymeleaf
复制链接

扫一扫

专栏目录