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

[222000134叶颖]

这个作业属于哪个课程	软件工程-23年春季学期软件工程
这个作业要求在哪里	结对第二次作业--编程实现
结对学号	222000133、222000134
这个作业的目标	1、编程实现所需功能 2、撰写博客
其他参考文献	CSDN、《构建之法》、哔哩哔哩

目录

• 一、git仓库链接和代码规范链接
• 二、PSP表格
• 三、项目访问链接
• 四、成果展示
• 4.1 导航栏
• 4.2 首页
• 4.3 选手排名
• 4.4 每日赛程
• 4.5 详细赛况（附加功能1）
• 4.6 晋级图
• 4.7 了解更多
• 4.7.1 举办背景（附加功能2）
• 4.7.2 冠军地图（扩展功能）
• 五、结对讨论过程描述
• 六、设计实现过程
• 6.1功能结构图
• 6.2系统设计
• 6.3遇到的问题以及解决方式
• 七、代码说明
• 7.1 前端代码说明
• 7.2 后端代码说明
• 八、心路历程和收获
• 九、评价结对队友

一、git仓库链接和代码规范链接

  git仓库点这里
  

二、PSP表格

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

三、项目访问链接

  

四、成果展示

  该成果主要基于澳大利亚网球公开赛网站设计实现，❗❗所爬取的数据均用于教学使用❗❗。
  图片失效点这

4.1 导航栏

  设置一级导航栏和了解更多下的二级导航栏，实现页面切换。
  一级导航栏下：首页、选手排名、每日赛程、晋级图、冠军地图
  二级导航栏（了解更多）下：举办历史、冠军地图

4.2 首页

  上半部分放置澳网宣传视频。

  下半部分采用轮播图放置宣传照片，可通过点击图片、"<"或">"切换按钮、下方横条进行图片切换。
  相比于原型设计，增加每2000ms自动切换图片功能，更加合理。

4.3 选手排名

  采用下拉框选项切换不同类型的选手排名。
  采用表格形式展示选手排名，表格设置成斑马纹，鼠标移到某一行会改变底色。

4.4 每日赛程

  采用下拉框选项切换不同类型的比赛。
  采用轮播按钮实现按钮组。
  切换日期查看不同比赛日的赛程。选择比赛类型以及日期，下方出现对应赛程信息，显示比赛类型、比赛场地及轮次、参与选手、比赛时间和比分。实现获胜者排名加粗显示及对应“✔”图标的显示。（全部界面都已实现）

4.5 详细赛况（附加功能1）

  采用下拉框切换比赛场次。
  从每日赛程中点击某一场比赛进入详细赛况界面，上方显示该场比赛的两位选手及赛程信息，下方选择不同的下拉选项切换比赛场次。

4.6 晋级图

  采用下拉框选项切换不同类型的选手排名。
  采用切换按钮实现晋级图排列方式（横排或竖排）和是否展开（全部折叠或全部展开），也可通过晋级图上的“㊉”或“㊀”实现部分展开与折叠。
  可以通过晋级图看到选手的晋升路线，显示选手和姓名和比分，实现获胜者排名加粗显示及对应“✔”图标的显示。鼠标移动到某一场比赛时会蓝色边框提示。

4.7 了解更多

4.7.1 举办背景（附加功能2）

  左侧采用事件线从创立之初、不断发展、公开赛时段讲述澳网的举办背景。
  右侧放置澳网相关图片。

4.7.2 冠军地图（扩展功能）

  以世界地图的形式展示各个国家的冠军数及排名，颜色深浅表示该国家冠军数所处的层级。鼠标移动到对应国家时，该国家绿色高亮显示并显示该国家的rank和gold。左下角显示不同层次，鼠标移到上面时处于该层次的所有国家都绿色高亮显示。
  图片失效点这
  ❗❗若下方“图片失效点这”进去为“403 Forbidden”，只要复制网址再打开即可。❗❗

五、结对讨论过程描述

  因为是舍友，而且借用了活动室，所以线上的交流比较少，大部分遇到的问题和困难都是线下一起交流解决的。

• 前期工作
    此次作业刚发布不久，我们和其他同学交流之后，发现大部分同学使用vue框架进行本次作业的编程实现，我们就安装了vue2。我们经过讨论之后，一致同意先一起把导航栏实现出来，把需要的页面分好，再进行后续的分工。

• 前期分工
    导航栏制作完毕之后，我们进行了分工，根据制作原型设计时的分工，YY同学先进行首页的实现，YYT同学则进行选手排名的实现。我们没有先把所有功能进行分工，当时的想法是因为只有两个人，沟通很方便，不会出现撞车现象，完成自己负责的模块之后，可以直接挑选下一个模块进行开发。

• 中期分工
    YY同学完成了首页之后，转战实现详细赛况和附加功能“冠军地图”及“举办背景”，YYT同学完成了选手排名后，转战实现晋级图和每日赛程。
• 后期分工
    由于数据提取过于复杂，我们否定了当初只要前端不要后端的想法，因为YYT同学对后端比较熟悉，因此在后期YYT同学去实现数据的解析工作，YY同学继续留在前端处理每个模块的剩余部分。（YY同学表示很感动，体会到了带飞的感觉💗）

• 查找资料并分享
    我们查找到好的文章，会相互分享链接，节省彼此查找资料的时间，提高项目开发的效率。

六、设计实现过程

6.1功能结构图

6.2系统设计

前端设计：

• 采用的技术： Vue2、axios、Echarts可视化技术
• 设计思路：
  • 首页： 参照了原型设计时实现的功能以及排版，插入了澳网宣传片，在宣传片下方通过轮播图展示澳网2023比赛的精彩图片，轮播图可通过点击鼠标进行切换，也可以自动播放。
  • 选手排名： 参照原型设计的排版，使用表格显示选手排名数据，因为只需要完成Singles Aces Leaders的排名，数据较少，直接嵌在vue中。
  • 每日赛程： 设置一个下拉框，可以选择不同的比赛类型，设置按钮轮播，可以选择不同的日期，展示每个比赛的赛况。
  • 晋级图： 设置一个下拉框，通过树状图展示晋级路线，可以选择是否全部展开与展示方式
  • 附加功能：
    • 详细赛况： 设置一个下拉框，可以选择不同的比赛场次，展示每场比赛的详细比赛数据。
    • 举办背景： 使用时间线方式展示澳网的举办背景，更加直观，侧边栏展示澳网精彩图片。
  • 扩展功能：
    • 冠军地图： 通过导入echarts显示世界地图，直观地展示澳网自公开赛以来各国的冠军情况。

后端设计：

• 采用的技术： Servlet、Tomcat
• 设计思路： 通过前端传入的筛选条件进行相关json数据的解析，由于个人实战二中已经进行过相关的操作，部分代码可直接复用。最后转为json对象回传给前端。
• API生成思路： 在IDEA中创建继承自HttpServlet的类，重写doGet方法以便前后端的交互。对于每日赛程，通过req.getParameter方法获取前端传入的条件数据，解析数据后以court为key值，Match类为value形成HashMap，外面再套一层Map转为json对象进行数据回传方便前端操作，自此形成API接口。

  6.3遇到的问题以及解决方式

• 前端问题：

• 问题一：每日赛程走马灯式的按钮组实现问题
• 解决方式： 因为在制作首页轮播图时直接采用了vue2的element-ui组件，所以我们以为走马灯式的按钮组应该也差不多，但是把组件放上去的时候，我们意识到不对，按钮组和轮播图不太像，因此我们继续查找资料，我们先尝试了vue-slick组件，但是效果很不好，后来又找到了实现slick-carousel的js代码，可惜我们不会把代码嵌到vue中，遂放弃😭。最后，我们终于找到了vue-slick-carousel，当时有预感可以实现，我们配了一堆属性之后，终于实现了和官网一样的走马灯式按钮！（可以说是喜极而泣了，毕竟搞了一个晚上，而且属性全是英文的😭）然而，在我们实现之后，突然发现了vue-slick-carousel官网上有配好的属性！（发现的时候，人是傻的，毕竟官网全是英文，扑面而来的英文字母让我们没想到可以去扒一扒官网😰）

• 问题二：每日赛程每场比赛div布局实现问题
• 解决方式： 因为澳网官网上每场比赛的div是一行多个的，为了实现和官网一样的效果，我们通过查找资料之后，发现大部分用flex布局实现，但是当我们实施之后，发现并没有好的效果，最后实在没有办法了，咨询了其他同学，发现用float就可以了。怎么能这么简单啊啊啊

