js文件中怎么使用thymeleaf标签_007、Spring Boot集成Thymeleaf模板引擎

v2-7a706a6347521b229bd807b225e24748_1440w.jpg?source=172ae18b

1. Thymeleaf 介绍

Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。
Thymeleaf 的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以在浏览器中正确显示的HTML,也可以用作静态原型,从而在开发团队中实现更强大的协作。

以上翻译自 Thymeleaf 官方网站。传统的 JSP+JSTL 组合是已经过去了,Thymeleaf 是现代服务端的模板引擎,与传统的 JSP 不同,Thymeleaf 可以使用浏览器直接打开,因为可以忽略掉拓展属性,相当于打开原生页面,给前端人员也带来一定的便利。

什么意思呢?就是说在本地环境或者有网络的环境下,Thymeleaf 均可运行。由于 thymeleaf 支持 html 原型,也支持在 html 标签里增加额外的属性来达到 “模板+数据” 的展示方式,所以美工可以直接在浏览器中查看页面效果,当服务启动后,也可以让后台开发人员查看带数据的动态页面效果。比如:

<div class="ui right aligned basic segment"><div class="ui orange basic label" th:text="${blog.flag}">静态原创信息</div>
</div>
<h2 class="ui center aligned header" th:text="${blog.title}">这是静态标题</h2>

类似与上面这样,在静态页面时,会展示静态信息,当服务启动后,动态获取数据库中的数据后,就可以展示动态数据,th:text 标签是用来动态替换文本的,这会在下文说明。该例子说明浏览器解释 html 时会忽略 html 中未定义的标签属性(比如 th:text),所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示数据。

2. 依赖导入

在 Spring Boot 中使用 thymeleaf 模板需要引入依赖,可以在创建项目工程时勾选 Thymeleaf,也可以创建之后再手动导入,如下:

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

另外,在 html 页面上如果要使用 thymeleaf 模板,需要在页面标签中引入:

<html xmlns:th="http://www.thymeleaf.org">

3. Thymeleaf相关配置

因为 Thymeleaf 中已经有默认的配置了,我们不需要再对其做过多的配置,有一个需要注意一下,Thymeleaf 默认是开启页面缓存的,所以在开发的时候,需要关闭这个页面缓存,配置如下。

spring:thymeleaf:cache: false #关闭缓存

否则会有缓存,导致页面没法及时看到更新后的效果。 比如你修改了一个文件,已经 update 到 tomcat 了,但刷新页面还是之前的页面,就是因为缓存引起的。

4. Thymeleaf 的使用

4.1 访问静态页面

这个和 Thymeleaf 没啥关系,应该说是通用的,我把它一并写到这里的原因是一般我们做网站的时候,都会做一个 404 页面和 500 页面,为了出错时给用户一个友好的展示,而不至于一堆异常信息抛出来。Spring Boot 中会自动识别模板目录(templates/)下的 404.html 和 500.html 文件。我们在 templates/ 目录下新建一个 error 文件夹,专门放置错误的 html 页面,然后分别打印些信息。以 404.html 为例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>这是404页面
</body>
</html>

我们再写一个 controller 来测试一下 404 和 500 页面:

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {@RequestMapping("/test404")public String test404() {return "index";}@RequestMapping("/test500")public String test500() {int i = 1 / 0;return "index";}
}
当我们在浏览器中输入 localhost:8080/thymeleaf/test400 时,故意输入错误,找不到对应的方法,就会跳转到 404.html 显示。
当我们在浏览器中输入 localhost:8088/thymeleaf/test505 时,会抛出异常,然后会自动跳转到 500.html 显示。

【注】这里有个问题需要注意一下,前面的课程中我们说了微服务中会走向前后端分离,我们在 Controller 层上都是使用的 @RestController 注解,自动会把返回的数据转成 json 格式。但是在使用模板引擎时,Controller 层就不能用 @RestController 注解了,因为在使用 thymeleaf 模板时,返回的是视图文件名,比如上面的 Controller 中是返回到 index.html 页面,如果使用 @RestController 的话,会把 index 当作 String 解析了,直接返回到页面了,而不是去找 index.html 页面,大家可以试一下。所以在使用模板时要用 @Controller 注解。

4.2 Thymeleaf 中处理对象

我们来看一下 thymeleaf 模板中如何处理对象信息,假如我们在做个人博客的时候,需要给前端传博主相关信息来展示,那么我们会封装成一个博主对象,比如:

public class Blogger {private Long id;private String name;private String pass;// 省去set和get
}

