spring-boot整合thymeleaf开发简明教程

最新推荐文章于 2021-11-15 19:14:39 发布
最新推荐文章于 2021-11-15 19:14:39 发布
阅读量125 收藏
点赞数
文章标签： 开发工具 java 前端 ViewUI
原文链接：https://juejin.im/post/5bb7066ae51d450e7b174ea5
版权

thymeleaf简明教程

前言

thymeleaf是spring-boot推荐使用的模板引擎，之前因为时间关系，一直没有机会去一探究竟，国庆期间，正好有了那么一点时间，赶紧拿来研究一下。

本教程不做深入的探讨，目标是能让一个没有接触过thymeleaf的开发者，能在很短的时间内快速上手拿来做开发。

当然，本教程并不完整，之后再补充。

什么是thymeleaf

thymeleaf是一款用于在java中生成动态页面的程序：用于将静态模板页面组合绑定一定的数据，生成一个新页面。这样的程序，通常也叫做模板引擎。

一般来说，一个模板页面是一个类似纯html页面的文件，其中的与传递进来的数据进行交互的关键位置，会有本模板引擎可以解析的占位符。占位符的作用有：

  • 将传递进来的数据直接替换展示
  • 将传递进来的数据集合进行循环展示
  • 将传递进来的数据进行判断之后展示
  • 模板引擎支持的表达式 等等。

thymeleaf与freemarker等模板引擎相比，区别在于，他的占位符是直接是html标签，或者是标签的一个或多个属性。 即使没有数据传进来，也能当成一般的网页被浏览器解析，所以能完全做到前端后一起开发。

依赖

按照官方的推荐，用在spring-boot的项目中，版本号由spring-boot-start-parent管理

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.0.BUILD-SNAPSHOT</version>
</parent>
复制代码
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
复制代码

第一个页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>First page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="${welcome}">Welcome to thymeleaf world!</p>F
</body>
</html>
复制代码

注意这里的xmlns:th

<html xmlns:th="http://www.thymeleaf.org">
复制代码

一般来说，都需要加上这么一行，表示thymeleaf的命名空间。这里的xmlns:th指的是将thymeleaf的命名空间的名字命名为th，这个符号和之后所用的th一致。

th:text：在th后面加上一个冒号，并附加特定的字符组合，这个thymeleaf定义的占位符是构建thymeleaf页面的基础。之后我们可以看到许多这样的占位符。

${welcome}：${}这个占位符是thymeleaf非常关键的符号之一，用于变量的解析。

使用idea构建项目

为了看到程序的运行效果，这里使用官方的starter来配置一个项目

打开网址:start.spring.io/

选择对应的版本，并选择对应的依赖，导入到idea中。

pom如下：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.github.jzoom.springboot</groupId>
	<artifactId>thymeleafdemo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>thymeleafdemo</name>
	<url>http://maven.apache.org</url>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.0.BUILD-SNAPSHOT</version>
	</parent>
	<!-- Additional lines to be added here... -->
	<!-- (you don't need this if you are using a .RELEASE version) -->
	<repositories>
		<repository>
			<id>spring-snapshots</id>
			<url>https://repo.spring.io/snapshot</url>
			<snapshots>
				<enabled>true</enabled>
			</snapshots>
		</repository>
		<repository>
			<id>spring-milestones</id>
			<url>https://repo.spring.io/milestone</url>
		</repository>
	</repositories>
	<pluginRepositories>
		<pluginRepository>
			<id>spring-snapshots</id>
			<url>https://repo.spring.io/snapshot</url>
		</pluginRepository>
		<pluginRepository>
			<id>spring-milestones</id>
			<url>https://repo.spring.io/milestone</url>
		</pluginRepository>
	</pluginRepositories>


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


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


	</dependencies>
</project>

复制代码

编辑模板页面

在resources中新建templates文件夹，并新建index.html，并编辑，将上面的代码拷贝到这个文件并保存。

编写Controller

package com.example.thymeleafdemo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.HashMap;
import java.util.Map;


@Controller
@SpringBootApplication
public class ThymeleafdemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(ThymeleafdemoApplication.class, args);
	}


	@RequestMapping
	public String index(Model model){
		model.addAttribute("welcome","Hello world!");
		return "index";
	}

}

复制代码

打开浏览器查看:http://localhost:8080

设置自动编译

