Thymeleaf (详细)
时间:2021-07-21
本文章向大家介绍Thymeleaf (详细),主要包括Thymeleaf (详细)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、Thymeleaf介绍
Thymeleaf 是一个模版引擎。所谓的模版引擎,就是模版+数据。
1.快速开始
新增的依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
创建页面到templates文件夹下
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
欢迎你,<span th:text="${name}">贵宾</span>!
</body>
</html>
设计接口返回这个页面
@Controller
public class MyController {
@RequestMapping("/show")
public String show(Model model){
model.addAttribute("name","xiaoming");
return "hello";
}
}
模版引擎的作用:
- 让我们写渲染页面的时候更加的方便,直接写html即可。
- 模版没有数据,可以直接展示模版中的默认内容,当有数据时展示数据。——页面不一定必须跑在服务器内,简化前端页面的设计步骤。
有数据时:
没有数据时:
2.字符串
th标签中要想做字符串连接,可以使用+号或者“||”
欢迎你,<span th:text="超级vip+${name}">贵宾</span>!
欢迎你,<span th:text="|超级vip${name}|">贵宾</span>!
3.if-else
<span th:if="${age > 18}">成年人,可以做很多事情</span>
<br/>
<span th:unless="${age > 18}">成年人,可以做很多事情</span>
4.三元运算
<span th:text="${age > 18?'爽!':'累'}">成年人,可以做很多事情</span>
5.循环
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>学生列表</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<table class="table table-striped">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr th:each="stu : ${stus}">
<td th:text="${stu.id}">序号</td>
<td th:text="${stu.name}">姓名</td>
<td th:text="${stu.age}">年龄</td>
<td th:text="${stu.gender}">性别</td>
</tr>
</table>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
后端数据:
@RequestMapping("/students")
public String students(Model model){
//1.创建List
List<Student> stus = new ArrayList<>();
stus.add(new Student(1001L,"小明",20,"男"));
stus.add(new Student(1002L,"小谢",21,"男"));
stus.add(new Student(1003L,"小王",22,"女"));
//2.传给前端页面
model.addAttribute("stus",stus);
return "students";
}
6.日期格式化
<input th:value="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"/>
二、Thymeleaf的案例-修改用户数据
设计前端页面
原文地址:https://www.cnblogs.com/qxlzzj/p/15039347.html
- 负载均衡https转发会让服务器误判
- 凯撒加密之一个神奇的Python的API
- 10分钟搞懂TensorBoard用法
- 【最新TensorFlow1.4.0教程02】利用Eager Execution 自定义操作和梯度 (可在 GPU 运行)
- 清北集训Day1T3 LYK loves jumping(期望DP)
- C#进阶系列——WebApi 接口参数不再困惑:传参详解上
- MySQL之多表查询
- 万能pb_ds头文件—bits/extc++.h
- 区块链开发之Go语言—文件系统
- MySQL之单表查询
- C#进阶系列——WebApi 接口参数不再困惑:传参详解 下
- 区块链开发之Go语言—字符串和字节
- MySQL之表的约束
- 【NIPS2017前沿】半监督学习需要Bad GAN,清华特奖学霸与苹果AI总监提出(附Ruslan教授深度学习教程pdf下载)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 爬虫如何抓取网页的动态加载数据-ajax加载
- Python 为什么用 # 号作注释符?
- 基于矩阵分解原理的推荐系统
- Python实现信息自动配对爬虫排版程序
- EOF是不是字符
- Alibaba开源Java诊断工具Arthas简单介绍
- 气象编程 | Google Earth Engine for R——提供250+ 实例
- Anaconda安装和使用
- Redhat7安装docker
- 有个笔记本就可以玩一玩Hadoop
- java如何将String转换为Int
- java中如何将数组转换为List
- 从一个多层嵌套循环中直接跳出
- 如何给3个布尔变量,当其中有2个或者2个以上为true才返回true
- 比较java枚举成员使用equal还是==