后端页面开发新手教程：从零构建高可维护性技能栈

2次阅读

没有评论

共计 2453 个字符，预计需要花费 7 分钟才能阅读完成。

后端页面开发是 Web 应用开发中连接数据与用户界面的关键环节。与纯前端渲染不同，后端页面开发的主要特点包括：

服务端渲染：页面内容在服务器端生成，然后发送给浏览器
数据绑定：将后端数据直接嵌入到页面模板中
SEO 友好：由于初始 HTML 包含完整内容，对搜索引擎更友好
首屏性能：减少浏览器端的数据请求和渲染时间

对于新手开发者而言，掌握后端页面开发技能可以帮助快速构建功能完整的 Web 应用，同时为后续学习前后端分离架构打下基础。

目前主流的后端页面渲染技术主要有以下几种：

JSP(JavaServer Pages)
优点：与 Java 生态系统深度集成，历史悠久
缺点：模板语法较为复杂，与现代开发理念有差距
Thymeleaf
优点：自然模板(可在浏览器直接预览)，强大的表达式语言
缺点：学习曲线较陡，性能略低于其他方案
现代前端框架(如 React/Vue SSR)
优点：组件化开发，前后端技术栈统一
缺点：配置复杂，对新手不够友好

对于新手入门，我推荐使用 Thymeleaf，因为它：
– 语法直观，易于理解和调试
– 与 Spring Boot 无缝集成
– 支持 HTML5 标准

下面我们通过一个用户列表页面来演示 Thymeleaf 的基本用法。首先确保你的项目已添加 Thymeleaf 依赖：

<!-- pom.xml -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

创建 Controller 处理请求：

@Controller
public class UserController {@GetMapping("/users")
    public String listUsers(Model model) {
        // 模拟从数据库获取用户数据
        List<User> users = Arrays.asList(new User(1, "张三", "zhangsan@example.com"),
            new User(2, "李四", "lisi@example.com")
        );

        // 将数据添加到模型
        model.addAttribute("users", users);
        return "user/list"; // 对应模板路径
    }
}

创建 Thymeleaf 模板文件(src/main/resources/templates/user/list.html):

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> 用户列表 </title>
</head>
<body>
    <h1> 用户列表 </h1>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th> 姓名 </th>
                <th> 邮箱 </th>
            </tr>
        </thead>
        <tbody>
            <!-- 使用 th:each 遍历用户列表 -->
            <tr th:each="user : ${users}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.name}"></td>
                <td th:text="${user.email}"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Thymeleaf 支持模板片段(fragments)，可以提高代码复用性。例如，我们可以将页眉和页脚提取为单独片段：

<!-- fragments/header.html -->
<header th:fragment="commonHeader">
    <nav>
        <!-- 导航内容 -->
    </nav>
</header>

<!-- 在其他模板中引用 -->
<div th:replace="fragments/header :: commonHeader"></div>

Thymeleaf 默认会缓存解析后的模板，这在生产环境能提高性能，但在开发阶段可能造成不便。可以通过配置调整：

# application.properties
spring.thymeleaf.cache=false # 开发时关闭缓存

Thymeleaf 默认会对所有表达式进行 HTML 转义，防止 XSS 攻击。如果确实需要输出原始 HTML，可以使用th:utext：

<!-- 安全方式，会转义 HTML -->
<div th:text="${userInput}"></div>

<!-- 不安全方式，慎用 -->
<div th:utext="${trustedHtml}"></div>

模板位置问题
确保模板文件放在 resources/templates 目录下
注意文件名大小写，特别是在 Linux 服务器上
静态资源处理
静态资源 (JS/CSS/ 图片) 应放在 resources/static 目录
在模板中引用时使用 Thymeleaf 的 URL 语法：
```
<link th:href="@{/css/style.css}" rel="stylesheet">
```
国际化支持
Thymeleaf 内置国际化支持，可以创建不同语言的消息文件
在模板中使用 #{message.key} 语法引用
性能监控
生产环境中启用性能监控，关注模板渲染时间
可以使用 Spring Boot Actuator 的 /metrics 端点