Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎

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

Thymeleaf的特点

1.动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

2.开箱即用：它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

3.多方言支持：Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

4.与SpringBoot完美整合：SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

SpringBoot与Thymeleaf整合

1.在pom中引入Thymeleaf

<!--引入thymeleaf--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

2.自动配置了Thymeleaf

SpringBoot中已经自动给我们默认分配了模版的前缀和后缀，我们只需要按部就班的将模版丢进去即可

只要我们把HTML页面放在classpath:/templates/，thymeleaf就能自动渲染；

3.编写Controller

import com.msds.bean.Student;
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;
import java.util.Map;
@Controller
public class HelloController {//查出一些数据，在页面显示@RequestMapping(value = "/cg")public String success(Map<String,Object> map, Model model){map.put("hello","你好SpringBoot");map.put("html","<h1>html</h1>");String[] str={"张三","李四","王五"};map.put("arr",str);List<Student> list=new ArrayList<Student>();Student stu1=new Student("欢欢",7,'女');Student stu2=new Student("贝贝",8,'女');Student stu3=new Student("小黑",10,'男');list.add(stu1);list.add(stu2);list.add(stu3);map.put("stu",list);model.addAttribute("msg","向model中存了些数据");//classpath:/templates/success.htmlreturn "success";}
}

4.将返回的对应模板添加到默认的位置下：在resources/templates下创建success.html

在html页面导入thymeleaf的名称空间——(导入是为了可以有快捷提示，也可以选择不导入)

<html lang="en" xmlns:th="http://www.thymeleaf.org">

使用thymeleaf语法；


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>success</title>
</head>
<body><h1>成功</h1><!--th:text 将div里面的文本内容设置为${hello} 要显示的值--><h3 th:text="${hello}"></h3><!--这句话在后台请求运行的时候并不会显示，会直接替换为后台的数据，后台中没有key为hello对应的value值，那就会把${}中的数据给显示出来--><h3 th:text="${hello}">这是显示欢迎信息</h3><!--会将原本id的值替换为th:id中取出的值--><a id="aid" th:id="${hello}">超链接</a><hr/><!--th:each 每次遍历都会生成当前这个标签 3个h4--><h4 th:text="${us}" th:each="us:${arr}"></h4><hr/><!--行内写法--><h4><span th:each="us:${arr}">[[${us}]] </span></h4><hr/><h4 th:text="${xs.name+'、'+xs.age+'、'+xs.sex}" th:each="xs:${stu}"></h4><hr/><h4><span th:each="xs:${stu}">[[${xs.name}]]、[[${xs.age}]]、[[${xs.sex}]] <br/></span></h4><hr/><p th:text="${msg}"></p>
</body>
</html>

5.启动项目，进行访问

配置热部署

1.在项目的pom文件中添加如下依赖

    <!--配置热部署--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId></dependency>

2.再次修改了java代码或html页面，只需要按Ctrl+F9键，就可有重新访问（指的是在IDEA软件中）

thymeleaf常用语法

thymeleaf主要作用是把后台数据渲染到html中

变量

先新建一个实体类User
public class User {private String name;private Integer age;private User friend;//对象类型属性//省略getter  and setter
}
然后在模型中添加数据
@Controller
public class TestController1 {@RequestMapping(value = "/test1")public String test01(Model model, Map<String,Object> map){User user=new User();user.setName("张三");user.setAge(18);user.setFriend(new User("李四",17));model.addAttribute("modelUserKey",user);map.put("mapUserKey",user);return "hello";}
}
Thymeleaf通过${}来获取model中的变量，注意这不是el表达式，而是ognl表达式，但是语法非常像<h1>model-你好：<span th:text="${modelUserKey.name}">请跟我来</span></h1><h1>map-你好：<span th:text="${mapUserKey.name}">请跟我来</span></h1>
感觉跟el表达式差不多的。区别在于，我们的表达式写在一个名为：th:text的标签属性中，这个叫做指令。
如果我们不经过SpringMVC，而是直接用浏览器打开编写的页面：在静态环境下,th指令不会被识别，但是也不会报错，而是显示<span>标签的缺省默认值："请跟我来"
#############################################################################################
看下面的案例<h1><p>姓名：<span th:text="${modelUserKey.name}">name</span></p><p>年龄：<span th:text="${modelUserKey.age}">age</span></p><p>朋友：<span th:text="${modelUserKey.friend.name}">friend_name</span></p></h1>
我们获取用户的所有信息，分别展示。
当数据量比较多的时候，频繁的写user.就会非常麻烦。
因此，Thymeleaf提供了自定义变量来解决：如下示例<h1 th:object="${modelUserKey}"><p>姓名：<span th:text="*{name}">name</span></p><p>年龄：<span th:text="*{age}">age</span></p><p>朋友：<span th:text="*{friend.name}">friend_name</span></p></h1>
首先在 h1上用 th:object="${modelUserKey}"获取user的值，并且保存
然后，在h1内部的任意元素上，可以通过 *{属性名}的方式，来获取user中的属性，这样就省去了大量的user.前缀了

