1.简介

  • Thymeleaf是用来开发Web和独立环境项目的现代服务器端Java模板引擎。

  • Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - HTML。可以在直接浏览器中正确显示,并且可以作为静态原型,从而在开发团队中实现更强大的协作。

  • 借助Spring Framework的模块,可以根据自己的喜好进行自由选择,可插拔功能组件,Thymeleaf是现代HTML5 JVM Web开发的理想选择 - 尽管它可以做的更多。

  • Spring官方支持的服务的渲染模板中,并不包含jsp。而是Thymeleaf和Freemarker等,而Thymeleaf与SpringMVC的视图技术,及SpringBoot的自动化配置集成非常完美,几乎没有任何成本,你只用关注Thymeleaf的语法即可。

2.环境准备

点击next

next

点击next 等待maven导入依赖

2.快速开始

2.1

首先准备一个controller

@Controller
public class FirstController { @GetMapping("index1")
public String index1(Model model){
model.addAttribute("msg", "Hello, Thymeleaf!");
return "index1";
}
}

再新建一个html(在resources下的templates下创建),在html命名空间加入下面,会出现语法提示

xmlns:th="http://www.thymeleaf.org"
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<h1>Success</h1>
<!--/*@thymesVar id="msg" type="111"*/-->
<div th:text="${msg}"></div>
</body>
</html>

启动项目

3 基础语法

3.1变量的使用

先创建个实体类

public class User {
String name;
int age;
String sex;
}

在controller里添加如下

@GetMapping("index2")
public String index2(Model model){
User user = new User();
user.setName("张三");
user.setAge(18);
user.setSex("男");
model.addAttribute("user",user);
return "index2";
}

新建一个index2.html

<table class="list">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
<td th:text="${user.sex}"></td>
</tr>
</table>

在页面获取user数据

如果数据量较大需要频繁地使用user,可以提供自定义变量解决:

<tr th:object="${user}">
<td th:text="*{name}"></td>
<td th:text="*{age}"></td>
<td th:text="*{sex}"></td>
</tr>

3.2运算

  • 算术运算

    支持的算术运算符:+ - * / %

    <span th:text="${user.age}"></span>
    <span th:text="${user.age}%2 == 0"></span>
  • 比较运算

    >, <, >= 、<=, 但 >,<不能直接使用,

    要使用别名gt (>), lt (<), ge (>=), le (<=), not (!) , Also eq (==), neq/ne (!=)

  • 条件运算

    三元运算:条件?条件成立的结果:条件不成立的结果

3.3循环

th:each

<table class="list">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr th:each="u : ${user}">
<td th:text="*{u.name}"></td>
<td th:text="*{u.age}"></td>
<td th:text="*{u.sex}"></td>
</tr>
</table>
@GetMapping("index2")
public String index2(Model model){
List<User> user = new ArrayList<>();
user.add(new User("张三",18,"男"));
user.add(new User("李四",19,"男"));
user.add(new User("王五",18,"女"));
model.addAttribute("user",user);
return "index2";
}

运行结果

迭代的同时,也可以获取迭代对象的状态

  • index,从0开始的角标
  • size,总元素个数
  • count,元素的个数,从1开始
  • current,当前遍历到的元素
  • even/odd,返回是否为奇偶,boolean值
  • first/last,返回是否为第一或最后,boolean值

<tr th:each="u,stat : ${user}">
<td th:text="*{u.name}"></td>
<td th:text="*{u.age}"></td>
<td th:text="*{u.sex}"></td>
</tr>

3.4逻辑判断

th:if 或者 th:unless,两者的意思相反

<span th:if="${user.age} < 25">年轻人</span>

如果为true,则标签会渲染到页面,否则不会渲染。

3.5switch

<div th:switch="${user.role}">
<p th:case="'teacher'">教师</p>
<p th:case="'student'">学生</p>
<p th:case="*">其它</p>
</div>
  • 需要注意的是,一旦有一个th:case成立,其它的则不再判断。与java中的switch是一样的。
  • th:case="*"表示默认,放最后。

3.6内置对象

Thymeleaf中提供了一些内置对象,并且在这些对象中提供了一些方法,方便我们来调用。获取这些对象,需要使用#对象名来引用。

添加日期类型对象

@GetMapping("index3")
public String index3(Model model){
model.addAttribute("today", new Date());
return "index3";
}
    <p>今天是:<span th:text="${#dates.format(today,'yyyy-MM-dd')}">2019-12-17</span></p>

  • 一些内置对象
