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. CSS3画五角星和六角星

    最终想要实现的效果 一.五角星 在画五角星之前首先分析这个五角星是如何实现,由哪几个部分构成的,示意图如下: 三个顶角向上的三角形,通过设置旋转和定位相互重叠和拼接实现最终的五角星效果. 为了语义化和 ...

  2. 进阶：python3实现 插入排序

    一图胜千言,插入排序的核心逻辑如下: 将数据分成两半,前一半是已排好序的,后一半是待排序的 每次取后一半中的第一个数,在已排序的一半中,逆序依次比较,找到要插入的位置 记录插入的位置,在最后判断是否需 ...

  3. CentOS7下修改默认网卡名为eth0的两种方法

    前言 大家都知道CentOS7默认的网卡名称是和设备名称是随机的,如果要修改网卡名称以 eth 开头,有两种方式,如下: 第一种方式 这种方式适合在安装操作系统的时候进行设置, 点击 Tab,打开ke ...

  4. PHP 大文件上传进度条实现

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  5. 【bzoj3295】[Cqoi2011]动态逆序对

    题目描述: 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆 ...

  6. input el-input 只能输入正整数验证

    字母e在js中属于数字,所以一般的正则匹配 \d 是拦不住字母e 的 正确写法为: onKeypress="return (/[\d]/.test(String.fromCharCode(e ...

  7. APIO2019解题报告

    「APIO 2019」奇怪装置 题目描述 有无限个二元组,每个二元组为\(((t+\left\lfloor\frac{t}{B} \right\rfloor)\%A,t \% B)\),给出一些区间, ...

  8. 安卓手机和ios手机上图片未设置宽度可能导致ios上图片贼小

    处理方法: 设置固定宽度,高度自适应

  9. [CSP-S模拟测试]:老司机的狂欢（LIS+LCA）

    题目背景 光阴荏苒.不过,两个人还在,两支车队还在,熟悉的道路.熟悉的风景,也都还在.只是,这一次,没有了你死我活的博弈,似乎和谐了许多.然而在机房是不允许游戏的,所以班长$XZY$对游戏界面进行了降 ...

  10. 从Mybatis中#和$的区别到SQL预编译

    #和$的区别 Mybatis中参数传递可以通过#和$设置.它们的区别是什么呢? # Mybatis在解析SQL语句时,sql语句中的参数会被预编译为占位符问号? $ Mybatis在解析SQL语句时, ...