SpringBoot-5-页面展示Thymeleaf
zhezhongyun 2024-12-11 18:19 49 浏览
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，用来处理路径请求代码如下
@Controller
public 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
如果您觉得本文不错，欢迎支持，您的关注是我坚持的动力！
原创不易，转载请注明出处，感谢支持！如果本文对您有用，欢迎转发分享！
- 上一篇：一篇文章让你弄清楚XML文件的规范与使用
- 下一篇：html和CSS面试题目归总
相关推荐
- DevExpress使用教程:GridView经验小结
-
下面是笔者自己总结的使用DevExpressGridview的一些经验小结，分享给大家：1、去除GridView头上的"Dragacolumnheaderheretogroup...
- ComponentOne 新版本发布，新增 .NET 6 和 Blazor 平台控件支持
-
ComponentOneEnterprise是葡萄城推出的一款内置300多种开发控件的.NET控件集，可满足WinForm、WPF、Blazor、ASP.NETMVC等平台下的系统开发...
- Wijmo5 Flexgrid基础教程:数据绑定
-
WijmoEnterprise下载>FlexGrid在JavaScript程序中启动添加Wijmo引用；添加wijmo控件的扩展；在JavaScript中初始化wijmo控件；（可选）添加cs...
- Wijmo5 Flexgrid基础教程:InlineEdit
-
WijmoEnterprise下载>对于flexgrid，可以直接在单元格内进行编辑。但另外还有一种编辑方式，即在一行添加按钮，统一的编辑和提交数据。本文主要介绍给flexgrid添加编辑按钮...
- WinForms Data Grid控件升级（winform devexpress控件）
-
告诉大家一个好消息：慧都将于近期隆重推出“DevExpress14.2新版发布会”。心动不如行动，赶快报名吧！我们期待与您相约DevExpress14.2新版发布会。>>新增Wind...
- XAML控件宽度为另一控件的一半、静态属性绑定
-
控件上当某些数据需要根据其他数据的变化而变化很多时候，想让某个控件的宽度或者高度是另一个已有控件的一半，一开始打算使用ObjectDataProvider来实现，因为在控件上当某些数据需要根据其他数据...
- 用 CSS Grid 布局制作一个响应式柱状图
-
最新一段时间比较喜欢玩弄图表，出于好奇，我想找出比较好的用CSS制作图表的方案。开始学习网上开源图表库，它对我学习新的和不熟悉的前端技术很有帮助，比如这个：CSSGrid。今天和大家分享我学到的...
- Grid 移动端双列瀑布流（移动端瀑布流布局）
-
预览图：原理合理使用Grid的属性：display:设置为grid指明当前容器为Grid布局grid-template-columns:定义每一列的列宽（百分比或绝对单位）grid-templa...
- DevExpress导出GridControl控件数据
-
前言：使用C#做桌面应用时，我们会常常使用Winform作为我们的开发界面，但是windows自带的控件由于长时间不更新，已经不能够满足当前开发需要所以使用DevExpress控件作为Winform...
- css grid 布局的那些事儿（css grid布局和flex布局）
-
CSSGrid是一种为Web开发创建网站布局的方式。它已经存在了很多年，随着更多浏览器的支持，它终于变得越来越流行。接下来我们将了解下CSSGrid及其工作原理。了解下它如何使用。CSS...
- Grid.js - 跨框架的前端表格插件（前端table框架）
-
只想简简单单画个表格，但React，Vue，Angular，…，这么多前端框架，各自都有不同的表格渲染库。就没有表格库能“一次画表，到处运行”吗？来看看Grid.js这个跨框架的前端表格插件吧！...
- WPF开发教程01-布局控件（wpf tablecontrol控件）
-
布局控件是用于进行控件布局的容器类控件，其内部控件按照一定规律自动排列，且在父控件改变大小时，会自动适应。常用布局控件如下：1.一维布局控件（StackPanel）其内部控件按照某个维度自动排列，排...
- wxPython - 高级控件之表格Grid（wxpython grid刷新数据）
-
实战wxPython系列-043wx.grid.Grid及其相关类用于显示和编辑表格数据。它们提供了一组丰富的功能，用于显示、编辑和与各种数据源交互。wx.grid.Grid是一个功能强大的但是又稍微...
- 前端 BFC、IFC、GFC 和 FFC，这些你都知道吗?
-
如果觉得我的文章不错，可以关注我，想要看其他的进阶知识可以查看我发布过的文章！编辑搜图请点击输入图片描述BFC（Blockformattingcontexts）：块级格式上下文页面上的一个隔离的...
- 20多个好用的 Vue 组件库，请查收
-
在本文中，我们将探讨一些最常见的vuejs组件。你可以收藏一波。VueTables-2地址：https://github.com/matfish2/vue-tables-2VueTables2...
- 一周热门
- 最近发表
-
- DevExpress使用教程:GridView经验小结
- ComponentOne 新版本发布，新增 .NET 6 和 Blazor 平台控件支持
- Wijmo5 Flexgrid基础教程:数据绑定
- Wijmo5 Flexgrid基础教程:InlineEdit
- WinForms Data Grid控件升级（winform devexpress控件）
- XAML控件宽度为另一控件的一半、静态属性绑定
- 用 CSS Grid 布局制作一个响应式柱状图
- Grid 移动端双列瀑布流（移动端瀑布流布局）
- DevExpress导出GridControl控件数据
- css grid 布局的那些事儿（css grid布局和flex布局）
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)