• 问题三：晋级图树状形式实现问题
• 解决方式： 由于晋级图中的相关比赛之间存在晋级线连接，一开始不知道如何实现这个晋级线，包括比赛的排版要实现成官网那样似乎也很难实现。在网上搜索vue2实现晋级图也是几乎没有。后来转换了思维方向，将晋级图换个方向，决赛在左边，这样看似乎是一颗树状图，除根节点和叶节点外都有两个子节点。再次搜索发现了vue2-org-tree，设置对应的属性及事件最终实现晋级图。最后相较于官网实现的晋级图增加了横排竖排展示方式以及是否展开。

• 问题四：冠军地图实现问题
• 解决方式： 通过查找资料，我们知道要引入echarts库，引入echarts5后（请记住这个echarts5），插入了中国地图进行测试（网上绝大部分的资料都是使用中国地图作为示例的），测试之后，成功了！（喜极而泣+1）但是当我们换成世界地图的world.js文件时，报错了，查看js文件后发现，两个文件的json结构不一样，不能直接替换。后面改了代码，因为echarts5淘汰了地图，所以我们在网上找到了map包，引入之后，发现运行起来，可惜的是，不知道为什么，运行之后有两个世界地图，我们复盘了一下代码，一致认为代码是没有问题的，之后修改height属性，让两张地图完美重叠，但是后来发现在不同的电脑或者不同的浏览器上，地图依然是错开的。最后，我们突然想到，会不会是echarts版本的问题，毕竟echarts5把map淘汰了，于是我们死马当活马医，把echarts5替换成echarts4，终于，成功了！

• 后端问题：

• 问题一：数据文件路径正确却无法找到问题

  

• 解决方式： 首先对于数据文件路径进行了多次检查，确定路径确实没有写错。后续通过查找发现，Servlet在编译后，读取文件的位置并不在我们所存放数据的src下，而是从web文件夹下读取，最后采用this.getServletContext().getRealPath("/WEB-INF/classes/data/"+day+".json");得到正确的文件路径，最终成功读取数据文件。

• 前后端交互问题：

• 问题一：前端跨域访问后端问题
• 解决方式： 一开始前端存在与后端数据交互的界面一直接收不到数据，在确保代码正确性的情况下，上网搜索，可能是跨域访问原因，由于后端所设置的端口号为9090，而前端的默认端口号为8080，通过f12开发者工具查看确实得到错误已拦截跨源请求：同源策略禁止读取位于...的远程资源。具体解决方法为，打开config/index.js文件，找到proxyTable ：{}，在下面添加如下代码后，问题得以解决。
  

  

七、代码说明

7.1 前端代码说明

  index.js

  在/srcrouter/index.js为所有页面配置router路由，实现路由跳转。

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/Home.vue'
  ...
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    ...
  ]
})

  App.vue

  采用element ui组件。
  顶部：使用<el-menu>实现导航栏，通过mode属性设置为"horizontal"设置为水平方向。<el-menu-item>放置菜单项，通过设置index路径实现界面切换。了解更多二级菜单采用<el-submenu>设置index为2（2个子菜单项）
  主体部分：通过<router-view/>实现各界面内容的切换。

<template>
    ...
      <el-menu :default-active="this.$route.path" class="el-menu-dmeo" router mode="horizontal" @select="handelSelect">
        <img src="@/assets/logo.png">
        <el-menu-item index="/home">首页</el-menu-item>
          ...
        <el-submenu index="2">
          <template slot="title">了解更多</template>
            ...
        </el-submenu>
      ...
      <router-view/>
      ...
</template>

  各界面代码

  所有的界面（.vue文件）放在components下。

  主要展示和说明<template>和<script>，<css>部分不做过多说明。

  1、首页 Home.vue

  通过<iframe>插入澳网宣传视频，src属性设置视频地址。
  通过el-carousel实现轮播图并能自动切换。设置interval为2000，实现2s切换一张图片。

<template>
          ...
            <iframe src="//player.bilibili.com/player.html?aid=865635314&bvid=BV1Q54y1T7HT&cid=1043214210&page=1"
              scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
            </iframe>
          ...
            <el-carousel :interval="2000" type="card" height="600px">
              <el-carousel-item v-for="item in imagebox" :key="item">
                <img :src="item.idView" class="image" />
              </el-carousel-item>
            </el-carousel>
          ...
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      homeTitle: require('@/assets/homeTitle.png'),
      bshelton: require('@/assets/bshelton.png'),
      erybakina: require('@/assets/erybakina.png'),
      bg: { ... },
      imagebox: [
        { id: 0, idView: require('../assets/imagebox/1.png') },
          ...
      ]
    ...