然后在controller层中初始化一下:

@GetMapping("/getBlogger")
public String getBlogger(Model model) {Blogger blogger = new Blogger(1L, "倪升武", "123456");model.addAttribute("blogger", blogger);return "blogger";
}

我们先初始化一个 Blogger 对象,然后将该对象放到 Model 中,然后返回到 blogger.html 页面去渲染。接下来我们再写一个 blogger.html 来渲染 blogger 信息:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head><meta charset="UTF-8"><title>博主信息</title>
</head>
<body>
<form action="" th:object="${blogger}" >用户编号:<input name="id" th:value="${blogger.id}"/><br>用户姓名:<input type="text" name="username" th:value="${blogger.getName()}" /><br>登陆密码:<input type="text" name="password" th:value="*{pass}" />
</form>
</body>
</html>

可以看出,在 thymeleaf 模板中,使用 th:object="${}" 来获取对象信息,然后在表单里面可以有三种方式来获取对象属性。如下:

使用 th:value="*{属性名}" 使用 th:value="${对象.属性名}",对象指的是上面使用 th:object 获取的对象 使用 th:value="${对象.get方法}",对象指的是上面使用 th:object 获取的对象

可以看出,在 Thymeleaf 中可以像写 java 一样写代码,很方便。我们在浏览器中输入 localhost:8080/thymeleaf/getBlogger 来测试一下数据:

v2-ba71426a7e2cda3da4ae74c1d4e895cf_b.jpg

4.3 Thymeleaf 中处理 List

处理 List 的话,和处理上面介绍的对象差不多,但是需要在 thymeleaf 中进行遍历。我们先在 Controller 中模拟一个 List。

@GetMapping("/getList")
public String getList(Model model) {Blogger blogger1 = new Blogger(1L, "倪升武", "123456");Blogger blogger2 = new Blogger(2L, "达人课", "123456");List<Blogger> list = new ArrayList<>();list.add(blogger1);list.add(blogger2);model.addAttribute("list", list);return "list";
}

接下来我们写一个 list.html 来获取该 list 信息,然后在 list.html 中遍历这个list。如下:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head><meta charset="UTF-8"><title>博主信息</title>
</head>
<body>
<form action="" th:each="blogger : ${list}" >用户编号:<input name="id" th:value="${blogger.id}"/><br>用户姓名:<input type="text" name="password" th:value="${blogger.name}"/><br>登录密码:<input type="text" name="username" th:value="${blogger.getPass()}"/>
</form>
</body>
</html>

可以看出,其实和处理单个对象信息差不多,Thymeleaf 使用 th:each 进行遍历,${} 取 model 中传过来的参数,然后自定义 list 中取出来的每个对象,这里定义为 blogger。表单里面可以直接使用 ${对象.属性名} 来获取 list 中对象的属性值,也可以使用 ${对象.get方法} 来获取,这点和上面处理对象信息是一样的,但是不能使用 *{属性名} 来获取对象中的属性,thymeleaf 模板获取不到。

4.4 其他常用 thymeleaf 操作

我们来总结一下 thymeleaf 中的一些常用的标签操作,如下:

| 标签 | 功能 | 例子 | | ------------ | --------------------- | ------------------------------------------------------------ | | th:value | 给属性赋值 | <input th:value="${blog.name}" /> | | th:style | 设置样式 | th:style="'display:'+@{(${sitrue}?'none':'inline-block')} + ''" | | th:onclick | 点击事件 | th:onclick="'getInfo()'" | | th:if | 条件判断 | <a th:if="${userId == collect.userId}" > | | th:href | 超链接 | <a th:href="@{/blogger/login}">Login</a> /> | | th:unless | 条件判断和th:if相反 | <a th:href="@{/blogger/login}" th:unless=${session.user != null}>Login</a> | | th:switch | 配合th:case | <div th:switch="${user.role}"> | | th:case | 配合th:switch | <p th:case="'admin'">administator</p> | | th:src | 地址引入 | <img alt="csdn logo" th:src="@{/img/logo.png}" /> | | th:action | 表单提交的地址 | <form th:action="@{/blogger/update}"> |

Thymeleaf 还有很多其他用法,这里就不总结了,具体的可以参考Thymeleaf的官方文档(v3.0)。主要要学会如何在 Spring Boot 中去使用 thymeleaf,遇到对应的标签或者方法,查阅官方文档即可。

5. 总结

