Thymeleaf

Thymeleaf简介

Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发,模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C#、PHP语言体系下也有模板引擎。除了thymeleaf之外还有Velocity、FreeMarker等模板引擎,功能类似。

Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。使用thymeleaf创建的html模板可以在浏览器里面直接打开(展示静态数据),这有利于前后端分离。需要注意的是thymeleaf不是spring旗下的。这里我们使用thymeleaf 3版本。

第一个thymeleaf程序

添加thymeleaf依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
修改spring boot配置文件

在开发阶段,建议关闭thymeleaf的缓存

spring.thymeleaf.cache=false

thymeleaf会对html中的标签进行严格校验,如果html标签缺少结束标签的话,thymeleaf会报错,我们可以通过下面方式去除thymeleaf的校验,添加依赖:

 <dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>

在spring boot配置文件中添加下面内容:

spring.thymeleaf.mode=LEGANCYHTML5
创建controller准备数据
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping; @Controller
public class ThymeleafController {
@RequestMapping("/hello")
public String helloThymeleaf(Model model) {
model.addAttribute("name", "jack");
return "index";
} }
创建html页面

在resources/templates里面创建一个index.html,填写下面内容,注意添加这个xmlns:th="http://www.thymeleaf.org":

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Spring boot集成 Thymeleaf</title>
</head>
<body>
<p th:text="${name}">Spring boot集成 Thymeleaf</p>
</body>
</html>

Springboot使用thymeleaf作为视图展示的时候,我们将模板文件放置在resource/templates目录下,静态资源放置在resource/static目录下。

表达式

标准变量表达式

创建用来准备数据的Controller

@RequestMapping(value="/userInfo")
public String userInfo (Model model) {
User user = new User();
user.setId(1001);
user.setName("jack");
user.setPhone("13711111111");
model.addAttribute("user", user);
model.addAttribute("hello", "helloworld");
return "user";
}

创建user.html,通过th:text表达式来获取controller中返回的数据。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Spring boot集成 Thymeleaf</title>
</head>
<body>
<table>
<tr>
<td th:text="${user.id}">1</td>
<td th:text="${user.name}">a</td>
<td th:text="${user.phone}">137</td>
</tr>
</table>
<div th:text="${hello}"></div>
</body>
</html>
选择变量表达式

这里相当于是先使用th:object将user对象取出,然后在里面的th:text中获取user对象中的属性值。

<table>
<tr th:object="${user}">
<td th:text="*{id}">1</td>
<td th:text="*{name}">a</td>
<td th:text="*{phone}">137</td>
</tr>
</table>
url表达式

将后台传入的数据拼接到url中

<a href="info.html" th:href="@{/user/info(id=${user.id})}">参数拼接</a>
<a href="info.html" th:href="@{/user/info(id=${user.id},phone=${user.phone})}">多参数拼接</a>
<a href="info.html" th:href="@{/user/info/{uid}(uid=${user.id})}">restful风格</a>
<a href="info.html" th:href="@{/user/info/{uid}/abc(uid=${user.id})}">restful风格</a>

Thymeleaf简介的更多相关文章

  1. (一)Thymeleaf用法——Thymeleaf简介

    1. thymeleaf认识 参考官方文档(Project version: 3.0.5.RELEASE)   1.1 介绍 Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能 ...

  2. Thymeleaf 3.0 专题

    http://www.thymeleaf.org/doc/articles/layouts.html thymeleaf的初次使用(带参请求以及调用带参js方法) 之前对于前端框架接触较少,第一次接触 ...

  3. Thymeleaf基本用法

    1.Thymeleaf简介 官方网站:https://www.thymeleaf.org/index.html Thymeleaf是用来开发Web和独立环境项目的现代服务器端Java模板引擎. 2.特 ...

  4. Spring Boot2 系列教程(九)Spring Boot 整合 Thymeleaf

    虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在做前后端不分的开发,而在前后端不分的开发中,我们就会需要后端页面模板(实际上,即使前后端分离,也会在一些场景下需要使用页面模板, ...

  5. SpringBoot系列之集成Thymeleaf用法手册

    目录 1.模板引擎 2.Thymeleaf简介 2.1).Thymeleaf定义 2.2).适用模板 3.重要知识点 3.1).th:text和th:utext 3.2).标准表达式 3.3).Thy ...

  6. 模板引擎Thymeleaf

    1.Thymeleaf简介 Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点 Thyme ...

  7. 极简 Spring Boot 整合 Thymeleaf 页面模板

    虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在做前后端不分的开发,而在前后端不分的开发中,我们就会需要后端页面模板(实际上,即使前后端分离,也会在一些场景下需要使用页面模板, ...

  8. Spring Boot2 系列教程 (十二) | 整合 thymeleaf

    前言 如题,今天介绍 Thymeleaf ,并整合 Thymeleaf 开发一个简陋版的学生信息管理系统. SpringBoot 提供了大量模板引擎,包含 Freemarker.Groovy.Thym ...

  9. Thymeleaf的基本用法

    俗话说,不会前端的后端工程师不是一个合格的程序员.因为在项目中经常要和前端工程师打交道,并且偶尔也会涉及前端的简单开发,因此在闲暇之余学习了一点前端的知识,今天首先总结归纳一下 Thymeleaf 模 ...

随机推荐

  1. 交互输入与for语句

    交互输入与for语句 1.   交互输入 read命令可以同时定义多个变量值:输入的内容默认以空格为分隔符,将值输入到对应的变量中:read尽量避免交互 如果默认值过多,最后所有的值会被赋予给最有一个 ...

  2. react native 实现TODO APP

    前端有一个todo app非常适合入门练手 react-native 实现todo app:https://github.com/nwgdegitHub/TODO_RN.git

  3. 12 Spring Boot密码加密算法

  4. BZOJ 3329: Xorequ(数位dp+递推)

    传送门 解题思路 可以把原式移项得\(x\)^\(2x\)=\(3x\),而\(x+2x=3x\),说明\(x\)二进制下不能有两个连续的\(1\).那么第一问就是一个简单的数位\(dp\),第二问考 ...

  5. 「LibreOJ β Round #2」计算几何瞎暴力

    https://loj.ac/problem/517 题解 首先我们如果没有排序这个骚操作的话,可以直接记一下各个数位的前缀和,然后异或标记给全局打,查询的时候先把区间信息提取出来然后整体异或就好了. ...

  6. [ethereum源码分析](2) ethereum基础知识

    前言 上一章我们介绍了如何搭建ethereum的debug环境.为了更深入的了解ethereum,我们需要了解一些ethereum的相关的知识,本章我们将介绍这些知识. ethereum相关知识 在学 ...

  7. FMDB源码解析(上)-FMDB基本使用

    目录 一: 初识FMDB 二: 基本使用 三: 基本操作 结束 最后更新:2017-02-22 2017, 说到做到 一: 初识FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的 ...

  8. 电脑配置Java环境变量之后,在cmd中仍然无法识别

    在电脑上配置了Java的环境变量,但是在cmd框中仍然无法识别: 解决方法:cmd.exe右键---以管理员身份运行,即可识别

  9. 微信小程序 button 组件

    button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮 button 的属性: size: 类型 字符串 按钮的大小 属性值:default 默 ...

  10. 多线程实现socket编程

    服务端: server.py import threading import socket server=socket.socket() ip_port=("127.0.0.1", ...