Fork me on GitHub

JackLin的博客

当前位置:首页 > 分类

SpringBoot 10 JavaWeb 2 Android 0 源码分析 1 Thymeleaf 1 MyBatis 0 SSM 1 翻译 0 数据库设计 9 Gradle 1 Test 1 Tomcat 1 前端设计 2 ElasticSearch 2 阿里巴巴 9 Redis 3 Docker 1 实验报告 1 SpringCloud相关 1 生活 1

Thymeleaf的基本使用

  • 2020-04-14
  • 150
  • Thymeleaf
### Thymeleaf 的简单介绍 - **Thymeleaf** 简单的来说就是一个**模版引擎**,和 JSP 有很大的相似之处;JSP的绝大部分功能 Thymeleaf都有,同时Thymeleaf还进行了一定的扩展;可以说,Thymeleaf的功能更加强大。 - 模版引擎通俗的来讲就是用来渲染数据的,将后端传递过来的数据展示出来;也就是我们所说的“套模板”。 - 只不过JSP主要用于SSM框架当中,而Thymeleaf主要是结合SpringBoot一起使用。 ### Thymeleaf的基本使用 #### (1)导入对应的依赖 首先,和JSP有点不同,我们不需要编写 .jsp 文件,而是编写 .html 文件;只不过需要在 .html 文件的开头添加上 Thymeleaf 的依赖;同时在 pom.xml 文件中也用添加对应的依赖。 > pom.xml ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` > xxx.html 文件 ``` <!DOCTYPE html> <!-- 使用 Thymeleaf 模版引擎--> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head></head> <body></body ``` #### (2)thymeleaf 语法简单介绍 详细语法可以参考官方文档: 这里只给出经常需要使用的语法 ##### 1. th:text="${}" ##### 2. th:src="@{}" ##### 3. ### Thymeleaf实战技巧 #### 1. 日期的格式化 我们可以利用 Thymeleaf 里面的内置对象来实现 ``` <div> 发布日期:<span th:text="${#dates.format(blog.getCreatetime(), 'yyyy-MM-dd')}"></span> </div> ``` - 这里的 blog.getCreatetime() 获得的是一个 Date 对象,‘yyyy-MM-dd’是格式化字符串,和Java中的格式化字符串的语法类型 - ‘yyyy-MM-dd HH : mm : ss’ 就是精确到秒 #### 2.foreach 遍历 当后台管理需要展示表格时,foreach可以很方便的解决问题 ``` <!-- 特别注意,放在表格里面的标签可能有多个,所以不能使用 id 属性--> <tr class="table-color table-warning" th:each="blog,blogState:${blogs}"> <th scope="row" th:text="${blogState.index + 1}"></th> <td th:text="${blog.getBtitle()}"></td> <td th:text="${blog.getType().getTypename()}"></td> </tr> ``` - 其中 blogs 是存放在 Model 中的 List 集合,blog表示从List集合中遍历出来的元素。 - blogSatte表示遍历过程中的下标,从0开始。 #### 3. if 条件判断 例如前端需要显示一些错误信息是,可以通过 if 判断条件是否满足进而显示或隐藏标签 ``` <!-- 不为空才显示这个标签 --> <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p> ``` #### 4. 三目运算符 有时候使用if条件判断显得太过臃肿,而已有点场景并不适合使用,我们可以使用三目运算符来代替 ``` <input type="checkbox" class="my_checkbox" th:checked="${blog.getCommentabled()} == 1 ? false : true"> ``` - 如果 blog.getCommentabled() 等于1的话,checked就位false,否则就位true #### 5. a标签的地址使用 RestFul 风格 当a标签的链接地址使用RestFul风格时,thymeleaf也可以很方便的处理,只不过这时需要拼接。 ``` <!-- 利用 a 标签发送请求,结合 RestFul 风格--> <a th:href="@{/admin/deleteBlog/} + ${blog.getBidToString()}">删除</a> ``` - **注:这样使用,在IDEA中语法检查时虽然会报红,但是实际运行的时候并不会出错** #### 6. 页面国际化时的使用 废话不多说,直接上代码 ``` <a class="btn btn-sm" th:href="@{/index.html(language = 'zh_CN')}">中文</a> <a class="btn btn-sm" th:href="@{/index.html(language = 'en_US')}">English</a> ``` #### 7. 抽取页面的公共部分 使用 Thymeleaf 将一些页面的公共部分抽取出来,可以减少大量冗余代码。 ``` // 需要抽取的部分 <div class="title" th:fragment="article-topbar"> // 具体代码逻辑 </div> ``` ``` // 将抽取的部分插入到这里 <div th:replace="~{common/commonsfile::article-topbar}"></div> ``` - 注意:被抽取的部分的代码 commonsfile.html 位于 static/common 目录下面 #### 8.引入js,css文件的src属性的路径问题 引入js,css文件需要使用 th:src=“@{}” 来引入,需要注意路径问题。是从 static 目录下面开始的,**开头要写 /** ,不写 / 的话,由于路径的改变,可能会报错;然后接着写该目录下对应的文件夹 ``` <link rel="stylesheet" th:href="@{/css/article-title.css}"> <script th:src="@{/js/jquery-3.4.1.js}"></script> ``` 目录结构: - templates/static/css/ariticle-title.css - templates/static/js/jquery-3.4.1.js #### 9. 关于css文件中的 background-img 路径问题 路径值需要写相对路径就行了,能够自动寻找到对应的图片的 ``` #shape{ background: url("../image/rocket.png") no-repeat scroll 0 0 transparent; } ```