博客首页:*铁甲小宝同学*
文章目的:
Thymeleaf前端页面的渲染
博主也在学习阶段,如若发现问题,请告知,非常感谢
同时也非常感谢各位小伙伴们的支持
每日一语:不要在夕阳下时幻想,要在旭日东升时努力!
吾之所学,献给诸君,愿诸君得有所获!
本期博客是JavaWeb
的一个后端向前端数据传输的一个渲染过程,所用到的技术也是就我们今天的猪脚-Thymeleaf
。上篇我们讲过前端给发送请求到后端,这次我们讲后端把数据放到前端渲染!本篇篇博客可货真价实的值50!!!!!
,具体什么原因可以看我的Bink,说多了就是泪五五五…
笔者也希望笔者本篇博客能够帮助大家。吾之所学,献给诸君,愿诸君得有所获!
首先我们通过前言我们大概的知道了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!!!
因为我们没有借助SpringBoot框架,所以我们需要手动导入jar包。我们创建一个thymeleaf_lib
的文件夹,并把jar包都放在该文件夹下面,然后右键—》Add to Library....
。
jar的下载地址:
链接:https://pan.baidu.com/s/1aAu3JD2WqAwGhWZCmoDjLA
提取码:kptf(失效了找我)
按照步骤慢慢的打开。Project Structure —》 Modules —》如果已经有了Thymeleaf
的话直接点击apply和ok,如果没有的话则需要点加号进行添加,然后再重复apply和OK。
打开下载插件的地方,然后直接搜索Thymeleaf
即可,然后下载安装。
确定安装完毕后,我们打开一个HTML
文件,然后点击鼠标右键。目录中就有我们已经下载完毕的插件JBLHtmlToThmeleaf
,我们只需点击即可。
点击后我们的HTML
文件就会出现一行引入Thmeleaf
的代码,然后即可使用Thymeleaf
对前端页面进行渲染。
<html lang="en" xmlns:th="http://www.thymeleaf.org">//出来的引入代码。
当上述都配置完毕后,即还剩最后一步—web.xml文件的配置。
<context-param>
<param-name>view-prefixparam-name>
<param-value>/WEB-INF/template/param-value>
context-param>
<context-param>
<param-name>view-suffixparam-name>
<param-value>.htmlparam-value>
context-param>
view-prefix
:配置前缀。并需要配置访问的路径即/WEB-INF/template/
。
view-suffix
:配置访问文件后缀,我们访问的是HTML
文件,则需要配置.html
文件即可。
**例如:**一个文件为apple.html
,已经设置过后缀为html
访问时我们只需要再后端程序中访问apple
即可。
上述我们已经讲过了Thymeleaf
的环境配置,接下来就是我们需要使用其对前端页面进行渲染。
在使用前,我们先来了解一下Thymeleaf
的基础语法。
其可以改变当前元素里面的文本内容。
<h1 th:text="${session.name}">333h1>
能够把后端传过来的数据name
把333进行覆盖。
循环:
渲染列表数据是一种非常常见的场景,例如现在有 n 条记录需要渲染成一个表格 判断: 例如判断数据是否为空: 否者: 和python中的else是相同的。 一般我们在引入 当我们配置上述环境后,为了测试配置是否成功,则需要写一个后端程序来进行数据传送到前端页面。 即可以使用 例如: 上述代码则能把 例如: 未完待续,该数据集合必须是可以遍历的,使用
th:each
标签。
<tr th:each="user : ${session.name1}">
<td th:text="${user}">tyronetd>
tr>
3、th:if
<tr th:if="${messages.empty}">
<td >空td>
tr>
4、th:unless
<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
则能进行数据的取出即可。