SpringBoot实战教程（3）| 整合Thymeleaf

分手后的思念是犯贱 2023-10-02 15:27 13阅读 0赞

> Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全代替传统JSP 。
> 
> 官方文档： [Documentation - Thymeleaf][]

**目录**

一、初始化SpringBoot项目

二、引入依赖pom

三、application.properties配置文件

四、编写Controller类

五、编写html模板

六、运行结果展示

--------------------

## 一、初始化SpringBoot项目 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16][]

## 二、引入依赖pom ##

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

因为模板引擎要依赖于web模块，所以同时要将 **spring-boot-starter-web** 同时加入。

## 三、application.properties配置文件 ##

# 默认端口
    server.port=80
    ##### Thymeleaf配置 #####
    # 默认编码
    spring.thymeleaf.encoding=utf-8
    # HTML5规范
    spring.thymeleaf.mode=HTML5
    # 默认放置目录
    spring.thymeleaf.prefix=classpath:/templates/
    # 模板后缀格式
    spring.thymeleaf.suffix=.html
    # 开发时关闭缓存,不然没法看到实时页面
    spring.thymeleaf.cache=false

## 四、编写Controller类 ##

>     IndexController.java

package com.csdn.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.ModelMap;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import java.util.Arrays;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    @Controller
    @RequestMapping("/hello")
    public class IndexController {
    
        @RequestMapping("/thymeleaf")
        public String hello(ModelMap mmp) {
            // 字符串
            String str = "Thymeleaf";
            mmp.put("str", str);
            // 数组
            List<Integer> arr = Arrays.asList(1, 2, 3, 4, 5, 6, 7, 8, 9);
            mmp.put("arr", arr);
            // map集合
            Map<String,Object> map = new HashMap<>();
            map.put("name","张三");
            map.put("age","28");
            map.put("sex","男");
            mmp.addAttribute("map",map);
            return "hello";
        }
    }

## 五、编写html模板 ##

> hello.html

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title>springboot-thymeleaf demo</title>
    </head>
    <body>
    <p>显示字符串</p>
    <div th:text="${str}" ></div>
    <p>遍历数组方法一</p>
    <div th:each="name:${arr}">[[${name}]]</div>
    <p>遍历数组方法二</p>
    <div th:each="name:${arr}" th:text="${name}"></div>
    <p>遍历map</p>
    <table class="layui-table" border="1">
        <tr th:each="item,userStat:${map}">
            <td th:text="${userStat.index}+1"></td>
            <td th:text="${userStat.current.key}"></td>
            <td th:text="${userStat.current.value}"></td>
        </tr>
    </table>
    
    </body>
    </html>

## ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUm9jLXhi_size_19_color_FFFFFF_t_70_g_se_x_16][] ##

## 六、运行结果展示 ##

> 访问：[http://localhost/hello/thymeleaf][http_localhost_hello_thymeleaf]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[Documentation - Thymeleaf]: https://www.thymeleaf.org/documentation.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/10e0a51ea9f046e4996e2bf332870d02.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUm9jLXhi,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUm9jLXhi_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e35389cc2bfe460595d774f646d81144.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUm9jLXhi,size_19,color_FFFFFF,t_70,g_se,x_16
[http_localhost_hello_thymeleaf]: http://localhost/hello/thymeleaf
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUm9jLXhi_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/3710aa9493f54d67bd86a92f03f7563f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUm9jLXhi,size_20,color_FFFFFF,t_70,g_se,x_16