SpringBoot-5-页面展示Thymeleaf

已于 2022-02-20 17:05:12 修改
阅读量623 收藏
点赞数 1
分类专栏： SpringBoot 文章标签： spring boot java spring
于 2022-02-19 20:54:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhoubangbang1/article/details/123023777
版权

SpringBoot-5-页面展示Thymeleaf

对于Web项目来说，现在主流是前后端分离，这是因为现在的前端框架和后端技术逐渐成熟，可以使得web开发团队更好的拆解任务进行分发，以及让开发人员对某一端的技术更加成熟。但是现在现在好多公司还存在的以前老的传统的web项目需要管理，所以使用springboot开发web应用我们也需要学习。

接下来我们就会介绍SpringBoot2，如何使用Thymeleaf模板引擎进行web页面开发。

**静态资源访问**我们已经在前一章节进行介绍，这里我们就不过多的进行介绍了。

1.SpringBoot模板引擎

SpringBoot提供了多种模板引擎的默认配置，因此只要是SpringBoot推荐的模板引擎，我们 都可以很快的进行上手和开发web。

springboot提供自动化配置的模板引擎有以下几个：

  • Thymeleaf

  • FreeMarker

  • Groovy

这些模板引擎默路径是src/main/resources/templates，属于静态资源，具体可查看我之前对静态资源的介绍。

注：虽然JSP是java最最基本的页面模板，Springboot也支持，但是用起来比较麻烦，并且随着Springboot版本的迭代，一些模板引擎逐步淘汰，因此建议在开始使用Springboot进行web开发的时候使用模板引擎进行开发。

2.Thymeleaf介绍

2.1 Thymeleaf

Thymeleaf是一个XML/XHTML/HTML5模板引擎，主要用于动态页面的编写。

2.2 Thymeleaf实例

主要步骤：

  • 创建SpringBoot项目

  • 编写一个TestController

  • 编写test.html页面

  • 测试页面

2.2.1 添加Thymeleaf依赖

想要在SpringBoot中使用Thymeleaf，就需要在pom.xml中，添加相对应的依赖

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

2.2.2 创建Controller

创建一个传统的Controller，用来处理路径请求代码如下

@Controllerpublic class TestController {    @GetMapping("/test")    public String test(Model model) {        model.addAttribute("msg", "welcome my test page");        return "test";    }}

补充：

  • 在对test页面渲染通过ModeMap，向页面添加了一个msg，参数，它的值为welcome my test page。

  • return值test表示的是模板页面对应的名称。

2.2.3 编写test.html模板

在·sc/main/resources/templates下新建模板文件test.html

内容如下

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org/"><head>    <meta charset="UTF-8">    <title>Test</title></head><body><!-- 使用th:text属性输出 --><div th:text="${msg}" ></div></body></html>

运行http://localhost:8080/test查看结果。

图片

2.2.4Thymeleaf参数配置

如果我们要修i给Thymeleaf的默认设置的时候，只需要修改application.yml的属性就可以了

spring:  thymeleaf:    cache: true #模板使用启用缓存默认true，调试的时候设置false比较好    encoding: UTF-8 #模板编码    mode: HTML5    prefix: classpath:/templates/ #指定模板存放路径    suffix: .html #指定模板后缀    check-template-location: true #检查模板位置是否存在

举几个我们常用的配置内容：

Q：调试页面不想每次修改页面就重新启动

A：将spring.thymeleaf.cache，设置为false

Q：想修改template目录存放模板文件

A：将spring.thymeleaf.prefix参数，设置为你想放置模板文件的目录例如:  classpath:/resources/

Q：不想使用index作为模板文件的扩展名

A：修改spring.thymeleaf.suffix参数，设置为你想用的扩展名

Q：如果感觉HTML5的严格校验很烦人

A：修改spring.thymeleaf.mode参数，设置为LEGACYHTML5

如果您觉得本文不错，欢迎支持，您的关注是我坚持的动力！

图片

原创不易，转载请注明出处，感谢支持！如果本文对您有用，欢迎转发分享！

