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

222100404余诗怡 2024-03-25 20:33:07

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	结对第二次作业——编程实现
结对学号	222100403 222100404
这个作业的目标	实现原型中的部分功能,项目部署到云服务器
其他参考文献	vue3中文文档

1 Gitcode仓库地址和代码规范链接
1.1 Gitcode仓库地址
1.2 代码规范链接
2 PSP表格
3 云服务器访问链接
4 成品展示
5 结对过程
6 设计实现过程
6.1 功能结构图
6.2 爬取数据
6.3 设计思路和实现过程
7 关键代码及思路说明
8 结对心得及收获
9 结对评价

1 Gitcode仓库地址和代码规范链接

1.1 Gitcode仓库地址

仓库地址

1.2 代码规范链接

代码规范

2 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	20
• Estimate	• 估计这个任务需要多少时间	20	20
Development	开发	1630	1395
• Analysis	• 需求分析 (包括学习新技术）	420	480
• Design Spec	• 生成设计文档	40	50
• Design Review	• 设计复审	30	20
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	30	30
• Design	• 具体设计	50	40
• Coding	• 具体编码	1000	720
• Code Review	• 代码复审	30	25
• Test	• 测试（自我测试，修改代码，提交修改）	30	30
Reporting	报告	100	90
• Test Repor	• 测试报告	60	40
• Size Measurement	• 计算工作量	10	10
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	30	40
	合计	1750	1505

3 云服务器访问链接

云服务器链接

4 成品展示

网页整体设计风格参照了官网的蓝白色调为主，追求简洁明了的页面布局。

导航栏效果：

导航栏

首页布局以及轮播图切换效果：

每日赛程效果：

可通过切换tab标签选择查看对应日期的赛事安排，点击赛事条可跳转至该赛事对应的详情页。

比赛详情效果：

可通过点击对应的赛事阶段查看初赛、半决赛、决赛详情，点击表格按钮可查看详细得分情况，点击选手姓名可跳转查看选手信息。

奖牌榜效果：

点击按钮查看国家具体获奖情况，点击具体获奖信息条跳转查看该场比赛详情。

选手列表效果：

通过上方下拉框选择不同性别和国家选手进行展示，点击具体选手跳转查看选手详细信息。

选手详细信息：

展示选手信息，点击项目查看该场比赛详情。

5 结对过程

知道作业要求后，由于对其他框架不太了解，我们决定学习Vue3框架进行开发，部分页面用了Elementui组件库，如轮播图和tab标签页。数据部分用Vue3的onMounted函数解析json文件。

线上交流部分截图：

6 设计实现过程

6.1 功能结构图

6.2 爬取数据

参照作业二的步骤完成 (注：该爬取行为仅用于课程教学!)

6.3 设计思路和实现过程

基础功能：
- 选手信息：设计table展示选手相关信息，用v-for指令遍历data数据进行数据展示，页面用自定义css进行美化
- 每日赛况：用element的el-tabs组件进行日期选择的切换效果制作，用切换tab标签改变activeName进行日期的切换，自定义函数filterEvents挑选出data中对应的数据。设计自定义组件模块参照官网布局进行数据的展示，用v-for指令循环显示所有比赛信息。
- 详细赛况：利用table和自定义组件模块的方式进行数据的展示，增加unit切换不同比赛阶段的数据，如决赛和半决赛，可在从每日赛况跳转时直接显示某阶段的比赛数据。
- 奖牌榜：利用两个table的嵌套和自定义组件的方式进行数据的展示，table展示具体获奖情况时采用了手风琴的样式，同一时间只能展示一个国家的获奖情况。
扩展功能：
- 首页：利用element的轮播图组件和卡片组件进行比赛相关知识的拓展展示。
- 选手详情：采用自定义组件和table结合进行数据的展示。

7 关键代码及思路说明

导航栏使用 router-link：

<ul>
  <li><router-link to="/">首页</router-link></li>
  <li><router-link to="/daily-schedule">每日赛程</router-link></li>
  <li><router-link to="/medal-table">奖牌榜</router-link></li>
  <li><router-link to="/players">选手</router-link></li>
</ul>

路由配置：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import DailySchedule from '../views/DailySchedule.vue'
import MatchDetails from '../views/MatchDetails.vue'
import Players from '../views/Players.vue'
import PlayerDetails from '../views/PlayerDetails.vue'
import MedalTable from '../views/MedalTable.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/daily-schedule',
      name: 'DailySchedule',
      component: DailySchedule
    },
    {
      path: '/match-details',
      name: 'MatchDetails',
      component: MatchDetails
    },
    {
      path: '/players',
      name: 'Players',
      component: Players
    },
    {
      path: '/player-details',
      name: 'PlayerDetails',
      component: PlayerDetails
    },
    {
      path: '/medal-table',
      name: 'MedalTable',
      component: MedalTable
    }
  ]
})

export default router

使用 v-for 与 v-if 语句进行渲染：

<table>
  <tr class="loose blue-shadow">
    <th class="blue-bg white-font">国家</th>
    <th class="white-bg blue-font">运动员</th>
    <th class="blue-bg white-font">性别</th>
    <th class="white-bg blue-font">出生日期</th>
  </tr>
  <template v-for="country in data">
    <template v-if="(selected_country == -1 || country.CountryCode == selected_country)">
      <template v-for="participation in country.Participations">
        <tr v-if="(selected_sex == -1 || participation.Gender == selected_sex)"
          @click=goPlayerDetails(participation.ResultId) class="loose player-line blue-shadow">
          <td>
            <div class="nat">
              <img width="25" :src="`https://www.worldaquatics.com/resources/v2.11.4/i/elements/flags/${country.CountryCode.toLowerCase()}.png`" />
              <span>{{ country.CountryCode }}</span>
            </div>
          </td>
          <td>{{ participation.PreferredFirstName }} {{ participation.PreferredLastName }}</td>
          <td>{{ participation.Gender == 0 ? "男" : "女" }}</td>
          <td>{{ formatDate(participation.DOB) }}</td>
        </tr>
      </template>
    </template>
  </template>
</table>

使用 el-backtop 组件以返回顶部：

<el-backtop :right="100" :bottom="100" />

8 结对心得及收获

222100404：

因为在上一次结对作业的时候就知道了后面需要实现的任务，所以先对Vue3框架进行了初步的学习，不至于在时间安排上太过手忙脚乱。在这次的作业过程中学到了很多，比如vue3框架和element组件以及git的使用，同时也对CSS的编写进行了复习，在制作网页时经常遇到写的样式没有办法正常实现的问题，所以在调试的过程中花费了很多时间和精力。作业过程中也再一次感受到了结对编程的效率之高。
222100403：

本次作业中先学习了vue框架，其轻量级与渐进式的特点提高了传统开发的效率。此外，在编写css时，我发现有一些地方需要用到的布局方式是我尚未掌握的，这促使我又重新进行了学习。

9 结对评价

222100404 对 222100403：

我的队友非常靠谱，对待工作认真负责，在项目刚开始的时候就很高效率的完成了项目框架和总体网站页面的分配，结对过程也非常顺利。
222100403 对 222100404：

队友沟通效率高，有团队精神，能够合理安排任务时间，遇到问题时解决十分迅速，非常靠谱呢~

...全文