@[toc]

基本要求

仓库链接 代码规范链接 云服务器链接

仓库地址 云服务器链接

• 依照下方规范，代码规范在项目中 代码规范地址

功能分析

1. 系统设计

1.1 模块化设计

该网站应采用模块化设计，将不同的功能模块进行独立开发和维护。主要模块包括：

• 赛事日程模块：展示比赛日程、赛程安排和比赛结果。

• 奖牌榜模块：实时更新各国奖牌数，包括金银铜奖牌的分布。

• 足球对阵模块：展示足球比赛的结果信息。

• 首页模块：提供最新的赛事新闻、亮点回顾等。

1.2 系统架构

• 前端：前端部分可以采用基于 Vue.js 的单页面应用程序（SPA）架构，确保页面的动态更新速度快，用户体验流畅。结合 Element UI 提供一致性高、视觉美观的界面。

2. 系统合理性分析

2.1 可扩展性

模块化设计允许后期功能扩展和升级变得更加简单。例如，系统可以随时新增一个新的互动模块或数据分析模块，而不影响现有功能的运行。确保系统能长期运行和适应未来需求。

2.2 用户体验

用户体验设计方面通过 SPA 和缓存机制，确保页面加载速度快，交互流畅，使用简单易懂。此外，提供个性化的推荐系统、多语言支持、以及各类互动功能，确保全球用户无障碍访问，并提升参与感。

模型设计

开发工具

Vue

设计过程

• 确认需求，决定功能接口

• 设计网页由几个部分组成。

• 具现化每个页面，并且链接关系

结果汇报

设计思路

首页

首页支持四个标题跳转

同时制作了奥运海报，新闻快讯，以及联系方式等信息。

奖牌榜

可滑动奖牌榜，拥有全面的国家获奖信息

竞赛日程

每日项目

实现日期跳转

比赛的对阵双方以及结果

查看出赛名单

切换查看详情

足球对阵

足球对阵图，同时鼠标移入呈现动效

点击观看相关赛事视频

代码说明

首页跳转实现

 <div >
         <div class="div1">
             <div class="div2">
                 <button class="btn1">
                     <router-link to="/home_page">首页</router-link>
                 </button>
                 <button class="btn1">
                     <router-link to="/medal_list">奖牌</router-link>
                 </button>
                 <button class="btn1">
                     <router-link to="/everyday_game">赛况</router-link>
                 </button>
                 <button class="btn1">
                     <router-link to="/football_battle">足球</router-link>
                 </button>
             </div>
         </div>
     
    .................................
     
 <style>    
 .btn1 {
     background-color: #fff; /* 白色背景 */
     border: none; /* 无边框 */
     border-radius: 50%; /* 圆形按钮 */
     width: 50px; /* 按钮宽度 */
     height: 50px; /* 按钮高度 */
     cursor: pointer; /* 鼠标悬停时显示手形光标 */
     margin-right: 15px; /* 右边距 */
 }
 </style> 
 ​

将文字写于按钮中，用router-link方法来实现页面跳转

首页新闻快讯部分

 </div>
         <h2 style="font-size: 1.8rem;margin-left: 10px;">新闻快讯</h2>
         <hr style="margin: 5px;">
         <div style="display: flex;">
             <div class="div5">
                 <h2 style="color: aliceblue;">回顾 Léon Mar 奥运会</h2>
             </div>
 ​
             <div>
 ​
                 <img src="https://img.olympics.com/images/image/private/t_16-9_640/f_auto/primary/oiby8xfrjsvvrzhj05iz"
                     width="500px">
                 <h2>您最喜欢的运动员和团队的表现如何？</h2>
             </div>
 ​
         </div>
 ​
         <div style="display: flex; margin-top: 20px;">
             <div style="display: flex; margin-left: 20px;">
                 <img src="https://img.olympics.com/images/image/private/t_1-1_85/f_auto/primary/nqa5embksmb9hujkjlw1">
                 <h3 style="margin-left: 10px;">
                     Les JO de Paris 2024 avaient tout pour eux : Sports
                     <br>
                     激情比赛
                 </h3>
             </div>
             <div style="display: flex; margin-left: 20px;">
                 <img src="https://img.olympics.com/images/image/private/t_1-1_85/f_auto/primary/rz2kkqo2urreowmpnfg0">
                 <h3 style="margin-left: 10px;">
                     Sites iconiques, Parc des Champions, cérémonie
                     <br>
                     热烈巴黎
                 </h3>
             </div>
             <div style="display: flex; margin-left: 20px;">
                 <img src="https://img.olympics.com/images/image/private/t_1-1_85/f_auto/primary/sz5uhgfeojam4rpy2ooe">
                 <h3 style="margin-left: 10px;">
                     Pauline Ferrand-Prévot | Replay
                     <br>
                     疯狂一夏
                 </h3>
             </div>
         </div>

