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

这个作业属于哪个课程	软件工程-23年春季学期
这个作业要求在哪里	结对第二次作业–编程实现
结对学号	222000202陈仕燊、222000212黄志腾
这个作业的目标	1、fork仓库，和伙伴商讨协作细节等。 2、编程实现。 3、撰写博客
其他参考文献	CSDN、博客园

---

目录

• 一、Gitcode仓库链接和代码规范链接
• 1.1 Gitcode仓库地址
• 1.2 代码规范地址
• 1.3 项目部署地址
• 二、PSP表格
• 三、项目的访问链接
• 四、项目成果展示
• 五、结对讨论过程描述
• 六、设计实现过程
  • 6.1 功能结构图
  • 6.2 数据库设计
  • 6.3 设计描述
  • 6.4 遇到的问题及解决方式
• 七、代码说明
  • 7.1 前端关键代码
  • 7.2 后端关键代码
• 八、心路历程和收获
• 九、 结对队友互评

---

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

1.1 Gitcode仓库地址

Gitcode仓库地址

1.2 代码规范地址

前端代码规范地址
后端代码规范地址

1.3 项目部署地址

项目部署地址

二、PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	30
• Estimate	• 估计这个任务需要多少时间	30	30
Development	开发	2160	2270
• Analysis	• 需求分析（包括学习新技术）	360	400
• Design Spec	• 生成设计文档	60	60
• Design Review	• 设计复审	45	40
• Coding Standard	• 代码规范（为目前的开发制定合适的规范）	45	30
• Design	• 具体设计	90	60
• Coding	• 具体编码	1320	1500
• Code Review	• 代码复审	60	60
• Test	• 测试（接口测试、修改代码、提交修改）	180	240
Reporting	报告	140	70
• Test and use Repor	• 接口、使用报告	60	10
• Size Measurement	• 计算工作量	20	10
• Postmortem & Process Improved Plan	• 事后总结，并提出过程改进计划	60	60
	合计	650	900

---

三、项目的访问链接

四、项目成果展示

• 首页：其中是含有四种图片的轮播图，循环播放赛程期间的热点图片
  

• 选手排名：其中两种表格，分别存放选手的Rank、Matches、Aces信息。
  

• 每日赛程：里面放在不同日期、不同场地、不同比赛的信息
  
  
  

• 详细赛况：放在特定比赛的详细信息，并且可以下拉选择不同比赛场次
  
  

• 晋级图：里面存放晋级路线图，并高亮显示获胜者
  
  

• 种子选手：展示未来最具潜力的选手排名。
  

• 了解更多：放在有关澳大利亚历史的时间线并配上两张图片，有李娜夺冠照片哦
  
  

五、结对讨论过程描述

前期任务分工
css同学有过一定的后端开发经验，并且对项目部署和数据库比较熟悉，所以由css同学负责后端接口设计和编写、数据库设计。因为css同学主动选择了后端，因此hzt同学只能选择前端了，虽然开发经验较少，但是审美比css同学好，所以完全能够胜任前端的任务。
博客和学习资源的分享：

问题交流和解决

六、设计实现过程

6.1 功能结构图

6.2 数据库设计

6.3 设计描述

前端实现描述：

• 采用技术：Vue3框架、axios库、element-ui插件、vue-country-flag插件、router路由
• 设计思路
  • 页面设计：前端界面设计是利用Vue框架，但是没有使用vue-cli的部署脚手架，基本结构和前端开发的三件套还是一样的。 页面基本分为主页、选手排名、详细赛况、每日赛程、晋级图。
  • 后端接口数据获取：利用axios库通过get请求并获取后端接口的数据，并把它存在data的一个数组里面。
  • 导航栏设计：利用keep-alive和component来实现，通过给每个导航添加监听按钮来改变条件，从而实现导航栏的效果。
  • 首页和关于更多界面设计：首页是一个轮播图，关于更多里面是一个时间线，实现方式是通过element-ui插件，利用里面的走马灯以及Timeline时间线的组件。element-ui网站。
  • 选手排名界面设计：在用axios分别获取男、女选手数据并存在data里面后，用两个table和v-for遍历数据并输出显示实现的。
  • 每日赛程界面设计：赛程的日期左右移动是通过标签的部分隐藏并编写两个函数来控制div标签的左右移动来实现的，而后给每个日期添加一个按钮监听时间，最后下方的每日赛程具体信息显示是用v-show和更换条件做到点击不同日期显示不同的数据。
  • 晋级图界面设计：晋级图同赛程日期一样可以进行左右移动，两者实现方式的一致的。
  • 详细赛况界面设计：以上界面的设计都是通过前后端分离、前端获取后端数据实现的，由于时间的原因，详细赛况界面是唯一用存前端设计的，需要事先把部分数据放到data里面。界面设计里用select标签去一个下拉选项，并添加按钮监听事件来实现不同场次的数据显示。