springboot葵花宝典
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
spring boot + 漂亮的登陆界面
08-21
idea spring boot + 漂亮的登陆界面 spring boot ，thymeleaf
SpringBoot视图技术4：使用Thymeleaf完成数据的页面展示
qq_48457459的博客
05-10 6484
本文主要介绍：如何使用Thymeleaf在html页面上显示动态数据，也介绍了如何使用BootStrap文档中现成的HTML、CSS、JS进行前端开发
SpringBoot之Thymeleaf页面展示
熊凯瑞的博客
04-03 1083
使用Thymeleaf完成数据的页面展示 1、创建SpringBoot项目，引入Thymeleaf依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf<artifactId> </dependency> 2、编写配置文件，对thymeleaf模板的页面数据缓存进行设置 #
SpringBoot项目登录与主页面（从建项目开始详细教程）
每日一记，每周一结。
06-20 3113
1.配置有mp代码生成器的依赖。2.配置有swagger文件。前端需要的静态配置文件。controller层。
SpingBoot跳转页面详解
小强签名设计 的博客
01-15 1万+
SpringBoot里面没有我们之前常规web开发的WebContent（WebApp），它只有src目录，在src/main/resources下面有两个文件夹，static和templates，springboot默认static中放静态页面（public文件夹中也可以），而templates中放动态页面： &amp;nbsp; 静态页面： 静态页面可以直接访问。这里我们直接在static放一个hel...
springboot-thymeleaf素材.rar
07-16
使用soringboot 以及thymeleaf实现用户登录以及权限校验的Web素材，包含首页，登录页，以及样式信息。
SpringBoot页面展示Thymeleaf
01-27
其中Thymeleaf是SpringBoot官方所推荐使用的，下面来谈谈Thymeleaf一些常用的语法规则。SpringBoot默认存放模板页面的路径在src/main/resources/templates或者src/main/view/templates，这个无论是使用什么模板语言...
SpringBoot整合websocket实现群聊；thymeleaf->template->html 页面展示
08-27
SpringBoot整合websocket实现群聊
springboot如何使用thymeleaf模板访问html页面
08-27
springboot中推荐使用thymeleaf模板，使用html作为页面展示。那么如何通过Controller来访问来访问html页面呢？下面通过本文给大家详细介绍，感兴趣的朋友跟随脚本之家小编一起看看吧
akane-blog:个人博客系统，分为博客前台与管理后台，基于SpringBoot+Jpa+Thymeleaf，前端主要使用BootStrap，结合Markdown编辑器 Editor.md，使用Redis作为缓存并与SpringBoot-Cache配合，Swagger2生成接口文档，Druid作为数据库连接池
05-13
界面展示前台博客后台管理展示网址前台博客首页后台管理页面3. 构建及运行以maven形式导入本项目新建数据库，导入sqldoc/akane_blog.sql修改/src/main/resources/application.yml文件修改数据库连接url、username及...
【编程不良人】快速入门SpringBoot学习笔记05---Thymeleaf使用及测试案例
Mr.Cui的Java学习之路
06-27 1036
Thymeleaf使用及测试案例
【Spring Boot学习】Spring Boot的创建,第一个Spring Boot页面.
m0_58097299的博客
06-05 772
【Spring Boot学习】Spring Boot的创建,第一个Spring Boot页面.
SpringBoot常用配置
chishaodou1255的博客
05-11 343
前言：springboot集成了主流的第三方框架，但是需要使用springboot那一套配置方式。但是我这里只列举了非常非常常用的，可以看已发的几篇博客，慢慢会补充。当然官方文档里也有相应的配置，可惜没有注释。 mvc spring.mvc.async.request-timeout 设定as...
【翠花学SpringBoot】使用Springboot进行页面操作（thymeleaf）
m0_57082679的博客
05-23 1376
Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面 。 演练： 通过使用thymeleaf模板进行增删改查。 创建项目。 注意勾选thymeleaf依赖，其余的和之前相同。 在pom文件中导入mybatis-plus
SpringBoot项目之前后端界面搭建
m0_68211831的博客
11-08 3878
-spring-session将session借助于第三方存储（redis/mongodb等等），默认redis--># 此属性控制池中连接的最长生命周期，值0表示无限生命周期，默认1800000即30分钟。--commons-pool2 对象池依赖 2.0版本的lettuce需要-->-- mybatis-plus-generator依赖 -->#最大连接阻塞等待时间，默认-1。-- mybatis plus依赖 -->#最大空闲连接，默认8。-- valid验证依赖 -->-- MD5依赖 -->
SpringBoot--页面显示列表功能
记录和分享属于我的“IT”时光
09-08 2028
SpringBoot--页面显示列表功能
4-Spring Boot 的视图（Thymeleaf）
daqi1983的博客
03-22 2259
视图技术
springboot基础--实现默认登录页面
最新发布
weixin_39213232的博客
09-18 1881
1、搭建项目 依赖中 多加入thymeleaf依赖 <dependencies> <!--thymeleaf的依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId>
使用Spring Boot开发WEB页面
热门推荐
wyb880501的博客
04-26 2万+
目前Spring官方已经不推荐使用JSP来开发WEB了，而是推荐使用如下几种模板引擎来开发：Thymeleaf(Spring官方推荐)FreeMarkerVelocityGroovyMustache目前业界使用最广泛的还是FreeMaker和Velocity，我现在就以FreeMaker为例，介绍如何和Spring Boot集成。添加FreeMaker依赖首先在pom.xml中添加FreeMake...
springboot thymeleaf实现个人信息展示代码
04-21
很高兴回答您的问题！以下是Spring Boot与Thymeleaf实现个人信息展示的代码： 1. 添加Thymeleaf依赖 首先，我们需要通过Maven或Gradle将Thymeleaf依赖添加到我们的Spring Boot项目中。 Maven依赖： ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` Gradle依赖： ``` implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' ``` 2. 编写Controller类 接下来，我们需要编写一个Controller类来处理HTTP请求并返回视图。 ``` import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class PersonalInfoController { @GetMapping("/personal-info") public String showPersonalInfo(Model model) { // 构造用户信息 User user = new User("John Doe", "[email protected]", 25); // 将用户信息添加到Model中 model.addAttribute("user", user); // 返回视图 return "personal-info"; } } ``` 在上面的代码中，我们使用了`@Controller`注解来标记这个类为一个Controller，使用`@GetMapping`注解来处理`/personal-info`路径的HTTP GET请求。 在`showPersonalInfo`方法中，我们构造了一个用户信息对象`user`，并将其添加到了`Model`对象中。`Model`对象是一个简单的容器，可以用来传递数据到视图中。 最后，我们返回一个名为`personal-info`的视图。这个视图文件将在下一步中进行创建。 3. 创建Thymeleaf视图 创建一个名为`personal-info.html`的Thymeleaf视图文件，并将其放置在`src/main/resources/templates`目录下。 在视图文件中，我们可以使用Thymeleaf标签和表达式来访问从Controller中传递过来的数据。 ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Personal Information</title> </head> <body> <h1>Personal Information</h1> <p>Name: <span th:text="${user.name}"></span></p> <p>Email: <span th:text="${user.email}"></span></p> <p>Age: <span th:text="${user.age}"></span></p> </body> </html> ``` 在上面的代码中，我们使用`<!DOCTYPE html>`声明了文档类型，并引入了Thymeleaf的命名空间。这样做可以让我们在视图中使用Thymeleaf标签和表达式。 在视图的`<body>`标签中，我们使用了`<h1>`标签来显示标题，使用了`<p>`标签来显示用户信息，使用了Thymeleaf的表达式`${user.name}`、`${user.email}`和`${user.age}`来访问Controller中传递过来的用户信息。 4. 启动应用程序，并访问链接 现在，我们可以启动Spring Boot应用程序，并在浏览器中访问`http://localhost:8080/personal-info`链接。如果一切正常，您应该会看到一个名为“Personal Information”的页面，其中包含用户信息的详细信息。 希望这能够解答您的问题！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值