静态页面 和 动态页面(Java Web开发)

1. 静态页面

1.1 什么是静态页面?

  • 静态页面是指 HTML 文件直接存放在服务器上,不依赖后端逻辑处理而生成内容
  • 客户端浏览器请求静态页面时,服务器直接将文件发送到客户端,浏览器负责渲染页面。

特点:

  • 固定内容:页面内容不随用户或请求动态改变。
  • 无需后端处理:页面资源直接通过文件路径加载,Spring Boot 不需要进行映射。
  • 快速响应:由于不需要后端参与逻辑处理,响应速度更快。
  • 适用于简单页面:如关于页面、公司简介、帮助文档等。

1.2 Spring Boot 中的静态页面处理

默认静态资源目录

Spring Boot 默认会从以下目录加载静态资源:

  • src/main/resources/static

  • src/main/resources/public

这些目录中的文件可以直接通过浏览器访问。

目录示例

src/main/resources/static
├── index.html
├── about.html
├── css/
│   └── styles.css
├── js/
│   └── scripts.js
└── images/└── logo.png

访问方式

浏览器访问 URL 时,URL 路径直接映射到 static 目录中的文件。

如果 about.html 位于 static 目录中,则可以通过以下方式访问:

http://localhost:8080/about.html

静态 HTML 示例

文件路径:src/main/resources/static/about.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>About Us</title><!-- 引入 CSS 文件 --><link rel="stylesheet" href="/css/styles.css">
</head>
<body><h1>Welcome to Our Company</h1><p>This is the about page.</p><!-- 引入 JS 文件 --><script src="/js/scripts.js"></script>
</body>
</html>

1.3 静态页面中的 CSS 和 JS 文件

CSS 引用

  • CSS 文件可以存放在 static/css 目录中。
  • 通过 <link> 标签引用:
    <link rel="stylesheet" href="/css/styles.css">
    

JavaScript 引用

  • JS 文件可以存放在 static/js 目录中。
  • 通过 <script> 标签引用:
    <script src="/js/scripts.js"></script>
    

2. 动态页面

2.1 什么是动态页面?

  • 动态页面是由 后端逻辑根据用户请求动态生成的 HTML 页面
  • 页面内容可以根据用户、时间、系统状态等进行动态变化。

特点:

  • 内容动态生成:后端根据业务逻辑提供数据,结合模板生成 HTML。
  • 需要后端参与:通过 Controller 接收请求,调用业务逻辑,返回生成的页面。
  • 依赖模板引擎:如 Thymeleaf、FreeMarker 等,用于将数据填充到 HTML 模板中。
  • 适用于复杂业务场景:如用户个人主页、购物车页面、动态报表等。

2.2 Spring Boot 中的动态页面处理

默认模板目录

Spring Boot 默认将模板文件存放在 src/main/resources/templates 目录中。

目录示例

src/main/resources/templates
├── index.html
├── user/
│   └── profile.html

Controller 映射逻辑

动态页面通过 Spring MVC 的 Controller 处理请求,并返回模板名称。

Controller 示例代码:

@Controller
public class PageController {// 主页映射@GetMapping("/")public String homePage(Model model) {model.addAttribute("title", "Welcome to My Website");return "index"; // 渲染 templates/index.html}// 用户信息页映射@GetMapping("/user/profile")public String userProfile(Model model) {model.addAttribute("username", "John Doe");model.addAttribute("email", "john.doe@example.com");return "user/profile"; // 渲染 templates/user/profile.html}
}

动态模板文件示例

模板文件:src/main/resources/templates/index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title th:text="${title}">Default Title</title>
</head>
<body><h1 th:text="${title}">Welcome Page</h1><p>This is the homepage.</p>
</body>
</html>

模板文件:src/main/resources/templates/user/profile.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>User Profile</title>
</head>
<body><h1>User Profile</h1><p>Username: <span th:text="${username}"></span></p><p>Email: <span th:text="${email}"></span></p>
</body>
</html>

访问流程

  1. 用户访问 http://localhost:8080/,请求被映射到 PageController 的 homePage() 方法。

  2. 方法返回模板名称 index

  3. Spring 使用模板引擎渲染 index.html,将数据填充到页面中。

  4. 最终生成的 HTML 页面发送到浏览器。


2.3 动态页面中的 CSS 和 JS 文件

Thymeleaf 的动态路径解析

  • th:href:用于动态解析 CSS 文件路径。
  • th:src:用于动态解析 JS 文件路径。
  • 这些路径可以根据项目上下文或环境动态调整。

