SpringBoot-5-页面展示Thymeleaf

简介: SpringBoot-5-页面展示Thymeleaf

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查看结果。



b3c2c30c58dd58ed0a04ddca6bf5cac4.png

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


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

目录
相关文章
|
6月前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
|
6月前
|
Java 数据库连接 mybatis
springboot访问jsp页面变成直接下载?
springboot访问jsp页面变成直接下载?
|
6月前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
|
2月前
|
Java Spring
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
本文介绍了Spring Boot中静态资源的访问位置、如何进行静态资源访问测试、自定义静态资源路径和静态资源请求映射,以及如何处理自定义静态资源映射对index页面访问的影响。提供了两种解决方案:取消自定义静态资源映射或编写Controller来截获index.html的请求并重定向。
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
36 6
|
2月前
|
Java 网络架构
springboot配合thymeleaf,调用接口不跳转页面只显示文本
springboot配合thymeleaf,调用接口不跳转页面只显示文本
100 0
|
3月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
3月前
|
前端开发 Java Spring
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
这篇文章展示了一个使用Spring Boot、Thymeleaf和Bootstrap框架开发的简洁、响应式的商城管理页面,包括美食介绍、产品详情、购物车等功能,适合初学者学习和使用。
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
|
3月前
|
Java 数据库 Spring
springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符
这篇文章介绍了如何在Spring Boot和Thymeleaf框架中使用条件运算符来根据数字字段的值动态替换显示不同的字符串,例如将订单状态的数字0和1替换为"未付款"和"已付款"等。
springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符
|
5月前
|
前端开发 Java Spring
Spring Boot中使用Thymeleaf进行页面渲染
Spring Boot中使用Thymeleaf进行页面渲染