0
0

Spring Boot：Web开发之视图模板技术的整合

Spring Boot

在这里插入图片描述

前言

在 Web 开发中，视图模板技术（如 JSP 、FreeMarker 、Thymeleaf 等）用于呈现动态内容到用户界面的工具。这些技术允许开发者使用特定的标记和语法来定义页面布局和动态内容插入点，然后由后端框架（如 Spring Boot ）在运行时填充数据并生成最终的 HTML 页面。

  • **JSP ( JavaServer Pages )**：Java Web 开发中的一个经典视图模板技术。其允许开发者在 HTML 页面中嵌入 Java 代码片段，这些代码片段在服务器端执行并生成动态内容。JSP 文件通常以 .jsp 为后缀，并包含 JSP 标签、表达式和脚本片段。虽然 Spring Boot 更推荐使用 Thymeleaf 等模板引擎，但 JSP 仍然是一个可用的选项，特别是在与遗留系统或特定需求集成时在这里插入图片描述
  • FreeMarker：用 Java 语言编写的通用视图模板技术，不仅适用于 Web 开发，还可以用于生成任何文本输出。FreeMarker 模板文件通常以 .ftl 为后缀，并使用特定的 FreeMarker 语法来定义动态内容。其提供了一套丰富的模板指令和函数，使得开发者能够灵活地构建复杂的页面布局和逻辑在这里插入图片描述
  • Thymeleaf：现代的服务器端 Java 视图模板技术，特别适用于 Spring 框架，包括 Spring Boot 。其支持 HTML5 ，提供了丰富的标签库和表达式语言，使得开发者能够轻松地构建动态 Web 页面。Thymeleaf 的模板文件通常以 .html 为后缀，并嵌入特定的 Thymeleaf 属性和标签在这里插入图片描述

JSP 、FreeMarker 、Thymeleaf 都有各自的优点和适用场景。使用哪个视图模板技术可以根据项目的具体需求、开发者的熟悉程度以及与其他技术栈的集成需求来选择。在 Spring Boot 中，通常可以通过添加相应的 starter 依赖和配置来轻松地整合视图模板技术。下面简单介绍 Spring Boot 整合视图模板技术。

Spring Boot 整合 JSP

Spring Boot 默认并不推荐使用 JSP 作为视图模板技术。但还是可以在 Spring Boot 项目中整合 JSP 的，只不过需要一些额外的配置步骤。

简单示例：
首先，创建新项目 SpringBootIntegJSP ，并在 pom.xml 配置文件中添加以下依赖（ spring-boot.version 3.0.2 ）

<dependency><groupId>jakarta.servlet.jsp.jstl</groupId><artifactId>jakarta.servlet.jsp.jstl-api</artifactId></dependency><dependency><groupId>org.glassfish.web</groupId><artifactId>jakarta.servlet.jsp.jstl</artifactId></dependency><!-- https://mvnrepository.com/artifact/org.apache.tomcat.embed/tomcat-embed-jasper --><dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId><version>10.1.5</version></dependency>

然后，在 application.properties 全局配置文件中修改默认视图解析器的前缀和后缀

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

接着，创建相关目录，并指定 webapp 目录为 web 资源存储路径
在这里插入图片描述
在这里插入图片描述

随之，创建 Controller 包并在包内创建一个 JspDemoController 类

packagecn.edu.SpringBootIntegJSP.Controller;importorg.springframework.stereotype.Controller;importorg.springframework.ui.Model;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestMethod;@ControllerpublicclassJspDemoController{@RequestMapping(value ="/JspDemo",method =RequestMethod.GET)// 或者简写成 @GetMapping("/JspDemo")publicStringJspDemo(Model model){
        model.addAttribute("test","Spring Boot 整合 JSP");return"JspDemo";}}

再在 /webapp/WEB-INF/jsp 目录下创建 JspDemo.jsp

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2024/3/23
  Time: 1:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html><head><title>JSP</title></head><body>
    ID：${2024+3+23} <br>
    测试：${test}
</body></html>

最后，启动 Spring Boot ，打开浏览器输入 http://localhost:8080/JspDemo 并按下回车键进行测试
结果如图：
在这里插入图片描述

Spring Boot 整合 FreeMarker

Spring Boot 整合 FreeMarker 相对简单且直接。而对于 FreeMarker 详细的知识点需自行学习了解——FreeMarker 中文官方参考手册。

