【学习笔记】 Thymeleaf的前端渲染(价值50)

简介: 【学习笔记】 Thymeleaf的前端渲染(价值50)

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....。

image.png





jar的下载地址:


链接:https://pan.baidu.com/s/1aAu3JD2WqAwGhWZCmoDjLA

提取码:kptf(失效了找我)


2、应用Thymeleaf

按照步骤慢慢的打开。Project Structure —》 Modules —》如果已经有了Thymeleaf的话直接点击apply和ok,如果没有的话则需要点加号进行添加,然后再重复apply和OK。


image.png

3、Thymeleaf插件的下载和使用

打开下载插件的地方,然后直接搜索Thymeleaf即可,然后下载安装。


image.png


确定安装完毕后,我们打开一个HTML文件,然后点击鼠标右键。目录中就有我们已经下载完毕的插件JBLHtmlToThmeleaf,我们只需点击即可。

image.png



点击后我们的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则能进行数据的取出即可。


例如:

image.png


相关文章
|
4月前
|
前端开发
914.【前端】Taro集成towxml渲染markdown文档
914.【前端】Taro集成towxml渲染markdown文档
333 2
|
4月前
|
SQL 前端开发 程序员
【面试题】前端开发中如何高效渲染大数据量?
【面试题】前端开发中如何高效渲染大数据量?
110 0
|
1月前
|
JavaScript 算法 前端开发
"揭秘Vue.js的高效渲染秘诀:深度解析Diff算法如何让前端开发快人一步"
【8月更文挑战第20天】Vue.js是一款备受欢迎的前端框架,以其声明式的响应式数据绑定和组件化开发著称。在Vue中,Diff算法是核心之一,它高效计算虚拟DOM更新时所需的最小实际DOM变更,确保界面快速准确更新。算法通过比较新旧虚拟DOM树的同层级节点,递归检查子节点,并利用`key`属性优化列表更新。虽然存在局限性,如难以处理跨层级节点移动,但Diff算法仍是Vue高效更新机制的关键,帮助开发者构建高性能Web应用。
40 1
|
1月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
46 13
|
30天前
|
前端开发 JavaScript 机器人
中后台前端开发问题之动态标注组件渲染到界面上如何解决
中后台前端开发问题之动态标注组件渲染到界面上如何解决
25 0
|
1月前
|
缓存 前端开发 JavaScript
优化前端性能:从渲染到加载的全方位策略
前端性能优化是提升用户体验的关键因素。本文探讨了从浏览器渲染到资源加载的各个方面,介绍了使用现代工具和技术的策略,包括减少关键渲染路径、优化资源加载和利用缓存。通过实施这些策略,可以显著提高页面响应速度,减少加载时间,提供更流畅的用户体验。
|
2月前
|
前端开发 JavaScript
Vue前端渲染blob二进制对象图片的方法
Vue前端渲染blob二进制对象图片的方法
168 0
|
2月前
|
JavaScript 前端开发
【vue】 接口返回的preview是张图片,前端如何渲染
【vue】 接口返回的preview是张图片,前端如何渲染
114 0
|
3月前
|
缓存 前端开发 JavaScript
前端性能优化:从加载到渲染的全方位探索
【6月更文挑战第11天】本文探讨了前端性能优化,重点关注加载速度和渲染效率。压缩与优化资源文件、利用CDN、异步加载和懒加载可提升加载速度。减少DOM操作、合理利用CSS和JavaScript、优化JavaScript执行效率以及利用浏览器缓存能提高渲染效率。通过综合运用这些策略,可提升用户体验。
|
4月前
|
JavaScript 前端开发
TypeScript 学习笔记(六):TypeScript 与前端框架的结合应用
笔记,进一步提升 TypeScript 编程技能。
57 1