尧图网站建设 
简介这是一套基于SpringBootThymeleaf构建的静态官网模板完整源码面向Java Web初学者与前端入门开发者解决快速搭建美观、可运行企业官网原型的实践需求。项目无需数据库即可一键启动结构清晰、注释充分支持灵活修改页面内容与样式特别适合教学演示、课程设计或个人作品集部署。压缩包共362个文件含26个HTML页面模板、16个CSS样式文件、10个JS交互脚本、18个Java控制器类如IndexController、NewsController、ProductController等及配套配置类yml、xml辅以大量图片资源126个PNG116个JPG和少量视频2个MP4用于素材展示整体大小为41.18MB。已有1116人学习下载提供开箱即用的前后端整合方案、典型MVC分层结构示例及异常处理MyExceptionHandler、WebSocketWebSocketServer等扩展能力参考助新手扎实理解SpringBoot Web开发全流程。1. 这不是「静态官网」而是一套可热加载、免数据库、开箱即用的 SpringBoot 官网骨架你可能刚在 CSDN 上看到那篇标题为《springbootthymeleafmavenhtmlcss实现精美大方好看官网模板完整源码》的文章点开 ZIP 包发现没 SQL 文件、没 application.properties 里写死的 MySQL 密码、连 H2 都没配——但它真能mvn spring-boot:run启动localhost:8080 刷出带轮播图、产品列表、新闻栏、响应式导航的完整官网页面。这不是前端静态页套了个 SpringBoot 外壳而是 Thymeleaf 模板引擎深度参与 DOM 构建的典型实践所有 HTML 页面都通过Controller返回逻辑视图名Thymeleaf 在服务端完成th:each循环渲染、th:if条件判断、th:fragment片段复用CSS 用的是纯原生 flex media query 实现三栏自适应连鼠标悬停动画:hover伪类和字体渐变效果都写在static/css/style.css里不依赖任何 JS 框架。它面向两类人一是 Java 新手想绕过 MyBatis/Hibernate 复杂配置直接理解「请求 → Controller → Model → Thymeleaf 渲染 HTML」的最小闭环二是已有项目需快速交付企业官网把src/main/resources/static/images/换成自家 banner 图改几处th:text${product.name}就能上线。关键在于——它把「模板复用性」和「前端表现力」同时做实了不是 demo 级玩具。2. Thymeleaf 模板驱动的静态内容架构从 fragment 复用到国际化占位符预埋2.1 为什么选 Thymeleaf 而非 FreeMarker 或 JSP核心是「前后端分离友好」与「HTML 原生可读性」这个官网模板没用 JSP已淘汰、没选 FreeMarker语法偏模板引擎专属坚持用 Thymeleaf根本原因在于其th:*属性天然嵌入 HTML 标签内。打开src/main/resources/templates/index.html你会看到!doctype html html langzh-cn xmlns:thhttp://www.thymeleaf.org head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title th:text#{index.title}企业官网/title link relstylesheet th:href{/css/style.css} /head body header th:replacefragments/header :: header/header main classcontainer section th:replacefragments/banner :: banner/section section th:replacefragments/products :: products/section /main footer th:replacefragments/footer :: footer/footer /body /html提示th:replace是 Thymeleaf 最关键的复用机制它把fragments/下的独立 HTML 片段如header.html注入当前位置且片段内可定义th:fragmentheader显式声明入口点。这比 JSP 的jsp:include更灵活因为片段本身也是合法 HTML设计师用浏览器直接打开fragments/header.html就能看到样式效果无需启动 SpringBoot。对比 FreeMarker 的#include header.ftl后者文件后缀.ftl表明它已脱离 HTML 生态前端无法独立预览而 Thymeleaf 的.html后缀让整个模板体系保持「所见即所得」——这是新手上手快的核心设计选择。2.2fragments/目录结构解析header、banner、products、footer 四大复用单元项目中src/main/resources/templates/fragments/目录下有 4 个核心片段文件每个都遵循「结构语义化 CSS 类命名规范」原则header.html含导航栏nav使用th:eachmenu : ${menus}动态生成菜单项数据来自IndexController的model.addAttribute(menus, Arrays.asList(...))banner.html轮播图区域用th:eachslide : ${banners}渲染ListBannerBanner 对象仅含title、desc、imageUrl三个字段无数据库映射products.html三列产品展示区th:eachproduct : ${products}遍历ListProduct每个Product类含name、summary、iconUrl图标路径为static/images/product-icon-1.pngfooter.html版权信息与联系方式th:text${site.copyright}绑定配置项避免硬编码这些片段被index.html、product.html、news.html共同引用修改fragments/header.html即全局生效。实际开发中我一般会把menus数据抽离到application.yml中site: menus: - name: 首页 url: / - name: 产品中心 url: /products - name: 新闻动态 url: /news - name: 关于我们 url: /about然后在IndexController中通过Value(${site.menus})注入比硬编码更易维护。2.3 国际化占位符预埋#{index.title}背后的 message.properties 机制虽然摘要说「不需要数据库」但模板已为国际化预留接口。观察index.html中的title th:text#{index.title}它指向src/main/resources/messages.properties# messages.properties中文 index.titleXX科技有限公司官网 index.welcome欢迎访问我们的官方网站 product.list.title核心产品对应英文版messages_en.properties# messages_en.properties index.titleXX Technology Co., Ltd. Official Website index.welcomeWelcome to our official website product.list.titleCore ProductsSpringBoot 默认启用MessageSource自动扫描messages_*.properties。要触发切换只需在 URL 后加?langen如http://localhost:8080/?langen或在application.yml中配置默认语言spring: messages: basename: messages encoding: UTF-8 cache-duration: 3600注意th:text#{xxx}中的键名必须与 properties 文件中完全一致大小写敏感。若页面显示??index.title??说明messages.properties编码不是 UTF-8用 Notepad 保存为 UTF-8 无 BOM 格式可解决。3. Maven 构建与静态资源管理从阿里云镜像加速到 CSS 响应式断点实战3.1pom.xml关键依赖解析为什么只引入spring-boot-starter-thymeleaf而非spring-boot-starter-webflux打开pom.xml核心依赖只有三项dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-thymeleaf/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId scoperuntime/scope optionaltrue/optional /dependency没有spring-boot-starter-data-jpa、没有mybatis-spring-boot-starter印证了「免数据库」承诺。spring-boot-starter-thymeleaf自动配置了TemplateResolver、SpringTemplateEngine和ThymeleafViewResolver无需手动注册 Bean。特别注意spring-boot-devtools它启用热重载Hot Reload修改templates/下 HTML 或static/css/下 CSS 后刷新浏览器即可生效省去重启服务时间——这对前端样式调试至关重要。Maven 仓库配置方面国内用户务必修改~/.m2/settings.xml添加阿里云镜像否则mvn clean package可能卡在下载thymeleaf-spring5mirrors mirror idaliyunmaven/id mirrorOf*/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirror /mirrors3.2static/目录下的 CSS 工程实践三行模式布局与:hover伪类动画实现官网的视觉效果主要由src/main/resources/static/css/style.css驱动。该文件采用「移动优先」策略关键 CSS 规则如下/* 三行模式header main footer */ body { margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; } header, footer { background: #2c3e50; color: white; padding: 1rem 0; } main { min-height: calc(100vh - 200px); /* 减去 header/footer 高度 */ } /* 响应式三栏产品展示 */ .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; padding: 2rem 1rem; } /* 鼠标悬停动画卡片上浮 阴影增强 */ .product-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); } /* 字体渐变效果现代 CSS 写法 */ .gradient-title { background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }提示grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))是「三行模式」的核心——在宽度 ≥300px 时每行放 1 个卡片≥600px 放 2 个≥900px 放 3 个自动适配屏幕。transition: all 0.3s ease与:hover配合实现平滑上浮动画比 jQuery 的animate()更轻量。3.3application.yml静态资源配置禁用模板缓存与设置默认编码为确保开发阶段 HTML/CSS 修改即时生效application.yml中必须关闭 Thymeleaf 缓存spring: thymeleaf: cache: false # 开发环境务必设为 false enabled: true prefix: classpath:/templates/ suffix: .html encoding: UTF-8 servlet: content-type: text/html resources: static-locations: classpath:/static/ add-mappings: true若忽略cache: false修改index.html后刷新页面仍显示旧内容新手常在此卡住。另外encoding: UTF-8防止中文乱码static-locations明确指定静态资源根目录为classpath:/static/对应src/main/resources/static/。4. Controller 层数据供给逻辑从Controller返回视图到WebResultMap统一响应封装4.1IndexController的极简数据模型Model对象如何承载首页所需全部数据IndexController.java是整个官网的数据中枢其index()方法代码不足 20 行Controller public class IndexController { GetMapping(/) public String index(Model model) { // 轮播图数据纯内存 List ListBanner banners Arrays.asList( new Banner(AI平台, 一站式AI开发与部署平台, /images/banner-1.jpg), new Banner(云服务, 高可用、弹性伸缩的云基础设施, /images/banner-2.jpg) ); model.addAttribute(banners, banners); // 产品列表 ListProduct products Arrays.asList( new Product(智能客服, 基于NLP的多轮对话系统, /images/icon-customer.png), new Product(数据分析, 可视化BI报表与实时监控, /images/icon-analytics.png) ); model.addAttribute(products, products); // 导航菜单来自 application.yml 配置 model.addAttribute(menus, getMenusFromConfig()); return index; // 对应 templates/index.html } }这里的关键是所有数据都是new Banner(...)构造的内存对象不查数据库。Banner和Product是普通 POJO仅含 getter/setter无 JPA 注解。这种设计让新手一眼看懂「Controller 怎么把数据塞给模板」也方便后续拓展——当需要接入数据库时只需把Arrays.asList(...)替换为productService.findAll()即可模板层th:each语法完全不用改。4.2WebResultMap轻量级统一响应格式的设计意图与使用边界项目中存在WebResultMap.class它是一个 Map 子类用于封装 AJAX 接口返回值public class WebResultMap extends HashMapString, Object { public WebResultMap success(String msg) { this.put(code, 200); this.put(msg, msg); this.put(data, new HashMap()); return this; } public WebResultMap data(Object data) { this.put(data, data); return this; } }但它并未在官网 HTML 渲染流程中使用。IndexController返回String视图名走 Thymeleaf 渲染而NewsController中的ResponseBody方法才用WebResultMapRestController public class NewsController { GetMapping(/api/news/latest) public WebResultMap getLatestNews() { return new WebResultMap() .success(获取成功) .data(Arrays.asList( new News(公司获AI创新奖, 2023-10-01), new News(新版本V2.1发布, 2023-09-15) )); } }提示WebResultMap是为未来「后台管理界面」预留的 AJAX 响应结构当前官网静态页不调用/api/接口。若你想在首页用 JS 动态加载新闻可在index.html中加script th:inlinejavascript $.get(/api/news/latest, function(res) { if (res.code 200) { $(#news-list).html( res.data.map(n li${n.title} small${n.date}/small/li).join() ); } }); /script此时WebResultMap才真正发挥作用。4.3MyBasicErrorController自定义 404/500 页面的 Thymeleaf 实现SpringBoot 默认错误页简陋本项目通过MyBasicErrorController提供友好提示Controller public class MyBasicErrorController implements ErrorController { RequestMapping(/error) public String handleError(HttpServletRequest request, Model model) { Integer statusCode (Integer) request.getAttribute(RequestDispatcher.ERROR_STATUS_CODE); model.addAttribute(statusCode, statusCode); model.addAttribute(errorMsg, statusCode 404 ? 页面未找到 : 服务器内部错误); return error; // 对应 templates/error.html } Override public String getErrorPath() { return /error; } }对应的templates/error.html使用 Thymeleaf 渲染状态码和提示语div classerror-container h1 th:text${statusCode}404/h1 p th:text${errorMsg}页面未找到/p a href/ classbtn返回首页/a /div这比 SpringBoot 默认的白页更专业且完全复用现有 Thymeleaf 机制无需额外技术栈。5. 新手快速上手四步法替换图片、修改文案、调整 CSS、验证响应式5.1 替换官网 Banner 图片与产品图标static/images/目录操作指南所有静态图片存放在src/main/resources/static/images/结构清晰images/ ├── banner-1.jpg ← 首页轮播图1 ├── banner-2.jpg ← 首页轮播图2 ├── icon-customer.png ← 产品图标1 ├── icon-analytics.png ← 产品图标2 └── logo.png ← 顶部 Logo替换步骤准备新图片Banner 图建议尺寸 1200×400px宽高比 3:1图标建议 64×64px PNG 透明背景覆盖同名文件将新banner-1.jpg拖入static/images/覆盖原文件修改IndexController中的路径若文件名变更new Banner(AI平台, 一站式AI开发与部署平台, /images/new-banner-1.jpg)启动项目访问http://localhost:8080查看效果注意图片路径以/images/开头表示从static/目录起始Thymeleaf 会自动映射为http://localhost:8080/images/xxx.jpg。5.2 修改文案与 SEO 元信息messages.properties与index.html双轨更新官网文案分两类动态文案支持国际化存于messages.properties如index.title新公司名称官网静态文案不需翻译直接写在index.html中如h2关于我们/h2中的「关于我们」SEO 关键元信息在index.htmlhead内meta namedescription contentXX科技提供AI平台、云服务等解决方案 th:attrcontent#{index.description} meta namekeywords contentAI,云计算,大数据 th:attrcontent#{index.keywords}因此需同步修改messages.properties中新增index.descriptionXX科技提供AI平台、云服务等解决方案 index.keywordsAI,云计算,大数据index.html中th:attrcontent#{...}引用对应键名5.3 调整 CSS 断点与悬停效果style.css中可安全修改的参数表static/css/style.css中以下参数可按需调整不影响整体结构CSS 属性当前值推荐范围效果说明.products-grid gap1.5rem1rem ~ 2rem控制产品卡片间距.product-card:hover transformtranslateY(-5px)-3px ~ -10px悬停上浮幅度media (max-width: 768px)grid-template-columns: 1fr可删减此媒体查询移动端单列显示.gradient-title backgroundlinear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1)替换为品牌色 HEX字体渐变色修改后保存 CSS 文件因spring.thymeleaf.cachefalse刷新浏览器立即生效。5.4 验证响应式与跨浏览器兼容性Chrome DevTools 设备模拟与真实手机测试最后一步必须验证Chrome DevToolsF12 打开开发者工具 → 点击左上角「Toggle device toolbar」→ 选择 iPhone SE / iPad / Responsive 拉伸窗口检查导航栏是否折叠、轮播图是否适配、产品网格是否换行真实手机访问确保电脑与手机在同一局域网启动项目后在手机浏览器输入http://[电脑IP]:8080如http://192.168.1.100:8080测试触摸交互如轮播图手势滑动、导航菜单点击展开若移动端文字过小检查index.html中meta nameviewport是否存在且contentwidthdevice-width, initial-scale1.0未被注释。这是 HTML5 响应式基石缺之则所有 CSS 媒体查询失效。CSS 伪类选择器:hover在触摸设备上无效果故产品卡片悬停动画在手机端自动降级为静态样式——这正是「渐进增强」设计思想的体现无需额外 JS 适配。本文还有配套的精品资源点击获取 SpringBoot+Thymeleaf免数据库官网骨架
简介这是一套基于SpringBootThymeleaf构建的静态官网模板完整源码面向Java Web初学者与前端入门开发者解决快速搭建美观、可运行企业官网原型的实践需求。项目无需数据库即可一键启动结构清晰、注释充分支持灵活修改页面内容与样式特别适合教学演示、课程设计或个人作品集部署。压缩包共362个文件含26个HTML页面模板、16个CSS样式文件、10个JS交互脚本、18个Java控制器类如IndexController、NewsController、ProductController等及配套配置类yml、xml辅以大量图片资源126个PNG116个JPG和少量视频2个MP4用于素材展示整体大小为41.18MB。已有1116人学习下载提供开箱即用的前后端整合方案、典型MVC分层结构示例及异常处理MyExceptionHandler、WebSocketWebSocketServer等扩展能力参考助新手扎实理解SpringBoot Web开发全流程。1. 这不是「静态官网」而是一套可热加载、免数据库、开箱即用的 SpringBoot 官网骨架你可能刚在 CSDN 上看到那篇标题为《springbootthymeleafmavenhtmlcss实现精美大方好看官网模板完整源码》的文章点开 ZIP 包发现没 SQL 文件、没 application.properties 里写死的 MySQL 密码、连 H2 都没配——但它真能mvn spring-boot:run启动localhost:8080 刷出带轮播图、产品列表、新闻栏、响应式导航的完整官网页面。这不是前端静态页套了个 SpringBoot 外壳而是 Thymeleaf 模板引擎深度参与 DOM 构建的典型实践所有 HTML 页面都通过Controller返回逻辑视图名Thymeleaf 在服务端完成th:each循环渲染、th:if条件判断、th:fragment片段复用CSS 用的是纯原生 flex media query 实现三栏自适应连鼠标悬停动画:hover伪类和字体渐变效果都写在static/css/style.css里不依赖任何 JS 框架。它面向两类人一是 Java 新手想绕过 MyBatis/Hibernate 复杂配置直接理解「请求 → Controller → Model → Thymeleaf 渲染 HTML」的最小闭环二是已有项目需快速交付企业官网把src/main/resources/static/images/换成自家 banner 图改几处th:text${product.name}就能上线。关键在于——它把「模板复用性」和「前端表现力」同时做实了不是 demo 级玩具。2. Thymeleaf 模板驱动的静态内容架构从 fragment 复用到国际化占位符预埋2.1 为什么选 Thymeleaf 而非 FreeMarker 或 JSP核心是「前后端分离友好」与「HTML 原生可读性」这个官网模板没用 JSP已淘汰、没选 FreeMarker语法偏模板引擎专属坚持用 Thymeleaf根本原因在于其th:*属性天然嵌入 HTML 标签内。打开src/main/resources/templates/index.html你会看到!doctype html html langzh-cn xmlns:thhttp://www.thymeleaf.org head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title th:text#{index.title}企业官网/title link relstylesheet th:href{/css/style.css} /head body header th:replacefragments/header :: header/header main classcontainer section th:replacefragments/banner :: banner/section section th:replacefragments/products :: products/section /main footer th:replacefragments/footer :: footer/footer /body /html提示th:replace是 Thymeleaf 最关键的复用机制它把fragments/下的独立 HTML 片段如header.html注入当前位置且片段内可定义th:fragmentheader显式声明入口点。这比 JSP 的jsp:include更灵活因为片段本身也是合法 HTML设计师用浏览器直接打开fragments/header.html就能看到样式效果无需启动 SpringBoot。对比 FreeMarker 的#include header.ftl后者文件后缀.ftl表明它已脱离 HTML 生态前端无法独立预览而 Thymeleaf 的.html后缀让整个模板体系保持「所见即所得」——这是新手上手快的核心设计选择。2.2fragments/目录结构解析header、banner、products、footer 四大复用单元项目中src/main/resources/templates/fragments/目录下有 4 个核心片段文件每个都遵循「结构语义化 CSS 类命名规范」原则header.html含导航栏nav使用th:eachmenu : ${menus}动态生成菜单项数据来自IndexController的model.addAttribute(menus, Arrays.asList(...))banner.html轮播图区域用th:eachslide : ${banners}渲染ListBannerBanner 对象仅含title、desc、imageUrl三个字段无数据库映射products.html三列产品展示区th:eachproduct : ${products}遍历ListProduct每个Product类含name、summary、iconUrl图标路径为static/images/product-icon-1.pngfooter.html版权信息与联系方式th:text${site.copyright}绑定配置项避免硬编码这些片段被index.html、product.html、news.html共同引用修改fragments/header.html即全局生效。实际开发中我一般会把menus数据抽离到application.yml中site: menus: - name: 首页 url: / - name: 产品中心 url: /products - name: 新闻动态 url: /news - name: 关于我们 url: /about然后在IndexController中通过Value(${site.menus})注入比硬编码更易维护。2.3 国际化占位符预埋#{index.title}背后的 message.properties 机制虽然摘要说「不需要数据库」但模板已为国际化预留接口。观察index.html中的title th:text#{index.title}它指向src/main/resources/messages.properties# messages.properties中文 index.titleXX科技有限公司官网 index.welcome欢迎访问我们的官方网站 product.list.title核心产品对应英文版messages_en.properties# messages_en.properties index.titleXX Technology Co., Ltd. Official Website index.welcomeWelcome to our official website product.list.titleCore ProductsSpringBoot 默认启用MessageSource自动扫描messages_*.properties。要触发切换只需在 URL 后加?langen如http://localhost:8080/?langen或在application.yml中配置默认语言spring: messages: basename: messages encoding: UTF-8 cache-duration: 3600注意th:text#{xxx}中的键名必须与 properties 文件中完全一致大小写敏感。若页面显示??index.title??说明messages.properties编码不是 UTF-8用 Notepad 保存为 UTF-8 无 BOM 格式可解决。3. Maven 构建与静态资源管理从阿里云镜像加速到 CSS 响应式断点实战3.1pom.xml关键依赖解析为什么只引入spring-boot-starter-thymeleaf而非spring-boot-starter-webflux打开pom.xml核心依赖只有三项dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-thymeleaf/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId scoperuntime/scope optionaltrue/optional /dependency没有spring-boot-starter-data-jpa、没有mybatis-spring-boot-starter印证了「免数据库」承诺。spring-boot-starter-thymeleaf自动配置了TemplateResolver、SpringTemplateEngine和ThymeleafViewResolver无需手动注册 Bean。特别注意spring-boot-devtools它启用热重载Hot Reload修改templates/下 HTML 或static/css/下 CSS 后刷新浏览器即可生效省去重启服务时间——这对前端样式调试至关重要。Maven 仓库配置方面国内用户务必修改~/.m2/settings.xml添加阿里云镜像否则mvn clean package可能卡在下载thymeleaf-spring5mirrors mirror idaliyunmaven/id mirrorOf*/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirror /mirrors3.2static/目录下的 CSS 工程实践三行模式布局与:hover伪类动画实现官网的视觉效果主要由src/main/resources/static/css/style.css驱动。该文件采用「移动优先」策略关键 CSS 规则如下/* 三行模式header main footer */ body { margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; } header, footer { background: #2c3e50; color: white; padding: 1rem 0; } main { min-height: calc(100vh - 200px); /* 减去 header/footer 高度 */ } /* 响应式三栏产品展示 */ .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; padding: 2rem 1rem; } /* 鼠标悬停动画卡片上浮 阴影增强 */ .product-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); } /* 字体渐变效果现代 CSS 写法 */ .gradient-title { background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }提示grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))是「三行模式」的核心——在宽度 ≥300px 时每行放 1 个卡片≥600px 放 2 个≥900px 放 3 个自动适配屏幕。transition: all 0.3s ease与:hover配合实现平滑上浮动画比 jQuery 的animate()更轻量。3.3application.yml静态资源配置禁用模板缓存与设置默认编码为确保开发阶段 HTML/CSS 修改即时生效application.yml中必须关闭 Thymeleaf 缓存spring: thymeleaf: cache: false # 开发环境务必设为 false enabled: true prefix: classpath:/templates/ suffix: .html encoding: UTF-8 servlet: content-type: text/html resources: static-locations: classpath:/static/ add-mappings: true若忽略cache: false修改index.html后刷新页面仍显示旧内容新手常在此卡住。另外encoding: UTF-8防止中文乱码static-locations明确指定静态资源根目录为classpath:/static/对应src/main/resources/static/。4. Controller 层数据供给逻辑从Controller返回视图到WebResultMap统一响应封装4.1IndexController的极简数据模型Model对象如何承载首页所需全部数据IndexController.java是整个官网的数据中枢其index()方法代码不足 20 行Controller public class IndexController { GetMapping(/) public String index(Model model) { // 轮播图数据纯内存 List ListBanner banners Arrays.asList( new Banner(AI平台, 一站式AI开发与部署平台, /images/banner-1.jpg), new Banner(云服务, 高可用、弹性伸缩的云基础设施, /images/banner-2.jpg) ); model.addAttribute(banners, banners); // 产品列表 ListProduct products Arrays.asList( new Product(智能客服, 基于NLP的多轮对话系统, /images/icon-customer.png), new Product(数据分析, 可视化BI报表与实时监控, /images/icon-analytics.png) ); model.addAttribute(products, products); // 导航菜单来自 application.yml 配置 model.addAttribute(menus, getMenusFromConfig()); return index; // 对应 templates/index.html } }这里的关键是所有数据都是new Banner(...)构造的内存对象不查数据库。Banner和Product是普通 POJO仅含 getter/setter无 JPA 注解。这种设计让新手一眼看懂「Controller 怎么把数据塞给模板」也方便后续拓展——当需要接入数据库时只需把Arrays.asList(...)替换为productService.findAll()即可模板层th:each语法完全不用改。4.2WebResultMap轻量级统一响应格式的设计意图与使用边界项目中存在WebResultMap.class它是一个 Map 子类用于封装 AJAX 接口返回值public class WebResultMap extends HashMapString, Object { public WebResultMap success(String msg) { this.put(code, 200); this.put(msg, msg); this.put(data, new HashMap()); return this; } public WebResultMap data(Object data) { this.put(data, data); return this; } }但它并未在官网 HTML 渲染流程中使用。IndexController返回String视图名走 Thymeleaf 渲染而NewsController中的ResponseBody方法才用WebResultMapRestController public class NewsController { GetMapping(/api/news/latest) public WebResultMap getLatestNews() { return new WebResultMap() .success(获取成功) .data(Arrays.asList( new News(公司获AI创新奖, 2023-10-01), new News(新版本V2.1发布, 2023-09-15) )); } }提示WebResultMap是为未来「后台管理界面」预留的 AJAX 响应结构当前官网静态页不调用/api/接口。若你想在首页用 JS 动态加载新闻可在index.html中加script th:inlinejavascript $.get(/api/news/latest, function(res) { if (res.code 200) { $(#news-list).html( res.data.map(n li${n.title} small${n.date}/small/li).join() ); } }); /script此时WebResultMap才真正发挥作用。4.3MyBasicErrorController自定义 404/500 页面的 Thymeleaf 实现SpringBoot 默认错误页简陋本项目通过MyBasicErrorController提供友好提示Controller public class MyBasicErrorController implements ErrorController { RequestMapping(/error) public String handleError(HttpServletRequest request, Model model) { Integer statusCode (Integer) request.getAttribute(RequestDispatcher.ERROR_STATUS_CODE); model.addAttribute(statusCode, statusCode); model.addAttribute(errorMsg, statusCode 404 ? 页面未找到 : 服务器内部错误); return error; // 对应 templates/error.html } Override public String getErrorPath() { return /error; } }对应的templates/error.html使用 Thymeleaf 渲染状态码和提示语div classerror-container h1 th:text${statusCode}404/h1 p th:text${errorMsg}页面未找到/p a href/ classbtn返回首页/a /div这比 SpringBoot 默认的白页更专业且完全复用现有 Thymeleaf 机制无需额外技术栈。5. 新手快速上手四步法替换图片、修改文案、调整 CSS、验证响应式5.1 替换官网 Banner 图片与产品图标static/images/目录操作指南所有静态图片存放在src/main/resources/static/images/结构清晰images/ ├── banner-1.jpg ← 首页轮播图1 ├── banner-2.jpg ← 首页轮播图2 ├── icon-customer.png ← 产品图标1 ├── icon-analytics.png ← 产品图标2 └── logo.png ← 顶部 Logo替换步骤准备新图片Banner 图建议尺寸 1200×400px宽高比 3:1图标建议 64×64px PNG 透明背景覆盖同名文件将新banner-1.jpg拖入static/images/覆盖原文件修改IndexController中的路径若文件名变更new Banner(AI平台, 一站式AI开发与部署平台, /images/new-banner-1.jpg)启动项目访问http://localhost:8080查看效果注意图片路径以/images/开头表示从static/目录起始Thymeleaf 会自动映射为http://localhost:8080/images/xxx.jpg。5.2 修改文案与 SEO 元信息messages.properties与index.html双轨更新官网文案分两类动态文案支持国际化存于messages.properties如index.title新公司名称官网静态文案不需翻译直接写在index.html中如h2关于我们/h2中的「关于我们」SEO 关键元信息在index.htmlhead内meta namedescription contentXX科技提供AI平台、云服务等解决方案 th:attrcontent#{index.description} meta namekeywords contentAI,云计算,大数据 th:attrcontent#{index.keywords}因此需同步修改messages.properties中新增index.descriptionXX科技提供AI平台、云服务等解决方案 index.keywordsAI,云计算,大数据index.html中th:attrcontent#{...}引用对应键名5.3 调整 CSS 断点与悬停效果style.css中可安全修改的参数表static/css/style.css中以下参数可按需调整不影响整体结构CSS 属性当前值推荐范围效果说明.products-grid gap1.5rem1rem ~ 2rem控制产品卡片间距.product-card:hover transformtranslateY(-5px)-3px ~ -10px悬停上浮幅度media (max-width: 768px)grid-template-columns: 1fr可删减此媒体查询移动端单列显示.gradient-title backgroundlinear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1)替换为品牌色 HEX字体渐变色修改后保存 CSS 文件因spring.thymeleaf.cachefalse刷新浏览器立即生效。5.4 验证响应式与跨浏览器兼容性Chrome DevTools 设备模拟与真实手机测试最后一步必须验证Chrome DevToolsF12 打开开发者工具 → 点击左上角「Toggle device toolbar」→ 选择 iPhone SE / iPad / Responsive 拉伸窗口检查导航栏是否折叠、轮播图是否适配、产品网格是否换行真实手机访问确保电脑与手机在同一局域网启动项目后在手机浏览器输入http://[电脑IP]:8080如http://192.168.1.100:8080测试触摸交互如轮播图手势滑动、导航菜单点击展开若移动端文字过小检查index.html中meta nameviewport是否存在且contentwidthdevice-width, initial-scale1.0未被注释。这是 HTML5 响应式基石缺之则所有 CSS 媒体查询失效。CSS 伪类选择器:hover在触摸设备上无效果故产品卡片悬停动画在手机端自动降级为静态样式——这正是「渐进增强」设计思想的体现无需额外 JS 适配。本文还有配套的精品资源点击获取