巧妙地应用flex等样式，通过调整margin-left和right等参数控制图片的相对布局

奖牌榜所有国家排名实现

         <div  v-for="(country,index) in countries" :key="index" style="display: block;unicode-bidi: isolate;">
             <div style="display: flex;;width: 862px;height: 56px;margin: 0 auto;box-sizing: border-box;border: 1px solid #ddd;margin-top: 10px;padding: 0 20px;">
                 <p  style="margin-right: 40px; width: 17.76px;">{{ country.index }}</p>
                 <img  :src="countries[index].img" style="width: 30px;height: 20px;position: relative;top: 4px;margin-right: 10px;margin-top: 15px;">
                 <p  style="margin-right: 150px; width: 176px;">{{ country.name }}</p>
                 <p  style="color: rgb(102, 102, 102); margin-right: 70px; width: 17.76px;">{{country.gold}}</p>
                 <p  style="color: rgb(102, 102, 102); margin-right: 70px; width: 17.76px;">{{ country.sliver }}</p>
                 <p  style="color: rgb(102, 102, 102); margin-right: 70px; width: 17.76px;">{{country.brozen}}</p>
                 <p  style="margin-right: 50px; width: 26.65px;">{{country.total}}</p>
                 <button style="margin-top: 10px; width: 32px;height: 32px;background-color: #fff;border: 1px solid #999;border-radius: 5px;">
                     <img src="https://gstatic.olympics.com/s1/t_original/static/srm/paris-2024/expand.svg" width="24" height="24" style="position: relative;right: 3px;top: 3px;">
                 </button>
             </div>
         </div>
 ​
 ....................................
 <script>
 import axios from 'axios';
 ​
 export default {
     data(){
         return{
             countries:[]       
         }
     },
     methods: {
         
     },
     mounted(){
         axios.get("data/img.json").then((result) => {
             this.countries = result.data.data;
         }).catch((err) => {
             alert(err + "数据传输失败");
         });
     }
 }
 </script>

通过抓包先爬取网页数据处理成img.json文件

然后外层容器用v-for循环遍历countries数组生成多个div

内层容器，使用 flex 布局，将元素横向排列，然后获取国家的具体信息

日期选择器

          <!-- 日期选择器栏，阴影效果和居中对齐 -->
         <div style="height: 72px; width: 100%; box-shadow: 0 5px 5px #eee;">
             <div style="width: 896px; height: 100%; margin: 0 auto; box-sizing: border-box; padding: 16px; display: flex; justify-content: end; align-items: center;">
                 <!-- 使用 Element UI 中的日期选择器组件 -->
                 <el-date-picker v-model="value1" type="date" placeholder="选择日期" value-format="M-dd" :picker-options="dataRange">
                 </el-date-picker>
             </div>
         </div>
 ​
         <!-- 选择日期后的显示栏，背景色为蓝色，居中对齐 -->
         <div style="width: 1200px; height: 100px; margin: 0 auto; background-color: rgb(167, 192, 242); margin-bottom: 40px; margin-top: 30px; display: flex; justify-content: center; align-items: center;">
             <p style="color: #fff; font-size: 40px; margin: 0">{{ value1 }}</p>
         </div>
 ​
 ​
 ​
 ​
 <script>
 import axios from 'axios';
 ​
 export default {
 ​
     data() {
         return {
             althes:[],
             value1: "7-24",
             dataRange:{
                 disabledDate(time){
                     return new Date(time).getTime() < new Date('2024-07-23').getTime() || new Date(time).getTime() > new Date('2024-08-12').getTime();
                 }
             }
         }
     },
     methods(){
 ​
     },
     mounted(){
         axios.get("data/7-24.json").then((result) => {
             this.althes = result.data.data;
         }).catch((err) => {
             alert(err + "数据传输失败");
         });
     },
     updated(){
         axios.get("data/"+this.value1+".json").then((result) => {
             this.althes = result.data.data;
         }).catch((err) => {
             alert(err + "数据传输失败");
         });
     }
 ​
 }
 </script>

用Element UI 中的日期选择器组件 value-format定义了日期格式picker-options 限制可选日期范围,

并且将选择日期后的显示栏变蓝，字体变白。

用updated()函数监听 value1 的更新，当日期更改时重新获取对应日期的数据