简单示例：
首先，创建新项目 SpringBootIntegFreeMarker

注：
在勾选启动器上勾选 Web 和 FreeMarker
在这里插入图片描述

然后，分别创建 Entity 包和 Controller 包，并对应在包内创建一个 FreeMarkerDemoEntity 类和 FreeMarkerDemoController 类

packagecn.edu.SpringBootIntegFreeMarker.Entity;publicclassFreeMarkerDemoEntity{privateint id;privateString name;privateString password;publicFreeMarkerDemoEntity(){}publicFreeMarkerDemoEntity(int id,String name,String password){this.id = id;this.name = name;this.password = password;}publicintgetId(){return id;}publicvoidsetId(int id){this.id = id;}publicStringgetName(){return name;}publicvoidsetName(String name){this.name = name;}publicStringgetPassword(){return password;}publicvoidsetPassword(String password){this.password = password;}@OverridepublicStringtoString(){return"FreeMarkerDemoEntity{"+"id="+ id +", name='"+ name +'\''+", password='"+ password +'\''+'}';}}

packagecn.edu.SpringBootIntegFreeMarker.Controller;importcn.edu.SpringBootIntegFreeMarker.Entity.FreeMarkerDemoEntity;importorg.springframework.stereotype.Controller;importorg.springframework.ui.Model;importorg.springframework.web.bind.annotation.GetMapping;importjava.util.ArrayList;importjava.util.List;@ControllerpublicclassFreeMarkerDemoController{@GetMapping("/FreeMarkerDemo.html")publicStringFreeMarkerDemo(Model model){List<FreeMarkerDemoEntity> freeMarkerDemoEntities =newArrayList<>();
        freeMarkerDemoEntities.add(newFreeMarkerDemoEntity(20240323,"曹操","cc"));
        freeMarkerDemoEntities.add(newFreeMarkerDemoEntity(20240324,"刘备","lb"));
        freeMarkerDemoEntities.add(newFreeMarkerDemoEntity(20240325,"孙权","sq"));
        model.addAttribute("freeMarkerDemoEntities",freeMarkerDemoEntities);return"FreeMarkerDemo";}}

接着，在 resources 目录下创建 templates 包并创建视图 FreeMarkerDemo.ftl

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>FreeMarker</title></head><body><#--#：声明使用FreeMarker标签；list标签：在FreeMarker语法中为循环遍历--><#listfreeMarkerDemoEntitiesasfreeMarkerDemoEntity>
        ID：${freeMarkerDemoEntity.id} 账号：${freeMarkerDemoEntity.name} 密码：${freeMarkerDemoEntity.password} <br></#list></body></html>

随之，在 application.properties 全局配置文件中指定 freemarker 的模板路径

spring.freemarker.template-loader-path=classpath:/templates/

最后，启动 Spring Boot ，打开浏览器输入 http://localhost:8080/FreeMarkerDemo.html 并按下回车键进行测试
结果如图：
在这里插入图片描述

Spring Boot 整合 Thymeleaf

Thymeleaf 中⽂参考⼿册.pdf

Spring Boot 官方推荐整合 Thymeleaf 作为视图模板技术。Thymeleaf 特别适用于 Web 和独立环境。其提供了完全的 Spring MVC 集成，并允许在 HTML 标签中直接使用表达式语言来动态地渲染页面内容。

简单示例：
首先，创建新项目 SpringBootIntegThymeleaf

注：
在勾选启动器上勾选 Web 和 Thymeleaf
在这里插入图片描述

然后，分别创建 Entity 包和 Controller 包，并对应在包内创建一个 ThymeleafDemoEntity 类和 ThymeleafDemoController 类

packagecn.edu.SpringBootIntegThymeleaf.Entity;publicclassThymeleafDemoEntity{privateint id;privateString name;privateString password;publicThymeleafDemoEntity(){}publicThymeleafDemoEntity(int id,String name,String password){this.id = id;this.name = name;this.password = password;}publicintgetId(){return id;}publicvoidsetId(int id){this.id = id;}publicStringgetName(){return name;}publicvoidsetName(String name){this.name = name;}publicStringgetPassword(){return password;}publicvoidsetPassword(String password){this.password = password;}@OverridepublicStringtoString(){return"ThymeleafDemoEntity{"+"id="+ id +", name='"+ name +'\''+", password='"+ password +'\''+'}';}}

