【学习笔记】 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


目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
2月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
84 1
|
17天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
28 3
|
25天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
1月前
|
前端开发 JavaScript API
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
71 3
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
27 2
|
2月前
|
前端开发 定位技术 API
二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom
文章介绍了如何在前端使用高德地图API渲染标记(Marker),并引入自定义图标,同时展示了如何手动设置地图的缩放级别。
237 1
|
3月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
58 13
|
3月前
|
JavaScript 算法 前端开发
"揭秘Vue.js的高效渲染秘诀:深度解析Diff算法如何让前端开发快人一步"
【8月更文挑战第20天】Vue.js是一款备受欢迎的前端框架,以其声明式的响应式数据绑定和组件化开发著称。在Vue中,Diff算法是核心之一,它高效计算虚拟DOM更新时所需的最小实际DOM变更,确保界面快速准确更新。算法通过比较新旧虚拟DOM树的同层级节点,递归检查子节点,并利用`key`属性优化列表更新。虽然存在局限性,如难以处理跨层级节点移动,但Diff算法仍是Vue高效更新机制的关键,帮助开发者构建高性能Web应用。
70 1
|
3月前
|
API Java 数据库连接
从平凡到卓越:Hibernate Criteria API 让你的数据库查询瞬间高大上,彻底告别复杂SQL!
【8月更文挑战第31天】构建复杂查询是数据库应用开发中的常见需求。Hibernate 的 Criteria API 以其强大和灵活的特点,允许开发者以面向对象的方式构建查询逻辑,同时具备 SQL 的表达力。本文将介绍 Criteria API 的基本用法并通过示例展示其实际应用。此 API 通过 API 构建查询条件而非直接编写查询语句,提高了代码的可读性和安全性。无论是简单的条件过滤还是复杂的分页和连接查询,Criteria API 均能胜任,有助于提升开发效率和应用的健壮性。
121 0