SpringBoot页面展示Thymeleaf

来自:    更新日期:早些时候
~

开发传统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=百度" 传过来。




SpringBoot页面展示Thymeleaf视频

相关评论:
  • 19470848632SpringBoot页面展示Thymeleaf
    申帘是Spring Boot默认存放模板页面的路径在 src\/main\/resources\/templates 或者 src\/main\/view\/templates ,这个无论是使用什么模板语言都一样,当然默认路径是可以自定义的,不过一般不推荐这样做。另外Thymeleaf默认的页面文件后缀是 .html 。在MVC的开发过程中,我们经常需要通过 Controller 将数据传递到页面中...

  • 19470848632SpringBoot项目启动后网页显示【Please sign in】的解决办法
    申帘是启动SpringBoot项目后,访问127.0.0.1:8080\/t02\/index时,意外进入了一个"Please sign in"页面。仔细检查IDEA控制台信息,发现是安全拦截界面提示,需输入密码进入。控制台打印的密码是security password,username是user。通过输入这些信息,顺利访问了项目。深入分析发现,问题源于pom.xml配置文件中依赖导入...

  • 19470848632Spring Boot 提升你的项目形象:定制启动 Banner 教程
    申帘是方法一: 在resource目录下创建名为"banner.txt"的文件,输入自定义的文本内容,重启应用程序会展示新设计的Banner。 方法二: 如果你希望更高级的定制,可以创建SpringApplication的自定义Banner接口类。 配置选项: 使用SpringApplication的setBannerMode方法控制Banner的显示开关和位置,或者通过配置文件进行...

  • 19470848632自定义的拖拽式智能大屏(springboot+VUE)
    申帘是一个开源的可以自定义的拖拽式智能报表系统。项目主要技术是springboot和vue.三步就可以配置一个报表展示大屏。数据流程图 第一步:配置我们需要的数据源,也就是连接一个数据库, mysql , oracle , SqlServer 等等;第二步:选择数据源,选择编码方式,数据集名称,数据集,然后写一下 sql 语句,就...

  • 19470848632SpringBoot入门建站全系列(八)集成模板引擎(thymeleaf)渲染页面
    申帘是"data", retOk);将数据传递给viewName指定的模板文件,解析后返回一个html文件给浏览器。页面如下:五、过程中使用到的实体 详细完整的实体,请访问品茗IT-博客《SpringBoot入门建站全系列(八)集成模板引擎(thymeleaf)渲染页面》快速构建项目 喜欢这篇文章吗?喜欢就加入我们一起讨论SpringBoot技术吧!

  • 19470848632爆破专栏丨SpringBoot2.x系列教程之花样配置--自定义Banner
    申帘是首先,我们来关注Spring Boot的常用配置,比如自定义启动Banner、日志设置和关闭特定自动配置。这些配置操作简单易行,适合初学者入门。接着,进入主题——自定义Banner。要实现自定义Banner,首先,你需要创建一个SpringBoot项目,并参考前面章节。默认情况下,启动时会显示Spring的Logo。但作为追求个性化开发者...

  • 19470848632springboot怎么用(springboot怎么用在web上又用在微信小程序上)_百 ...
    申帘是Springboot中控制器的使用 步骤: (1)在model层,创建一个Result类,封装code(状态识别码)、msg(提示信息)、data(核心数据)。 (2)在model层,创建一个User实体类。 (3)创建控制器UserController(相当于入口main)。 (1)在resources\/static路径下创建一个静态页面view1.html。 (2)在application.properties中添加静态...

  • 19470848632Springboot项目使用的是html页面,那为什么能实现动态显示页面
    申帘是Javascript动态更改,例如addEventListener这类的函数,在接到指定的点击等操作可以用函数回复事件,,o(^▽^)o

  • 19470848632springbootadmin菜单不显示
    申帘是它不显示的原因和解决方法如下:1、清除浏览器缓存:有时候浏览器缓存会导致菜单不显示,解决方法可以尝试清除浏览器缓存后重新加载页面。2、更新浏览器:如果使用的浏览器版本过低,可能会导致菜单不显示,解决方法可以尝试更新浏览器或更换其他浏览器尝试。

  • 19470848632springboot封装好的分页,怎么调用
    申帘是1 如果我们要使用PageHelper,我们需要进行导报,我使用的是Maven项目,所以我只需要将坐标添加到pom.xml中即可。请点击输入图片描述 首先,我们需要去找到PageHelper的坐标。百度输入Maven 请点击输入图片描述 找到下图所示的链接,然后点击进去。请点击输入图片描述 进入到下图所示的界面,然后搜索框中输入...

  • 相关主题精彩

    版权声明:本网站为非赢利性站点,内容来自于网络投稿和网络,若有相关事宜,请联系管理员

    Copyright © 喜物网