方法

ognl表达式本身就支持方法调用，例如<h2 th:object="${modelUserKey}"><p>姓名：<span th:text="*{name.split('')[0]}">name</span></p><!--返回name值中索引是0的字符--><p>返回姓氏：<span th:text="*{name.charAt(1)}"></span></p></h2>

Thymeleaf内置对象

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

我们在环境变量中添加日期类型对象，并向request和session中存数据@RequestMapping(value = "/test2")public String test02(Model model, HttpServletRequest request, HttpSession session){model.addAttribute("today",new Date());request.setAttribute("req","reqName-你好");session.setAttribute("ses","sesName-你好");return "hello2";}
在页面中处理<p>今天是：<span th:text="${today}">时间</span><!--今天是：Mon Jan 18 20:46:10 CST 2021--></p><p>今天是：<span th:text="${#dates.format(today,'yyyy-MM-dd')}">时间</span><!--今天是：2021-01-18-->今天是：<span th:text="${#dates.format(today)}"></span><br><!--今天是：2021年1月18日 下午8时46分10秒--></p><p>request=<span th:text="${#request.getAttribute('req')}">req</span></p><p>session=<span th:text="${#session.getAttribute('ses')}">ses</span></p>

字面值

有的时候，我们需要在指令中填写基本类型如：字符串、数值、布尔等，并不希望被Thymeleaf解析为变量，这个时候称为字面值

字符串字面值----使用一对''引用的内容就是字符串字面值了：<p><!--th:text中的thymeleaf并不会被认为是变量，而是一个字符串-->你正在观看：<span th:text="'thymeleaf'">字面量</span><!--thymeleaf--></p>
数字字面值----数字不需要任何特殊语法， 写的什么就是什么，而且可以直接进行算术运算：<p>今年是 <span th:text="2018">数字字面值</span></p><!--2018--><p>两年后将会是 <span th:text="2018+2">数字字面值</span></p><!--2020-->
布尔字面值----布尔类型的字面值是true或false：<div th:if="true"><!--当th:if中的值为true时，会执行该标签中的内容-->你填的是true</div>

拼接

  @RequestMapping(value = "/test3")public String test03(Model model){User user=new User();user.setName("张三");model.addAttribute("user",user);return "hello3";}我们经常会用到普通字符串与表达式拼接的情况：<span th:text="'欢迎您:'+${user.name}"></span><!--欢迎您:张三-->
字符串字面值需要用''，拼接起来非常麻烦，Thymeleaf对此进行了简化，使用一对|即可<span th:text="|欢迎您:${user.name}|"></span><!--欢迎您:张三-->

运算[逻辑运算、布尔运算、比较运算、条件运算]

需要注意：${}内部的是通过OGNL表达式引擎解析的，外部的才是通过Thymeleaf的引擎解析，因此运算符尽量放在${}外进行。

@RequestMapping(value = "/test4")public String test04(Model model){User user=new User();user.setName("张三");user.setAge(17);model.addAttribute("user",user);return "hello4";}

算数运算——支持的算术运算符：+ - * / %

<span th:text="${user.age}"></span><!--17--><span th:text="${user.age}%4==0"></span><!--false-->

比较运算

支持的比较运算(可以使用别名)：gt (>), lt (<), ge (>=), le (<=), eq (==), neq/ne (!=)。

