JavaWeb『Thymeleaf』

原创 已于 2022-05-22 11:50:59 修改 · 1.2k 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #mvc #java #后端

于 2022-05-22 11:48:33 首次发布
本文详细介绍了JavaWeb中Thymeleaf的使用，包括MVC设计模式、Thymeleaf的优势、服务器端渲染与前后端分离的交互方式。接着深入讲解Thymeleaf的环境配置、基本语法，如表达式、URL解析、访问域对象、获取请求参数，以及分支和迭代。Thymeleaf作为SpringBoot推荐的视图模板技术，提供了一种高效且友好的方式来处理服务器端动态视图。

Thymeleaf基本用法

第一节 MVC

1、提出问题

我们对HTML的新的期待：既能够正常显示页面，又能在页面中包含动态数据部分。而动态数据单靠HTML本身是无法做到的，所以此时我们需要引入服务器端动态视图模板技术。

2、从三层结构到MVC

①MVC概念

M：Model模型

V：View视图

C：Controller控制器

MVC是在表述层开发中运用的一种设计理念。主张把封装数据的『模型』、显示用户界面的『视图』、协调调度的『控制器 分开。

好处：

  • 进一步实现各个组件之间的解耦
  • 让各个组件可以单独维护
  • 将视图分离出来以后，我们后端工程师和前端工程师的对接更方便

②MVC和三层架构之间关系

在这里插入图片描述

3、前后端工程师对接方式

  • 服务器端渲染：前端工程师把前端页面一整套做好交给后端工程师
  • 前后端分离：开会商量JSON格式，然后分头开发。在后端程序尚不可用时，前端工程师会使用Mock.js生成假数据使用，在后端程序可用后再连接实际后端程序获取真实数据。

①后端工程师与前端工程师交互

服务器端渲染

除了我们熟悉的JSP，还有Velocity、Freemarker、Thymeleaf等视图模板技术。虽然具体语法各不相同，但是它们都有一个共通的特点，就是在固定内容中可以穿插表达式等形式的动态内容。将视图模板中的动态内容转换为对应的Java代码并执行，然后使用计算得到的具体数据替换原来的动态部分。这样整个文件的动态内容就可以作为确定的响应结果返回给浏览器。在这种模式下，前端工程师将前端页面全部开发完成，交给后端程序员加入到项目中。此时不可避免的需要后端程序员根据需要对前端代码进行补充和调整。

在这里插入图片描述

②前后端分离

前后端分离模式下，前端程序和后端程序使用JSON格式进行交互，所以项目启动时前端工程和后端工程师需要坐在一起开会，商量确定JSON格式的具体细节。然后分头开发。后端工程师在把后端的代码发布到测试服务器前，前端工程师无法调用后端程序拿到真实数据，所以使用Mock.js生成假数据。直到后端工程师开发完成，后端程序发布到了测试服务器上，前端工程师再从Mock.js切换到实际后端代码。

③开发工程师与运维工程师交互

开发工程师有项目需要部署的时候，如果需要交给运维工程操作，那么除了要部署的项目本身，还要编写可以自动化部署项目的Shell脚本，一起交给运维工程师去部署项目。

另外还有一种情况，程序员开发具体模块时需要设计创建本模块的数据库表，本地建表调试确定后，把建表语句发送给运维工程师，在正式环境服务器上创建数据库表。因为正式服务器上通常是不给开发工程师操作权限的。

④开发工程师与产品经理交互

你以为完成组长交给的任务就可以轻松优雅的下班？图样图森破！产品经理会直接找到你，让你改需求！你90%的精力其实都用来忍住揍他的冲动。
在这里插入图片描述

⑤开发工程师与测试工程师

开发工程师将代码提交到版本控制服务器（SVN或Git的代码托管中心），然后根据版本控制服务器上的代码部署到测试服务器上，测试工程师访问测试服务器上的应用进行测试。发现Bug通过Bug管理软件通知开发工程师。
在这里插入图片描述

第二节 Thymeleaf简介

1、Thymeleaf的同行

JSP、Freemarker、Velocity等等，它们有一个共同的名字：服务器端模板技术。

3、Thymeleaf优势

  • SpringBoot官方推荐使用的视图模板技术，和SpringBoot完美整合。
  • 不经过服务器运算仍然可以直接查看原始值，对前端工程师更友好。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <p th:text="${hello}">Original Value</p>

</body>
</html>

4、物理视图和逻辑视图

①物理视图

在Servlet中，将请求转发到一个HTML页面文件时，使用的完整的转发路径就是物理视图。
在这里插入图片描述

/pages/user/login_success.html

如果把所有的HTML页面都放在某个统一的目录下，那么转发地址就会呈现出明显的规律：

/pages/user/login.html /pages/user/login_success.html /pages/user/regist.html /pages/user/regist_success.html

……

路径的开头都是：/pages/user/

路径的结尾都是：.html

所以，路径开头的部分我们称之为视图前缀，路径结尾的部分我们称之为视图后缀。

②逻辑视图

物理视图=视图前缀+逻辑视图+视图后缀

上面的例子中：

