Thymeleaf的介绍
首先我们通过前言我们大概的知道了Thymeleaf的作用是什么了。那我在具体的问一下,Thymeleaf的具体作用是什么呢?
官方介绍:Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
翻译:Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。
Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板——HTML可以在浏览器中正确显示,也可以作为静态原型工作,允许开发团队进行更强的协作。
有了Spring框架的模块、大量与您最喜欢的工具集成的功能,以及插入自己功能的能力,Thymeleaf是现代HTML5 JVM web开发的理想选择——尽管它可以做的事情更多。
从官方的介绍来看,Thymeleaf的目标很明确:
Thymeleaf的主要目标是为您的开发工作流程带来优雅自然的模板-HTML可以在浏览器中正确显示,也可以作为静态原型工作,从而可以在开发团队中加强协作。
Thymeleaf拥有适用于Spring Framework的模块,与您喜欢的工具的大量集成以及插入您自己的功能的能力,对于现代HTML5 JVM Web开发而言,Thymeleaf是理想的选择——尽管它还有很多工作要做。
配置工具
本次配置的工具有:
1:IDEA社区版
2:Thymeleaf的jar包
3:使用稳定版本的1.8jdk
注:一定要使用1.8的jdk!!!不要问为什么,问就是50!!!
Thymeleaf环境的配置
1、导入jar包,放在同级目录下。
因为我们没有借助SpringBoot框架,所以我们需要手动导入jar包。我们创建一个thymeleaf_lib的文件夹,并把jar包都放在该文件夹下面,然后右键—》Add to Library....。
jar的下载地址:
链接:https://pan.baidu.com/s/1aAu3JD2WqAwGhWZCmoDjLA
提取码:kptf(失效了找我)
2、应用Thymeleaf
按照步骤慢慢的打开。Project Structure —》 Modules —》如果已经有了Thymeleaf的话直接点击apply和ok,如果没有的话则需要点加号进行添加,然后再重复apply和OK。
3、Thymeleaf插件的下载和使用
打开下载插件的地方,然后直接搜索Thymeleaf即可,然后下载安装。
确定安装完毕后,我们打开一个HTML文件,然后点击鼠标右键。目录中就有我们已经下载完毕的插件JBLHtmlToThmeleaf,我们只需点击即可。
点击后我们的HTML文件就会出现一行引入Thmeleaf的代码,然后即可使用Thymeleaf对前端页面进行渲染。
<html lang="en" xmlns:th="http://www.thymeleaf.org">//出来的引入代码。
4、web.xml的配置
当上述都配置完毕后,即还剩最后一步—web.xml文件的配置。
<context-param> <param-name>view-prefix</param-name> <param-value>/WEB-INF/template/</param-value> </context-param> <context-param> <param-name>view-suffix</param-name> <param-value>.html</param-value> </context-param>
view-prefix:配置前缀。并需要配置访问的路径即/WEB-INF/template/。
view-suffix:配置访问文件后缀,我们访问的是HTML文件,则需要配置.html文件即可。
**例如:**一个文件为apple.html,已经设置过后缀为html访问时我们只需要再后端程序中访问apple即可。
Thymeleaf的基础语法
上述我们已经讲过了Thymeleaf的环境配置,接下来就是我们需要使用其对前端页面进行渲染。
在使用前,我们先来了解一下Thymeleaf的基础语法。
1、th:text
其可以改变当前元素里面的文本内容。
<h1 th:text="${session.name}">333</h1>
能够把后端传过来的数据name把333进行覆盖。
2、th:each
循环:
渲染列表数据是一种非常常见的场景,例如现在有 n 条记录需要渲染成一个表格<table>,该数据集合必须是可以遍历的,使用th:each标签。
<tr th:each="user : ${session.name1}"> <td th:text="${user}">tyrone</td> </tr>
3、th:if
判断:
例如判断数据是否为空:
<tr th:if="${messages.empty}"> <td >空</td> </tr>
4、th:unless
否者:
和python中的else是相同的。 <tr th:if="${messages.empty}"> <td >空</td> </tr> <tr th:unless="${session.name}"> <td>333<td> </tr>
5、引用web静态资源
一般我们在引入Web的静态资源时是直接添加地址,但是如果我们使用Thymeleaf开发网页则不能直接引入路径。而是通过@{}来引用web静态资源,例如:
<link rel="stylesheet" type="text/css" th:href="@{/static/css/demo6.css}">
后端数据的保存和取出
当我们配置上述环境后,为了测试配置是否成功,则需要写一个后端程序来进行数据传送到前端页面。
即可以使用session.setAttribute("sessionName",Object)。用来设置session值的,sessionName是名称,object是你要保存的对象。
例如:
String name = "xiaobao"; HttpSession session = req.getSession(); session.setAttribute("sessionName", name);
上述代码则能把Java中的name数据放在session中并命名为"sessionName",当我们再使用Thymeleaf则能进行数据的取出即可。
例如: