结对第二次作业——编程实现

[222100335廖晨旭]

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第二次作业——编程实现
结对学号	222100330，222100335
这个作业的目标	git协作开发、前后端分离开发实现原型
其他参考文献	《构建之法》，Vue官方文档

---

文章目录

• git仓库链接和代码规范链接和项目访问链接
• 一、PSP表格
• 二、成品展示
• 基础功能
• 封面及导航栏
• 1.选手信息
• 2.每日赛况（赛程安排）
• 3.详细赛况
• 4.奖牌榜
• 附加功能
• 1.精彩瞬间
• 2.奖牌榜排序
• 3.了解更多
• 4.选手个人信息展示
• 三、结对讨论过程描述
• 讨论过程
• 解决问题
• 查找资料
• 讨论截图
• 四、设计实现过程
• 功能结构图
• 设计实现
• 基础功能
• 附加功能
• 五、代码说明
• 详细赛况实现代码
• 赛程下拉菜单显示完整比赛信息
• 奖牌榜排序功能的实现
• 六、心路历程和收获
• 七、评价结对队友

---

git仓库链接和代码规范链接和项目访问链接

git仓库链接
Vue代码规范链接
项目访问链接

---

一、PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
•Planning	计划	30	30
• Estimate	• 估计这个任务需要多少时间	5	5
• Analysis	• 需求分析 (包括学习新技术）	40	40
• Discussion	• 结对讨论	20	20
• Design	• 界面原型设计	110	110
• Improvement	• 原型改进	180	298
• Reporting	• 报告	120	120
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	60	60
	合计	565	683

---

二、成品展示

基础功能

封面及导航栏

导航栏用于切换不同的页面以显示不同内容，分类明确，便于用户寻找有关信息，提高网站的便捷性。

1.选手信息

显示选手的基本信息，如姓名，国别，性别，出生日期，还附带了选手照片和国旗，最右边的栏位实现了点击后切换至选手个人信息页面，具体实现见附加功能。
选手信息表格上方的按钮点击后可进行选手信息和赛程安排的切换，赛程安排页面见下一项内容。

2.每日赛况（赛程安排）

这个页面可以进行每日赛况的查看，点击每一项比赛后会跳转至对应的比赛项目的详细赛况界面，具体见下一项“详细赛况”内容。

3.详细赛况

未展开任何比赛项目时会密集显示赛程信息，便于寻找到所需要观看的比赛信息：

点击对应比赛项目后会显示出该比赛项目的详细赛况，包括选手排名，该选手的大致信息

点击右侧栏位的“+”号按钮可以查看该选手在本次比赛的总分数及落后分数，展示更加详尽的信息

4.奖牌榜

奖牌榜能直观友好显示出每个国家获得的各个奖牌数量，金牌，银牌，铜牌，总牌数，

---

附加功能

1.精彩瞬间

展示了一些比赛相关照片，并配上一些现场解说，用于丰富平台的图文介绍，提高用户观看体验，如下图：

2.奖牌榜排序

我们还添加了对每个国家获得的各种牌数进行排序的功能，然后显示目前是对哪种牌进行排序，默认排序为金牌排序。更加直观且友好地展示了每个国家的获奖情况，具体如下，只举出金牌和银牌排序的相关图片：

3.了解更多

这个页面展示了关于世界游泳锦标赛的各种信息，介绍世界游泳锦标赛的举办背景，通过丰富的图文使平台更具吸引力，引起人们对世界游泳锦标赛的兴趣。

4.选手个人信息展示

此界面的skip to detail可以跳转至选手的个人信息界面，用于展示选手的个人风采，可以更直观地浏览网站和选手详情，如下图：

这是选手个人信息页面，展示了一些选手的基本信息，还有返回选手信息总页面还有返回首页的链接：

---

三、结对讨论过程描述

讨论过程

具体讨论方式为同宿舍内部线下讨论，通过QQ传输分享代码和材料。
我们会集思广益，进行头脑风暴，寻找最佳解决方案。有时候，即使是比较晚了，也会互相支持，协助对方解决编码上的障碍或是逻辑上的难题。

解决问题

• 为了解决问题，我们了解到Vue是一个非常实用的前端框架，可以更加便捷地解决我们在开发过程中遇到的难题，比如一些复杂的功能实现，另外，考虑到工期问题，我们决定采用纯前端来进行开发。

• 在基础功能的开发中，由于第一次使用Vue框架，不算熟练，开发过程中遇到了不小的阻力，但是我们二人积极查找资料，观看Vue框架的学习使用视频，逐一解决开发过程中遇到的技术性难题，最终完成了我们的初步开发，走上正轨。

  查找资料

• 我们两个人对前端开发都不算了解，所以我们在选择框架这一步上面进行了一番查找与研究，我们首先是考虑到了上个学期期末学习到的yii2.0框架，但是经过一番研究和考察，发现yii框架对本次作业的开发并没有起到一个很好的帮助作用，相比于其他更好的框架，yii2.0的开发过程过于繁杂了一些，所以我们选择放弃yii2.0转去寻找一个更适合且更高效的前端框架。

• 由于我们选择的前端框架是Vue，而网络上最清晰也最高效的Vue学习方法就是查找Vue官方文档进行学习，我们还进一步查找了一些Vue相关视频进行学习探索，由此进行该任务的开发。

  讨论截图

  

  
  

  

---

四、设计实现过程

功能结构图

设计实现

基础功能

• 选手排名：分为选手信息和赛程安排界面，这两个界面通过一个按钮进行切换，选手信息界面可以看到每个选手的大致信息。赛程安排可以通过点击赛事跳转至每日赛况界面的对应赛事。
• 每日赛况：初始显示不同赛事安排，可以通过点击赛事项目展开赛事详细信息，可以查看选手信息和排名，即详细赛况，点击右侧加号还可以查看该选手的总分和落后分数。
• 奖牌榜：可以直观友好地展示不同国家获得的各种奖牌数目。

附加功能

• 精彩瞬间：加入一些比赛图片和现场新闻报道丰富平台的趣味性。吸引用户眼球。
• 了解更多：我们将这个页面分为了四个板块
  • 赛事信息：由赛事简介，赛事历史，赛事地点组成。
  • 参赛选手：记录了各国知名选手的精彩成绩。
  • 赛程安排：展示历年锦标赛的赛事安排信息。
  • 观赛方式：直播和现场。
• 选手个人信息：在选手排名的选手信息界面可以通过点击右侧按钮进入该选手的个人信息页面，更加直观展示选手的个人信息。便于用户查看信息。
• 奖牌榜排序：可通过奖牌榜上方的四个按钮对四种奖牌数进行排序（金 银 铜 总），更加详细地看出各国获得的奖牌情况

---

五、代码说明

详细赛况实现代码

通过点击展开显示详细赛况的代码，通过
<button @click="toggleDetails(index)" style="width: 10vw; height: 6vh">+</button>
获取到点击的选手下标，再由

 methods: {
    toggleDetails(index) {
      this.players[index].showDetails = !this.players[index].showDetails
    }
  }

对showDetails参数进行处理，由此判断选手的详细赛况是否打开。
由此在数据中读出对应选手的详细信息，然后打开引入的DetailData.vue文件中的内容，完成对选手详细赛况的完整展示。
以下是较完整的代码片段（省略了非重点代码）：

<template>
  <div>
    <table class="custom-table">
      <thead>
        <略>
      </thead>
      <tbody style="color: blue">
        <tr v-for="(player, index) in players" :key="index" class="table-row">
         <略>
          <td>
            <button @click="toggleDetails(index)" style="width: 10vw; height: 6vh">+</button>
            <div v-if="player.showDetails" class="details-container">
              <DetailData :data="player"></DetailData>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import DetailData from './DetailData.vue'
export default {
  components: {
    DetailData
  },
  data() {
    <略>
  },
  methods: {
    toggleDetails(index) {
      this.players[index].showDetails = !this.players[index].showDetails
    }
  }
}
</script>

赛程下拉菜单显示完整比赛信息

首先说明样式，该样式设置了下拉菜单的显示情况，由showMenu变量决定比赛详细信息是否显示

<style>
.dropdown-menu {
  display: none; /* 初始状态下隐藏菜单 */
}

.show {
  display: block; /* 当 showMenu 为 true 时显示菜单 */
}
</style>

在script中我们声明了toggleMenu()方法用于点击后切换showMenu变量的状态，用于显示下拉菜单，再次点击可以收起下拉菜单。下面一段代码是我们用于引入DailyData.vue文件内容，并且对showMenu变量进行处理的代码：

components: {
    DailyData
  },
  data() {
    return {
      showMenu: false
    }
  },
  methods: {
    toggleMenu() {
      this.showMenu = !this.showMenu
    }
  }

以下是较完整代码（省略了非重点代码）：

<template>
  <div class="page-container">
    <略>
    <!-- 下拉菜单 -->
    <div>
      <p style="margin-top: 10vh">点击查看比赛结果↓</p>
      <button @click="toggleMenu" style="margin-top: 10vh">
        <img src="/images/Women1mSpring.png" alt="Button Image" style="width: 80vw" />
      </button>
      <div :class="{ 'dropdown-menu': true, show: showMenu }">
        <!-- 下拉菜单内容 -->
        <DailyData />
      </div>
      <div
        class="content-below-menu"
        style="display: flex; flex-direction: column; justify-content: center; align-items: center"
      >
        <!-- 菜单下方的内容，当菜单展开时会被向下推 -->
        <略>
      </div>
    </div>
    <略>
  </div>
</template>

<script>
import DailyData from './DailyData.vue'
export default {
  name: 'DailyPage',
  components: {
    DailyData
  },
  data() {
    return {
      showMenu: false
    }
  },
  methods: {
    toggleMenu() {
      this.showMenu = !this.showMenu
    }
  }
}
</script>

<style>
.dropdown-menu {
  display: none; /* 初始状态下隐藏菜单 */
}

.show {
  display: block; /* 当 showMenu 为 true 时显示菜单 */
}
</style>

一些常用样式：

<style>
.page-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nav-below-image {
  margin-top: 200px; /* 调整距离顶部图片的距离 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.navigation {
  background-color: #ffffff; /* 设置背景颜色为白色 */
  margin: -50px;
  padding: 20px; /* 添加一些内边距以增加可读性 */
  border: 1px solid #ccc; /* 添加边框 */
  border-radius: 5px; /* 圆角边框 */
  justify-content: center; /* 将内容水平居中显示 */
  font-size: 2vw;
  width: 56%;
}

.text {
  text-decoration: underline;
  text-decoration-color: blue;
  text-decoration-thickness: 1vh;
  text-underline-offset: 0.8em;
}

.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-container {
  display: flex;
  justify-content: center;
  margin-top: 20vh;
}
</style>

奖牌榜排序功能的实现

下面这段代码是用于触发按钮点击事件的代码，点击后调用sortBy方法：

<button
  @click="sortBy('goldnum')"
  :class="{ active: activeSort === 'goldnum' }"
  style="width: 10vw; height: 6vh; margin-left: 33.5vw"
  >
  排序（金牌）
</button>

下面这段代码是sortBy方法和updateRanks方法，在点击按钮调用sortBy方法后进行初步排序后，再调用updateRanks方法进行排名的修改，最后形成一个最新的排序。

 methods: {
    sortBy(property) {
      this.activeSort = property
      this.countrys.sort((a, b) => {
        return b[property] - a[property]
      })
      this.updateRanks()
    },
    updateRanks() {
      this.countrys.forEach((country, index) => {
        country.rank = (index + 1).toString()
      })
    }
  }

以下是较完整代码（省略了非重点代码）：

<template>
  <div style="width: 90vw">
    <div>
      <button
        @click="sortBy('goldnum')"
        :class="{ active: activeSort === 'goldnum' }"
        style="width: 10vw; height: 6vh; margin-left: 33.5vw"
      >
        排序（金牌）
      </button>
      <button
        ......
      >
        排序（银牌）
      </button>
      <button
        ......
      >
        排序（铜牌）
      </button>
      <button
        ......
      >
        排序（总牌数）
      </button>
    </div>
    <table class="custom-table">
      <略>
    </table>
  </div>
</template>

<script>
export default {
  name: 'ModelData',
  data() {
    return {
      activeSort: 'goldnum', //设置初始为金牌排序
      <略>
      }
  },
  methods: {
    sortBy(property) {
      this.activeSort = property
      this.countrys.sort((a, b) => {
        return b[property] - a[property]
      })
      this.updateRanks()
    },
    updateRanks() {
      this.countrys.forEach((country, index) => {
        country.rank = (index + 1).toString()
      })
    }
  }
}
</script>

<style>
<略>
</style>

---

六、心路历程和收获

在我们迎接这次作业的挑战之前，我们团队尚未积累丰富的前端框架实践经验。然而，在不懈的追求卓越和对技术的热情驱动下，我们利用了网络上各种学习资料的辅助以及广泛汲取网络中众多专家的博客精华，我们迅速掌握并应用了Vue框架，最终成功实现了网站的核心功能。

通过这次作业，我们深刻地锻炼了我们的前端开发技能。尽管我个人对于前端开发的细节调整，如位置和边距的精确调试，曾感到些许抗拒，认为这些工作不仅费力而且耗费视力，但这次的经历无疑促使我们积极学习并掌握了宝贵的前端知识。同时，在与团队成员的紧密协作中，我们对git的使用理解也得到了显著加深。

总体而言，尽管我们面临了紧迫的时间线和挑战性的任务，我们依然完成了前后端的开发和部署工作，这让我们内心充满了成就感。通过这次经历，我们不仅增强了团队的凝聚力，也提升了我们解决问题的能力，这将为我们未来的学习和工作提供坚实的基础。

---

七、评价结对队友

222100330黄舒怀：与我的搭档合作是一段非常愉快的经历，廖晨旭同学表现出了极高的可靠性，对于他的工作部分投入了大量的精力，我们完成这次配对任务的效率非常高，我们能够相互交流以及与其他小组讨论。对于最终的成果，我也感到非常满意。

222100335廖晨旭：这次作业的分工显著提高了我的工作效率，黄舒怀是一个具有强大组织安排能力且善于表达的人，他非常靠谱地完成了他的部分的内容，我们共同创造了一个令人满意的项目。