Thymeleaf 在 Spring Boot 中使用非常广泛,本节课主要分析了 thymeleaf 的优点,以及如何在 Spring Boot 中集成并使用 thymeleaf 模板,包括依赖、配置,相关数据的获取、以及一些注意事项等等。最后列举了一些 thymeleaf 中常用的标签,在实际项目中多使用,多查阅就能熟练掌握,thymeleaf 中的一些标签或者方法不用死记硬背,用到什么去查阅什么,关键是要会在 Spring Boot 中集成,用的多了就熟能生巧。

课程源代码下载地址:戳我下载

今天就说这么多,如果本文对您有一点帮助,希望能得到您一个点赞支持我一下~谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/566995.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python删除txt指定内容_正则表达式使用python从文件中过滤和删除特定的多行文本...

我正在编写一个python工具来处理一组文件.该工具将由其他用户而非我使用. 文件类似于以下格式&#xff1a; #Text which I want to keep intact #Lots of text #Lots and lots of text #Lots and lots and lots of other text #Then in-between the file I have text in this f…

java英语词汇_java常用的英语单词

java常用的英语单词神秘的jave应该记住的英语单词有哪些呢?单词这么多&#xff0c;小编表示也很困扰。不过小编还是为大家整理出来了一些jave常用的英语单词&#xff0c;减轻大家负担。public[pʌblik] 公共的,公用的static[sttik] 静的;静态的;静止的void&#xff1a;[vɔid]…

python语言中包含的标准数据类型_python标准数据类型(笔记一)

关于python&#xff0c;它是一种解释型&#xff0c;面对对象&#xff0c;带有动态语义的高级程序设计语言。 之前学习python的时候&#xff0c;简单的将python的基础内容过了一遍&#xff0c;然后在工作中需要用到什么就相应的去加深某一模块的需求以及应用&#xff0c;总觉得基…

java app接口安全认证_关于接口安全认证方式

一.AccessKey&SecretKey (开放平台)1、请求身份为开发者分配AccessKey(开发者标识&#xff0c;确保唯一)和SecretKey(用于接口加密&#xff0c;确保不易被穷举&#xff0c;生成算法不易被猜测)。2、防止篡改参数签名&#xff1a;(1)按照请求参数名的字母升序排列非空请求参…

python怎么输入一个数字并调用_python如何直接输入上一句话,如何快速打出上一句话...

如何快速打出上一句话 用搜狗或者QQ拼音打字法&#xff0c;里面有设置快捷键输入语就行了。 Python&#xff0c;怎么在输入非数字时&#xff0c;输出一句话 Python提供2113了两个内置函数从标准输入5261读入一行文本&#xff0c;默4102认的标准输入是键盘。如下&#xff1a;165…

python 打卡程序_如何用python实现腾讯文档自动打卡并定时执行

最近学了些Web&#xff0c;了解了一些selenum包内函数使用&#xff0c;就写了下自动健康打卡&#xff0c;并用windows任务计划程序定时执行&#xff0c;健康打卡这个针对特定网站&#xff0c;所以对于通用化使用倒没有太大用处&#xff0c;但关于腾讯文档如何填写&#xff0c;因…

mysql查询今天_昨天_7天_近30天_本月_上一月 数据_(转载)mysql查询今天、昨天、7天、近30天、本月、上一月数据...

查询今天select * from 表名 where to_days(时间字段名) to_days(now());昨天SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ) - TO_DAYS( 时间字段名) < 17天SELECT * FROM 表名 where DATE_SUB(CURDATE(), INTERVAL 7 DAY) < date(时间字段名)近30天SELECT * FROM 表名 w…

python3实用编程技巧_6.python3实用编程技巧进阶(一)

1.1.如何在列表中根据条件筛选数据# 1.1.如何在列表中根据条件筛选数据 data [-1, 2, 3, -4, 5] #筛选出data列表中大于等于零的数据 #第一种方法&#xff0c;不推荐 res1 [] for x in data: if x > 0: res1.append(x) print(res1) #第二种用列表解析&#xff0c;推荐使用…

java中小数类型_java中小数属于什么类型的数据

展开全部小数属于浮点型(默认为double)。浮点型代表的是实数&#xff0c;其实就是包含小数的部分。也知道现实世界中是由32313133353236313431303231363533e59b9ee7ad9431333337396362很多复杂的数据的&#xff0c;所以需要这种表示实数的数据类型的支持。一、浮点型常量Java的…

springboot test_精益求精!Spring Boot 知识点全面回顾,带你重新细读源码!

