SpringBoot集成Thymeleaf模板

最新推荐文章于 2024-05-02 21:23:35 发布

所追寻的风

最新推荐文章于 2024-05-02 21:23:35 发布

阅读量501

点赞数 1

分类专栏： springboot 后端文章标签： spring java

本文链接：https://blog.csdn.net/the_Discovery/article/details/107568902

版权

后端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

springboot

7 篇文章 0 订阅

订阅专栏

1. 特性

动态设置网页参数
集成于SpringBoot框架
独立性，有无网络皆可运行
轻量级（jsp属于重量级框架）

2. 依赖

thymeleaf非常方便，只需导入一个依赖

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

3. 添加application.properties配置

# thymeleaf前缀名，即存放于类路径下的templates文件夹
spring.thymeleaf.prefix=classpath:/templates/

# thymeleaf后缀名，当后缀为.html时被解释为thylemeaf
spring.thymeleaf.suffix=.html

# 编码方式UTF-8
spring.thymeleaf.encoding=UTF-8

# 当浏览器接受服务器响应时，响应类型为html
spring.thymeleaf.servlet.content-type=text/html

# 设置静态文件夹，通常在templates文件夹下的html文件不能直接被浏览器访问，需要通过controller访问。因此我们需要将静态网页与动态网页分别存放于templates和static。为了便于管理，将两个文件夹均设置为静态目录，将html文件（不论是否使用了模板引擎）放置于templates文件夹下，而将js、css文件放置于static文件夹下。
spring.resources.static-locations=classpath:/templates/,classpath:/static

4. 展示数据

在使用thymeleaf语法之前，需要在标签中加入thymeleaf命名空间，用于解析thymeleaf，从而提供代码提示。

<html lang="en" xmlns:th="http://www.thymeleaf.org">

4.1 展示单个数据

4.1.1 在controller中填写要递交的数据

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
@RequestMapping("/user")
public class HelloController {
    @GetMapping("/namepage")
    public String hello(HttpServletRequest httpServletRequest, Model model){
        //向model中添加属性值
        model.addAttribute("name","SeekWind");
        //返回index值，作为index.html的逻辑名，自动在template文件中寻找index.html
        return "index";
    }
}

4.1.2 在html中获取name值

    <span th:text="${name}"></span>

4.1.3 此时，重启Application，即可获得正确结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lwVMZQrJ-1595593169686)(images/image-20200701115556965.png)]

注意：凡是修改了Java代码或者修改了thymeleaf内容的，需要重启Application。而只修改了JSP或者纯html代码的，只需要alt+F9重新编译即可。

4.1.4 如果在后端使用html标签作为属性值，则需要作如下变化

@Controller
@RequestMapping("/user")
public class HelloController {
    @GetMapping("/namepage")
    public String hello(HttpServletRequest httpServletRequest, Model model){
        //向model中添加属性值
        model.addAttribute("name","SeekWind");
        //以html标签作为属性值
        model.addAttribute("nameHtml","<a href>SeekWind_HTML</a>");
        //返回index值，作为index.html的逻辑名，自动在template文件中寻找index.html
        return "index";
    }
}

<span th:utext="${nameHtml}"></span>

4.1.5 重启后，效果如下图

在这里插入图片描述

4.1.6 如果将值输入到表单，则作如下变化

<input th:value="${name}"/>

4.1.7 重启后效果图

在这里插入图片描述

4.2 展示对象

4.2.1 书写User类

import java.util.Date;
import lombok.*;

@Data
@AllArgsConstructor
@ToString
public class User {
    private String name;
    private Integer id;
    private Date bir;
}

在类的构造中，使用了lombok依赖。lombok依赖可以将constructor、getter、setter、toString、equals、hashcode方法以注解的形式构建。提高了代码的可读性。

对于lombok，需要引入依赖。最好再下载lombok IDEA插件，否则IDEA会报静态编译错误。

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>

4.2.2 在Controller中传递对象

