SpringBoot-集成-Thymeleaf (9)

最新推荐文章于 2023-08-02 09:07:14 发布

阅读量777

点赞数 38

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/weixin_44520739/article/details/88672640

版权

SpringBoot 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

简介：Thymeleaf

官网https://www.thymeleaf.org
1)在整合Freemaker我在介绍中说到SpringBoot主推的模板引擎该模板引擎是采用 Java语言开发的
所谓的模板引擎是一个技术名词，是跨平台跨领域的概念，在Java语言体系下有模板引擎，在c。PHP语言体系下也有模板引擎，甚至在JavaScript中也会用到模板引擎技术

2)Java生态下的模板引擎有 Thymeleaf， Freemaker ，Velocity , Beetl(国产)等

3)Thymeleaf模板既能用于在web环境下，也能在非web环境下使用，在非web环境下，他能直接显示模板上的静态数据，在web环境下，它能像jsp一样从后台接收数据并替换掉模板上静态的数据

4)Thymeleaf它是基于HTML的，以HTML标签为载体，Thymeleaf要寄托在HTML的标签下对数据的展示

5）SpringBoot 集成Thymeleaf模板技术，并且SpringBoot官方主推Thymeleaf来替代jsp技术，Thymeleaf本身不属于Springboot只是很好的集成了这种模板技术作为前端页面的数据展示。

开发工具（idea，spring boot版本2.1.3.RELEASE）

依赖：pom.xml

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

这springboot jar中最高有2.1.3版本
在这里插入图片描述
官方已经发出3.0.11版本

搭建项目

第一步创建项目
1）
在这里插入图片描述

2:pom.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<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>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.3.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.xxx</groupId>
	<artifactId>springboot-thymeleaf</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>springboot-thymeleaf</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>2.0.0</version>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<!--alibaba的druid数据库连接池 （德鲁伊）-->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid-spring-boot-starter</artifactId>
			<version>1.1.10</version>
		</dependency>
		
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

3:application.properties 配置



spring.datasource.druid.username=root
spring.datasource.druid.password=root
spring.datasource.druid.url=jdbc:mysql:///数据库名?serverTimezone=GMT%2B8
spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.druid.initial-size=5




# 关闭Thymeleaf缓存
spring.thymeleaf.cache=false
# 使用遗留的HTML5 去掉 对html标签的验证
spring.thymeleaf.mode=LEGACYHTML5

简单搭个测试类测试
controller层：

package com.xxx.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Created by MK on 2019/3/19.
 */


@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model){
       model.addAttribute("amg","测试集成Thymeleaf");

       return "list";
   }

}

前台 HTML页面

注意要在HTML标签里写上`xmlns:th="http://www.thymeleaf.org"`命名空间

在这里插入图片描述

前台代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--p-->
 <p th:text="${amg}">

 </p>
 <!--div-->
 <div th:text="${amg}">

 </div>
 <!--span-->
 <span th:text="${amg}">


 </span>

 <!--h1-->
 <h1 th:text="${amg}">


 </h1>
 ${amg}

</body>
</html>

上面在代码，在页面展示可以看出，它的数据展示的寄托在HTML标签里的，而${}在这里是不行的。看下图
在这里插入图片描述

一些常用标签的使用说明：

th:text 替换原来text中的东西
th:value 替换原来value的值
th:object 替换标签的对象，th:object=“对象”
th:field 填充，如图上面又对象，可以直接用*{属性}取值
th:checked 当check的值为true时候为选中，false时为未选中
th:remove 删除
th:href 用@{}替换连接地址
th:if 如果值为true的时候才显示标签，否则不显示
th:unless 不成立的时候才显示
th:each 用户循环遍历结果集
th:style 替换样式
th:action 替换action地址，用@{}取地址
th:alt 用@{}取地址
th:class 替换class的样式
th:fragment 定义一个framemet模板，在后面引用他

表达式：
1）标准变量表达式
语法：${…}
变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和和jsTL 中的 ${}相同，Thymeleaf中的变量表达式使用 ${变量名}的方式获取其中的数据

字段跟实体类对应

@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model){
        User user=new User();
        user.setId(1);
        user.setName("张三");
        user.setAge(18);
        model.addAttribute("user",user);

       return "list";
   }

}

前台

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div>
 <span th:text="${user.id}"></span>
 <span th:text="${user.name}"></span>
 <span th:text="${user.age}"></span>

</div>
</body>
</html>

结果：
在这里插入图片描述
获得更多的教程去官网（详情见 SpringBoot-集成-Thymeleaf-常用表达式）

关注

38
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
35
评论
SpringBoot-集成-Thymeleaf (9)

简介：Thymeleaf官网https://www.thymeleaf.org1)在整合Freemaker我在介绍中说到SpringBoot主推的模板引擎该模板引擎是采用 Java语言开发的所谓的模板引擎是一个技术名词，是跨平台跨领域的概念，在Java语言体系下有模板引擎，在c。PHP语言体系下也有模板引擎，甚至在JavaScript中也会用到模板引擎技术2)Java生态下的模板引擎...
复制链接

扫一扫