SpringBoot 使用Thymeleaf模板引擎

本是古典何须时尚 2022-01-27 15:09 379阅读 0赞

### 一、SpringBoot中使用Thymeleaf ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

1、在创建SpringBoot 的项目时，选择Thymeleaf的组件，或者自己手动在maven中添加库依赖：

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

2、在 application.yml（或aproperties）中添加相应的配置：

server:
      port: 80
    
    # thymeleaf 配置
    spring:
      thymeleaf:
        # 是否使用缓存，开发阶段最填false
        cache: false
        # 检查该模板是否存在
        check-template-location: true
        # 模板中内容的类型
        servlet:
          content-type: text/html
        # 启动 MVC 对Thymeleaf 视图的解析
        enabled: true
        # 模板的字符集
        encoding: UTF-8
        # 从解析中排除的视图名称的逗号分隔列表，没有的话就为空
        excluded-view-names:
        # 使用的是什么类型模板
        mode: HTML5
        # 设定文件路径
        prefix: classpath:/templates/
        # 设定文件后缀名
        suffix: .html
    
      # 设定静态文件路径，js,css等
      mvc:
        static-path-pattern: /static/**

3、新建一个controller类

@Controller
    public class IndexController {
    
        @GetMapping("/index")
        public String indexJsp(Model model){
            User user = new User();
            user.setUsername("张三");
            user.setAge(18);
            user.setBirthday(new Date());
            User user2 = new User();
            user2.setUsername("李四");
            user2.setAge(17);
            user2.setBirthday(new Date());
    
            List userList = new ArrayList<>();
            userList.add(user);
            userList.add(user2);
            model.addAttribute("userList", userList);
            return "indexThymeleaf";
        }
    }

4、新建一个.html页面文件

加上名称空间，就会有thymeleaf的代码提示

接下来便可以使用th:标签库中的方法了。这些方法和jsp极其相像

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h4>Thymeleaf首页</h4>
        <img src="../static/img/abc23.jpg" width="200px" height="100px"> <br>
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td>用户名</td>
                <td>密码</td>
                <td>年龄</td>
                <td>出生年月</td>
            </tr>
            <div th:each="user:${userList}">
                <tr>
                    <td th:text="${user.username}"></td>
                    <td th:text="${user.pazzword}">空值</td>
                    <td th:text="${user.age}"></td>
                    <td th:text="${#dates.format(users.birthday,'yyyy-MM-dd HH:mm:ss')}"></td>
                </tr>
            </div>
        </table>
    </body>
    </html>

5、启动项目访问即可

![2019052710130081.png][]

### 二、Thymeleaf 标签使用 ###

[Thymeleaf 官方文档][Thymeleaf]

标签参考文章：[https://www.cnblogs.com/beyrl-blog/p/6633182.html][https_www.cnblogs.com_beyrl-blog_p_6633182.html]

end ~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: /images/20220127/e915d1c4a971486f809a68a6e56db590.png
[2019052710130081.png]: /images/20220127/4c830a0ed3414979a0624e225e202013.png
[Thymeleaf]: https://www.thymeleaf.org/documentation.html
[https_www.cnblogs.com_beyrl-blog_p_6633182.html]: https://www.cnblogs.com/beyrl-blog/p/6633182.html