@Controller
@RequestMapping("/user")
public class HelloController {
    @GetMapping("/namepage")
    public String hello(HttpServletRequest httpServletRequest, Model model){
        //向model中添加属性值
        model.addAttribute("name","SeekWind");
        //以html标签作为属性值
        model.addAttribute("nameHtml","<a href>SeekWind_HTML</a>");
        //以对象作为属性值
        model.addAttribute("user",new User("Seekwind", 123456, new Date()));
        //返回index值，作为index.html的逻辑名，自动在template文件中寻找index.html
        return "index";
    }
}

4.2.3 在html中接收user对象

    <ul>
        <li>Name: <span th:text="${user.name}"></span></li>
        <li>ID: <span th:text="${user.id}"></span></li>
        <li>Bir: <span th:text="${#dates.format(user.bir, 'yyyy-MM-dd')}"></span></li>
    </ul>

4.2.4 重启后效果如图

在这里插入图片描述

4.3 展示多条数据（遍历集合）

4.3.1 在Controller中传递对象集合

@Controller
@RequestMapping("/user")
public class HelloController {
    @GetMapping("/namepage")
    public String hello(HttpServletRequest httpServletRequest, Model model){
        List<User> users = Arrays.asList(
                    new User("AAA",111, new Date()),
                    new User("BBB",222, new Date()),
                    new User("CCC",333, new Date())
                );
        //以对象的集合作为属性值
        model.addAttribute("users", users);
        //返回index值，作为index.html的逻辑名，自动在template文件中寻找index.html
        return "index";
    }
}

4.3.2 在html中接收并遍历集合

    <ul title="List<User>" th:each="userEle, userState:${users}">
        <li>Index: <span th:text="${userState.index}"/></li>
        <li>Name: <span th:text="${userEle.name}"></span></li>
        <li>ID: <span th:text="${userEle.id}"></span></li>
        <li>Bir: <span th:text="${#dates.format(user.bir, 'yyyy-MM-dd')}"></span></li>
    </ul>

遍历集合使用each语句

<ul th:each="userEle, userState:${users}"></ul>

其中，userEle参数接收集合中的每个元素，userState元素接收userEle的其他状态参数（可以不写）。

userState有以下几个参数。

参数	意义
userState.size	集合的大小
userState.index	当前元素在集合中的索引（从0开始）
userState.count	当前元素在集合中的索引（从1开始）
userState.current	输出当前元素的toString()
userState.even	当前元素是否为偶数行（count是否为偶数）
userState.first	当前元素是否为第一个
userState.last	当前元素是否为第二个
userState.odd	当前元素是否为奇数行（count是否为奇数）

4.4 使用if语句

4.4.1 Java集合

Java集合依然使用4.3中的User list

4.4.2 thymeleaf中的if语法

    <ul title="List<User>" th:each="userEle, userState:${users}">
        <div th:if="${userEle.id} ge 222">
            <li>Index: <span th:text="${userState.even}"/></li>
            <li>Name: <span th:text="${userEle.name}"></span></li>
            <li>ID: <span th:text="${userEle.id}"></span></li>
            <li>Bir: <span th:text="${#dates.format(user.bir, 'yyyy-MM-dd')}"></span></li>
        </div>
    </ul>

表示输出 id 大于等于222的集合元素。ge代表大于等于，类似的还有：

符号	意义
gt (great than)	大于
ge (great equal)	大于等于
eq (equal)	等于
lt (less than)	小于
le (less equal)	小于等于
ne (not equal)	不等于

当然，也可以直接使用不等号，但是使用不等号会对thymeleaf的字符串的解析带来难度，使用字母可以提高thymeleaf的性能。

5. 引用静态资源

5.1 静态资源文件夹

默认的静态资源文件夹为类路径下的static文件夹。

在这里插入图片描述

如果有需要，可以在application.properties文件中修改静态目录：

spring.resources.static-locations=classpath:/templates/,classpath:/static

5.2 thymeleaf引用静态资源语法

    <link rel="stylesheet" th:href="@{/css/index.css}">
    <script th:src="@{/js/jquery.js}"></script>

注意，此处使用**@{}**包裹资源地址，且资源地址以定义的静态文件目录作为根目录。

所追寻的风

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot集成Thymeleaf模板

1. 特性动态设置网页参数集成于SpringBoot框架独立性，有无网络皆可运行轻量级（jsp属于重量级框架）2. 依赖thymeleaf非常方便，只需导入一个依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId
复制链接

扫一扫