示例:动态加载静态资源

<link rel="stylesheet" th:href="@{/css/styles.css}">
<script th:src="@{/js/scripts.js}"></script>

3. 静态页面与动态页面的对比

特性静态页面动态页面
存放位置src/main/resources/static 或 publicsrc/main/resources/templates
访问方式URL 直接指向文件名(如 /about.html)。URL 映射到 Controller 方法,由模板引擎生成 HTML。
内容是否固定内容固定,所有用户访问到的页面相同。内容动态生成,根据请求、用户或业务逻辑返回不同的页面。
是否依赖后端不依赖,直接返回文件。必须依赖后端逻辑,结合模板引擎生成页面。
CSS/JS 引用通过标准 HTML 标签(<link> 和 <script>)引用。使用 Thymeleaf 的 th:href 和 th:src 动态解析路径,适配环境和上下文路径。
典型用途- 静态资源(CSS/JS 文件)。
- 公共页面(如帮助文档)。
- 用户个性化页面(如个人中心)。
- 动态报表、购物车页面等。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot优雅读取配置信息 @EnableConfigurationProperties

很多时候我们需要将一些常用的配置信息比如oss等相关配置信息放到配置文件中。常用的有以下几种&#xff0c;相信大家比较熟悉&#xff1a; 1、Value(“${property}”) 读取比较简单的配置信息&#xff1a; 2、ConfigurationProperties(prefix “property”)读取配置信息并与 …

贴片电阻(片式厚膜电阻)生产工艺流程

贴片电阻&#xff08;片式厚膜电阻&#xff09;生产工艺流程 1.基体处理--->印刷电极--->电极烧结2.电阻体印刷--->电阻体烧结3.一次玻璃印刷--->一次玻璃烧结4.激光调阻5.二次玻璃印刷--->二次玻璃烧结6.字码印刷--->字码烧结7.折条8.端电极涂覆9.折粒10.电…

系统思考—结构影响行为

看到这张图&#xff0c;我不禁在思考&#xff1a; 动机和纪律有什么区别&#xff1f; 它们背后隐藏的系统结构是什么&#xff1f; 结构如何影响我们的行为&#xff1f; 更重要的是&#xff0c;我们能如何设计一个系统结构&#xff0c;引导自己走向Discipline的趋势?

transformers bert-base-uncased情感分析

一、使用huggingface中的预训练模型&#xff0c;先要安装transformers、torch和SentencePiece pip install transformers pip install torch pip install SentencePiece 手动下载&#xff1a;https://huggingface.co/google-bert/bert-base-uncased/tree/main 添加以目录&…

Android笔记(三十四):封装带省略号图标结尾的TextView

背景 项目需求需要实现在文本末尾显示一个icon&#xff0c;如果文本很长时则在省略号后面显示icon&#xff0c;使用TextView自带的drawableEnd可以实现&#xff0c;但是如果文本换行了则会显示在TextView垂直居中的位置&#xff0c;不满足要求&#xff0c;于是有了本篇的自定义…

Web开发基础学习——通过React示例学习模态对话框

Web开发基础学习系列文章目录 第一章 基础知识学习之通过React组件学习模态对话框 文章目录 Web开发基础学习系列文章目录前言一、创建新的 React 应用二、 创建模态对话框组件三、修改 App.js四、 添加样式五、启动应用六、访问应用总结 前言 模态对话框&#xff08;Modal D…

PDF view | Chrome PDF Viewer |Chromium PDF Viewer等指纹修改

1、打开https://www.browserscan.net/zh/ 2、将internal-pdf-viewer改为 internal-pdf-viewer-jdtest看下效果&#xff1a; 3、源码修改&#xff1a; third_party\blink\renderer\modules\plugins\dom_plugin_array.cc namespace { DOMPlugin* MakeFakePlugin(String plugin_…

`console.log`调试完全指南

大家好&#xff0c;这里是 Geek技术前线。 今天我们来探讨 Console.log() 的一些优点。并分析一些基本概念和实践&#xff0c;这些可以让我们的调试工作变得更加高效。 理解前端 log 与后端 log 的区别 前端 log 与后端 log 有着显著的不同&#xff0c;理解这一点至关重要。…

k8s 1.28 聚合层部署信息记录

–requestheader-client-ca-file –requestheader-allowed-namesfront-proxy-client –requestheader-extra-headers-prefixX-Remote-Extra- –requestheader-group-headersX-Remote-Group –requestheader-username-headersX-Remote-User –proxy-client-cert-file –proxy-cl…

