SpringBoot之Thymeleaf的简单使用

最新推荐文章于 2024-03-16 08:59:44 发布

红莲灭

最新推荐文章于 2024-03-16 08:59:44 发布

阅读量254

点赞数

文章标签： java

本文链接：https://blog.csdn.net/qq_43686699/article/details/119352788

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

# 视图解析和模板渲染

Thymeleaf

视图解析和模板渲染，一个简单的单体应用可以使用该工具。该工具在框架中，由于有视图解析所以，在进行页面跳转时，只需写入页面名称即可识别。这就是模板引擎的作用，只需要填充数据即可，做好模板后套入对应位置的数据，最后以html的形式显示出来。

表达式：

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

字面量

文本值：‘one text’ , ‘Another one!’ ,…

数字：0 , 34 , 3.0 , 12.3 ,…

布尔值：true , false

空值：null

变量：one，two，… 变量不能有空格

文本操作

字符串拼接：+

变量替换: |The name is ${name}|

数学运算

运算符: + , - , * , / , %

布尔运算

运算符：and , or

一元运算：! , not

比较运算

比较：> , < , >= , <= ( gt , lt , ge , le )

等式：== , != ( eq , ne )

条件运算

If-then：(if) ? (then)

If-then-else：(if) ? (then) : (else)

Default：(value) ? : (defaultvalue)

设置属性值

th:attr 取代jsp中的@{value}

Thymeleaf使用步骤

1.导入starter

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

2.自动配置好了thymeleaf

1.所有thymeleaf的配置值都在ThymeleafProperties
2.配置好了SpringTemplateEngline
3.配置了springboot的视图解析器
4.只需要直接开发页面

private String prefix = “classpath:/templates/”;
private String suffix = “.html”; //所有的Thymeleaf都会跳转到.html结尾的文件

示例

我们在controller层写如下请求，那么我们在启动服务器后，首页就会跳转到login.html页面中

@GetMapping(value = {"/","/login"})
public String loginPage() {
    return "login";
}

常用抽取公共页面标签

在设置页面使，常常有一些公共的部分我们是通用的，所以这时就可以在HTML中创建一个common.html页面抽取相同的部分在适当的地方调用，示例如下：

在common中包装时，有两种方式，通过标签包裹相同的部分并设置th: fragment=“name”，或者创建id=“id”，来标记标签

<head th:fragment="commonheader"> //id="commonheader"

    <link href="css/style.css" th:href="@{css/style.css}" rel="stylesheet">
    <link href="css/style-responsive.css" th:href="@{css/style-responsive.css}" rel="stylesheet">


    <script src="js/html5shiv.js" th:href="@{js/html5shiv.js}"></script>
    <script src="js/respond.min.js" th:href="@{js/respond.min.js}"></script>
  </head>

 <div th:fragment="commonscript">
  <script th:src="@{/js/jquery-1.10.2.min.js}"></script>
  <script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
  <script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
  <script th:src="@{/js/bootstrap.min.js}"></script>
  <script th:src="@{/js/modernizr.min.js}"></script>
  <script th:src="@{/js/jquery.nicescroll.js}"></script>
  </div>

我们在抽取了css样式时，需要使用Thymeleaf将地址重写一下，便于调用和更改

在页面中调用时有两种方式：

1.直接在调用中取值为：~{footer :: name} name为上述案例中命名的name值
2.取值为~{footer::#id} id在上文中已经命名

但是在抽取时有三种不同情况：

调用时是直接插入，保留插入所用的标签

其实际调入为：

    <script src="js/html5shiv.js" th:href="@{js/html5shiv.js}"></script>
    <script src="js/respond.min.js" th:href="@{js/respond.min.js}"></script>
</head>
</div>

调用时直接替换

    <script src="js/html5shiv.js" th:href="@{js/html5shiv.js}"></script>
    <script src="js/respond.min.js" th:href="@{js/respond.min.js}"></script>
</head>

调用包含内容

    <script src="js/html5shiv.js" th:href="@{js/html5shiv.js}"></script>
    <script src="js/respond.min.js" th:href="@{js/respond.min.js}"></script>
</head>
</div>

红莲灭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot之Thymeleaf的简单使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Thymeleaf表达式：字面量文本操作数学运算布尔运算比较运算条件运算设置属性值Thymeleaf使用步骤1.导入starter2.自动配置好了thymeleaf常用抽取公共页面标签在页面中调用时有两种方式：但是在抽取时有三种不同情况：# 视图解析和模板渲染Thymeleaf视图解析和模板渲染，一个简单的单体应用可以使用该工具。该工具在框架中，由于有视图解析所以，在进行页面跳转时，只需写入页面名称即可识别。这就是模板引擎的
复制链接

扫一扫