注意 ==, !=不仅可以比较数值，类似于equals的功能。

 <span th:text="${user.age}%4>0"></span><!--true--><span th:text="${user.age}%4 gt 0"></span><!--true--><span th:text="${user.name}=='张三'"></span><!--true-->

条件运算

三元运算

18?'成年':'未成年'">

默认值：有的时候，我们取一个值可能为空，这个时候需要做非空判断，可以使用表达式 ?: 默认值简写

当前面的表达式值为null时，就会使用后面的默认值。注意：?:之间没有空格。

循环

循环也是非常频繁使用的需求，我们使用th:each指令来完成

   @RequestMapping(value = "/test5")public String test05(Model model){User user1=new User("张三",13);User user2=new User("李四",14);User user3=new User("王五",15);User user4=new User("赵六",16);List<User> list=new ArrayList<User>();list.add(user1);list.add(user2);list.add(user3);list.add(user4);model.addAttribute("userList",list);return "hello5";}
html中获取后台数据<table border="1" th:width="400px"><tr><th>姓名</th><th>年龄</th></tr><tr th:each="us:${userList}" align="center"><td th:text="${us.name}">姓名</td><td th:text="${us.age}">年龄</td></tr></table><!--${userList} 是要遍历的集合，可以是以下类型：Iterable，实现了Iterable接口的类Enumeration，枚举Interator，迭代器Map，遍历得到的是Map.EntryArray，数组及其它一切符合数组结果的对象--><hr><table border="1" th:width="600px"><tr><th>姓名</th><th>年龄</th><th>stat对象</th></tr><tr th:each="us,stat:${userList}" align="center"><td th:text="${us.name}">姓名</td><td th:text="${us.age}">年龄</td><td th:text="${stat}">年龄</td></tr></table><!--stat对象包含以下属性：index，从0开始的角标count，元素的个数，从1开始size，总元素个数current，当前遍历到的元素even/odd，返回是否为奇偶，boolean值first/last，返回是否为第一或最后，boolean值-->

条件判断

Thymeleaf中使用th:if 或者 th:unless ，两者的意思恰好相反
=18">成年

=18">未成年

<table border="1" th:width="400px"><tr><th>姓名</th><th>年龄</th><th>是否成年</th></tr><tr th:each="us:${userList}" align="center"><td th:text="${us.name}">姓名</td><td th:text="${us.age}">年龄</td><td><span th:if="${us.age}>=18">成年</span><!--<span th:if="${us.age}<18">未成年</span>--><span th:unless="${us.age}>=18">未成年</span></td></tr></table>

分支控制switch

这里要使用两个指令：th:switch 和 th:case

<td th:switch="${us.role}">

管理员

经理

普通员工

</td>

 <table border="1" th:width="400px"><tr><th>姓名</th><th>年龄</th><th>身份</th></tr><tr th:each="us:${userList}" align="center"><td th:text="${us.name}">姓名</td><td th:text="${us.age}">年龄</td><td th:switch="${us.role}"><span th:case="'admin'">管理员</span><span th:case="'manager'">经理</span><span th:case="*">普通员工</span></td></tr></table>

需要注意的是，一旦有一个th:case成立，其它的则不再判断。与java中的switch是一样的。

另外th:case="*"表示默认，放最后

SpringBoot对静态资源的映射规则

1."/**" 访问当前项目的任何资源，都去（静态资源的文件夹）找映射


#优先级 从高到底
"classpath:/META-INF/resources/",
"classpath:/resources/",
"classpath:/static/",
"classpath:/public/"

/: 指的是当前项目的根目录。默认情况下，java是源码的根目录，resources是配置文件的根目录localhost:8080/abc === 去静态资源文件夹里面找abc

2.改变静态文件夹路径

在application.properties中配置如下：定义我们指定的静态文件夹路径

#指定静态文件夹的路径下面例子列举了两个路径，多个路径用逗号分隔

spring.resources.static-locations=classpath:/msds/,classpath:/bdqn/

在application.yml中配置如下：定义我们指定的静态文件夹路径

#指定静态文件夹的路径下面例子列举了两个路径，多个路径用逗号分隔

spring:

resources:

static-locations: classpath:/msds/,classpath:/bdqn/

一旦在配置文件中指定了静态文件夹路径则默认的静态文件夹下的信息就无法访问了。