比赛详细信息

 <!-- 比赛信息的循环展示-->
         <div v-for="(player,index) in althes" :key="index" style="display: block; width: 1000px; height: 220px; margin: 0 auto;">
             <div style="width: 100%; border: 2px solid rgba(0, 0, 0, .6); border-radius: 10px; cursor: pointer; margin-bottom: 20px;">
                 <div style="width: 100%; height: 80px; box-sizing: border-box; display: flex;">
                     <div style="width: 100px; height: 100%; display: flex; justify-content: center; align-items: center; border-right: 2px solid rgba(0, 0, 0, .6); box-sizing: border-box;">
                         <p style="font-weight: 700; font-size: 20px;">{{player.time}}</p>
                     </div>
                      <!-- 如果比赛是足球 -->
                     <router-link to="/match_details" v-if="player.competitionName == '足球'" style="display:contents">
                         <div style="width: 200px; height: 100%; margin-left: 30px; box-sizing: border-box; padding-top: 5px; display:contents">
                             <p style="font-size: 25px; font-weight: 900; margin-left: 25px;">{{player.competitionName}}</p>
                             <p style="font-size: 15px; margin-top: 35px; margin-left: 22px;">{{player.competitionInfo}}</p>
                         </div>
                     </router-link>
 ​
                     <!-- 如果比赛不是足球 -->
                     <div v-else style="width: 200px; height: 100%; margin-left: 30px; box-sizing: border-box; padding-top: 5px; display:contents">
                         <p style="font-size: 25px; font-weight: 900; margin-left: 25px;">{{player.competitionName}}</p>
                         <p style="font-size: 15px; margin-top: 35px; margin-left: 22px;">{{player.competitionInfo}}</p>
                     </div>
                 </div>
 ​
                 <!-- 比赛下半部分 -->
                 <div style="border-top: 2px solid rgba(0, 0, 0, .6); width: 100%; min-height: 100px;">
                     <!-- 第一支国家队信息，显示国旗、国家名称和比分 -->
                     <div style="width: 100%; height: 50px; display: flex; align-items: center; box-sizing: border-box; padding-left: 120px; position: relative;">
                         <span v-if="althes[index].countryImg1 != null"><img :src="althes[index].countryImg1" style="width: 31.6px; height: 21.6px;"></span>
                         <span v-else><img src="https://gstatic.olympics.com/s1/t_original/static/noc/oly/3x2/180x120/EOR.png" style="width: 31.6px; height: 21.6px;"></span>
                         <p style="margin-left: 15px;">{{player.countryName1}}</p>
                         <p style="position: absolute; right: 20px; font-weight: 900;">{{ player.countryScore1 }}</p>
                     </div>
 ​
                     <!-- 第二支国家队信息，布局同上 -->
                     <div style="width: 100%; height: 50px; display: flex; align-items: center; box-sizing: border-box; padding-left: 120px; position: relative;">
                         <span v-if="althes[index].countryImg2 != null"><img :src="althes[index].countryImg2" style="width: 31.6px; height: 21.6px;"></span>
                         <span v-else><img src="https://gstatic.olympics.com/s1/t_original/static/noc/oly/3x2/180x120/EOR.png" style="width: 31.6px; height: 21.6px;"></span>
                         <p style="margin-left: 15px;">{{player.countryName2}}</p>
                         <p style="position: absolute; right: 20px; font-weight: 900;">{{ player.countryScore2 }}</p>
                     </div>
                 </div>
             </div>

遍历 althes 数组中的每个比赛项目,每个比赛的外层容器，包含比赛时间、比赛名称和比赛国家等信息

然后 如果比赛是足球，则使用 router-link 跳转到比赛详情页 ，如果比赛不是足球，直接展示比赛名称和信息，不跳转。

比赛下半部分，展示国家和比分。 ###

 <router-link :to="{ path: '/match_details', query:{'date':value1,'s1':score1,'s2':score2} }" v-if="player.competitionName=='足球'" style="display:contents">
                         <div style="width: 200px;height: 100%;margin-left: 30px;box-sizing: border-box;padding-top: 5px;display:contents">
                             <p style="font-size: 25px;font-weight: 900;margin-left: 25px;">{{player.competitionName}}</p>
                             <p style="font-size: 15px;margin-top: 35px;margin-left: 22px;">{{player.competitionInfo}}</p>
                         </div>
                     </router-link>

在页面跳转时传递数据，实现页面关联

遇到的困难及解决方法

困难描述

1. 日期选择器难以制作

2. 足球对阵放大缩小会改变相对布局

3. 如何实现按钮的跳转 4.如何传递信息在不同页面

解决尝试+是否解决

1. A：通过搜索引擎得知 用 Element UI 可以方便快速实现 。

2. A：在设置组件位置时不能将位置信息设置为absolute(绝对)，而是要相对的

3. A: 通过B站视频得知要用到router-link 4.可以使用query传递，拿this.$route.query接收

有何收获

前端的知识非常错综复杂，还需要更多的学习体验。

组队总结

结对感受

此次编程任务较为艰巨，

队友评价

zc to zeq 各尽其能，各司所职 zeq to zc 很强，被带飞了

合作截图

敲定项目合作及分工

确认进度

PSP表格