Flutter:列表分页,上拉加载下拉刷新,在GetBuilder模板使用方式

GetBuilder模板使用方式参考上一节 本篇主要代码记录如何使用上拉加载下拉刷新&#xff0c; 接口请求和商品组件的代码不包括在内 pubspec.yaml装包 cupertino_icons: ^1.0.8# 分页 上拉加载&#xff0c;下拉刷新pull_to_refresh_flutter3: 2.0.2商品列表&#xff1a;controlle…

使用Cmake导入OpenCV库的大坑记录

CMakeLists.txt cmake_minimum_required(VERSION 3.20)set(OpenCV_DIR D:/Package/opencv4/opencv/mingw-build/install) #这里根据自己OpenCV位置设定find_package(OpenCV REQUIRED)project(PROJ1 CXX)add_executable(PROJ1 main.cpp)target_include_directories(PROJ1 PR…

MySQL —— MySQL 程序

目录 前言 一、MySQL 程序简介 二、mysqld -- MySQL 服务器 三、mysql -- MySQL 客户端 1. mysql 客户端简介 2. mysql 客户端选项 &#xff08;1&#xff09;指定选项的方式 &#xff08;2&#xff09;mysql 客户端命令常用选项 &#xff08;3&#xff09;在命令行中使…

STM32 PWM波形详细图解

目录 前言 一 PWM介绍 1.1 PWM简介 1.2 STM32F103 PWM介绍 1.3 时钟周期与占空比 二.引脚映像关系 2.1引脚映像与寄存器 2.2 复用功能映像 三. PWM 配置步骤 3.1相关原理图 3.2配置流程 3.2.1 步骤一二&#xff1a; 3.2.2 步骤三&#xff1a; 3.2.3 步骤四五六七&#xff1a; …

【软件安装】在Ubuntu中安装mysql5.7

参考&#xff1a;cubuntu安装mysql5.6_mob649e81553a70的技术博客_51CTO博客 问题1&#xff1a;sudo apt install mysql-server-5.7 -y 若提示mysql-server 没有可安装候选 答&#xff1a; sudo nano /etc/apt/sources.list 在开头加入&#xff1a; # 阿里源 deb http://mi…

多方法做配对样本t检验(三)

Wilcoxon符号秩检验 Wilcoxon符号秩检验&#xff08;Wilcoxon Signed-Rank Test&#xff09; 是一种非参数统计方法&#xff0c;用于检验两组相关样本&#xff08;配对样本&#xff09;之间的差异是否显著。它通常用来代替配对样本t检验&#xff0c;特别是在数据不符合正态分布…

修改IDEA配置导致Spring Boot项目读取application.properties中文乱码问题

之前很多配置都是放在nacos里面&#xff0c;然后这次同事有个配置写在application.properties中&#xff0c;这个配置含有中文&#xff0c;启动之后发现拿到的中文值会乱码&#xff0c;然后就帮忙看了一下问题。 排查问题 经过不停的百度、排查发现&#xff0c;spring读取app…

0.shell 脚本执行方式

1.脚本格式要求 &#x1f951;脚本以 #!/bin/bash 开头 &#x1f966; 脚本要有可执行权限 2.执行脚本的两种方式 &#x1f96c; 方式1&#xff1a;赋予x执行权限 &#x1f952; ​​​​​​​方式2&#xff1a; sh执行 ​​​​​​​

[2024年3月10日]第15届蓝桥杯青少组stema选拔赛C++中高级(第二子卷、编程题(6))

参考程序&#xff1a; #include<bits/stdc.h> using namespace std; int n; int a[305]; int dp[305][305];//打掉ij之间所有靶子可以获得的最大积分&#xff08;不含i&#xff0c;j&#xff09; int main() {cin>>n;for(int i1;i<n;i){cin>>a[i];}a[0]1…

深入了解 Adam 优化器对显存的需求:以 LLaMA-2 7B 模型为例 (中英双语)

中文版 深入了解 Adam 优化器对显存的额外需求&#xff1a;模型参数与优化器状态的显存开销分析 在深度学习模型的训练过程中&#xff0c;显存是一个关键的资源&#xff0c;尤其在处理大型语言模型或深度神经网络时。训练时的显存需求不仅包括模型参数本身&#xff0c;还涉及…

k8s Init:ImagePullBackOff 的解决方法

kubectl describe po (pod名字) -n kube-system 可查看pod所在的节点信息 例如&#xff1a; kubectl describe po calico-node-2lcxx -n kube-system 执行拉取前先把用到的节点的源换了 sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"re…