</script>

  2、选手排名 Ranking.vue

  通过<el-select>设置下拉框，v-model设置默认选项。<el-option>设置排名类型下拉选项，v-for从options循环得到所有选项，通过@click.native设置选项切换时的事件变化。
  通过<el-table>实现表格存放选手排名数据。stripe增加表格斑马纹样式。<el-table-column>设置每一列列名。

<template>
  ...
    <el-select ref="selectValue1" v-model="value1" @change="choiceOn">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
      ...
        <el-table :data="menAces" :header-cell-style="{
          color: '#fff',
          background: '#0091d2',
          fontWeight: '700',
        }" stripe style="width:100%" :default-sort="{ prop: 'rank', order: 'ascending' }">
          <el-table-column prop="name" label="Name" width="200"> </el-table-column>
          <el-table-column prop="rank" label="Rank" width="100" align="center"> </el-table-column>
          <el-table-column prop="matches" label="Matches" width="120" align="center"> </el-table-column>
          <el-table-column prop="aces" label="Aces" align="center"> </el-table-column>
        </el-table>
      ...
       
</template>

  由于选手排名数据量较少，所以直接内嵌在vue中。

<script>
export default {
  name: 'Ranking',
  data () {
    return {
      menAces: [ ... ],
      womenAces: [ ... ],
      options: [ ... ],
      value1: '选项1'
    }
  },
  ...
</script>

  3、每日赛程 Schedule.vue
  通过<el-select>设置下拉框，v-model设置默认选项。<el-option>设置比赛类型下拉选项，v-for从options循环得到所有选项，通过@click.native设置选项切换时的事件变化。
  通过<VueSlickCarousel>实现按钮轮播，<el-button>组件采用<v-for>实现按钮设置，实现按钮组（同时最多只能有一个被选中）。
  通过v-for实现每个比赛的赛况展示，通过v-if实现获胜方的加粗显示以及对应“✔”的显示。

<template>
  ...
    <el-select ref="selectValue1" v-model="value1">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
        @click.native="choiceEventOn(item)" />
    </el-select>
    <div class="slick">
      <VueSlickCarousel :centerMode="true" :centerPadding=20 :infinite="true" :slidesToShow=10 :speed:=500>
        <el-button round size="medium" v-for="item in buttons" v-model="value2" :key="item.value"
          @click.prevent="choiceOn(item)" autofocus="true">
          {{ item.label }}
        </el-button>
      </VueSlickCarousel>
    </div>
    <div class="main" v-for="item in matchData.data" :key="item.court">
      ...
        <div class="rowAnchor" v-for="match in item.match" :key="match.duration" v-on:click='testFunc()'>
          ...
              <p class="scoreHeaderTitle">{{ match.event }}</p>
              <p class="scoreHeaderSubtitle">{{ match.round }} • {{ match.court }}</p>
            ...
              <p class="scoreHeaderStatus">{{ match.status }}</p>
              <p class="scoreHeaderDuratio">{{ match.duration }}</p>
            ...
                <p class="playerRowTeam1" v-if="match.winner == 0"><strong>{{ match.players[0] }}</strong></p>
                <p class="playerRowTeam1" v-if="match.winner == 1">{{ match.players[0] }}</p>
              ...
                <span class="playerRowStatus" v-if="match.winner == 0">√</span>
                <span class="playerRowScore1">{{ match.score[0] }}</span>
              ...
        </div>
      ...
  </div>
</template>

  通过axios实现与后端的交互，在watch中监听日期和比赛类型的切换，实时展示。

<script>
...
export default {
  ...
  data () {
    return {
      day: '0116',
      events: 'Event',
      matchData: null,
      buttons: [ ... ],
      options: [ ... ],
      value1: '选项1',
      value2: '0116'
    }
  },
 ...
  methods: {
    ...
    testFunc () {
      this.$router.push('/results')
    }
  },
  mounted () {
    axios.get('/matchData', {
      params: {
        day: this.day,
        event: this.events
      }
    }).then(response => {
      this.matchData = response.data
      console.log(this.matchData)
    })
  },
  watch: {
    day (Day) { ... },
    events (Event) { ... }
  }
}
</script>

  4、详细赛况 Results.vue（附加功能1）
  通过<el-select>设置下拉框，v-model设置默认选项。<el-option>设置比赛场次下拉选项，v-for从options循环得到所有选项，通过@click.native设置选项切换时的事件变化。

<template>
   ...
      <el-select ref="selectValue1" v-model="value1" @change="choiceOn">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
          @click.native="selectThing(item)" />
      </el-select>
   ...
</template>

<script>
export default {
  name: 'Results',
  props: {
    imgsrc1: { type: String, default: '../static/img/day1_result1_set2_1.png' },
    ...
  },
  data () {
    return {
      options: [ ... ],
      value1: '选项1'
    }
  },
  ...
}
</script>

  5、晋级图 Draws.vue
  通过<el-select>设置下拉框，v-model设置默认选项。<el-option>设置比赛类型下拉选项，v-for从options循环得到所有选项，通过@click.native设置选项切换时的事件变化。
  通过<el-switch>设置晋级图横排或竖排两种不同展示方式，v-model设置默认选项横排。
  通过<el-switch>设置晋级图是否全部展开，v-model设置默认全部展开。
  通过<vue2-org-tree>树实现晋级图，通过:render-content设置结点渲染样式，@on-expand设置展开。

<template>
  ...
    <el-select ref="selectValue1" v-model="value1">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
        @click.native="choiceTypeOn(item)" />
    </el-select>
          ...
            <el-switch v-model="horizontal" :width="50" active-text="横排" inactive-text="竖排" style="margin-top: 8px" />
          ...
            <el-switch v-model="expandAll" :width="50" active-text="全部展开" inactive-text="全部折叠" style="margin: 8px"
              @change="expandChange" />
          ...
        <el-scrollbar :style="scrollTreeStyle" class="el-org-tree">
          <vue2-org-tree :data="treeData.data" :horizontal="horizontal" :collapsable="collapsable"
            :label-class-name="labelClassName" :render-content="renderContent" name="organ" @on-expand="onExpand"
            @on-node-click="onNodeClick" />
        </el-scrollbar>
      ...
</template>

<script>
import VueSlickCarousel from 'vue-slick-carousel'
export default {
 ....
  data () {
    return {
      ...
      treeData: {
        labelClassName: 'bg-color-orange',
        basicInfo: { id: null, label: '---null' },
        basicSwitch: false,
        data: { ... }
      },
      ...
      buttons: [ ... ],
      options: [ ... ],
      value1: 1
    }
  },
  ...
  methods: {
    renderContent (h, data) { return ( ... ) },
    onMouseout (e, data) { ... },
    onMouseover (e, data) { ... },
    NodeClick (e, data) { ... },
    toggleExpand (data, val) { ... },
    collapse (list) { ... },
    onExpand (e, data) { ... },
    expandChange () { ... },
    ...
    }
  }
}
</script>

  6、了解更多

   举办背景 More1.vue（附加功能2）
  通过<el-timeline>实现澳网举办历史时间线，<el-timeline-item>实现每一项的内容设置，timestamp属性设置时间点。

