开发传统Java WEB工程时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言
上面并没有列举所有SpringBoot支持的页面模板技术。其中Thymeleaf是SpringBoot官方所推荐使用的,下面来谈谈Thymeleaf一些常用的语法规则。
要想使用Thhymeleaf,首先要在pom.xml文件中单独添加Thymeleaf依赖。
Spring Boot默认存放模板页面的路径在 src/main/resources/templates 或者 src/main/view/templates ,这个无论是使用什么模板语言都一样,当然默认路径是可以自定义的,不过一般不推荐这样做。另外Thymeleaf默认的页面文件后缀是 .html 。
在MVC的开发过程中,我们经常需要通过 Controller 将数据传递到页面中,让页面进行动态展示。
创建一个Controller对象,在其中进行参数的传递
在SpringBoot默认的页面路径下创建show.html文件,内容如下
可以看到在 p 标签中有 th:text 属性,这个就是thymeleaf的语法,它表示显示一个普通的文本信息。
如果我们要显示的信息是存在资源文件中的,同样可以在页面中显示,例如资源文件中定义了内容 welcome.msg=欢迎{0}光临! 。可以在页面中将其显示
另外,在 th:utext 中还能做一些基础的数学运算
如果我们想要传递到的页面的信息,它本身是带有CSS样式的,这个时候如何在页面中将携带的样式信息也显示出来?此时我们的控制器方法这样写。
此时页面中需要借助 th:utext 属性进行显示
通过浏览器查看页面源码可以看出 th:utext 和 th:text 的区别是: th:text 会对 <和 >进行转义,而 th:utext 不会转义。
我们常常需要将一个bean信息展示在前端页面当中。
上面给出了两种展现方式,一种是通过${属性},另外一种是通过 {属性}。
关于“${属性}”和“ {属性}”的区别?
$访问完整信息,而访问指定对象中的属性内容, 如果访问的只是普通的内容两者没有区别;
在 thymeleaf 之中提供有相应的集合的处理方法,例如:在使用 List 集合的时候可以考虑采用 get()方法获取指定索引的数据,那么在使用 Set 集合的时候会考虑使用 contains()来判断某个数据是否存在,使用 Map 集合的时候也希望可以使用 containsKey()判断某个 key 是否存在,以及使用get()根据 key 获取对应的 value,而这些功能在之前并不具备,下面来观察如何在页面中使用此类 *** 作
在传统WEB工程开发时,路径的处理 *** 作是有点麻烦的。SpringBoot中为我们简化了路径的处理。
页面之间的跳转也能通过@{}来实现
虽然在这种模版开发框架里面是不提倡使用内置对象的,但是很多情况下依然需要使用内置对象进行处理,所以下面来看下如何在页面中使用JSP内置对象。
thymeleaf 考虑到了实际的开发情况,因为 request 传递属性是最为常用的,但是 session 也有可能使用,例如:用户登录之后需要显示用户 id,那么就一定要使用到 session,所以现在必须增加属性范围的形式后才能够正常使用。在 thymeleaf 里面也支持有 JSP 内置对象的获取 *** 作,不过一般很少这样使用。
所有的页面模版都存在各种基础逻辑处理,例如:判断、循环处理 *** 作。在 Thymeleaf 之中对于逻辑可以使用如下的一些运算符来完成,例如:and、or、关系比较(>、<、>=、<=、==、!=、lt、gt、le、ge、eq、ne)。
通过控制器传递一些属性内容到页面之中:
不满足条件的判断
通过swith进行分支判断
在实际开发过程中常常需要对数据进行遍历展示,一般会将数据封装成list或map传递到页面进行遍历 *** 作。
我们常常需要在一个页面当中引入另一个页面,例如,公用的导航栏以及页脚页面。thymeleaf中提供了两种方式进行页面引入。
可以看到页面当中还存在一个变量projectName,这个变量的值可以在引入页面中通过 th:with="projectName=百度" 传过来。
浏览器忽略一切不能够识别的属性
例如 th:text="xxxx" ,这样的属性浏览器会忽略,对于html5的标准属性写法 也是支持的
属性只需要 data-开头 例如 :data-th-text(html5标准写法)=>th:text写法
加入这个原因官方解释为了 不让我们的IDE在校验html文件时 出现烦人的警告。
常用属性
th:text--计算表达式的值,把结果 填充到 当前的标签内 即tags 的 body替换,类似于 jquery 的 text() 方法。
th:utext--与 th:text类似 但是其不转码表达式的计算结果 比如 这种标签类的文本计算出来后 会被 th:text转码
表达式语法
变量访问表达式 ${....},例如 ${user.name}
消息访问表达式 #{...},主要是访问 配置文件中的值 支持国际化的显示
url表达式 @{....} 处理url使用
片段表达式 ~{...} 引入其他片段使用
表达式中 可用的字面量
字符串:用单引号包裹 ‘this is demo’ 例如
111
param.true22
也可以省略 单引号
数字 : 123.1 0.1 9
-1.5
布尔:true false
null 字面量: null
字面量标记: one param1 等
字符串连接 用加号 ‘this is’+'demo'
文字替换 |this is demo ${test}| 其中 test为 某个变量或者 变量的字面量标记
二元运算符 + - * / % 加 减 乘 除 取余
一元运算符 - 取负
二元逻辑运算 or and
一元逻辑运算 ! not 都是取反的意思
比较运算符 >, <, >= , <= ( gt , lt , ge , le )
等值比较 == , != ( eq , ne )
条件判断 (if)? (then)
(if) ? (then) : (else)
(value) ?: (defaultvalue)
多语言的支持
Welcome to our grocery store!
thymeleaf
th:text="#{}"---获取 properties文件中的 数据
html5的格式可以写成 data-th-text=""
${x} will return a variable x stored into the Thymeleaf context or as a request attribute.
${param.x} will return a request parameter called x (which might be multivalued).
${session.x} will return a session attribute called x .
${application.x} will return a servlet context attribute called x .
想要 th:text展示标签 即富文本展示的时候 采用 等 使用 th:utext代替
like ${user.name} for “get the variable called user, and call its getName() method”).
Variable Expressions: ${...}
Selection Variable Expressions: *{...}
Message Expressions: #{...}
Link URL Expressions: @{...}
Fragment Expressions: ~{...}
一个综合的表达式
'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))
消息中嵌入参数
Welcome to our grocery store, Sebastian Pepper!
多个参数用逗号分开
key值也可以用参数
Welcome to our grocery store, Sebastian Pepper!
#ctx : the context object.
#vars: the context variables.
#locale : the context locale.
#request : (only in Web Contexts) the HttpServletRequest object.
#response : (only in Web Contexts) the HttpServletResponse object.
#session : (only in Web Contexts) the HttpSession object.
#servletContext : (only in Web Contexts) the ServletContext object.
Established locale country: US.
使用星号表达式
Name: Sebastian.
Surname: Pepper.
Nationality: Saturn.
而且 $和 *的取值方式还能通用
在一个Web应用中,通常会采用MVC设计模式实现对应的模型、视图和控制器,其中,视图是用户看到并与之交互的界面。对最初的Web应用来说,视图是由HTML元素组成的静态界面;而后期的Web应用更倾向于使用动态模板技术,从而实现前后端分离和页面的动态数据展示。Spring Boot框架为简化项目的整体开发,提供了一些视图技术支持,并主要推荐整合模板引擎技术实现前端页面的动态化内容。本文对SpringBoot常用的Thymeleaf进行整合。
Thymeleaf是一种现代的基于服务器端的Java模板引擎技术,也是一个优秀的面向Java的XML、XHTML、HTML5页面模板,它具有丰富的标签语言、函数和表达式,在使用Spring Boot框架进行页面设计时,一般会选择 Thymeleaf模板。我们在这里学习Thymeleaf 常用的标签、表达式。
Thymeleaf标签
使用标签只需要加上一个命名空间就可以了。 即修改原html的第二行就可以了。
变量表达式${..}主要用于获取上下文中的变量值,示例代码如下。
这是标题
- 使用了Thymeleaf模板的变量表达式${..}用来动态获取p标签中的内容 - 如果当前程序没有启动或者当前上下文中不存在title变量,该片段会显示标签默认值“这是标题”; - 如果当前上下文中存在title 变量并且程序已经启动,当前p标签中的默认文本内容将会被tite变量的值所替换,从而达到模板引擎页面数据动态替换的效果。
Thymeleaf为变量所在域提供了一些内置对象
结合上述内置对象的说明,假设要在Thymeleaf模板擎页面中动态获取当前国家信息,可以使用#locale内置对象
选择交量表达式和变量表达式用法类似,一般用于从被选定对象而不是上下文中获取属性值,如果没有选定对象,则和变量表达式一样,示例代码如下。
消息表达式#{..}主要用于Thymeleaf模板页面国际化内容的动态替换和展示。使用消息表这式#{..}进行国际化设置时,还需要提供一些国际化配置文件。关于消息表达式的使用,下文写国际化时会详细说明。
链接表达式@{..}一般用于页面跳转或者资源的引入,在Web开发中占据着非常重要的地位,并且使用也非常频繁。
片段表达式~{..}是一种用来将标记片段移动到模板中的方法。其中,最常见的用法是使用th:insert或th:replace 属性插入片段
Spring Boot默认设置了静态资源的访问路径,默认将/**所有访问映射到以下目录。
我们创建一个springboot项目用于本次实验。项目名为springboot_01_thyme。java8,springboot2.6.6
创建一个LoginController类用于数据替换效果测试。
我们写一个login.html进行测试。我们导入一个bootstrap的样式到static/login里面,并且自己定义一些css。
最后我们通过访问http://localhost:8080/toLoginPage 可以查看效果
在resources目录下创建名为i18n的文件夹,数一数这个单词多少个字母internationalization,就知道为什么叫i18n了。
然后我们在i18n文件夹下面创建login.properties、 login_zh_CN.properties、 login_en_US.properties文件。
目录结构:这个Resource Bundle 'login'时idea自动创建的,我们不需要管,只需要完成我们的就行。
login.properties
login_zh_CN.properties
login_en_US.properties
然后我们在配置文件application.properties里面添加代码
我们在config包下面创建一个MyLocalResovel类,自定义国际化功能区域信息解析器。
这里我们基本就完成了,但是在访问中文的时候会出现乱码现象。
我们打开idea的file->settings->file Encodings.
将Default encoding for properties的编码改为utf-8,同时勾选Transparentnative-to-ascii conversion
然后我们重新编写login.properties和其他相关的
但是这种方法1只对当前项目有效。下次创建还是使用GBK编码
本文我们主要了解了Thymeleaf的基本语法、标签、表达式、基本使用、同时还实现了页面登录页得国际化。
本文作者:hjk-airl
本文链接:https://www.cnblogs.com/hjk-airl/p/16181598.html
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)