视图前缀 逻辑视图 视图后缀 物理视图
/pages/user/ login .html /pages/user/login.html
/pages/user/ login_success .html /pages/user/login_success.html

第三节 在服务器端引入Thymeleaf环境

1、加入jar包

在这里插入图片描述

这个jar包可放在web/WEB-INF目录下，也可根据自己需求放在Module外面

2、配置上下文参数

在这里插入图片描述
在这里插入图片描述

物理视图=视图前缀+逻辑视图+视图后缀

<!-- 在上下文参数中配置视图前缀和视图后缀 -->
<context-param>
    <param-name>view-prefix</param-name>
    <param-value>/WEB-INF/view/</param-value>
</context-param>
<context-param>
    <param-name>view-suffix</param-name>
    <param-value>.html</param-value>
</context-param>

说明：param-value中设置的前缀、后缀的值不是必须叫这个名字，可以根据实际情况和需求进行修改。

为什么要放在WEB-INF目录下？

原因：WEB-INF目录不允许浏览器直接访问，所以我们的视图模板文件放在这个目录下，是一种保护。以免外界可以随意访问视图模板文件。

访问WEB-INF目录下的页面，都必须通过Servlet转发过来，简单说就是：不经过Servlet访问不了。

这样就方便我们在Servlet中检查当前用户是否有权限访问。

那放在WEB-INF目录下之后，重定向进不去怎么办？

重定向到Servlet，再通过Servlet转发到WEB-INF下。

3、创建Servlet基类

