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

[222000101白文成]

这个作业属于哪个课程	<软件工程-23年春季学期>
这个作业要求在哪里	作业要求的链接
结对学号	222000101,222000106
这个作业的目标	编程实现上一次原型设计作业的部分功能
其他参考文献	各种视频

目录

• 仓库地址
• PSP表格
• 项目访问链接
• 成品展示
• 结对讨论
• 代码设计实现和功能结构图
• 后端设计实现
• 类的设计
• 代码设计
• 前端设计实现
• 页面样式设计
• 排名
• 赛程
• 晋级图
• 前端结构功能图
• 心路历程和收获
• 如何评价

仓库地址

我的仓库

PSP表格

PSP	预估耗时（分钟)	实际耗时（分钟
• 讨论大概如何实现	60	50
• 学习vue	180	240
• 学习springboot	100	150
• 前端设计静态界面	200	400
• 后端完成数据接口设计	120	240
• 实现后端接口	200	300
• 前后端接接口	60	60
• 解析数据	150	240
• 前后端接接口	60	90
• 部署项目	60	60
• 撰写博客	60	80
合计	1250	1910

项目访问链接

AO公开赛（页面请使用80%的缩放比）
4月20号服务器到期

成品展示

实现了所有基本功能，能够展示选手排名；按日期对每日赛程的数据进行切换；晋级图的展示，切换以及高亮显示。

结对讨论

代码设计实现和功能结构图

后端设计实现

类的设计

根据官网设计出相应的类

用iswin判断是谁赢，然后前端能根据这个进行高亮显示

在数据库中设计出相应的表，数据库是在云端

代码设计

另外两个接口较为简单，这里着重介绍一下每日赛况的接口实现。
通过DayController获得获得要查询的日期，字段id，逐层获得相应的数据，先查找相应的court，再查找对应court的match，再查找相应的选手信息player_score，再查找相应的比分信息score，并进行逐层封装

前端设计实现

页面样式设计

基本还原了官网界面样式，主要采用 <导航> <主体> < footer> 的布局实现排版，使用vue框架，并采用组件化的思想，最大程度提高代码复用性

排名

定义home组件，用来展示男女表格，通过传入的参数判断标题展示Men或Women,在排名页面中使用两个home组件采用浮动属性使两者并排，将axios请求于created（）函数上挂载，实现从后端接受数据,并通过v-for对列表进行渲染。

赛程

每个按钮可以用对应天数作为参数向后端发送含参请求（由于数据只有两天的数据，所有超过两天的请求，将通过判断函数转化为day1和day2），得到不同的数据。将数据以运动场列表和比赛场次列表进行渲染（每场比赛用float排列）。使用v-if判断胜利者，并采用不同的显示格式。
每个按钮的请求函数:

对赛程的渲染:

晋级图

使用span盒子的边框，以每场比赛的盒子设为relative定位父元素，span设置为absolute定位子元素，完成晋级图的连线（每条线都是一个span盒子），为了减少css的代码量使用类:after伪类减少span盒子的数量；通过观察官网晋级图，发现他以4 - 2 - 1组合为基础（半决赛-决赛） ，然后随着轮次的减少，每一个晋级图要显示的4-2-1组合都是前者的两倍，所以将这个组合设置为一个组件，根据轮次数渲染相应个数的组件，实现晋级图的切换功能;高亮显示，给父盒子设置一个:hover，并显示不同颜色的边框；轮次名字的切换:设置一个flag变量，用来判断轮次，不同的轮次显示不同名字，用按钮切换flag的值。

4-2-1组合:

4-2-1组件代码:

晋级图及其连线:

前端结构功能图

心路历程和收获

222000101：

这次项目的前后端分离是我之前没有接触过的，在这次项目中，我对后端技术有了更好的运用，同时对于类的设计有了更深的认识，对于后端的环境搭建也变得更加的熟练，也为团队项目打下了基础。

222000106：

对vue的使用更加熟练了，对布局的使用以及页面设计都有了更深的理解，也让我认识到了，个人编程和结对编程是完全不同的两个东西，如果配合不到位，是不可能实现任务的；第一次部署前端项目到服务器中，在日后的团队项目中将会更加得心应手。

如何评价

222000101：

我的队友对于前端如何解析数据有很深的功力，不管我的数据嵌套了几层，他都能解析出来，真滴不错，这省下了后端不少麻烦

222000106:

后端队友写接口的速度十分迅速，可以在我实现接口功能之前，提供完整详细的接口文档，省去了很多交流上的难题，对服务器的部署也十分轻车熟路，完成了整个项目的部署，十分可靠。