Thymeleaf的入门（一）
引自：http://how2j.cn/k/springboot/springboot-thymeleat/1735.html
Thyemeleaf初步使用
Thymeleaf的引入（内容填充）
1.在HTML文件中如下的命名空间，有点像配置XML的那种感觉
<html lang="en" xmlns:th="http://www.thymeleaf.org"></html>2.pom文件引入Thymeleaf的依赖支持
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>3.application配置文件配置一些常用的参数
#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
#缓存设置为false, 这样修改之后马上生效，便于调试
#spring.thymeleaf.cache=falseThymeleaf的第一次使用
1.添加一个控制器类，使请求跳转到指定的页面，并且附带参数
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
public class HelloController {@RequestMapping("/hello")public String hello(Model model) {model.addAttribute("name", "thymeleaf");return "hello";}
}2.编写HTML页面(Thymeleaf本身就是纯纯的HTML页面)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>Title</title></head>
<body><p th:text="${name}">name</p><P th:text="'Hello, ' + ${name} + '!'">name</P><p th:text="|Hello, ${name} !|">name</p></body>
</html>3.执行结果，以及解释
- th:系列标签可以正常使用是因为引入了Thymeleaf的命名空间
- th:text是显示、填充文本的意思 <p th:text="${name}">name</p>的name，当控制器传过来的名为"name"的${name}变量不为空，显示传过来的变量值，否则显示“name”
- 通过 ${变量}+ ' 字符串' + ${变量}拼接
- 或者通过 | 字符串 ${变量} 字符串 | 这种方式进行内容拼接
Thymeleaf资源引入(URL)
<link rel="stylesheet" media="all" type="text/css" th:href="@{css/style.css}" href="../static/css/style.css"><script type="text/javascript" th:src="@{js/thymeleaf.js}" src="../static/js/thymeleaf.js"></script>
上面是引入的示例，下图是我的当前的项目结构。
解释说明
th:src和th:href分别用来引用js和css文件，当项目部署启动后标签作用生效，寻找SpringBoot默认或者你指定的SpringBoot资源路径对应的资源文件。你还可以指定普通的src和href属性，用于本地调试。
总结：th:src和th:href用于线上部署的后的资源引入，普通的属性用于保险(th标签找不到还可以用普通的去找)和前端本地调试。
Thymeleaf表达式（实体类及属性/字符转义）
步骤1.实体类
package com.springboot.entity;import lombok.Data;@Data
public class Product {private int id;private String name;private int price;public Product(int id, String name, int price) {super();this.id = id;this.name = name;this.price = price;}}
步骤2.控制器类，跳转HTML页面，附带返回Html字符串和实体类对象
package com.springboot.controller;import com.springboot.entity.Product;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
public class TestController {@RequestMapping("/test")public String test(Model model){//这个用于测试Thymeleaf的转义和非转义模式String htmlContent = "<p style='color:red'>红色文字</p>";//这个用于测试Thymeleaf的对象及其属性的显示Product currentProduct = new Product(5, "product e", 200);model.addAttribute("htmlContent", htmlContent);model.addAttribute("currentProduct", currentProduct);return "test";}
}
步骤3.Html页面呈现效果
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Title</title><style>.showing{margin-top:50px;background-color: aquamarine;}</style>
</head>
<body>
<div class="showing"><h2>显示 转义和非转义的 html 文本</h2><p th:text="${htmlContent}" ></p><p th:utext="${htmlContent}" ></p>
</div><div class="showing"><h2>显示对象以及对象属性</h2><p th:text="${currentProduct}" ></p><p th:text="${currentProduct.name}" ></p><p th:text="${currentProduct.getName()}" ></p>
</div><div class="showing" th:object="${currentProduct}"><h2>*{}方式显示属性</h2><p th:text="*{name}" ></p>
</div><div class="showing"><h2>算数运算</h2><p th:text="${currentProduct.price+999}" ></p>
</div></body>
</html>页面效果及解释
th:text=${对象}本身可以输出传过来的实体对象。
th :text =$ {对象.属性}或者$:text{对象.属性的get方法}可以输出对象的属性
th :object =$ {对象}声明一个对象，然后使用$:text{属性}直接输出属性
th:text="${currentProduct.price+999}"这种可以直接进行运算
包含（引入其他HTML文件）
被引入文件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>beIncluded</title>
</head><footer th:fragment="footer1"><p>All Rights Reserved</p>
</footer><footer th:fragment="footer2(start,now)"><p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer></html>引入文件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Title</title>
</head>
<body><div><div th:replace="beIncluded::footer1"></div><div th:replace="beIncluded::footer2(2015, 2018)"></div>
</div></body>
</html>页面效果
解释
th:fragment="片段名"这个是起一个标记的效果
th:fragment="片段名(形参列表) "这个还可以接受参数，给片段内部操作
th:replace="被引入页面的名称:: 片段名(参数列表)"进行引入，其中th:replace是替换，th:insert是插入，区别：
th:insert ：保留自己的主标签，保留th:fragment的主标签。
th:replace ：不要自己的主标签，保留th:fragment的主标签。
Thymeleaf条件判断
<h2>条件判断</h2><p th:if="${testBoolean}" >如果testBoolean 是 true ，本句话就会显示</p><p th:if="${not testBoolean}" >取反 ，所以如果testBoolean 是 true ，本句话就不会显示</p><p th:unless="${testBoolean}" >unless 等同于上一句，所以如果testBoolean 是 true ，本句话就不会显示</p><p th:text="${testBoolean}?'当testBoolean为真的时候，显示本句话，这是用三目运算符做的':''" ></p>不只是布尔值的 true 和 false, th:if 表达式返回其他值时也会被认为是 true 或 false，规则如下:
- boolean 类型并且值是 true, 返回 true
- 数值类型并且值不是 0, 返回 true
- 字符类型(Char)并且值不是 0, 返回 true
- String 类型并且值不是 "false", "off", "no", 返回 true
- 不是 boolean, 数值, 字符, String 的其他类型, 返回 true
- 值是 null, 返回 false
Thymeleaf的遍历（表格、下拉框、单选框）
控制器类
package com.springboot.controller;import com.springboot.entity.Product;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.ArrayList;
import java.util.List;@Controller
public class TestController {@RequestMapping("/test")public String test(Model model){List<Product> products = new ArrayList<>();products.add(new Product(1, "产品a", 100));products.add(new Product(2, "产品b", 200));products.add(new Product(3, "产品c", 300));products.add(new Product(4, "产品d", 400));products.add(new Product(5, "产品e", 500));products.add(new Product(6, "产品f", 600));products.add(new Product(7, "产品g", 700));products.add(new Product(8, "产品h", 800));model.addAttribute("products", products);return "test";}
}
html页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script><script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script><link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><h2>集合遍历</h2>
<table class="table table-striped" style="width:500px;"><thead><tr><th>集合索引</th><th>编号</th><th>名称</th><th>价格</th></tr></thead><tbody><tr th:each="product,status: ${products} " th:class="${status.even}?even:odd"><td th:text="${status.index}"></td><td th:text="${product.id}"></td><td th:text="${product.name}"></td><td th:text="${product.price}"></td></tr></tbody>
</table><select size="4" class="form-control" style="width:500px;"><option th:each="product,status:${products}" th:value="${product.id}" th:text="${product.name}" th:selected="${product.id==3}"></option>
</select><input name="radio" type="radio" th:each="product:${products}" th:value="${product.id}" th:checked="${product.id==2}" th:text="${product.name}" />
</body>
</html>页面效果
解释说明
th:each="当前元素[,状态]${集合}" 声明将要执行的集合遍历，其中状态是可选项，包括了索引，第一个、最后一个、数量、当前对象等信息
th:value="{当前元素.属性}"的作用就和普通标签的value属性是差不多的，不过 th:selected="3"是不行的，必须要 th:selected="${当前元素.属性 = 3}"才行，即th:value是哪个属性，th:selected就必须也要对应的属性，直接用值是不行的
Thymeleaf的入门（一）相关推荐
- Thymeleaf模板入门（三）
Thymeleaf基本语法 1. 往期 Thymeleaf模板入门(一) Thymeleaf模板入门(二) 2. 案例 实体类User package top.infinxkj.thymeleaf.p ...
- 前端模板引擎Thymeleaf快速入门
文章目录 1. Thymeleaf特点 2. 提供数据 3. 引入启动器 4. 静态页面 5. 测试 6.模板缓存 1. Thymeleaf特点 简单说, Thymeleaf 是一个跟 Velocit ...
- Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序，Thymeleaf快速入门，商品详情页的展示）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息 这是用来做排序的,默认按照综合排序 ...
- springboot2.0+thymeleaf技术-入门
文章目录 1.什么thymeleaf? 2.thymeleaf的特点 3.项目创建 thymeleaf手动配置 3.1导入相关包 3.2 thymeleaf视图层文件存放目录 3.3 实现 3.3.1 ...
- Thymeleaf从入门到出家
目录 1.初体验 2.怎么用 1.导入依赖 引入命名空间 2.已经自动注入,可以直接使用 3.表达式语法 4.怎么用 3.常用操作 设置属性值-th:attr thymeleaf内联写法 其他几类基本 ...
- 超详细的Thymeleaf语法入门教程
Thymeleaf 1.Thymeleaf简介 2.特点 3.环境准备 3.1.创建module 3.2.默认配置 3.3.快速开始 4.语法 4.1.变量 变量案例 动静结合 ognl表达式的语法糖 ...
- Spring Boot 引入 Thymeleaf 及入门使用
目录: 引言 1.Spring Boot 引入 Thymeleaf 1.1 修改 Thymeleaf 版本 1.2 修改 Thymeleaf Layout Dialect 版本 2.Thymeleaf ...
- Thymeleaf【快速入门】
前言:突然发现自己给自己埋了一个大坑,毕设好难..每一个小点拎出来都能当一个小题目(手动摆手..),没办法自己选的含着泪也要把坑填完..先一点一点把需要补充的知识学完吧.. Thymeleaf介绍 稍 ...
- thymeleaf体验
Thymeleaf快速入门 SpringBoot并不推荐使用jsp,但是支持一些模板引擎技术: 以前大家用的比较多的是Freemarker,但是我们今天的主角是Thymeleaf! 为什么是Thyme ...
最新文章
- 使用maven创建项目和cannot change version web module 3.0
- 关于fseek和文件ab+打开方式的问题
- MATLAB中各种对话框的设置
- 【攻防世界017】re4-unvm-me
- WebBenchmark之动态数据测试
- P7276-送给好友的礼物【dp】
- java线程条件变量_使用条件变量（多线程笔记）
- iQOO Neo5活力版或本月发布：搭载骁龙870+高刷LCD屏
- mysql linq 事务_一步一步学Linq to sql（七）：并发与事务
- 音乐剪辑_android版,全能视频音乐剪辑大师
- css字体红色调用,如何在这段CSS代码中字体变成红色？
- vue word 转换html渲染页面(mammoth)
- POI 设置Word表格边框、表格文字水平居中
- try catch promise.reject
- 2021年N1叉车司机考试APP及N1叉车司机免费试题
- 内存溢出(OutOfMemoryError)与栈溢出(StackOverflowError）
- 读书笔记------《平凡的世界》
- 树莓派pxe网络启动官方文档（译文）
- mipi传输距离3米_弱电网络工程中网线大于100米怎么办？离300米远用什么线缆较好？...
- 和尚挑水安排（回溯问题）