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

Spring Boot

  • 前言
  • Spring Boot 整合 JSP
  • Spring Boot 整合 FreeMarker
  • Spring Boot 整合 Thymeleaf
    • Thymeleaf 常用语法

在这里插入图片描述

前言

在 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 类

package cn.edu.SpringBootIntegJSP.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class JspDemoController {
    @RequestMapping(value = "/JspDemo",method = RequestMethod.GET) // 或者简写成 @GetMapping("/JspDemo")
    public String JspDemo(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 类

package cn.edu.SpringBootIntegFreeMarker.Entity;

public class FreeMarkerDemoEntity {
    private int id;
    private String name;
    private String password;

    public FreeMarkerDemoEntity() {
    }

    public FreeMarkerDemoEntity(int id, String name, String password) {
        this.id = id;
        this.name = name;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "FreeMarkerDemoEntity{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

package cn.edu.SpringBootIntegFreeMarker.Controller;

import cn.edu.SpringBootIntegFreeMarker.Entity.FreeMarkerDemoEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class FreeMarkerDemoController {
    @GetMapping("/FreeMarkerDemo.html")
    public String FreeMarkerDemo(Model model){
        List<FreeMarkerDemoEntity> freeMarkerDemoEntities = new ArrayList<>();
        freeMarkerDemoEntities.add(new FreeMarkerDemoEntity(20240323,"曹操","cc"));
        freeMarkerDemoEntities.add(new FreeMarkerDemoEntity(20240324,"刘备","lb"));
        freeMarkerDemoEntities.add(new FreeMarkerDemoEntity(20240325,"孙权","sq"));
        model.addAttribute("freeMarkerDemoEntities",freeMarkerDemoEntities);
        return "FreeMarkerDemo";
    }
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker</title>
</head>
<body>
    <#-- # ：声明使用 FreeMarker 标签；list 标签：在 FreeMarker 语法中为循环遍历 -->
    <#list freeMarkerDemoEntities as freeMarkerDemoEntity >
        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 类

package cn.edu.SpringBootIntegThymeleaf.Entity;

public class ThymeleafDemoEntity {
    private int id;
    private String name;
    private String password;

    public ThymeleafDemoEntity() {
    }

    public ThymeleafDemoEntity(int id, String name, String password) {
        this.id = id;
        this.name = name;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "ThymeleafDemoEntity{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

package cn.edu.SpringBootIntegThymeleaf.Controller;

import cn.edu.SpringBootIntegThymeleaf.Entity.ThymeleafDemoEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafDemoController {
    @GetMapping("/ThymeleafDemo.html")
    public String FreeMarkerDemo(Model model){
        List<ThymeleafDemoEntity> thymeleafDemoEntities = new ArrayList<>();
        thymeleafDemoEntities.add(new ThymeleafDemoEntity(20240323,"曹操","cc"));
        thymeleafDemoEntities.add(new ThymeleafDemoEntity(20240324,"刘备","lb"));
        thymeleafDemoEntities.add(new ThymeleafDemoEntity(20240325,"孙权","sq"));
        model.addAttribute("thymeleafDemoEntities",thymeleafDemoEntities);
        return "ThymeleafDemo";
    }
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf</title>
</head>
<body>
    <div th:each="thymeleafDemoEntities,thymeleafDemoEntity:${thymeleafDemoEntities}">
        <span th:text="${thymeleafDemoEntities.getId()}" />
        <span th:text="${thymeleafDemoEntities.getName()}" />
        <span th: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：用于设置表单元素的值

  • 内联JavaScript
    th: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 用于处理本地化设置等

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/515306.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

CSS设置网页背景

CSS设置网页背景

目录 概述&#xff1a; 1.background-color: 2.background-image&#xff1a; 3.background-repeat&#xff1a; 4.background-position&#xff1a; 5.background-attachment&#xff1a; 6.background-size&#xff1a; 7.background-origin&#xff1a; 8.background-…
阅读更多...
SAP_MM模块-无价值物料管理实现思路

SAP_MM模块-无价值物料管理实现思路

无价值物料管理实现思路 业务背景一&#xff1a; 对于工具类的物料&#xff0c;本来想通过无物料号&#xff0c;收货时直接消耗在成本中心的方式来处理&#xff0c;这样&#xff0c;工程部和采购部都比较方便。 但财务部提出这部分工具物料还需要进行库存管理&#xff0c;但…
阅读更多...
【Python异常处理】

【Python异常处理】

在Python无法正常处理程序时就会发生异常&#xff0c;此时我们需要捕捉并处理它&#xff0c;否则程序就会终止执行。 例如&#xff1a; x 1 / 0 print(x)运行结果&#xff1a; ZeroDivisionError: division by zero #此时程序终止执行Python提供了三个非常重要的功能来处理…
阅读更多...
ubuntu20.04下搜狗输入法的安装

ubuntu20.04下搜狗输入法的安装

1、安装 fcitx 输入法的框架 sudo apt install fcitx-bin sudo apt-get install fcitx-table 2、Ubuntu下的默认浏览器火狐搜索 搜狗输入法 搜狗输入法linux-首页 &#xff08;下载x86_64) 3、安装依赖 sudo apt install libqt5qml5 libqt5quick5 libqt5quickwidgets5 qml-modu…
阅读更多...
【漏洞复现】万户 ezOFFICE wf_printnum SQL注入漏洞

【漏洞复现】万户 ezOFFICE wf_printnum SQL注入漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…
阅读更多...
【学习心得】Numpy学习指南或复习手册

【学习心得】Numpy学习指南或复习手册

本文是自己在学习Numpy过后总是遗忘的很快&#xff0c;反思后发现主要是两个原因&#xff1a; numpy的知识点很多&#xff0c;很杂乱。练习不足&#xff0c;学习过后一段时间不敲代码就会忘记。 针对这两个问题&#xff0c;我写了这篇文章。希望将numpy的知识点织成一张网&…
阅读更多...
JavaScript高级应用

JavaScript高级应用

学习作用域、变量提升、闭包等语言特征&#xff0c;加深对 JavaScript 的理解&#xff0c;掌握变量赋值、函数声明的简洁语法&#xff0c;降低代码的冗余度。 理解作用域对程序执行的影响 能够分析程序执行的作用域范围 理解闭包本质&#xff0c;利用闭包创建隔离作用域 了解…
阅读更多...
面试总结------2024/04/04

面试总结------2024/04/04

1.面试官提问&#xff1a;你说你在项目中使用springsecurity jwt 实现了登录功能&#xff0c;能简单讲一下怎么实现的吗&#xff1f; 2.使用RabbitMQ实现订单超时取消功能 订单状态定义 首先&#xff0c;我们需要定义订单的不同状态。在这个示例中&#xff0c;我们可以定义以下…
阅读更多...
[COCI 2011/2012 #5] EKO / 砍树 （二分）不开龙永远的痛！

[COCI 2011/2012 #5] EKO / 砍树 （二分）不开龙永远的痛！

不开龙long永远的痛&#xff01; 不开龙long永远的痛&#xff01; 不开龙long永远的痛&#xff01; 不开龙long永远的痛&#xff01; 不开龙long永远的痛&#xff01; //应该以最高的树为基准二分 初次尝试&#xff1a; #include<algorithm> #include<iostream&g…
阅读更多...
图的深度优先遍历DFS得到各节点的度

图的深度优先遍历DFS得到各节点的度

在 一文中&#xff0c;我们通过了广度优先搜索来得到图结构中各结点的度&#xff0c;在这一篇文章中&#xff0c;我们要通过深度优先搜索来得到图结构中各结点的度。 初始化 初始化&#xff0c;在下面的代码中&#xff0c;我们创建了一个具有6个结点的图结构&#xff0c;以及…
阅读更多...
YOLO电动车检测识别数据集：12617张图像，yolo标注完整

YOLO电动车检测识别数据集：12617张图像，yolo标注完整

YOLO电动车检测识别数据集&#xff1a;12617张图像&#xff0c;电动车一类&#xff0c;yolo标注完整&#xff0c;部分图像应用增强。 适用于CV项目&#xff0c;毕设&#xff0c;科研&#xff0c;实验等 需要此数据集或其他任何数据集请私信
阅读更多...
【调度工具】Azkaban用户手册

【调度工具】Azkaban用户手册

目录 一、概述 1.1 Azkaban 是什么 1.2 Azkaban 特点 1.3 Azkaban 与 Oozie 对比 功能 工作流定义 工作流传参 定时执行 资源管理 工作流执行 工作流管理 1.4 Azkaban 运行模式及架构 Azkaban 三大核心组件 Azkaban有两种部署方式 Azkaban Web Server Azkaban …
阅读更多...
简约轻量-失信录系统源码

简约轻量-失信录系统源码

失信录系统-最新骗子收录查询系统源码 首页查询&#xff1a; 举报收录页&#xff1a; 后台管理页&#xff1a; 失信录系统 V1.0.0 更新内容&#xff1a; 1.用户查询,举报功能 2.界面独立开发 3.拥有后台管理功能 4.xss,sql安全过滤 5.平台用户查询 6.用户中心&#xff08;待完…
阅读更多...
IO流：字节流、字符流、缓冲流、转换流、数据流、序列化流 --Java学习笔记

IO流：字节流、字符流、缓冲流、转换流、数据流、序列化流 --Java学习笔记

目录 IO流 IO流的分类 IO流的体系 字节流&#xff1a; 1、Filelnputstream(文件字节输入流) 2、FileOutputStream(文件字节输出流) 字节流非常适合做一切文件的复制操作 复制案例&#xff1a; try-catch-finally 和 try-with-resource 字符流 1、FileReader(文件字符…
阅读更多...
JimuReport 积木报表

JimuReport 积木报表

一款免费的数据可视化报表&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于 excel 操作风格&#xff0c;通过拖拽完成报表设计…
阅读更多...
C#学生信息管理系统

C#学生信息管理系统

一、引言 学生信息管理系统是现代学校管理的重要组成部分&#xff0c;它能够有效地管理学生的基本信息、课程信息、成绩信息等&#xff0c;提高学校管理的效率和质量。本文将介绍如何使用SQL Server数据库和C#语言在.NET平台上开发一个学生信息管理系统的课程设计项目。 二、项…
阅读更多...
前端学习＜四＞JavaScript基础——02-JavaScript入门：hello world

前端学习＜四＞JavaScript基础——02-JavaScript入门：hello world

开始写第一行 JavaScript&#xff1a;hello world JS 代码的书写位置在哪里呢&#xff1f;这个问题&#xff0c;也可以理解成&#xff1a;引入 JS 代码&#xff0c;有哪几种方式&#xff1f;有三种方式&#xff1a;&#xff08;和 CSS 的引入方式类似&#xff09; 行内式&…
阅读更多...
msyql 查看和修改字符集的方法

msyql 查看和修改字符集的方法

在插入或修改数据的时候&#xff0c;报字符集的错误&#xff0c;中文的无法进行插入修改。比如&#xff1a; update users set user_name关羽 where user_id2; 报错信息&#xff1a; ERROR 1366 (HY000): Incorrect string value: /xB9/xD8/xD3/xF0 for column user_name at …
阅读更多...
2024年学浪视频下载器

2024年学浪视频下载器

学浪视频官方没有提供下载选项&#xff0c;但又有很多人需要学浪视频下载器&#xff0c;于是我就开发了这么一款软件&#xff0c;学浪视频下载器:小浪助手.exe 我把学浪下载器打包成压缩包&#xff0c;有需要的自己取一下 链接&#xff1a;https://pan.baidu.com/s/1y7vcqILT…
阅读更多...
Google Chrome 常用设置

Google Chrome 常用设置

Google Chrome 常用设置 References 转至网页顶部 快捷键&#xff1a;Home 转至内容设置 chrome://settings/content 清除浏览数据 历史记录 -> 清除浏览数据 关于 Chrome 设置 -> 关于 Chrome chrome://settings/help References [1] Yongqiang Cheng, https:/…
阅读更多...
最新文章

Copyright @ 2022~2023