【SpringBoot】SpringBoot整合thymeleaf

最新推荐文章于 2024-04-10 01:01:33 发布

全栈小白.

最新推荐文章于 2024-04-10 01:01:33 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/admin_2022/article/details/130414048

版权

Java全栈开发同时被 2 个专栏收录

64 篇文章 3 订阅

订阅专栏

SpringBoot

21 篇文章 1 订阅

订阅专栏

官网：Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
翻译：Thymeleaf是适用于Web和独立环境的现代服务器端 Java 模板引擎

Thymeleaf可以轻松与SpringMvc、springBoot等web框架进行集成，适用于 Web 和独立环境开发。与jsp、Velocity、FreeMaker功能类似，thymeleaf可以通过thymeleaf标签渲染处理数据用以展示给用户。

目前企业项目基本都是前后端分离模式，但thymeleaf模板对于行业初学者学习或个人承接项目使用都还是个不错的选择。

SpringBoot整合thymeleaf

导入依赖

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

配置文件

server:
  port: 2023
spring:
  thymeleaf:
    # 视图解析前缀
    prefix: classpath:/templates/
    # 视图解析后缀
    suffix: .html
    # 模板编码
    encoding: UTF-8
    # 关闭缓存
    cache: false
    servlet:
      content-type: text/html

在templates文件夹下创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
    <h4>SpringBoot整合thymeleaf主页面测试!</h4>
</body>
</html>

创建视图跳转控制器

注意：templates下的文件不能通过浏览器地址栏直接访问，需要通过控制器跳转

/**
 * @Project: spring-boot-thymeleaf-demo
 * @Author: cxs2014501@163.com
 * @Create: 2023/2/15 13:58
 * @Description:
 **/
@Controller
public class ViewController {

    @GetMapping("/index")
    public ModelAndView index(ModelAndView modelAndView){
        modelAndView.setViewName("index");
        return modelAndView;
    }
}

浏览器访问：127.0.0.1:2023/index

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

thymeleaf语法介绍

表达式说明

表达式名字	语法	用途
变量取值	${…}	获取请求作用域、会话作用域、对象值
选择变量	*{…}	获取上下文对象值
消息	#{…}	获取国际化等值
链接	@{…}	生成链接
片段表达式	~{…}	引入公共页面片段

简单语法说明

设置单个值

<form action="subscribe.html" th:attr="action=@{/subscribe}">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
  </fieldset>
</form>

简化写法th:xxx

<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>
<form action="subscribe.html" th:action="@{/subscribe}">

迭代循环遍历

<tr th:each="prod : ${prods}">
        <td th:text="${prod.name}">Onions</td>
        <td th:text="${prod.price}">2.41</td>
        <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
  <td th:text="${prod.name}">Onions</td>
  <td th:text="${prod.price}">2.41</td>
  <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

条件判断

<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:if="${not #lists.isEmpty(prod.comments)}">view</a>

选择结构

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

简单案例

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

依赖包会自动进行thymeleaf配置

1、所有thymeleaf的配置值都在 ThymeleafProperties

2、配置好了 SpringTemplateEngine

3、配好了 ThymeleafViewResolver

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

如果配置文件没有进行相关配置，默认配置如下

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

在html页面加入命名空间

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

demo.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>demo案例</title>
</head>
<body>
    <div>
        <h2 th:text="${msg}"></h2>
        <h4>
            <a href="www.taobao.com" th:href="${link}">去百度</a><br/>
        </h4>
    </div>
</body>
</html>

ViewController

@Controller
public class ViewController {

    @GetMapping("/demo")
    public ModelAndView demo(ModelAndView modelAndView){
        modelAndView.setViewName("demo");
        modelAndView.addObject("msg", "Hello, Thymeleaf!");
        modelAndView.addObject("link", "https://www.baidu.com");
        return modelAndView;
    }
}