综合练习：热点事件排行榜(页面使用的是thymeleaf)

需求描述

实现查看所有的热点事件列表功能

实现根据关键词查询热点事件功能

实现查看热点事件详细内容功能

实现添加评论功能

阶段1：实现查询热点信息功能

可根据关键词进行模糊查询

日期格式为“年-月-日”

1.pom.xml中添加相关依赖

 <!--引入与MySQL数据库相关的依赖--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><!--引入thymeleaf--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--配置热部署--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId></dependency><!--引入与MyBatis相关的依赖--><!--由于spring-boot-parent没有指定mybatis-spring-boot-starter的版本号 所以在引入时 需要手动指定版本号 --><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.0.1</version></dependency>

2.在application.yml中添加如下配置


#配置数据源DataSource
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/hotevent?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=UTC&zeroDateTimeBehavior=convertToNullusername: rootpassword: 123456
#设置端口号
server:port: 8081
logging:level:com: debug #设置日志级别file:name: springboot.log #不指定路径在当前项目下生成springboot.log日志pattern:console: '%d{yyyy-MM-dd} [%thread] %-5level %logger{50} - %msg%n'  #在控制台输出日志的格式file: '%d{yyyy-MM-dd} === [%thread] === %-5level === %logger{50} ==== %msg%n'  #指定文件中日志输出的格式

3.编写java代码


热点事件实体
public class HotEvents {private Integer id;//事件编号private  String keyWord;//关键词private  String hotContent;//private  Integer searchSum;//搜索指数private Date createDate;//创建时间//省略getter and setter 方法
}热点事件Dao层
@Mapper
public interface HotEventsMapper {/*** if 对内容进行判断* 在注解方法中，若要使用MyBatis的动态SQL，需要编写在<script></script>标签内* 在 <script></script>内使用特殊符号，则使用java的转义字符，如  双引号 "" 使用&quot;&quot; 代替* concat函数：mysql拼接字符串的函数*///根据关键词查询热点事件  或查询所有的信息@Select("<script>SELECT * FROM `hotevents` " +"   <where>" +"       <if test='search!=null and search!=&quot;&quot;'>" +"           and `keyWord` LIKE CONCAT('%',#{search},'%')" +"       </if>" +"   </where>" +"</script>")List<HotEvents> getHotEventsList(String search);
}热点事件Service接口
public interface HotEventsService {//根据关键词查询热点事件  或查询所有的信息List<HotEvents> getHotEventsList(String search);
}热点事件Service接口实现类
@Service
public class HotEventsServiceImpl implements HotEventsService {@Resourceprivate HotEventsMapper mapper;//根据关键词查询热点事件  或查询所有的信息@Overridepublic List<HotEvents> getHotEventsList(String search) {return mapper.getHotEventsList(search);}
}Controller层
@Controller
public class HotEventsController {@Resourceprivate HotEventsService hotSer;@RequestMapping(value = "/")public String shouye(){return "hoteventList";}//根据关键词查询热点事件  或查询所有的信息@RequestMapping(value = "/list",method = RequestMethod.GET)public String hoteventList(Model model,String search){List<HotEvents> list= hotSer.getHotEventsList(search);model.addAttribute("search",search);//为了回显在页面上model.addAttribute("hotList",list);return "hoteventList";}
}

4.编写页面，创建展示热点事件排行榜页面hoteventList.html

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body align="center"><form action="/list" method="get">关键词：<input type="text" id="search" name="search" th:value="${search}"><!--th:value="${search}"用作回显--><input type="submit" value="查询" id="chaxun"></form><h1>热点事件排行榜</h1><table border="1" width="600px" align="center"><tr bgcolor="#9acd32"><th>关键词</th><th>搜索指数</th><th>创建时间</th></tr><tr th:each="hot:${hotList}"><td><a href="#" th:text="${hot.keyWord}"></a></td><td th:text="${hot.searchSum}"></td><td th:text="${#dates.format(hot.createDate,'yyyy-MM-dd')}"></td></tr></table>
</body>

使用ajax发送异步请求分页查询并展示全部热点事件

<!--引入分页插件  下面的插件依赖了mybatis--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.3.0</version></dependency>

阶段2：实现查看事件详情及评论功能