对象 作用
#dates 处理java.util.date的工具对象
#calendars 处理java.util.calendar的工具对象
#numbers 用来对数字格式化的方法
#bools 用来判断布尔值的方法
#arrays 用来护理数组的方法
#strings 用来处理字符串的方法
#lists 用来处理List集合的方法
#sets 用来处理set集合的方法
#maps 用来处理map集合的方法

Thymeleaf入门与基础语法的更多相关文章

  1. Python入门篇-基础语法

    Python入门篇-基础语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编程基础 1>.程序 一组能让计算机识别和执行的指令. 程序 >.算法+ 数据结构= 程 ...

  2. Python入门 —— 02基础语法

    基础语法入门学习推荐: 简明 Python 教程 下文仅为入门推荐书籍的补充与重点 多行语句:末尾使用斜杠 (  ) ,将一行分为多行 var = item1 + item2 + item3 注释: ...

  3. python2.7入门---简介&基础语法

    Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言,具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色语法结构.基于上述原因, ...

  4. JavaScript快速入门-ECMAScript基础语法

    一.JavaScript引入方式 1.行内式 <script> alert(123); </script> 2.外链式 <script src='custom.js'&g ...

  5. vueJs的简单入门以及基础语法

    1-1基本数据绑定 <div id="app"> {{ msg }} </div> //script new Vue({ el:"#app&quo ...

  6. Java零基础入门之基础语法

    一.Java标识符 什么是标识符? 标识符是用来标识类名.对象名.变量名.方法名.数组名.自定义数据类型的有效字符序列. 合法的标识符 ①:由字母.数字.下划线"_".美元符号&q ...

  7. python3入门之基础语法

    Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色语法 ...

  8. 【Scala】新手入门,基础语法概览

    目录 变量.常量和数据类型 var val 数据类型 条件表达式 块表达式 to循环 for循环 for推导式 scala中的方法和函数 方法的定义 函数的定义 函数和方法的区别 变量.常量和数据类型 ...

  9. python3 入门 (一) 基础语法

    1.编码问题 默认情况下,Python 3源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 也可以为源码文件指定不同的编码,在文件头部加上: # coding=gbk 2.关键字 ...

随机推荐

  1. 使用vsphere client 克隆虚拟机的具体操作步骤

    采用 VMWare ESXi6.0,使用ESXi经常会遇到这样的问题,需要建立多个虚拟机,都是一样的操作系统,但是如果一台台装效率太低. VMware ESXi.VMware vCenter Serv ...

  2. 阻止保存要求重新创建表的更改-只需设置SQLServer的一个设置

  3. C语言基本数据类型的转换

    变量的数据类型是可以转换的.转换的方法有两种,一种是自动转换,一种是强制转换.自动转换发生在不同数据类型的量混合运算时,由编译系统自动完成.自动转换遵循以下规则:1) 若参与运算量的类型不同,则先转换 ...

  4. vue.set( target, key, value ) this.$set(对象获数组,要更改的具体数据,重新赋值)用法

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 具体用法js代码: //设 ...

  5. 【模板】分治 FFT

    Link Solution 有两种解法. 法1: 直接上分治FFT,也就是CDQ分治+FFT. 具体做法是先递归左半边,算出左半边答案之后,将左半边贡献到右半边,然后递归右半边. 分治是一个log的, ...

  6. VUE脚手架使用

    什么是vue脚手架?   他是一个快速构建vue项目的工具,通过他,我们可以将vue所需要的文件安装完成. vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack- ...

  7. 关于Excel做表小知识记录

    关于Excel做表小知识记录 最近使用Excel做了一系列的报表,觉得这是个很神奇的东西哈哈哈,以前我可是一想到Excel就开始头疼的人...  能用代码或者SQL语句解决的问题绝不会愿意留在Exce ...

  8. thinkphp5.0学习笔记

    2019-11-11学习笔记 安装TP5.0 a)源代码包下载 在thinkphp官网下载(www.thinkphp.cn)下载 完整版本的TP5.0 b) composer 安装 切换到网站的根目录 ...

  9. 你可能会忽略的 Git 提交规范

    一.为什么需要规范? 无规矩不成方圆,编程也一样. 如果你有一个项目,从始至终都是自己写,那么你想怎么写都可以,没有人可以干预你.可是如果在团队协作中,大家都张扬个性,那么代码将会是一团糟,好好的项目 ...

  10. sql server多表关联update

    一般都是写的单表update语句,很少写多表关联的update,但是事实上,在SQL Server中,update的多表连接更新和select的多表连接查询在使用的方法上其实并没有多大区别. 直接上一 ...