SpringBoot Web开发——整合Thymeleaf

最新推荐文章于 2022-11-10 10:15:21 发布

小蜉蝣星蔚

最新推荐文章于 2022-11-10 10:15:21 发布

阅读量457

点赞数

分类专栏： # SpringBoot 文章标签： web spring springboot thymeleaf

本文链接：https://blog.csdn.net/qq_42391904/article/details/104359120

版权

SpringBoot 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

SpringBoot Web开发——整合Thymeleaf

文章目录

- SpringBoot Web开发——整合Thymeleaf

0.Thymeleaf简介

Thymeleaf是一款用于渲染HTML页面的模板引擎，类似JSP，Velocity，FreeMaker等。

1.导入依赖

        <!--        thymeleaf 模板引擎-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2.Thyemleaf自动配置类原理 ConfigurationProperties

在自动配置包下的ThymeleafProperties类，截取部分源码如下所示：

@ConfigurationProperties(
    prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";

可看到默认的html文件配置路径在classpath:/templates/，所以我们只需把HTML文件放到该路径下即可，Thyemleaf便会自动渲染。

2.Thymeleaf的基本使用

Thymeleaf的基本语法表达式分为四类：

URL表达式
变量表达式
选择或星号表达式
文字国际化表达式

2.1 html标签中引入thymeleaf命名空间

thymeleaf命名空间为：xmlns:th="http://www.thymeleaf.org

只有引入该命名空间后面的thymeleaf语法才生效。

<html  class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

2.2 URL表达式@{ }——Css / Js文件对应URL路径

简单两句话：

css文件引入 href=“css文件相对路径”——>th:href="@{css文件相对路径}（根据springboot静态资源映射路径规则）
js文件引入 src=“js文件相对路径”——>th:src="@{js文件相对路径}（根据springboot静态资源映射路径规则）

原先的css引入：

<link rel="stylesheet" href="./css/login.css" >

根据springboot静态资源映射规则该URL为：/xadmin/css/login.css

所以使用Thymeleaf修改如下:

<link rel="stylesheet"  th:href="@{/xadmin/css/login.css}">
或者：
<link rel="stylesheet" href="./css/login.css" th:href="@{/xadmin/css/login.css}">

原先的Js 引入：

<script src="./lib/layui/layui.js" charset="utf-8"></script>

同理修改如下：

<script src="./lib/layui/layui.js" charset="utf-8"></script>

2.3 变量表达式 ${ }——获取变量值

设有实体类Word 包含id，english，chinese三个属性。

<div th:text="${session.word.english}">

获取word实体对象的english属性

2.4 选择或星号表达式 *{ }——获取变量值

很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行

//选择或星号表达式 以下写法
<div th:object="${session.word}">
    <p>英文: <span th:text="*{english}">english</span>.</p>
    <p>中文: <span th:text="*{chinese}">chinese</span>.</p>
  </div>

//等价于变量表达式 ${ } 以下写法
<div>
  <p>英文: <span th:text="${session.word.english}">english</span>.</p>
  <p>中文: <span th:text="${session.word.chinese}">chinese</span>.</p>
</div>

2.5 文字国际化表达式 #{ }——获取外部文件中的区域文字信息

文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)，用Key索引Value，还可以提供一组参数(可选). 用的很少…

     <th th:text="#{header.address.city}">...</th>  
     <th th:text="#{header.address.country}">...</th>

表达式支持的语法就很多，还有一些常用的th标签，推荐官方文档，这里也推荐几篇博客：

[Thymeleaf 的基本用法]( https://segmentfault.com/a/1190000017563310#item-1-9 )

thymeleaf 标准表达式语法

小蜉蝣星蔚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot Web开发——整合Thymeleaf

SpringBoot Web开发——整合Thymeleaf0.Thymeleaf模板引擎简介Thymeleaf是一款用于渲染HTML页面的模板引擎，类似JSP，Velocity，FreeMaker等。1.导入依赖  <dependency> <gr...
复制链接

扫一扫