点击“关键词”超链接，跳转到事件详情页面

评论信息按评论时间降序排列

点击“返回首页”超链接，返回列表页面(返回首页功能，需要记录查询关键词和分页数据)

1.编写java代码

评论实体public class Comments {private Integer id;//评论idprivate Integer hotEventsId;//事件名private Date commentDate;//评论时间private String content;//评论内容//省略getter and setter 方法}dao、service、controller。。。

2.页面

3.测试

阶段3：实现添加评论功能(无分页无Ajax)

点击“提交”按钮提交评论

对评论信息进行前端校验，要求内容必填，否则提示“请填写评论内容”

评论时间取服务器系统时间

评论成功，相关事件的搜索指数加1

保存成功后，将最新评论展示在事件详情页面

综合练习：热点事件排行榜(页面使用的是thymeleaf)相关推荐

python爬取热门新闻每日排行_用python查看百度搜索中今日热点事件排行榜
大家好,我是咿哑呀.我们知道,在百度搜索中,查看今日热点事件排行榜时,可以打开网址"http://top.baidu.com/buzz?b=341&c=513&fr=topb ...
利用Python对百度今日热点事件排行榜关键词的爬取
百度今日热点事件排行榜URL:今日热点事件排行榜代码: #CrawBaiduTop.py import requests from bs4 import BeautifulSoup import b ...
突发热点事件下微博高可用注册中心vintage的设计\u0026实践
当前微博服务化采用公有云+私有云的混合云部署方式,承载了每天百亿级的流量,vintage 作为微博微服务的注册中心,为管理 10w 级微服务节点以及在流量激增的情况下的服务快速扩缩容,面临了极大挑战. ...
微博热点事件背后数据库运维的“功守道”
作者 | 张冬洪责编 | 仲培艺 [导语] 微博拥有超过3.76亿月活用户,是当前社会热点事件传播的主要平台.而热点事件往往具有不可预测性和突发性,较短时间内可能带来流量的翻倍增长,甚至更大.如何快 ...
基于kmeans聚类算法的微博舆情热点事件分析系统
目录第一章引言 2 1.1 研究背景及意义 2 1.2 国内外相关问题研究现状 3 1.3 论文的理论意义与实用价值 4 第二章相关技术介绍 4 2.1 开发平台简述 4 2.2 OAuth2. ...
Android 搜索框、书架页面以及排行榜页面UI设计
设计思路收集各大主流小说App搜索UI设置,发现基本都会有在导航栏(AppBar)中设置搜索功能.故本App也采取这种主流设计.同时考虑在书架页面和排行榜页面进行滑动切换. 搜索框UI设计实现效果 ...
只要5分钟用数据可视化带你看遍11月份新闻热点事件
2017年11月份已经离我们而去,在过去的11月份我们也许经历了双十一的剁手,也可能亲眼看见了别人剁手.11月份的北京大兴区发生了"11·18"重大火灾,国内多家幼儿园也多次上了头 ...
vue el-form鼠标事件导致页面刷新解决方案；vue 阻止多次点击提交数据通用方法...
一.阻止表单自动提交刷新页面:<el-form><el-form-item :inline="true" @submit.native.prevent>&l ...
新闻媒体的“社会热点事件”催发微博客的诞生
微博客的概念国外炒作的越来越厉害,每月几千万的独立用户,让很多巨头早已虎视眈眈.甚至Twitter在国外有成为下一个Google的预测.微博客在中国的发展还处于起步阶段,中国有饭否,腾讯滔滔,9911 ...
BCH半月热点事件回顾
随着BCH在全球范围内采用率和影响力的提高,与之相关的热点事件也在不断增多,本文希望以事件汇总的方式,对过去两周发生的新闻按时间顺序进行一个总结,以此帮助爱好者们更清楚的了解BCH. Kraken交易 ...

综合练习：热点事件排行榜(页面使用的是thymeleaf)

Thymeleaf的特点

配置热部署

thymeleaf常用语法

SpringBoot对静态资源的映射规则

综合练习：热点事件排行榜(页面使用的是thymeleaf)

阶段3：实现添加评论功能(无分页无Ajax)

综合练习：热点事件排行榜(页面使用的是thymeleaf)相关推荐

最新文章

热门文章