SpringBoot-5-页面展示Thymeleaf springboot html

myzbx 2024-12-19 15:01 34 浏览

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

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

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

XHTML 简介

上一篇：一篇文章让你弄清楚XML文件的规范与使用
下一篇：App自动化测试|原生app元素定位方法

SpringBoot-5-页面展示Thymeleaf springboot html

SpringBoot-5-页面展示Thymeleaf

1.SpringBoot模板引擎

2.Thymeleaf介绍

2.1 Thymeleaf

2.2 Thymeleaf实例

2.2.1 添加Thymeleaf依赖

2.2.2 创建Controller

2.2.3 编写test.html模板

2.2.4Thymeleaf参数配置

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