静态页面和动态页面（Java Web开发）

news2024/12/26 21:08:30

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>

访问流程

用户访问 http://localhost:8080/，请求被映射到 PageController 的 homePage() 方法。
方法返回模板名称 index。
Spring 使用模板引擎渲染 index.html，将数据填充到页面中。
最终生成的 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` 或 `public`	`src/main/resources/templates`
访问方式	URL 直接指向文件名（如 `/about.html`）。	URL 映射到 Controller 方法，由模板引擎生成 HTML。
内容是否固定	内容固定，所有用户访问到的页面相同。	内容动态生成，根据请求、用户或业务逻辑返回不同的页面。
是否依赖后端	不依赖，直接返回文件。	必须依赖后端逻辑，结合模板引擎生成页面。
CSS/JS 引用	通过标准 HTML 标签（`<link>` 和 `<script>`）引用。	使用 Thymeleaf 的 `th:href` 和 `th:src` 动态解析路径，适配环境和上下文路径。
典型用途	- 静态资源（CSS/JS 文件）。 - 公共页面（如帮助文档）。	- 用户个性化页面（如个人中心）。 - 动态报表、购物车页面等。