es-toolkit/fp 函数式编程指南：unzipWith 实现分组数组的按位重组与聚合
2026/9/16 15:20:07
简介：这是一套基于Spring Boot + Thymeleaf + Maven构建的静态官网模板完整源码，面向Java Web初学者与前端入门开发者，解决快速搭建美观、可运行企业官网原型的实践需求。项目无需数据库即可一键启动，结构清晰、注释充分，支持灵活修改HTML页面、CSS样式及后端控制器逻辑，特别适合教学演示、课程设计或个人作品集部署。压缩包共362个文件，含26个Thymeleaf模板（.html）、16个CSS样式文件、10个JS交互脚本、18个核心Java控制器与配置类（如IndexController、NewsController、MyBasicErrorController等），以及大量图片资源（126个PNG、116个JPG）和基础配置文件（application.yml、pom.xml等），整体大小41.18MB。目前已有1116人学习下载，提供开箱即用的前后端一体化工程结构、典型REST接口设计范式与错误统一处理机制，是理解Spring Boot Web开发全流程的优质入门实践样本。
1. 用 Spring Boot + Thymeleaf 搭建官网模板，不是堆页面，而是建可维护的前端交付流水线
很多团队做官网时卡在「好看」和「能改」的矛盾里：UI 交来一套 HTML+CSS 静态页，开发硬塞进 Spring Boot，结果路由乱、资源路径错、国际化补丁满天飞，改个按钮颜色要重启服务、换语言要重写<span>标签。其实 Spring Boot + Thymeleaf 的组合，本质是把 HTML 从「交付物」变成「可编译、可注入、可复用」的模板资产——它不追求炫技动效，但要求每个<div>都能被@Value注入配置、被#locale切换语言、被th:fragment抽离复用。本方案面向中型技术团队的官网/企业站建设场景，适合已有 Java 后端能力、需快速交付且后续要支持多语言、SEO 友好、CDN 静态化扩展的项目。它不依赖前端构建工具（如 Webpack），所有 HTML/CSS/JS 均通过 Thymeleaf 渲染上下文动态组装，Maven 负责依赖隔离与 profile 分环境打包，最终产出一个 JAR 包内嵌静态资源、开箱即用。
2. Thymeleaf 模板引擎选型与基础结构搭建：为什么不用 FreeMarker 或 JSP？
2.1 为什么 Thymeleaf 是官网模板的理性选择？
Spring Boot 官方推荐的模板引擎中，Thymeleaf 在官网类项目中具备不可替代性：它原生支持 HTML5 语法（.html后缀直接双击预览）、天然兼容前端工作流（设计师可基于纯 HTML 开发）、提供th:fragment和th:replace实现模块化布局、内置#messages和#locale支持无侵入式国际化。对比 FreeMarker（需.ftl后缀，前端无法直览）、JSP（已过时，Servlet 容器耦合强），Thymeleaf 的th:*属性在浏览器中被忽略，开发阶段可脱离后端独立调试 HTML 结构——这对 UI/UX 团队协作至关重要。尤其当项目需支持 SEO（如<title th:text="${site.title}">默认标题</title>）或生成静态快照（如爬虫抓取），Thymeleaf 的服务端渲染能力比纯前端 SPA 更可控。
提示：Thymeleaf 3.1+ 版本已移除对
th:inline="javascript"的旧式内联支持，改用th:with+th:fragment组合传递数据，避免 JS 执行上下文污染，这是官网模板稳定性的关键前提。
2.2 创建最小可运行结构：Maven 依赖与目录约定
使用 Spring Initializr 初始化项目时，必须勾选Spring Web和Thymeleaf，其他如 Lombok、Spring Boot DevTools 属于增强项，非必需。pom.xml中核心依赖如下：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- 可选：支持 HTML 压缩与缓存控制 --> <dependency> <groupId>net.sourceforge.nekohtml</groupId> <artifactId>nekohtml</artifactId> <version>1.9.22</version> </dependency>项目目录结构严格遵循 Spring Boot 约定：
src/main/ ├── java/com/example/website/ │ └── WebsiteApplication.java # 主启动类 ├── resources/ │ ├── application.yml # 全局配置 │ ├── static/ # 静态资源（CSS/JS/图片） │ │ ├── css/ │ │ │ └── main.css # 主样式表（含三行模式：reset + base + component） │ │ ├── js/ │ │ │ └── common.js # 公共交互逻辑（含一键返回顶部算法） │ │ └── images/ │ └── templates/ # Thymeleaf 模板根目录 │ ├── fragments/ # 公共片段（header, footer, navbar） │ │ ├── header.html │ │ └── footer.html │ ├── index.html # 首页模板（继承 layout.html） │ └── layout.html # 布局模板（定义 th:fragment="content"）注意：
static/下的资源路径与templates/下的模板路径完全解耦。CSS 文件中引用图片必须用/images/logo.png（以/开头），而非../images/logo.png，因为 Spring Boot 默认将static/映射为根路径/。
2.3 配置 Thymeleaf 引擎参数：让 HTML 真正“活”起来
application.yml中需显式配置 Thymeleaf 行为，避免默认设置导致开发期调试困难：
spring: thymeleaf: # 关闭缓存，开发期修改 HTML 立即生效（生产环境必须设为 true） cache: false # 启用 HTML5 模式，允许自定义属性（如><!doctype html> <html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="企业官网描述"> <title th:text="${site.title} ?: '默认标题'">默认标题</title> <!-- CSS 引入统一走 th:href，支持 profile 切换 CDN --> <link rel="stylesheet" th:href="@{/css/main.css}" /> </head>此处th:lang="${#locale.language}"是 Thymeleaf 内置对象#locale的调用，它自动读取 HTTP 请求头中的Accept-Language或 URL 参数?lang=zh，无需手动解析。th:text中的?:是安全操作符，当site.title为空时回退到'默认标题'，避免 NPE。
提示：
<meta charset="utf-8">必须紧随<head>之后，否则 IE 会触发字符集重载，导致中文乱码。Thymeleaf 不会修改此标签，因此必须手写。
3.2 使用th:fragment实现三段式布局复用
官网常见结构为「头部导航 + 主体内容 + 底部版权」，Thymeleaf 通过th:fragment定义可复用片段，再用th:replace插入：
templates/fragments/header.html：
<div th:fragment="header"> <header class="site-header"> <nav class="navbar"> <a href="/" th:text="${site.name}">公司名称</a> <ul class="nav-menu"> <li><a th:href="@{/about}" th:text="#{menu.about}">关于我们</a></li> <li><a th:href="@{/products}" th:text="#{menu.products}">产品服务</a></li> </ul> </nav> </header> </div>templates/layout.html（布局模板）：
<!doctype html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"/> <title th:text="${site.title} ?: '官网'"></title> </head> <body> <!-- 插入头部片段 --> <div th:replace="fragments/header :: header"></div> <!-- 定义内容占位区 --> <main th:fragment="content"> <div class="container">Content will be here</div> </main> <!-- 插入底部片段 --> <div th:replace="fragments/footer :: footer"></div> </body> </html>templates/index.html（首页）：
<!doctype html> <html xmlns:th="http://www.thymeleaf.org" th:replace="layout :: layout"> <head> <meta charset="utf-8"/> </head> <body> <!-- 重写 layout 中的 content 片段 --> <div th:fragment="content" class="hero-section"> <h1 th:text="#{home.welcome}">欢迎来到官网</h1> <p th:text="#{home.subtitle}">专业、可靠、值得信赖</p> </div> </body> </html>这种结构使index.html只关注业务内容，布局、导航、脚部全部由layout.html和fragments/统一管理，修改导航只需改header.html，无需遍历所有页面。
3.3 CSS 三行模式与鼠标移入事件实现
CSS 文件采用「三行模式」组织：第一行重置（Reset），第二行基础样式（Base），第三行组件样式（Component）。static/css/main.css示例：
/* === 1. Reset === */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* === 2. Base === */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .btn { display: inline-block; padding: 10px 20px; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; } /* === 3. Component === */ .nav-menu a { color: #333; text-decoration: none; } /* CSS 鼠标移入事件：悬停变色 + 阴影 */ .nav-menu a:hover { color: #007bff; text-shadow: 0 1px 2px rgba(0,0,0,0.1); } /* CSS 伪类选择器：为第一个菜单项添加特殊边框 */ .nav-menu li:first-child a { border-left: 3px solid #007bff; } /* CSS 删除线：用于价格对比 */ .price-old { text-decoration: line-through; color: #999; } /* CSS 优惠券圆切：使用 border-radius 实现 */ .coupon { border-radius: 50px; padding: 8px 16px; background: linear-gradient(135deg, #ff6b6b, #4ecdc4); }注意：
transition: all 0.3s ease是实现平滑悬停效果的关键，避免transition: background-color这种窄范围写法，否则text-shadow变化会突兀。
4. Maven 多环境配置与静态资源优化：让官网在不同服务器上稳定运行
4.1 Maven Profile 管理开发/测试/生产配置
官网项目常需在不同环境切换 CDN 地址、API 域名、Google Analytics ID。Maven 的profile机制比硬编码更安全：
pom.xml中定义 profile：
<profiles> <profile> <id>dev</id> <properties> <cdn.url>http://localhost:8080</cdn.url> <api.base>http://localhost:8080/api</api.base> </properties> </profile> <profile> <id>prod</id> <properties> <cdn.url>https://cdn.example.com</cdn.url> <api.base>https://api.example.com</api.base> </properties> </profile> </profiles>application.yml中引用：
app: cdn-url: @cdn.url@ api-base: @api.base@打包命令：
# 打包开发环境 mvn clean package -Pdev # 打包生产环境（启用 CDN） mvn clean package -PprodMaven 会将@cdn.url@替换为对应 profile 的值，生成的application.yml中app.cdn-url直接可用。
提示：
@符号是 Maven Resource Filtering 的默认分隔符，若项目中已用$，需在pom.xml中配置<delimiters><delimiter>$${*}</delimiter></delimiters>。
4.2 静态资源版本控制与缓存策略
浏览器缓存 CSS/JS 导致用户看不到更新？Spring Boot 提供ResourceUrlEncodingFilter解决：
application.yml添加：
spring: web: resources: chain: strategy: content: enabled: true cache: period: 31536000 # 1年，适用于带哈希的文件static/css/main.css会被自动重命名为main-abc123.css，并在模板中通过@{/css/main.css}生成带哈希的 URL。Thymeleaf 的@{}语法会自动解析为/css/main-abc123.css，确保用户获取最新资源。
验证方法：启动应用后查看网页源码，<link href="/css/main.css">应变为<link href="/css/main-7f8a9b2c.css">。若未生效，检查spring.web.resources.chain.strategy.content.enabled是否为true。
4.3 Maven 阿里云仓库加速依赖下载
国内开发常因中央仓库慢导致mvn clean package卡在下载依赖。在pom.xml的<repositories>下添加阿里云镜像：
<repositories> <repository> <id>aliyun</id> <url>https://maven.aliyun.com/repository/public</url> <releases> <enabled>true</enabled> </releases> <snapshots> <enabled>false</enabled> </snapshots> </repository> </repositories>或全局配置~/.m2/settings.xml（推荐）：
<mirrors> <mirror> <id>aliyunmaven</id> <mirrorOf>*</mirrorOf> <name>Aliyun Maven</name> <url>https://maven.aliyun.com/repository/public</url> </mirror> </mirrors>注意：
<mirrorOf>*</mirrorOf>表示覆盖所有仓库，包括 Spring Milestone 仓库。若需保留 Spring 官方仓库，应设为<mirrorOf>central</mirrorOf>。
5. Thymeleaf 国际化实战：一套 HTML 支持中英文切换
5.1 配置多语言消息源与 Locale 解析器
官网需支持中英文切换，Thymeleaf 通过MessageSource实现。在resources/下创建：
messages.properties # 默认语言（英文） messages_zh_CN.properties # 中文简体 messages_en_US.properties # 英文美国messages_zh_CN.properties示例：
menu.about=\u5173\u4E8E\u6211\u4EEC menu.products=\u4EA7\u54C1\u670D\u52A1 home.welcome=\u6B22\u8FCE\u6765\u5230\u5B98\u7F51 home.subtitle=\u4E13\u4E1A\u3001\u53EF\u9760\u3001\u503C\u5F97\u4FE1\u4EFBapplication.yml中启用：
spring: messages: basename: messages encoding: UTF-8 # 配置 Locale 解析器：优先读取 URL 参数 ?lang=zh mvc: locale-resolver: accept-header locale: zh_CN控制器中暴露语言切换接口（可选）：
@GetMapping("/lang/{lang}") public String switchLang(@PathVariable String lang, HttpServletRequest request) { Cookie cookie = new Cookie("lang", lang); cookie.setPath("/"); cookie.setMaxAge(3600 * 24 * 30); // 30天 response.addCookie(cookie); return "redirect:" + request.getHeader("Referer"); }5.2 在 HTML 中使用#{}表达式与#locale对象
templates/index.html中：
<h1 th:text="#{home.welcome}">欢迎来到官网</h1> <p th:text="#{home.subtitle}">专业、可靠、值得信赖</p> <!-- 动态生成语言切换链接 --> <a th:href="@{/lang/zh}" th:text="#{lang.zh}">中文</a> | <a th:href="@{/lang/en}" th:text="#{lang.en}">English</a> <!-- 显示当前语言 --> <span th:text="${#locale.getDisplayName()}">中文（简体）</span>messages.properties中补充：
lang.zh=中文 lang.en=English提示：
#{}中的键名必须与.properties文件中完全一致，大小写敏感。若显示??home.welcome??，说明键不存在或文件未被正确加载，检查messages_zh_CN.properties是否在resources/目录下且编码为 UTF-8（无 BOM）。
5.3 CSS 字体渐变与一键返回顶部算法实现
官网常需视觉亮点与用户体验优化。static/css/main.css中添加字体渐变：
.gradient-text { background: linear-gradient(90deg, #007bff, #4ecdc4, #ff6b6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }static/js/common.js中实现一键返回顶部（HTML5 原生 API，无需 jQuery）：
// 一键返回顶部算法 document.addEventListener('DOMContentLoaded', function () { const backToTop = document.getElementById('back-to-top'); if (!backToTop) return; // 监听滚动，显示/隐藏按钮 window.addEventListener('scroll', function () { backToTop.style.display = window.scrollY > 300 ? 'block' : 'none'; }); // 平滑滚动到顶部 backToTop.addEventListener('click', function (e) { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }); });对应 HTML：
<!-- 在 footer 中添加 --> <a id="back-to-top" href="#" class="back-to-top" style="display:none;">↑</a>CSS 样式：
.back-to-top { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; background: #007bff; color: white; text-align: center; line-height: 40px; border-radius: 50%; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 100; }该算法使用window.scrollTo({behavior: 'smooth'})，兼容 Chrome 61+、Firefox 68+、Safari 15.4+，无需 polyfill。
本文还有配套的精品资源，点击获取