作者&#xff1a;cyd_0619原文&#xff1a;https://blog.csdn.net/cyd_0619约定优于配置Build Anything with Spring Boot&#xff1a;Spring Boot is the starting point for building all Spring-based applications. Spring Boot is designed to get you up and running as …

事物日志恢复 mysql_浅谈SQL Server中的事务日志(五)----日志在高可用和灾难恢复中的作用...

本篇文章是系列文章中的第五篇&#xff0c;是对前一个日志系列的补充篇。如果您对日志的基本概念还没有一个比较系统的了解&#xff0c;可以参看本系列之前的文章&#xff1a; 浅谈SQL Server中的事务日志(一)----事务日志的物理和逻辑构架 浅谈SQL Server中的事务日志(二)----…

select count(*) from返回的类型_数据分析面试题类型汇总

1 简单查询- 基本的查询语句&#xff1a;select <列名> from 表名 where 条件- where 后的条件需要标量&#xff0c;不可以使用集合&#xff0c;若与关联子查询连用可用&#xff1b;可使用逻辑运算符连接多个条件&#xff1a;between、and、or、in&#xff08;&#xff0…

configurationproperties_【Springboot】注解@ConfigurationProperties让配置整齐而简单

1 简介前面我们用一篇文章《【Spring】只想用一篇文章记录Value的使用&#xff0c;不想再找其它了(附思维导图)》详细讲解了在Spring中如何使用Value来实现我们对配置的需求&#xff0c;它功能强大、使用方便。但它也是有它的局限性的&#xff0c;比如对于邮件服务&#xff0c;…

dmo Java_java DMO及增删改查代码的自动生成

在web开发过程中&#xff0c;尤其是后台管理系统的开发中&#xff0c;少不了增删改成的基础操作&#xff0c;原来我自己的做法是一份一份的拷贝粘贴&#xff0c;然后修改其中的不同&#xff0c;然而这样既枯燥无味又浪费了大量的时间&#xff0c;所以根据自己项目结构的特点写了…

if __name__ == __main___一文带你弄懂python中if __name__ == #39;__main__#39;

我们在python模块那章节的学习&#xff0c;有所接触到if __name__ __main__这个概念。当时我们只是大概描述了一番&#xff0c;不少伙伴还是有所困惑&#xff0c;今天就让我们通过实际例子去讲解这条语句到底有何含义。一个python文件有两种用途&#xff0c;一种被当主程序、脚…

java 生成apk包_Eclipse导出安卓apk文件的图文教程

安装到Android手机上的apk需要签名&#xff0c;本文描述了如何创建自己的签名及从Eclipse中导出apk。方法/步骤1、在Eclipse中选择一个Android工程&#xff0c;然后点击鼠标右键菜单中的“Export”&#xff1a;2、选择“Android”->;“Export Android Application”&#xf…

营业执照在线生成_平罗县实现个体户营业执照“秒批”

近日平罗县市场监管局注册登记窗口推出个体工商户“秒批”系统。今后&#xff0c;75%个体户常见经营项目可实现5分钟内乃至数秒无人工干预智能审批。01 一是实现智能化审批。平罗县市场监管局登记注册窗口依托自治区系统升级改造&#xff0c;推行企业设立登记标准化和智能化。…

java中测试计算能力_这 10 道 Java 测试题,据说阿里 P7 的正确率只有 50%

据说这是一套阿里Java工程师答题正确率只有50%的题目&#xff0c;由泰山版《Java开发手册》作者孤尽亲自出题&#xff0c;来测测凭借你的Java基础写下答案&#xff0c;看看你能对几题&#xff1f;题目一&#xff1a; float a 0.125f; double b 0.125d; System.out.println((a…

wireshark-win64-3.4.0安装_轴承安装规范

Sulli小苏&#xff1a;今天详细介绍下如何正确的安装轴承&#xff0c;正确的安装操作是轴承长寿命的关键&#xff0c;轮毂轴承的主要作用是承重和为轮毂的转动提供精确引导&#xff0c;它既承受轴向载荷又承受径向载荷&#xff0c;是一个非常重要的零部件。轴承的安装正确方式滚…

代码实现tan graph model for classification_几行代码搞定ML模型,低代码机器学习Python库正式开源...

PyCaret 库支持在「低代码」环境中训练和部署有监督以及无监督的机器学习模型&#xff0c;提升机器学习实验的效率。想提高机器学习实验的效率&#xff0c;把更多精力放在解决业务问题而不是写代码上&#xff1f;低代码平台或许是个不错的选择。最近&#xff0c;机器之心发现了…