<!-- eslint-disable vue/valid-template-root -->
<template>
    ...
        <el-timeline>
          <el-timeline-item class="point" v-for="(activity, index) in activities" :key="index" :color="activity.color"
            :size="activity.size" :timestamp="activity.timestamp">
            <span>一、创立之初</span>
          </el-timeline-item>
          <el-timeline-item timestamp="1904年" placement="top">
            <el-card>
              <p>澳大利亚和新西兰的网球机构官员决定成立澳大拉西亚草地网球协会负责筹办每年一届的澳大拉西亚锦标赛并共同组队参加戴维斯杯的比赛。</p>
            </el-card>
          </el-timeline-item>
          ...
        </el-timeline>
      ...
</template>

<script>
export default {
  name: 'More1',
  data () {
    return {
      moreTitle: require('@/assets/moreBackground.png'),
      activities: [{ size: 'large', color: '#0091d2' }]
    }
  }
}
</script>

   冠军地图 More2.vue（扩展功能）
  采用ref设置冠军地图。

<template>
    ...
    <div class="worldmap" :style="{ height: height, width: width }" ref="myEchart"></div>
    ...
</template>

  mounted ()表示在一开始就初始化展示地图。

<script>
import * as echarts from 'echarts'
import '../../node_modules/echarts/map/js/world.js'
export default {
  name: 'echarts',
  props: {
    width: { ... },
    height: { ... }
  },
  ...
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.myEchart)
      window.onresize = echarts.init(this.$refs.myEchart).resize
      this.chart.setOption({
        backgroundColor: '#fff',
        title: { ... },
        visualMap: {
          type: 'piecewise',
          pieces: [ ... ]
        },
        tooltip: {
          trigger: 'item',
          formatter: function (val) {
            return val.data.name + ': ' + '<br/> rank💡：' + val.data.rank + '<br/>gold🥇：' + val.data.gold
          }
        },
        geo: {
          map: 'world',
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false,
          silent: true
        },
        series: [{
          type: 'map',
          mapType: 'world',
          mapLocation: {
            y: 100
          },
          data: [ ... ],
          nameMap: { ... },
          symbolSize: 12,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: { ... } // 样式
        }]
      })
    }
  }
}
</script>

