Spring Boot 框架(四)—— Spring Boot 之 Thymeleaf 页面模板引擎

Spring Boot 之 Thymeleaf 页面模板引擎

  • 一、Thymeleaf 页面模板概述
    • 1.1 Thymeleaf 页面模板概述
    • 1.2 Spring Boot 集成 Thymeleaf 模板
    • 1.3 Thymeleaf 模板常用语法

一、Thymeleaf 页面模板概述

1.1 Thymeleaf 页面模板概述

1.1.1 Thymeleaf 介绍
freemaker 是一种模板引擎技术,其工作原理是在服务器响应html之前,先将html模板文件中的插值替换为真实的数据,然后在将html响应到客户端。使用模板引擎可以替代JSP实现动态网页。Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎。

Thymeleaf是当今比较流行的模板框架,并且是Spring Boot官方推荐使用的模板框架。

1.2 Spring Boot 集成 Thymeleaf 模板

1.2.1 新建项目引入Thymeleaf 依赖
Thymeleaf 的依赖如下

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

另外,由于Thymeleaf对HTML的校验特别严格,比如标签没有结束等可能会对不熟悉者造成未知的困惑,因此我们还需要加入nekohtml的依赖来避免这种情况。

<dependency>
   <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>

1.2.2 在配置文件中配置Thymeleaf

## thymeleaf缓存是否开启,开发时建议关闭,否则更改页面后不会实时展示效果
spring.thymeleaf.cache=false
## thymeleaf编码格式
spring.thymeleaf.encoding=UTF-8
## thymeleaf对HTML的校验很严格,用这个去除thymeleaf严格校验
spring.thymeleaf.mode=LEGACYHTML5
## thymeleaf模板文件前缀
spring.thymeleaf.prefix=classpath:/templates/
## thymeleaf模板文件后缀
spring.thymeleaf.suffix=.html

配置结果
Spring Boot 框架(四)—— Spring Boot 之 Thymeleaf 页面模板引擎_第1张图片
1.2.3 测试Thymeleaf
新建Controller类

@Controller
public class ThymeleafController {

    @GetMapping("/")
    public String test(ModelMap modelMap){
        modelMap.addAttribute("code","This is Thymeleaf");
        return "index";
    }
}

src/mian/resources/templates下新建一个index.html(需要结合配置文件中spring.thymeleaf.prefix的配置信息存放HTML),使用th:text="${code}"来接收后台传来的数据。

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

启动项目并在浏览器访问``,得到如下结果
在这里插入图片描述

完整的pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.test</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-thymeleaf-demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!-- Thymeleaf 依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- 去除HTML的严格校验-->
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
        </dependency>
        <!-- 热部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

1.3 Thymeleaf 模板常用语法

1.3.1 内容替换指令

  • th:text:设置当前元素的文本内容,替换标签的文本内容
  • th:utext:支持html标签的内容替换
  • th:value:设置当前元素的值,替换表单控件的value值
  • th:attr:设置当前元素的属性,语法 th:attr="属性名称=值或者表达式",可用于设置单选款或者多选款选中,例如:th:attr="checked=${user.sex==1}"
  • th:checked:设置单选框是否选中th:checked="${实体属性==单选框的value值}"
  • th:selected:设置下拉框选中,语法th:selected="${user.majorid eq major.id}"
  • th:onclick:添加点击事件,在点击事件的函数中可以使用表达式传参
    除了上述指令外,还可以使用th:属性名称设置html的属性值,例如超链接的 href、图片的src等等

1.3.2 内容拼接
要讲动态数据与字符串进行拼接的方式:th:onclick="|del(${user.id})|",写在两个竖线之间的内容可以直接进行静态数据和动态数据的拼接

1.3.3 代码块引入指令

  • th:insert:代码块引入,一般用作提取公共文件,或者引用公共静态文件等。
  • th:replace:代码块引入,一般用作提取公共文件,或者引用公共静态文件等。
  • th:incloud:代码块引入,一般用作提取公共文件,或者引用公共静态文件等。

1.3.4 条件判断指令

  • th:ifth:if="${条件表达式}":条件成立渲染该标签
  • th:unlessth:unless="${条件表达式}":条件不成立渲染该标签
  • th:switch:用作条件判断
  • th:case:用作条件判断

1.3.5 循环指令

  • th:eachth:each=“变量名 状态值名称:集合”,例如:th:each="user ,i:${list}",其中user表示循环产生的对象,i表示状态值,状态值中包含了序号,集合长度等信息:
  • i.index:当前迭代对象的 index(从0开始计算)
  • i.count:当前迭代对象的 index(从1开始计算)
  • i.size:被迭代对象的大小
  • i.current:当前迭代变量
  • i.even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)
  • i.first:布尔值,当前循环是否是第一个
  • i.last:布尔值,当前循环是否是最后一个

1.3.6 Thymeleaf 内置方法

  • #numbers:数字方法。
  • #dates:日期方法。
  • #calendars:日历方法。
  • #strings:字符串方法。
  • #lists:集合方法。
  • #maps:对象方法。

你可能感兴趣的:(SpringBoot,框架)