Spring Boot学习笔记（八）Spring Boot Thymeleaf

最新推荐文章于 2023-04-23 15:45:23 发布

蛋饼双蛋不刷酱

最新推荐文章于 2023-04-23 15:45:23 发布

阅读量336

点赞数

分类专栏： Spring Boot学习笔记后端文章标签： Spring Boot Thymeleaf

本文链接：https://blog.csdn.net/Stephanie17395/article/details/99696499

版权

后端同时被 2 个专栏收录

44 篇文章 2 订阅

订阅专栏

Spring Boot学习笔记

36 篇文章 3 订阅

订阅专栏

Spring Boot Thymeleaf

上一篇：SpringBoot：JPA + Druid 多数据源
发了七之后好久才发八，中间放飞自我 + 突然上课，嘿嘿

简单概括Spring Boot Thymeleaf：

可以用来代替JSP，用于渲染XML / HTML5 / XHTML5 内容的模版引擎
能够在浏览器中打开并正确地显示模版页面，而不需要启动整个Web应用
无网络也可以运行，提供标准和Spring两种方言以及与SpringMVC完美集成的可选模块，可直接套用模版实现JSTL、OGNL表达效果

下面三个小实验：

访问Spring Initializr

初始化建立Spring Boot项目
解压之后用IDEA打开thymeleaf文件

在pom.xml中dependencies中添加依赖：

   <dependencies>
       <!-- web mvc -->
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-web</artifactId>
       </dependency>

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

       <!-- test -->
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-test</artifactId>
           <scope>test</scope>
       </dependency>

       <!-- hot swapping, disable cache for templates, enable live reload 热部署-->
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-devtools</artifactId>
           <optional>true</optional>
       </dependency>

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

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

   </dependencies>

在pom.xml中添加build：

  <build>
       <plugins>
           <plugin>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-maven-plugin</artifactId>
               <configuration>
                   <addResources>true</addResources>
               </configuration>
           </plugin>

           <plugin>
               <groupId>org.apache.maven.plugins</groupId>
               <artifactId>maven-surefire-plugin</artifactId>
               <version>2.22.0</version>
           </plugin>
       </plugins>
   </build>

点击查看设置热部署
在 application.properties 中添加配置，是关闭 thymeleaf 缓存，避免开发过程中修改页面需要重启
```
spring.thymeleaf.cache=false
```
三个实验目录

第一个小实验
hello.html:

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<h1 th:text="${message}">Hello Thymeleaf!</h1>
</body>
</html>

HelloController.java

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

@Controller
public class HelloController {
    @RequestMapping("/")
    public String index(ModelMap map) {
        map.addAttribute("message", "替换内容");
        return "hello";
    }
}

IDEA 右上角启动项目后访问 http://localhost:8080/
th:text="${message} ：th表示thymeleaf标签， text是指它的内容会由" ${message}替换后面的“Hello Thymeleaf!”
在HelloController控制类中，@RequestMapping("/") 表示映射http://localhost:8080/ 地址
参数ModelMap对象主要用于传递控制方法处理数据到结果页面，也就是说我们把结果页面上需要的数据放到ModelMap对象中即可，他的作用类似于request对象的setAttribute方法的作用，用来在一个请求过程中传递处理的数据。通过方法map.addAttribute(“message”, “替换内容”)向页面传递参数：
return “hello”指向 hello.html

第二个小实验
copyright.html:

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <footer th:fragment="copyright">
        &copy; include and replace
    </footer>

index.html

<body xmlns:th="http://www.w3.org/1999/xhtml">
	<div th:include="layout/copyright :: copyright"></div>
	<div th:replace="layout/copyright :: copyright"></div>
</body>

IndexController.java:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {
    @RequestMapping("/index")
    public String index() {
        return "index";
    }
}

IDEA右上角启动项目后访问 http://localhost:8080/index
在copyright.html中，th:fragment 属性来定义被包含的模版片段：名称为“copyright”
include 和 replace 区别：include 只是加载，replace 是替换
th:include=“layout/copyright :: copyright”：layout / copyright是指项目目录layout下的copyright文件，第二个copyright是指 th:fragment="copyright"中包含的片段名 copyright
IndexController.java 返回 index的URL

第三个小实验：
header.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Header</title>
    </head>
    <body>
        <h5 th:fragment="header">header</h5>
    </body>
</html>

left.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Header</title>
    </head>
    <body>
        <h5 th:fragment="left">left</h5>
    </body>
</html>

layout.html:

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Home</title>
    </head>
    <body>
        <div layout:fragment="content">
            <h4>hey, momentum</h4>
        </div>
    </body>
</html>

footer.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Header</title>
    </head>
    <body>
        <h5 th:fragment="footer">footer</h5>
    </body>
</html>

home.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <div th:replace="layout/header :: header"></div>
    <div th:replace="layout/left :: left"></div>
    <div layout:fragment="content"> I'm gonna gotcha</div>
    <div th:replace="layout/footer :: footer"></div>
</div>
</body>
</html>

layout.html:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class LayoutController {

    @RequestMapping("/home")
    public String home() {
        return "home";
    }
}

启动项目后访问 http://localhost:8080/home：
在home.html里面分别应引用就到达了这个效果，header left footer以及中间的内容替换
下一篇：Spring Boot Jpa与Thymeleaf实现增删改查

蛋饼双蛋不刷酱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot学习笔记（八）Spring Boot Thymeleaf

Spring Boot Thymeleaf上一篇：SpringBoot：JPA + Druid 多数据源简单概括Spring Boot Thymeleaf：可以用来代替JSP，用于渲染XML / HTML5 / XHTML5 内容的模版引擎能够在浏览器中打开并正确地显示模版页面，而不需要启动整个Web应用无网络也可以运行，提供标准和Spring两种方言以及与SpringMVC完美集成的...
复制链接

扫一扫

专栏目录