Templates中的资源引入

最新推荐文章于 2023-12-25 08:15:00 发布

熊猫不想

最新推荐文章于 2023-12-25 08:15:00 发布

阅读量777

点赞数 1

文章标签：经验分享

本文链接：https://blog.csdn.net/qq_51501328/article/details/121017786

版权

小东西专栏收录该内容

1 篇文章 0 订阅

订阅专栏

博客介绍了在Thymeleaf中如何优化静态资源的引入，通过th:block和th:include标签实现代码复用，提高开发效率。通过将公共资源封装到独立模版，利用th:fragment声明资源片段，再在需要的页面中引入，以此减少代码冗余，达到类似Java中类与方法的效果。

摘要由CSDN通过智能技术生成

Templates中的资源引入代码

问题介绍

在开发中实验Templates时引入资源，一般我们会将页面中的静态资源的引入代码声明在页面中的head标签中，但是如果不同的页面中使用了相同的资源，造成不同的页面中引入资源的代码声明是重复的，造成后期维护麻烦。

解决

将静态资源引入的代码进行封装，然后在页面中引入该代码即可，这和Java中的创建类有异曲同工之妙

Templates标签体现
标签一th:block标签

th:block作用
Thymeleaf的块标签，主要是用来结合Thymeleaf的功能属性
使用，因为有些时候，Thymeleaf的属性不需要结合Html标
签中，想单独声明使用，我们可以使用th:block来实现。

代码体现

<div th:if=""></div>
<div th:if=""></div>

<th:block if="">
    <div></div>
    <div></div>
</th:block>

解析
对于相同的条件我们这样可以减少代码的冗余。
标签二 th:include标签

作用
引入外部公共页面(模版)中声明的资源。
注意
这个标签要结合 th:fragment使用，th:fragment在公共页面中的资源上声明，表明该资源为被其他页面引入的资源。声明该资源的选择器。
代码体现

使用解释

语法: th:include=”模版相对路径 : : 资源选择器(‘实参’)”
语法解释：要是这两个参数都存在的话，讲templates目
录下的指定的相对路径的html中的header()部分的资源引入
当前页面中。
从Java类比来理解
1、声明了公告资源的文件名(也就是那个模板相对路径)==>Java的类名
2、th:fragement ==> java中声明方法及其形参 ===>Java类的成员方法
3、th:include ==>调用某个类（对象）中方法名为"资源选择器"的方法

引入模块

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增部门')" />
</head>
<body>

<div th:if=""></div>
<div th:if=""></div>

<th:block if="">
    <div></div>
    ![请添加图片描述](https://img-blog.csdnimg.cn/992e6c58580b4e8d821503775e51400f.png)



</body>
</html>

模块创建

<!-- 通用CSS -->
<head th:fragment=header(title) xmlns:th="http://www.w3.org/1999/xhtml">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title th:text="${title}"></title>
	<link rel="shortcut icon" href="favicon.ico">
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<!-- bootstrap-table 表格插件样式 -->
	<link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
	<link th:href="@{/css/animate.css}" rel="stylesheet"/>
	<link th:href="@{/css/style.css}" rel="stylesheet"/>
	<link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
</head>

项目结构
请添加图片描述
结语
其实对于jsp其实底层都是Java代码，首先对jsp的前身就是Java的servlet代码之后为了让前后端分离来了jsp；jsp每次都要解析Java代码之后才能响应给用户，为了提升效率就使用了Templates不用解析。但是我认为其实不管jsp还是php还是Templates都有后端的体现，就像上面两个，还有像th：with等等都也别相似。我感觉带着这样的思想理解像jsp Templates等等有很大帮助。