后端实现描述：

• 采用技术： Tomcat（项目部署）、MySQL（数据库）、MyBatis（持久层框架）、JavaServlet（服务端技术）
• 设计思路：
  • 数据库的数据获取： 数据库的数据获取：第一次结对作业已经将json数据文件解析为Java Bean对象，因此可以利用上次作业的代码获取数据并转换为对象list，然后利用MyBatis将list中的对象一个一个放入数据库中
  • 流程图展示：
    
  • 后端接口数据处理： 后端接口数据处理：这部分主要处理三个部分的数据——选手、赛程、晋级图。对于选手数据，根据前端传回的参数来返回满足指定条件的选手结果集，并把结果集转换为json字符串传给前端。对于赛程数据，因为数据库中的match表取出来的数据不能直接返回给前端使用，所以创建AOMatch类专门用于前端的数据处理，AOMatch类会根据Match类的数据来进行重新处理和封装某场比赛数据。按照比赛地点来对赛程进行分类并转换成HashMap，最后将HashMap转换为json字符串返回给前端。对于晋级图数据，同样采用AOMatch类来封装某场比赛数据，但是还要按照比赛轮次(1st Round, 2nd Round…）的顺序来封装成二维链表数据，最后转换为json字符串返回给前端。
  • 流程图展示：
    

6.4 遇到的问题及解决方式

前端遇到的问题及解决方式：

• 1.npm报错问题：由于前端是用Vue开发的，先前我是没有接触过这个框架，所以需要先去安装并配置npm，但是在过程中我使用命令修改文件保存目录就碰到npm报错 operation not permitted, open...问题。
• 解决方式：.将npm_global和node_cache两个文件的普通用户权限打开。附上具体解决方式参考、 Vue3安装及环境变量配置以及 使用vscode运行vue项目。一开始我是使用vscode，后面在队友劝说下改成了IDEA，两者都可以用。
• 2.不一样的npm报错问题：设计界面时候会用到一些插件来辅助我们设计，就需要去下载，可是用npm下载的时候发现全是error(npm ERR! code ERESOLVE)，可能是版本不一样的问题吧。
• 解决方式：.直接强制安装，在命令后面加上--legacy-peer-deps或者--force，简单粗暴，就是可能后面会碰到一些版本问题，目前我还是没遇到。小tip：可以在IDEA或者vscode上终端直接安装，就不需要去打开cmd了。
• 3.路由的使用问题：期初导航栏我是想使用路由来实现跳转的，可我一直不会用，上网找了许多方法就是一直不成功，根本原因应该是我对这个东西不熟悉，有些细节东西没有配置好，所以这个可能也是我耗时最久的东西，最后只好用别的方式来写导航栏。但是后面需要用到路由进行不同界面的传参，又需要用到这个东西。
• 解决方式：.具体的操作步骤我是参考以下文章：1 , 2。也可以去router的官网上去看如何使用，可能会更加清楚。所以，其实还是我不够了解路由的原因，导致我在配置index文件时出现了错误。但是最后，我也是成功使用了用router进行传参，并了解到了父子路由的一些内容。
• 4.不能使用element-UI问题：我在设计轮播图的时候还没用到element-ui，后来发现可能用插件来实现走马灯的组件以此来设计轮播图，可惜刚开始用就碰到问题了，我在引用 elementUI 时控制台报错了。
• 解决方式：.还是版本问题，又是版本问题，我是使用vue3的，但是网格给的下载方式是vue2的，后来我从网上重新找到了相应的方法（点这），是需要下载它的plus版本。
• 5.使用路由导致组件重复渲染问题：我是使用路由进行页面跳转，来实现点击每日赛程的比赛跳到详细赛况界面的，但是会出现一个严重的bug，就是每日赛程界面的内容重复渲染，一直出现在详细赛况内容的上方，不能实现页面的完全跳转。
• 解决方式：其实在网上是有相应的解决方法，但是我试了没有什么效果，后来我选择用v-show来隐藏父组件，可是我发现我跳转回去时候界面就变成空的，最后我还是选择用实现导航栏方式的components中添加一个新的链接跳转，并通过传参来显示界面，可惜这个方法并不能完美解决问题，它会存在再次点击导航栏无法跳转的问题，所以我把详细赛况的导航栏去掉了。
• 5.图片问题：在前后端交互的时候，由于爬取的数据没有国旗的url地址，只有他们网站的相对地址，所以需要用自己的图片，但是过程中会遇到不知道如何用后端传来的数据来加载本地图片，而且要存的国旗照片又很多的问题。
• 解决方式：利用vue-country-flag插件可以完美解决国旗问题，而且后端只需要传来国家名字的缩写，前端就能根据数据直接显示相应的国旗照片。具体操作在这（点这里你懂的）。

后端遇到的问题及解决方式

• 数据库设计问题：在把数据存入数据库时发现选手和队伍存在多对多联系，即一个选手可以在不同队伍，一个队伍可以有不同的选手。而一开始只有一张player表并添加一个队伍id字段来表示选手与队伍的关系，但是这样无法处理一些双打比赛的数据。因此需要单独设计一个teamRecord表来处理选手和队伍之间的多对多关系，这样也方便后续的后端接口的数据获取和处理
• 接口设计问题：最初的接口设计中我们认为晋级赛和赛程数据都是返回比赛数据，因此晋级赛图数据和赛程数据共用一个接口。后来发现晋级赛图需要的数据结构与赛程的数据结构有所区别，需要体现出晋级关系和轮次顺序，因此需要用两个接口来分别处理这两类数据。晋级赛图数据需要根据获胜队伍的uuid获取上一轮的比赛数据，最终通过处理将数据保存在一个二维链表。
• 项目部署问题：项目需要部署在服务器上，而项目运行需要MysQL数据库和Tomcat，因此还要在服务器上安装MySQL和Tomcat。由于服务器是Linux系统且没有图形化界面，需要重新学习已经忘光的linux命令行操作，因此安装起来比较麻烦。安装完MySQL 8.0后测试连接发现一直连接不上，后来发现通过阅读相关博客了解到root用户一般用于本地连接，而远程连接需要新建其他用户组，因此重新设置用户组权限后解决了问题。

七、代码说明

7.1 前端关键代码

• 导航栏的实现：利用keep-alive以及在component导入相应界面来实现、最后添加按钮监听事件来改变状态值以及利用v-show来进行不用界面的显示。

//html的部分代码
<div id="app">
    <div class="page" v-show="this.$route.meta.index != 5">
      <nav class="button">
        <a class="el-menu-item" @click="show(1)"
           :class="index===1? 'active':''">首页</a>
        <a class="el-menu-item" @click="show(2)"
           :class="index===2? 'active':''">选手排名</a>
        <a class="el-menu-item" @click="show(3)"
           :class="index===3? 'active':''">每日赛程</a>
        <a class="el-menu-item" @click="show(4)"
           :class="index===4? 'active':''">晋级图</a>
        <a class="el-menu-item" @click="show(6)"
           :class="index===6? 'active':''">了解更多</a>
      </nav>
      <div class="tab_content">
        <keep-alive>
          <component :is="comp" v-show="isShow"></component>
        </keep-alive>
      </div>
    </div>
  </div>

//script的部分代码
  methods: {
    show (value) {
      if (this.index === value) {
        this.index = 0
        this.isShow = !this.isShow
      } else {
        this.index = value
        this.isShow = true
      }
      if (value === 1) this.comp = 'one'
      if (value === 2) this.comp = 'two'
      if (value === 3) this.comp = 'three'
      if (value === 4) this.comp = 'four'
      if (value === 5) this.comp = 'five'
      if (value === 6) this.comp =