packagecn.edu.SpringBootIntegThymeleaf.Controller;importcn.edu.SpringBootIntegThymeleaf.Entity.ThymeleafDemoEntity;importorg.springframework.stereotype.Controller;importorg.springframework.ui.Model;importorg.springframework.web.bind.annotation.GetMapping;importjava.util.ArrayList;importjava.util.List;@ControllerpublicclassThymeleafDemoController{@GetMapping("/ThymeleafDemo.html")publicStringFreeMarkerDemo(Model model){List<ThymeleafDemoEntity> thymeleafDemoEntities =newArrayList<>();
        thymeleafDemoEntities.add(newThymeleafDemoEntity(20240323,"曹操","cc"));
        thymeleafDemoEntities.add(newThymeleafDemoEntity(20240324,"刘备","lb"));
        thymeleafDemoEntities.add(newThymeleafDemoEntity(20240325,"孙权","sq"));
        model.addAttribute("thymeleafDemoEntities",thymeleafDemoEntities);return"ThymeleafDemo";}}

接着，在 resources 目录下创建 templates 包并创建视图 ThymeleafDemo.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Thymeleaf</title></head><body><divth:each="thymeleafDemoEntities,thymeleafDemoEntity:${thymeleafDemoEntities}"><spanth:text="${thymeleafDemoEntities.getId()}"/><spanth:text="${thymeleafDemoEntities.getName()}"/><spanth:text="${thymeleafDemoEntities.getPassword()}"/></div></body></html>

最后，启动 Spring Boot ，打开浏览器输入 http://localhost:8080/ThymeleafDemo.html 并按下回车键进行测试
结果如图：
在这里插入图片描述

Thymeleaf 常用语法

Thymeleaf 的常用标签语法总结：

  • 文本显示和替换 1.th:text：用于设置元素的文本内容，对特殊字符进行转义，不会对 HTML 标签进行解析，而是将其作为普通文本显示 2.th:utext：用于设置元素的文本内容，不会对特殊字符进行转义，对 HTML 标签进行解析并显示 HTML 标签的内容
  • 链接和引入资源 1.th:href：用于动态生成链接的 href 属性 2.th:src：用于动态引入图片、脚本等资源的 src 属性
  • 条件判断 1.th:if：单条件判断，条件成立时显示标签内容 2.th:unless：与 th:if 相反，条件不成立时显示标签内容
  • 循环遍历th:each：用于遍历集合，每次迭代生成一个标签的副本
  • 属性设置th:attr：用于设置标签的多个属性
  • 表单处理 1.th:action：用于设置表单的提交地址 2.th:value：用于设置表单元素的值
  • 内联JavaScriptth:inline="javascript"：用于在 JavaScript 代码中插入 Thymeleaf 表达式
  • 片段插入和替换th:insert 或 th:replace：用于插入或替换页面的片段
  • 选择变量表达式:(...)：用于根据条件选择不同的值
  • 注释 1.<!-- ... -->：标准的 HTML 注释，Thymeleaf 不会处理 2.<!--/* ... */-->：Thymeleaf 会处理并移除的注释，用于在开发时隐藏或临时移除某些代码

在 Thymeleaf 中，

#

符号经常用于表示 Thymeleaf 的内置对象或工具方法。这些内置对象提供了一系列的功能，包括处理字符串、执行日期和数字格式化、访问应用上下文、处理列表和集合等。

**使用 

#

符号的 Thymeleaf 内置对象的说明：**

  • 字符串处理 1.#{...}：用于消息国际化，获取资源文件中的字符串 2.#strings：提供了各种字符串处理的方法
  • 数字处理#numbers：提供了数字格式化的方法
  • 日期处理#dates：提供了日期格式化的方法
  • 列表处理#lists：提供了处理列表的方法，例如检查列表是否为空、获取列表大小等
  • 集合处理#sets：提供了处理集合的方法，例如检查集合是否包含某个元素
  • 选择变量# 还可以用于在 th:switch 和 th:case 中表示当前选择的值
  • 表达式工具#expr：提供了执行表达式的方法，虽然这在模板中通常不是必需的，但在某些高级用例中可能有用
  • 其他内置对象 还有其他一些内置对象，如 #ctx 用于访问应用上下文，#locales 用于处理本地化设置等
标签： Spring Boot 视图模板技术的整合 整合 JSP
本文转载自: https://blog.csdn.net/qq_56886142/article/details/136954249
版权归原作者 啊Q老师 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Spring Boot：Web开发之视图模板技术的整合”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航