到这里，已经可以正常运行，但是每次修改后都要重启服务，这个是无法容忍的，所以这里进行几项设置：

  • 将idea设置为自动编译 参考这里

  • 修改pom，新增devtool

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.github.jzoom.springboot</groupId>
	<artifactId>thymeleafdemo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>thymeleafdemo</name>
	<url>http://maven.apache.org</url>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.0.BUILD-SNAPSHOT</version>
	</parent>
	<!-- Additional lines to be added here... -->
	<!-- (you don't need this if you are using a .RELEASE version) -->
	<repositories>
		<repository>
			<id>spring-snapshots</id>
			<url>https://repo.spring.io/snapshot</url>
			<snapshots>
				<enabled>true</enabled>
			</snapshots>
		</repository>
		<repository>
			<id>spring-milestones</id>
			<url>https://repo.spring.io/milestone</url>
		</repository>
	</repositories>
	<pluginRepositories>
		<pluginRepository>
			<id>spring-snapshots</id>
			<url>https://repo.spring.io/snapshot</url>
		</pluginRepository>
		<pluginRepository>
			<id>spring-milestones</id>
			<url>https://repo.spring.io/milestone</url>
		</pluginRepository>
	</pluginRepositories>


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


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


		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<optional>true</optional>
		</dependency>


	</dependencies>



	<build>
		<pluginManagement>
			<plugins>
				<!--自动编译-->
				<plugin>
					<groupId>org.springframework.boot</groupId>
					<artifactId>spring-boot-maven-plugin</artifactId>
					<configuration>
						<fork>true</fork>
					</configuration>
				</plugin>
			</plugins>
		</pluginManagement>
	</build>

</project>

复制代码
  • 设置关闭缓存

修改配置，增加一行

spring.thymeleaf.cache=false
复制代码

这样就可以在修改了任何一个文件之后，只要刷新一下页面就可以看到效果了。

循环

上面的例子比较详细，下面只是列出相对简单的代码。

新增实体类:

public class Product {

    // 编号
    private Long id;

    // 标题
    private String title;

    //价格（分,需要展示为元）
    private int price;

    // 折扣率(百分比,0.xx)
    private float discountPercent;
    
     // 这个方法用于格式化价格
    public String formatedPrice(){
        return String.format("%.02f",(float)price/100);
    }


    //...略
}

复制代码

编辑ProductService

@Component
public class ProductService {


    public List<Product> findAll(){

        return Arrays.asList(new Product(1L,"商品1",8500,0.9f),
                new Product(2L,"商品2",10050,1.0f),
                new Product(3L,"商品3",3080,0.85f));
    }

}
复制代码

编辑Controller

@RequestMapping
	public String index(Model model){
		model.addAttribute("welcome","Hello world!");
		model.addAttribute("products",productService.findAll());
		return "index";
	}
复制代码

编辑index.html

<ul>
    <li th:each="product:${products}">
        <span th:text="${product.id}">编号</span>
        <span th:text="${product.title}">标题</span>
        <span th:text="${product.formatedPrice()}">价格</span>
        <span th:text="${product.discountPercent*100+'%'}">折扣</span>
    </li>
</ul>
复制代码

分支

<span th:if="${product.discountPercent<=0.9}">热销</span>
复制代码

Talk is cheap,show me the code!

github.com/jzoom/sprin…

参考

www.cnblogs.com/tuanz/p/870… www.cnblogs.com/nuoyiamy/p/…

weixin_33921089
关注
springboot+Thymeleaf结合使用简单操作
weixin_40776360的博客
06-23 456
springboot+Thymeleaf结合使用简单操作创建springboot项目导入maven包关闭缓存讲解Thymeleaf模板引擎用法th:fragment（片段）： 提取公共部分th:insert ：插入侧边栏当鼠标点击时高亮表格遍历 th:each{aa:${bb}}th:href 请求路径带参数 创建springboot项目 导入maven包 <dependency> <groupId>org.springframework.boot<
SpringBoot 整合Thymeleaf步骤
aojinkun2397的博客
09-18 201
引入依赖 主要增加 spring-boot-starter-thymeleaf 和 nekohtml 这两个依赖 spring-boot-starter-thymeleaf：Thymeleaf 自动配置 nekohtml：允许使用非严格的 HTML 语法 完整的 pom.xml 如下： <?xml version="1.0" encoding="UTF-8"?> <...
Thymeleaf简单入门
m0_46388866的博客
02-05 110
Thymeleaf简单入门 Thymeleaf是使用springboot比较常用的模板。其实它就像是以前的jsp展示视图的。也是能够接收后端的数据，然后通过渲染展示到页面。它的特点就是可以通过自带的解析器，来帮助springboot项目定位这个资源的位置，通常我们会放在templates下面，而解析器也是把它定位到这里通过加上前后缀。类似于以前mvc里面的视图解析器。 它的使用格式通常是th：xxx="${??}" 使用步骤： 1.去官方文档找到启动器，然后放到pom里面 2.导入thymeleaf的依赖
Spring Boot集成Thymeleaf模板引擎的完整步骤
08-26
主要给大家介绍了关于Spring Boot集成Thymeleaf模板引擎的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
thymeleaf使用教程
11-02
基于java的支持xml/xhtml/html5的模板引擎技术
spring-boot-starter-thymeleaf-2.1.0.RELEASE.jar
02-27
java运行依赖jar包
spring-boot html thymeleaf
03-07
在实际开发中，你可以创建一个简单的 Spring Boot 项目，引入 Thymeleaf 依赖，然后在控制器中编写逻辑，返回视图名，Thymeleaf 将自动处理模板和模型数据，生成动态 HTML 页面。这极大地提高了开发效率和代码的...
spring-boot-Thymeleaf 模板
最新发布
03-08
<artifactId>spring-boot-starter-thymeleaf ``` ##### 文件结构设置 接下来，在项目的 `resources` 目录下创建一个名为 `templates` 的文件夹，用于存放所有的 HTML 模板文件。 ##### 示例代码 以下是一个...
spring-boot-starter-thymeleaf-2.0.3.RELEASE.jar
02-27
java运行依赖jar包
spring-boot-starter-thymeleaf
11-27
spring-boot-starter-thymeleaf 1.5.8 需要其他jar可以留言 jar包齐全
spring boot 实现用户登录认证
11-07
1.架构： spring boot + jpa + thyemleaf, mysql数据库 2.功能实现： 1）使用Logback进行日志记录； 2）使用HandlerInterceptor接口实现登陆认证 3）登陆验证码的生成
Spring Boot__整合 Thymeleaf 页面模板
qq_37432174的博客
09-07 283
Thymeleaf 简介 类似于 Velocity、FreeMarker 等传统 Java 模板引擎， Thymeleaf 支持 HTML 原型。它既可以在浏览器中直接打开查看样式, 也可以结合真实数据查看显示效果，同时，SpringBoot 提供了 Thymeleaf 自动化配置解决方案，因此在 SpringBoot 中使用 Thymeleaf 非常方便。Thymeleaf 模板后缀为 .htm...
spring boot 整合thyemleaf基本使用 域对象操作（六）
qq_40979622的博客
10-17 516
html文件： &lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;
spring boot 整合thyemleaf基本使用 日期的操作（三）
qq_40979622的博客
10-17 324
&lt;!--格式化日期，默认的以浏览器默认语言为格式化标准--&gt; &lt;span th:text="${#dates.format(key)}"&gt;&lt;/span&gt; &lt;hr/&gt; &lt;!--自定义格式--&gt; &lt;span th:text="${#dates.format(key,'yy/mm/dd')}"&gt;&lt
SpringBoot系列之集成Thymeleaf用法手册
Nicky's blog
12-01 4937
SpringBoot系列之Thymeleaf用法简介
SpringBoot+Thyemleaf
denghe4720的博客
06-29 164
Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。 特点： 1. 创建独立的Spring...
SpringBoot实战教程（3）| 整合Thymeleaf
猿小白的博客
11-15 924
Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全代替传统JSP 。 官方文档：Documentation - Thymeleaf 目录 一、初始化SpringBoot项目 二、引入依赖pom 三、application.properties配置文件 四、编写Controller类 五、编写html模板 六、运行结果展示 一、初始化SpringBoot项目 二、引入依赖pom <dependency&gt...
SpringBoot(四)——————SpringBoot整合thymeleaf
不积跬步无以至千里
01-02 309
参考文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax SpringBoot对静态资源的映射规则 Springboot对静态资源的映射 WebMvcAutoConfiguration： @Override public void addReso...
spring boot 整合shiro和thymeleaf模板，SSM架构，整体业务框架搭建
qq_39606632的博客
12-05 998
一：项目Demo生成及全家桶（系列jar包）选择 一：demo生成： 1.在https://start.spring.io/官网进行项目生成（推荐） 2.在编译器中创建相关类型工程，在pom.xml中添加如下依赖，版本建议选择稳定版，最好不要选择最新版. &lt;parent&gt;         &lt;groupId&gt;org.springframework.boot&lt...
spring-boot mybatis thymeleaf
04-02
Together, Spring Boot, MyBatis, and Thymeleaf form a powerful stack for building modern web applications in Java. With Spring Boot's powerful features and MyBatis's easy-to-use ORM layer, developers ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值