Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)

在Spring Boot的Web应用中 建议开发者使用HTML完成动态页面 Spring Boot提供了许多模板引擎,因为Thymeleaf提供了完美的Spring MVC支持 所以在Spring Boot的Web应用中推荐使用Thymeledf作为模板引擎


Thymeleaf是一个Java类库 是一个XML/XHTML/HTML5的模板引擎,能够处理HTML XML JavaScript以及CSS可以作为MVC Web应用的view层显示数据


Spring Boot的的Thymeleaf支持


1:创建Spring Strater Project


选择菜单 File-New-Spring Strater Project 打开后 输入信息后单击Next


2:选择依赖

1666444611880.jpg

3:创建控制器类


创建一个名为com.ch.ch5_1的包 然后创建控制类 代码如下

package com.ch.ch5_1.controller;
import org.springframework.stereotype.Controller;
@Controller
public class TestThymeleafController {
@RequestMapping("/")
  public String test() {
  return "index";
  }
}


4:新建index.html页面 代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
测试Spring Boot的Thymeleaf支持
</body>
</html>


然后运行主类即可


Thymeleaf基础语法


1:引入Thymeleaf


首先将View层页面文件的html标签修改如下


<html xmlns:th="http://www.thymeleaf.org">


然后 在View层页面文件的其他标签里 使用th:*动态处理页面


<img th:src="'image/'+${aBook.picture}"/>


2:输出内容


<p th:text="#{test.myText}:></p>  不对HTML标签解析


<p th:utext="#{test,ntText}"></p> 对HTML标签解析


3:基本表达式


变量表达式:¥{...}


变量表达式用于访问容器上下文环境中的变量

<span th:text="${information}">


选择变量表达式:*{...}


选择变量表达式计算的是选定的对象

name<span th:text="*{firstName}"></span><br>


信息表达式:#{...}


信息表达式一般用于显示页面静态文本 将可能需要根据需求而整体变动的静态文本放在一起以便维护

<p th:text="${test.myText}"></p>


4:引入URL


Thymeleaf通过模块@{...}表达式引入URL

<a th:href="@{http://www.tup..tsinghua.edu.cn/index.html{param1='传参')}">去清华大学出版社</a>


5:访问WebContext对象中的属性


Thymeleaf模板通过一些专门的表达式从模板的WebContext获取请求参数 部分如下

${xxx}将返回存储在的变量或者属性
${param.xxx}返回一个名为xxx的请求参数
${session.xxx}返回一个名为xxx的HttpSession作用域中的属性


6:运算符


同Java


7:条件判断


if 只有在条件成立时才显示标签内容

unless 只有在条件不成立时才显示标签内容

switch 支持多路选择 defalut用*表示


8:循环


Thymeleaf模板使用th:each="obj,iterStat:${objList}"标签进行迭代循环


9:内置对象


内置对象一般都以s结尾 可以通过#直接访问 如下图

1666444762367.jpg

Thymeleaf的常用属性


Thymeleaf语法的使用都是通过在html页面的标签中添加th:xxx关键字来实现模板套用 并且其属性与html页面标签基本类似 常用属性有以下几种


1:th:action

th:action定义后台控制器路径 类似于action属性
<form th:action="@{/login}...</form>


2:th:each

用于集合对象遍历 功能类似于JSTL标签的foreach
th:each="gtype:${gtypes}">


3:th:field

用于表单参数绑定 通常于th:object一起使用
<input type="text"value="" th:field="*{username}"></input>


4:th:href

用于定义超链接
<a th:href="@{/gogo}"></a>


5:th:id

用于id的声明
<div th:id="stu+(${rowStat.index}+1)"></div>


6:th:if

用于条件判断
<div th:if="${rowStat.index}==0"> dosomething</div>


7:th:fragment


声明定义该属性的div为模板片段 常用于头文件


8:th:object


用于表单数据对象绑定 将表单绑定到后台controller的一个JavaBean参数 经常与th:field一起使用 进行表单数据绑定


9:th:onclick

用于修改单击事件 代码如下
<button th:onclick="'getCollect()':></button>



相关文章
|
1月前
|
并行计算 Java 数据处理
SpringBoot高级并发实践:自定义线程池与@Async异步调用深度解析
SpringBoot高级并发实践:自定义线程池与@Async异步调用深度解析
141 0
|
28天前
|
开发框架 供应链 监控
并行开发模型详解:类型、步骤及其应用解析
在现代研发环境中,企业需要在有限时间内推出高质量的产品,以满足客户不断变化的需求。传统的线性开发模式往往拖慢进度,导致资源浪费和延迟交付。并行开发模型通过允许多个开发阶段同时进行,极大提高了产品开发的效率和响应能力。本文将深入解析并行开发模型,涵盖其类型、步骤及如何通过辅助工具优化团队协作和管理工作流。
56 3
|
29天前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
39 4
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
95 3
|
1月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
161 2
|
13天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
96 44
|
9天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
21 1
|
11天前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
14天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
28 2
|
17天前
|
监控 安全 Serverless
"揭秘D2终端大会热点技术:Serverless架构最佳实践全解析,让你的开发效率翻倍,迈向技术新高峰!"
【10月更文挑战第23天】D2终端大会汇聚了众多前沿技术,其中Serverless架构备受瞩目。它让开发者无需关注服务器管理,专注于业务逻辑,提高开发效率。本文介绍了选择合适平台、设计合理函数架构、优化性能及安全监控的最佳实践,助力开发者充分挖掘Serverless潜力,推动技术发展。
39 1

热门文章

最新文章

推荐镜像

更多