一、项目概述1. 开发背景本次课程结合 JavaWeb 后端开发与 UI 前端设计参考 NBA 赛事展示页面自主设计 2026 世界杯专题门户网站。 需求导航栏 轮播封面、实时正在比赛板块、多卡片赛程、淘汰赛树形对阵图、球队积分榜、独立直播页面UI 页面实时显示北京时间无需 MySQL 数据库使用内存集合模拟数据JDK25 直接运行。2. 技术栈后端SpringBoot MVCJDK25框架SpringBoot 4.1.0模板引擎Thymeleaf前后端数据联动渲染构建工具Maven数据存储内存 List 集合无数据库开箱即用核心注解Controller、GetMapping前端HTML CSS3黄绿色主题Thymeleaf 动态语法th:each循环渲染球队 / 赛程卡片JavaScript本地实时北京时间计时器外部资源flagcdn 国旗在线图片无需本地素材二、整体系统架构实体层三层实体封装业务数据Team球队id、球队名、积分Match全部赛程队名、国旗、时间、状态、比分LiveBroadcast直播跳转页面专用赛事实体供 Controller 读取传递到前端页面。控制层页面跳转接口index首页主页面传递球队、全部赛程、直播数据live独立直播页面teamPage简易积分榜旧页面,构造方法预加载模拟赛事数据充当数据库模拟数据View 视图层三个页面全部放在templates文件夹index.html首页完成导航、轮播、实时赛事、赛程卡片、淘汰赛图、积分榜、页脚等模块live.html直播专属页面展示直播对阵与播放占位区域teamList.html制作队伍对应积分列表传数据三、功能模块详细介绍1. 首页五大核心板块顶部导航栏采用深绿色导航锚点跳转页面对应板块可切换直播、积分榜、赛程。首页轮播横幅采用世界杯背景图用JS实现顶部实时刷新北京时间。当前正在进行赛事 筛选正在进行状态比赛展示双队国旗、实时比分、北京时间右侧有进入直播跳转按钮。赛程一览区域用卡片底色来区分正在进行、已结束、未开赛三种状态同时显示国旗、队伍、开赛时间、比分。淘汰赛对阵导图八强→四强→决赛 网格布局模拟赛事晋级流程图搭配各国国旗展示历年晋级结果。球队积分榜表格用后端循环渲染所有球队排名、名称、积分样式。2. 独立直播页面点击红色进入直播按钮跳转展示直播对阵双方国旗、赛事标题、直播时间预留视频播放区域与导航栏互通首页。3. UI 设计全部面板、导航、表格使用黄绿色。弱化厚重深色阴影文字采用浅白色摒弃纯黑柔和护眼响应式布局电脑 / 平板 / 手机自动适配卡片行列。四、核心代码展示1. 实体类示例 Match.java2. Controller 数据传递核心3. 前端循环渲染赛程卡片4. JS 实时北京时间五、踩坑记录SpringBoot4.1.0 MyBatis 兼容报错最初想用 MyBatis 做数据库持久化启动直接报factoryBeanObjectType内部异常高版本 Spring 与 MyBatis 扫描 Mapper 冲突。 解决方案放弃数据库改用内存 List 模拟数据移除 MyBatis 全套依赖彻底规避兼容 bug页面跳转 500 内部服务器错误前端 Thymeleaf 读取实体属性缺失对应 getter 方法模板渲染失败。 解决方案所有实体每个私有字段完整手写 get/set不使用 Lombok 避免插件兼容问题文件夹存放位置错误页面找不到模板 index.html templatesThymeleaf 仅识别src/main/resources/templates下页面。六、项目运行说明环境JDK25、IDEA 开发工具导入项目Maven 自动加载 Web、Thymeleaf 依赖运行启动类FootballApplication浏览器访问http://localhost:8080/index直播页面地址http://localhost:8080/live七、项目总结完成 MVC 分层完整前后端交互后端 Java 提供动态数据前端 Thymeleaf 渲染页面结合 UI 设计需求实现布局分层包含导航、轮播、实时赛事、赛程卡片、淘汰赛导图、积分榜、直播页踩坑过程熟悉 SpringBoot 版本兼容、实体封装、Thymeleaf 模板语法、CSS 样式等知识可拓展方向新增表单添加球队、真实直播视频播放器、赛程筛选功能
一、项目概述1. 开发背景本次课程结合 JavaWeb 后端开发与 UI 前端设计参考 NBA 赛事展示页面自主设计 2026 世界杯专题门户网站。 需求导航栏 轮播封面、实时正在比赛板块、多卡片赛程、淘汰赛树形对阵图、球队积分榜、独立直播页面UI 页面实时显示北京时间无需 MySQL 数据库使用内存集合模拟数据JDK25 直接运行。2. 技术栈后端SpringBoot MVCJDK25框架SpringBoot 4.1.0模板引擎Thymeleaf前后端数据联动渲染构建工具Maven数据存储内存 List 集合无数据库开箱即用核心注解Controller、GetMapping前端HTML CSS3黄绿色主题Thymeleaf 动态语法th:each循环渲染球队 / 赛程卡片JavaScript本地实时北京时间计时器外部资源flagcdn 国旗在线图片无需本地素材二、整体系统架构实体层三层实体封装业务数据Team球队id、球队名、积分Match全部赛程队名、国旗、时间、状态、比分LiveBroadcast直播跳转页面专用赛事实体供 Controller 读取传递到前端页面。控制层页面跳转接口index首页主页面传递球队、全部赛程、直播数据live独立直播页面teamPage简易积分榜旧页面,构造方法预加载模拟赛事数据充当数据库模拟数据View 视图层三个页面全部放在templates文件夹index.html首页完成导航、轮播、实时赛事、赛程卡片、淘汰赛图、积分榜、页脚等模块live.html直播专属页面展示直播对阵与播放占位区域teamList.html制作队伍对应积分列表传数据三、功能模块详细介绍1. 首页五大核心板块顶部导航栏采用深绿色导航锚点跳转页面对应板块可切换直播、积分榜、赛程。首页轮播横幅采用世界杯背景图用JS实现顶部实时刷新北京时间。当前正在进行赛事 筛选正在进行状态比赛展示双队国旗、实时比分、北京时间右侧有进入直播跳转按钮。赛程一览区域用卡片底色来区分正在进行、已结束、未开赛三种状态同时显示国旗、队伍、开赛时间、比分。淘汰赛对阵导图八强→四强→决赛 网格布局模拟赛事晋级流程图搭配各国国旗展示历年晋级结果。球队积分榜表格用后端循环渲染所有球队排名、名称、积分样式。2. 独立直播页面点击红色进入直播按钮跳转展示直播对阵双方国旗、赛事标题、直播时间预留视频播放区域与导航栏互通首页。3. UI 设计全部面板、导航、表格使用黄绿色。弱化厚重深色阴影文字采用浅白色摒弃纯黑柔和护眼响应式布局电脑 / 平板 / 手机自动适配卡片行列。四、核心代码展示1. 实体类示例 Match.java2. Controller 数据传递核心3. 前端循环渲染赛程卡片4. JS 实时北京时间五、踩坑记录SpringBoot4.1.0 MyBatis 兼容报错最初想用 MyBatis 做数据库持久化启动直接报factoryBeanObjectType内部异常高版本 Spring 与 MyBatis 扫描 Mapper 冲突。 解决方案放弃数据库改用内存 List 模拟数据移除 MyBatis 全套依赖彻底规避兼容 bug页面跳转 500 内部服务器错误前端 Thymeleaf 读取实体属性缺失对应 getter 方法模板渲染失败。 解决方案所有实体每个私有字段完整手写 get/set不使用 Lombok 避免插件兼容问题文件夹存放位置错误页面找不到模板 index.html templatesThymeleaf 仅识别src/main/resources/templates下页面。六、项目运行说明环境JDK25、IDEA 开发工具导入项目Maven 自动加载 Web、Thymeleaf 依赖运行启动类FootballApplication浏览器访问http://localhost:8080/index直播页面地址http://localhost:8080/live七、项目总结完成 MVC 分层完整前后端交互后端 Java 提供动态数据前端 Thymeleaf 渲染页面结合 UI 设计需求实现布局分层包含导航、轮播、实时赛事、赛程卡片、淘汰赛导图、积分榜、直播页踩坑过程熟悉 SpringBoot 版本兼容、实体封装、Thymeleaf 模板语法、CSS 样式等知识可拓展方向新增表单添加球队、真实直播视频播放器、赛程筛选功能