这个类可以直接复制粘贴即可，将来使用框架后，这些代码都将被取代。

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templatemode.TemplateMode;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class ViewBaseServlet extends HttpServlet {
   
   

    private TemplateEngine templateEngine;

    @Override
    public void init() throws ServletException {
   
   

        // 1.获取ServletContext对象
        ServletContext servletContext = this.getServletContext();

        // 2.创建Thymeleaf解析器对象
        ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(servletContext);

        // 3.给解析器对象设置参数
        // ①HTML是默认模式，明确设置是为了代码更容易理解
        templateResolver.setTemplateMode(TemplateMode.HTML);

        // ②设置前缀
        String viewPrefix = servletContext.getInitParameter("view-prefix");

        templateResolver.setPrefix(viewPrefix);

        // ③设置后缀
        String viewSuffix = servletContext.getInitParameter("view-suffix");

        templateResolver.setSuffix(viewSuffix);

        // ④设置缓存过期时间（毫秒）
        templateResolver.setCacheTTLMs(60000L);

        // ⑤设置是否缓存
        templateResolver.setCacheable(true);

        // ⑥设置服务器端编码方式
        templateResolver.setCharacterEncoding("utf-8");

        // 4.创建模板引擎对象
        templateEngine = new TemplateEngine();

        // 5.给模板引擎对象设置模板解析器
        template
最低0.47元/天 解锁文章

200万优质内容无限畅学
Java Thymeleaf 入门：从“Hello, Thymeleaf!”到深入探索
java专栏
10-25 672
Thymeleaf 支持自定义处理器。@Dialect// ...通过这个简单的示例，你已经学会了如何使用 Thymeleaf 创建一个基本的 HTML 页面，并了解了 Thymeleaf 的一些核心特性。Thymeleaf 的强大之处在于其灵活性和强大的功能集。希望这篇文章能够帮助你入门 Thymeleaf。记得实践是最好的老师，动手试试吧！如果遇到任何问题，欢迎随时提问。😉以上就是 Thymeleaf 的基础入门教程，祝你学习愉快！🌟。
新一代Java模板引擎Thymeleaf
04-02 363
Thymeleaf是一款可以与Spring MVC等Web框架进行集成Web应用模板引擎，其最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。
Java研学-Thymeleaf
zhlyxx的博客
03-20 784
Thymeleaf是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。在Spring 官方支持模板引擎中，并不包含 JSP，而是 Thymeleaf 和 FreeMarker 等，Thymeleaf 与 Spring Boot 的自动化配置集成适配度很高，几乎没有任何成本，只关注 Thymeleaf 的语法即可。Thymeleaf的原理就是：模板 + 数据模型 = 输出，模板只负责数据在页面中的表现，不涉及任何的逻辑代码，而所有的逻辑都是由数据模型来处理的。
JavaWeb Thymeleaf的介绍和使用
Bulut0907
12-16 853
从web.xml获取参数，构建真实的物理视图，再一边请求该物理视图的URL，一边从session中获取数据，将获取的数据渲染到页面上，返回给GET请求的页面。对GET请求进行拦截，将数据保存到session中，然后调用processTemplate方法，让Thymeleaf进行处理。启动tomcat，然后访问http://localhost:8080/javaWebTest/index。用来做视图渲染(render)，在静态的的html页面上，对保存在servlet中的Attribute进行加载。
Thymeleaf高级特性与工具对象详解
最新发布
BUG糕手的博客
07-18 670
本文深入解析Thymeleaf高级特性，帮助开发者从基础使用提升到精通水平。主要内容包括：1）模板布局与片段复用技术，通过th:fragment定义可复用组件，结合Layout Dialect实现母版页继承；2）动态渲染能力，包括复杂条件判断（th:if/th:switch）和带状态变量的循环遍历（th:each）；3）表达式高级应用，如选择表达式（*{}）简化对象属性访问。这些特性可显著提升代码复用率和模板灵活性，使Thymeleaf在Spring Boot项目中发挥更大价值。
JavaWeb：（八）Thymeleaf
sd_960614的博客
06-28 1099
Thymeleaf
基于javaweb的共享自习室管理系统(java+springboot+thymeleaf+html+mysql)
m0_74536431的博客
10-26 1024
基于javaweb的共享自习室管理系统(java+springboot+thymeleaf+html+mysql) 运行环境 Java≥8、MySQL≥5.7 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计，大作业，毕业设计，项目练习，学习演示等 功能说明
javaWEB使用thymeleaf
09-27
Thymeleaf是一个用于构建Java Web应用程序的模板引擎。它允许开发人员在HTML模板中使用表达式来动态地生成HTML页面。在Thymeleaf页面中，可以使用th命名空间来引用Thymeleaf相关的属性和方法。通过声明th命名空间，...
Javaweb案例学习 - thymeleaf
a_small_angel的博客
07-08 820
thymeleaf 通过案例进行学习、jsp 的替换技术、数据库、MySQL
Thymeleaf（Java模板引擎）
weixin_30387799的博客
07-28 1003
一、概念 1、Thymeleaf是Web和独立环境的开源的Java模板引擎，能够处理HTML，XML，JavaScript，CSS甚至纯文本；2、Thymeleaf可以在Web（基于Servlet）和非Web环境中工作，它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5 ，但它甚至可以在脱机环境中处理任何XML文件。它提供完整的Spring Framework集成3、在W...
maven-page002
weixin_44235759的博客
04-29 303
ViewBaseServlet 完整代码 public class ViewBaseServlet extends HttpServlet { private TemplateEngine templateEngine; @Override public void init() throws ServletException { // 1.获取ServletContext对象 ServletContext servletContext = thi
Thymeleaf学习总结（1）——新一代Java模板引擎Thymeleaf
科技D人生
05-09 3540
Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP，Velocity，FreeMaker等，它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比，Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。 Thymeleaf初探 相比于其他的模板引擎，Thymelea
Javaweb-thymeleaf
m0_46570170的博客
04-10 476
thymeleaf的部分标签 1） 使用步骤： 添加jar ， 新建ViewBaseServlet(有两个方法） ， 配置两个<context-param> : view-prefix , view-suffix 2） 部分标签： <th:if> , <th:unless> , <th:each> , <th:text> 添加jar包 新建ViewBaseServlet package com.cong.controll...
Thymeleaf(Java学习笔记）
m0_59803718的博客
04-12 1241
Spring boot 整合thymeleaf以及thymeleaf的详细语法。
Java模板引擎之Thymeleaf
清欢
07-16 2457
Thymeleaf简介 Thymeleaf是一种用于Web和独立环境的现代服务器端的Java模板引擎。 Thymeleaf的主要目标是将优雅的自然模板带到开发工作流程中，并将HTML在浏览器中正确显示，并且可以作为静态原型，让开发团队能更容易地协作。Thymeleaf能够处理HTML，XML，JavaScript，CSS甚至纯文本。 Thymeleaf使用Spring框架的模块，与许多常见的...
JAVA - Thymeleaf
热门推荐
xiabiao1974的博客
07-27 1万+
spring 集成了 Thymeleaf 模板引擎，本文对此作些许介绍 方言 Thymeleaf 提供了灵活接口，允许使用方定制自己的方言。因此在自定义方言之前，有必要先了解标准方言。 标准表达式 ${…} : 变量表达式. *{…} : 区域选择表达式. #{…} : 消息国际化表达式. @{…} : 链接表达式. ~{…} : 代码段表达式. Variable 变量表达式通常是 OGNL ${session.user.name} Thymeleaf 等价 SpringEL 或 OGNL ((Book)
【JavaWeb】模板引擎Thymeleaf
X_H学Java的博客
09-19 2445
本文介绍了模板引擎Thymeleaf的使用，使用模板引擎可以将HTML代码和Java代码分开，更利于我们开发，还介绍了如何使用监听器创建一个引擎实例
java页面模板_thymeleaf - java web页面模板引擎介绍（上篇）
weixin_34467247的博客
02-12 1269
一、什么是模板引擎相对html+js的传统设计，现在很多网站都采用div&css+标签化+模块化的设计。模板引擎根据一定的语义，将数据填充到模板中，产生最终的HTML页面模板引擎。主要分两种，客户端引擎和服务端引擎。客户端渲染：模板和数据分别传送到客户端，在客户端由JavaScript模板引擎渲染出最终的HTML视图。将模板渲染放置在客户端做，可以降低服务端的压力，并且如果前端内容分别来自...
Java：thymeleaf模板引擎
彭世瑜的博客
12-04 1143
1、thymeleaf模板引入 通用的底部footer.html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <footer th:fragment="common"> <!--底部内容--> </footer> </html> index.html引入 <!-- include只是加载 --> <div th:i
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不会敲代码的z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值