当前位置：首页 > news >正文

Java Web | 世界杯赛事网站开发

news 2026/7/15 21:10:46

一、项目概述

1. 开发背景

本次课程结合 JavaWeb 后端开发与 UI 前端设计，参考 NBA 赛事展示页面，自主设计 2026 世界杯专题门户网站。需求：导航栏 + 轮播封面、实时正在比赛板块、多卡片赛程、淘汰赛树形对阵图、球队积分榜、独立直播页面；UI 页面实时显示北京时间，无需 MySQL 数据库，使用内存集合模拟数据，JDK25 直接运行。

2. 技术栈

后端（SpringBoot MVC）

JDK：25

框架：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.java

2. Controller 数据传递核心

3. 前端循环渲染赛程卡片

4. JS 实时北京时间

五、踩坑记录

SpringBoot4.1.0 MyBatis 兼容报错最初想用 MyBatis 做数据库持久化，启动直接报factoryBeanObjectType内部异常，高版本 Spring 与 MyBatis 扫描 Mapper 冲突。解决方案：放弃数据库，改用内存 List 模拟数据，移除 MyBatis 全套依赖，彻底规避兼容 bug
页面跳转 500 内部服务器错误前端 Thymeleaf 读取实体属性缺失对应 getter 方法，模板渲染失败。解决方案：所有实体每个私有字段完整手写 get/set，不使用 Lombok 避免插件兼容问题
文件夹存放位置错误页面找不到模板 index.html templates，Thymeleaf 仅识别src/main/resources/templates下页面。