7.2 后端代码说明

  通过Servlet实现后端。

  MatchServlet.java
  重写doGet方法，获得从前端传入的日期和比赛类型，传入Lib中进行相应的解析。采用HashMap<String, ArrayList<Match>>存储比赛数据，以场地court为key,比赛信息为value。由于前端只接受json数据，所以最后通过将Map转为JSONObject传回前端。
  最后在HashMap外再套一层Map再回传是为了方便前端对数据的处理。

@WebServlet("/matchData")
public class MatchServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json");
        String day = req.getParameter("day");
        String event = req.getParameter("event");
        String filePath = this.getServletContext().getRealPath("/WEB-INF/classes/data/"+day+".json");
        HashMap<String, ArrayList<Match>> matchData = Lib.outputSchedule(filePath,day,event);
        ArrayList<Data> data=new ArrayList<>();
        for(String key:matchData.keySet()){
            Data data1=new Data();
            data1.setCourt(key);
            data1.setMatch(matchData.get(key));
            data.add(data1);
        }
        HashMap<String,ArrayList<Data>> map=new HashMap<>();
        map.put("data",data);
        JSONObject jsonObject = new JSONObject(map);
        resp.getWriter().print(jsonObject);
        resp.getWriter().flush();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

  Lib.java
  采用fastjson2进行json数据的解析。返回HashMap<String, ArrayList<Match>>。具体解析方法与个人作业二类似，故不作代码的展示。

八、心路历程和收获

• YYT（222000133）： 相比于前几次较为匆忙的开始，这次的开始显得比较从容。由于有去提前看上一届结对作业二的内容，了解到要进行前端开发，在作业开始前几天就有去学习vue的部分使用。前期规划的还是很好的，但随着项目的进行，不可避免的遇到了很多问题，也确实崩溃过，但现在回顾整个过程，确实发现自己在不断的进步。在这次的作业中，不仅学会了vue的使用还进行了后端Servlet的使用与学习，虽然可能理解的不是很深刻，但技术储备总归是增加了，下一次使用的时候就会更得心应手。包括gitcode，从开始的不知如何有效使用到后来的熟练掌握，收获太多太多。
• YY（222000134）： 虽然之前有接触过一点vue框架，但是在本次作业面前，是不够的。结对过程中，为了实现各种功能，疯狂地在网上搜索资料，因为对vue的知识储备不多，所以在选择vue组件的时候，往往会下载很多种组件去尝试。这次作业至此也告一段落了，我学会了很多组件的使用，比如vue-slick-carousel、vue2-org-tree和element-ui的走马灯、时间线、下拉框、按钮等,我对vue框架有了进一步的认识，也学会了怎么上传代码到gitcode分支。

九、评价结对队友

• YYT（222000133）： 这一次的作业更多的是两个人相互成长、相互扶持的感觉，我们在自己部分遇到问题时，在尝试后却解决不了时，会一起研究一起搜索（不得不说一句YY的资料查找能力是真的厉害！），项目在这样一个有限实践内不能说简单，项目过程中不可避免的出现过崩溃的时候，YY也是能够不断给予我力量。也是和结对作业一一样，这一次的整一个结对过程体验非常好，非常值得五星好评⭐⭐⭐⭐⭐。
• YY（222000134）： 和YYT同学的合作依旧是如此丝滑，我们之间的交流沟通一如既往地十分顺畅。YYT能力很强，幸好有她，在整个项目陷入僵局的时候，毅然地投身到后端，挽救了整个项目，也挽救了我。这次项目还是比较难的，在我每次逐渐烦躁的时候，YYT同学总能安慰我，鼓励我们一起继续完成项目。总之，YYT同学是一个非常优秀的队友，希望在接下来的团队项目中，我们还能继续顺利合作。