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

news2024/11/18 20:43:10

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 用于处理本地化设置等

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【css】使用display:inline-block后，元素间存在4px的间隔

【css】使用display:inline-block后，元素间存在4px的间隔

问题&#xff1a;在本地项目中使用【display: inline-block】&#xff0c;元素间存在4px间隔。打包后发布到外网又不存在这个问题了。 归根结底这是一个西文排版的问题&#xff0c;英文有空格作为词分界&#xff0c;而中文则没有。 此时的元素具有文本属性&#xff0c;只要标签…
阅读更多...
RUST语言函数的定义与调用

RUST语言函数的定义与调用

1.定义函数 定义一个RUST函数使用fn关键字 函数定义语法: fn 函数名(参数名:参数类型,参数名:参数类型) -> 返回类型 { //函数体 } 定义一个没有参数,没有返回类型的参数 fn add() {println!("调用了add函数!"); } 定义有一个参数的函数 fn add(a:u32)…
阅读更多...
android framework 学习笔记（1）

android framework 学习笔记（1）

学习资料&#xff1a;《Android Framework 开发揭秘》_哔哩哔哩_bilibili 什么是android framework 看图说话&#xff0c;android框架从上至下分为&#xff1a; 应用层(Application)&#xff0c;Java framework(Application Framework),Native framework. 包括Libraries 和 A…
阅读更多...
vue弹出的添加信息组件中 el-radio 单选框无法点击问题

vue弹出的添加信息组件中 el-radio 单选框无法点击问题

情景描述:在弹出的添加信息的组件中的form中有一个单选框,单选框无法进行点击切换 原因如下: 单选框要求有个默认值,因为添加和更新操作复用同一个组件,所以我在初始化时对相关进行了判定,如果为空则赋初始值 结果这样虽然实现了初始值的展示,但是就是如此造成了单选框的无法切…
阅读更多...
电商技术揭秘一：电商架构设计与核心技术

电商技术揭秘一：电商架构设计与核心技术

文章目录 引言一、电商平台架构概述1.1 架构设计原则与架构类型选择1.2 传统电商平台架构与现代化架构趋势分析 二、高并发处理与负载均衡2.1 高并发访问特点分析与挑战2.2 负载均衡原理与算法选择 三、分布式数据库与缓存技术3.1 分布式数据库设计与一致性考量3.2 缓存策略与缓…
阅读更多...
（4）(4.6) Triducer

（4）(4.6) Triducer

文章目录 前言 1 安装triducer 2 故障排除 3 参数说明 前言 Triducer 集速度、温度和深度传感器于一体。埃文在这篇 ardupilot.org 博文底部提供了这些说明(Evan at the bottom of this ardupilot.org blog post)。 1 安装triducer 下面的示例提供了在 Pixhawk 上安装 tri…
阅读更多...
postgis 建立路径分析，使用arcmap处理路网数据，进行拓扑检查

postgis 建立路径分析，使用arcmap处理路网数据，进行拓扑检查

在postgresql+postgis上面，对路网进行打断化简，提高路径规划成功率。 一、创建空间库以及空间索引 CREATE EXTENSION postgis; CREATE EXTENSION pgrouting; CREATE EXTENSION postgis_topology; CREATE EXTENSION fuzzystrmatch; CREATE EXTENSION postgis_tiger_geocoder;…
阅读更多...
58商铺全新UI试客试用平台网站php源码

58商铺全新UI试客试用平台网站php源码

探索未来商铺新纪元&#xff0c;58商铺全新UI试客试用平台网站PHP源码完整版震撼来袭&#xff01; 在这个数字化飞速发展的时代&#xff0c;58商铺一直致力于为商家和消费者打造更加便捷、高效的交易平台。今天&#xff0c;我们荣幸地推出全新UI试客试用平台网站PHP源码完整版…
阅读更多...
springboot 项目整合easy-captcha验证码功能

springboot 项目整合easy-captcha验证码功能

效果 1、验证码使用easy-captcha,在pom文件增加依赖 <!-- google 验证码 --><dependency><groupId>com.github.whvcse</groupId><artifactId>easy-captcha</artifactId></dependency> 2、增加获取kaptcha的ctrl package com.*.*.s…
阅读更多...
pygame三角形重心坐标填充 沿x轴旋转

pygame三角形重心坐标填充 沿x轴旋转

import pygame from pygame.locals import * import sys import math# 初始化Pygame pygame.init()# 设置窗口大小 width, height 800, 600 screen pygame.display.set_mode((width, height)) pygame.display.set_caption(3D Triangle Fill with Barycentric Coordinates)# 定…
阅读更多...
LVS、HAProxy

LVS、HAProxy

集群&#xff1a;将很多个机器组织到一起&#xff0c;作为一个整体对外提供服务。集群在扩展性、性能方面都可以做到很灵活。集群的分类&#xff1a;负载均衡集群&#xff1a;Load Balance。高可用集群&#xff1a;High Available。高性能集群&#xff1a;High Performance Com…
阅读更多...
MyBatis的基本应用

MyBatis的基本应用

源码地址 01.MyBatis环境搭建 添加MyBatis的坐标 <!--mybatis坐标--><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.9</version></dependency><!--mysql驱动坐…
阅读更多...
【大模型】大模型 CPU 推理之 llama.cpp

【大模型】大模型 CPU 推理之 llama.cpp

【大模型】大模型 CPU 推理之 llama.cpp llama.cpp安装llama.cppMemory/Disk RequirementsQuantization测试推理下载模型测试 参考 llama.cpp 描述 The main goal of llama.cpp is to enable LLM inference with minimal setup and state-of-the-art performance on a wide var…
阅读更多...
开源模型应用落地-chatglm3-6b模型小试-入门篇（二）

开源模型应用落地-chatglm3-6b模型小试-入门篇（二）

一、前言 刚开始接触AI时&#xff0c;您可能会感到困惑&#xff0c;因为面对众多开源模型的选择&#xff0c;不知道应该选择哪个模型&#xff0c;也不知道如何调用最基本的模型。但是不用担心&#xff0c;我将陪伴您一起逐步入门&#xff0c;解决这些问题。 在信息时代&#xf…
阅读更多...
量化交易入门（四十一）ASI指标Python实现和回测

量化交易入门（四十一）ASI指标Python实现和回测

老规矩先上图&#xff0c;看看ASI指标使用苹果数据回测后的结果如何。 一、策略运行结果 执行的结果&#xff1a; Starting Portfolio Value: 100000.00 Final Portfolio Value: 92514.82 Annualized Return: -1.93% Sharpe Ratio: -0.27 Max Drawdown: 25.34% Max Drawdown …
阅读更多...
EasyBoss ERP支持TikTok Shop拆单发货功能，多店铺订单包裹拆分一个系统搞定

EasyBoss ERP支持TikTok Shop拆单发货功能，多店铺订单包裹拆分一个系统搞定

一些TikTok Shop本土卖家在运营过程中面临这样的困境&#xff1a;当顾客一次性订购多个商品&#xff0c;由于部分商品缺货或包裹超重&#xff0c;订单延迟发货或被物流限制发不出货&#xff0c;导致店铺被投诉。为了解决这一问题&#xff0c;卖家可以采取拆单发货的策略&#x…
阅读更多...
C#实现只保存2天的日志文件

C#实现只保存2天的日志文件

文章目录 业务需求代码运行效果 欢迎讨论&#xff01; 业务需求 在生产环境中&#xff0c;控制台窗口不便展示出来。 为了在生产环境中&#xff0c;完整记录控制台应用的输出&#xff0c;选择将其输出到文件中。 但是&#xff0c;存储所有输出的话会占用很多空间&#xff0c;…
阅读更多...
Vue项目之路由的高级用法

Vue项目之路由的高级用法

路由的高级用法 1.路由传参 1.1设置路由&#xff08;在路由中预留参数&#xff09; 组织路由地址的任意位置添加/:参数名&#xff0c;说明要访问这个路径就必须提供这个参数 此例中要想访问资格组件则必须提供对应的3个参数 /参数1/goods/参数2/参数3 注&#xff1a;在路由地…
阅读更多...
信息系统项目管理师——第18章项目绩效域管理（一）

信息系统项目管理师——第18章项目绩效域管理（一）

本章节内容属于第四版新增知识&#xff0c;为PMBOK第七版专有&#xff0c;选择、案例、论文都会考&#xff0c;属于比较重要的章节。 选择题&#xff0c;稳定考3分左右&#xff0c;新教材基本考课本原话&#xff0c;需要多读课本&#xff0c;多刷题。 案例题&#xff0c;考的概…
阅读更多...
【前端Vue】社交信息头条项目完整笔记第3篇：三、个人中心,TabBar 处理【附代码文档】

【前端Vue】社交信息头条项目完整笔记第3篇：三、个人中心,TabBar 处理【附代码文档】

社交媒体-信息头条项目完整开发笔记完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;一、项目初始化使用 Vue CLI 创建项目,加入 Git 版本管理,调整初始目录结构,导入图标素材,引入 Vant 组件库,移动端 REM 适配。二、登录注册准备,实现基本登录功能,登录状…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023