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

222000129黄钰婷学生 2023-03-24 19:27:00

这个作业属于哪个课程	2023软件工程实践W班
这个作业要求在哪里	结对第二次作业——编程实现
结对学号	222000129钰婷 222000131诗卉
这个作业的目标	1、fork仓库，和伙伴商讨协作细节 2、编程实现 3、撰写博客
其他参考文献	见文末

一、git仓库链接和代码规范链接
1.1git仓库链接
1.2代码规范地址
1.3项目访问链接
二、PSP表格
三、成品展示
3.1 基础功能
3.1.1 选手排名
3.1.3 每日赛况
3.1.3 晋级图
3.2 附加功能
3.2.1 首页
3.2.2 详细赛况
3.2.3 了解更多
四、结对讨论过程描述
4.1 周末工作——决定实现方式并分工
4.2周一到周二——实现前端界面
4.3周三到周五——实现数据的填充
4.4问题分析
4.5进度交流
五、设计实现过程
5.1 功能结构图
5.2 设计概述
5.3遇到的问题及解决办法
前端问题：
云服务器问题：
六、6.1代码说明
前端关键代码
七、心路历程和收获
八、评价结对队友
参考文献

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

1.1git仓库链接

仓库地址戳这里戳一戳

在这里插入图片描述

1.2代码规范地址

我们的代码规范地址

1.3项目访问链接

项目地址

二、PSP表格

PSP表格如下

PSP各个阶段	自己预估的时间(min)	实际的时间(min)
计划: 明确需求和其他因素，估计以下的各个任务需要多少时间	30	40
__开发__（包括下面8项子任务）	1660	2320
需求分析 (包括学习新技术、新工具的时间)	350	500
生成设计文档（整体框架的设计，各模块的接口，用时序图，快速原型等方法）	60	40
设计复审 (和同事审核设计文档，或者自己复审)	30	30
代码规范 (为目前的开发制定或选择合适的规范)	30	40
__具体设计__（用伪代码，流程图等方法来设计具体模块）	30	30
具体编码	1000	1500
代码复审	60	100
__测试__（自我测试，修改代码，提交修改）	100	80
报告	100	140
__测试报告__（发现了多少bug，修复了多少）	50	100
计算工作量 (多少行代码，多少次签入，多少测试用例，其他工作量)	20	20
事后总结, 并提出改进计划（包括写文档、博客的时间）	30	20
总共花费的时间(min)	1790	2500

三、成品展示

网页结构采用导航栏+内容栏的形式。用户可以通过点击导航栏上的“首页”，“选手排名”，“每日赛事”，“晋级赛”，“了解更多”跳转到对应的页面。

在这里插入图片描述

3.1 基础功能

实现的基础功能有三个，分别是选手排名，每日赛况，晋级图。
3.1.1 选手排名
选手排名采用图表的形式展示了Singles Aces Leaders的排名，该页面有Men's Singles Aces Leaders和Women's Singles Aces Leaders两个表格，每个表格有Name、Rank、Matches和Aces四个字段。
3.1.3 每日赛况
每日赛况实现了一个按钮组，支持用户通过切换日期查看不同比赛日的赛程（由于数据量较多，我们选择实现女子单打项目day1到day5一共五天的数据~）。用户可以从该页面获取比赛类型、比赛场地、参与选手、比赛时间和比分等信息，且获胜者姓名会加粗显示+打钩图标 +打钩图标且鼠标滑过时会有蓝色边框高亮显示。
且我们一开始打算通过插入选手所在国家的国旗以及获胜者一栏打钩的形式来丰富美化我们的页面，但后来考虑到选手来自将近90个国家，实现起来过于复杂，因此将国旗全部简化为了一个国家的国旗展示。

3.1.3 晋级图

通过晋级图用户可以看到选手的晋升路线，晋级图中有选手的姓名和比分，鼠标移动到某一场比赛时会显示边框提示（边框会变成蓝色）。
用户可以通过下拉框来选择不同类型的比赛，因为数据过多的缘故，此处我们实现了“男子单打”、“女子单打”两种类型。

晋级图全貌~

请添加图片描述

3.2 附加功能

除了上述基础功能，我们还实现了详细赛况，了解更多这2个功能，同时，加上了首页，让网页结构更完整。

3.2.1 首页

首页采用导航栏+视频+轮播图的形式，用户可以通过点击导航栏上的“首页”，“选手排名”，“每日赛事”，“晋级赛”，“了解更多”跳转到对应的页面。

用户可以点击轮播图上的左右按钮，查看感兴趣的图片。当然，轮播图也会自动跳转。
3.2.2 详细赛况
通过点击每日赛况里的查看“详细赛况”，将会跳转到本场比赛的详细赛况页面，页面上端展示该场比赛的两位选手的图片，以及他们的赛况，页面下方详细描述了包含本场比赛参赛选手、每个小场的比赛情况。
考虑到数据量的问题，我们只实现了“day1”中前两场的详细赛况。

3.2.3 了解更多

我们还实现了“了解更多”页面，该页面由“按钮组+内容栏”实现，点击“赛事历史”，“赛事发展”，“比赛场地”，“比赛奖金”，“冠军奖杯”，用户可以看到不同的画面。
赛事历史页面
赛事发展页面
比赛场地页面

四、结对讨论过程描述

因为两人是舍友的关系，很多讨论都是通过面对面交流的，在线上主要是分享学习经验贴以及成果的互相展示。

4.1 周末工作——决定实现方式并分工

实现方法

照常滴，我们周末一般主打就是一个分工+学习，因为两个人前期都没有接触过什么框架的学习(~~心酸的眼泪~~),又听闻当下vue大热且很方便使用，考虑到后期的团队作业采用的框架是vue，因此我们决定此次定下vue作为我们的前端框架。
本来后端是安排使用spingboot框架，但是因为时间紧迫，如果现学两个框架的话很容易导致一口吃不下一个胖子，因此我们放弃了前后端分离的方式，决定采用纯前端+数据写在代码中的方式。
因为放弃了后端的编写，我们因此更加有时间实现UI美化功能，在这里我们着重参考了官网的界面布置，尽可能的与官网相似甚至更进一步，使得界面更加美观。
分工
初期我们决定设计五个界面，其中钰婷完成其中的三个页面+后期美化，诗卉负责两个界面以及数据的填充插入，而博客由两人共同完成。
后期如果有时间的话两人决定追加详细赛况功能界面。

在这里插入图片描述

4.2周一到周二——实现前端界面

因为首页比较简单，我们在周末就已经实现，因此周一和周二我们两人主要负责剩余四个界面的编写，一人负责两个，编写完后分别发给对方评审，接着对不足之处提出修改~

在这里插入图片描述

4.3周三到周五——实现数据的填充

这三天钰婷主要负责界面的再度优化，对一些细节部分处理的更加细腻，而诗卉主要是负责数据的填充，将需要的数据处理并插入。
因为时间比较余裕，因此我们决定额外实现详细赛况这个附加功能，两人共同努力在一天内实现了详细赛况页面的编写。
完成后我们共同探讨，对界面进行美化处理。

4.4问题分析

编码一分钟，bug一小时(~~T_T~~)，编程中我们老是会遇到各种各样的问题，这时我们通常是先自己百度，发现解决不了时就会相互询问，通过交流，我们解决问题的速度得到了提高，且也变得更加的有经验。
我们还会在互相评审中时刻记录下来觉得不妥的地方并发给队友参考，通过共同探讨后决定是否需要进行更改。

在这里插入图片描述

4.5进度交流

因为事先有过分工和时间上的安排，因此我们在进度这一块基本没有过什么争执，两人都属于不愿意拖团队后腿的那类人，因此一旦是团队合作时就会充满干劲，基本上能够按时完成作业。一人出现了难题，另一人也能及时提供帮助。
五、设计实现过程

5.1 功能结构图

5.2 设计概述
采用技术： vue框架 、axios库
设计思路：本次作业的设计要点有页面设计、json数据的获取和渲染
- 页面设计
  页面设计有多种设计方式，有由html + element-ui + css，components + element-ui + css，html+css。例如，选手排名我们先用html搭建了页面结构，然后引入了el-table组件来实现表格；晋级图页面采用html+css实现晋级图结构，后期再将数据渲染上去；了解更多页面由按钮组+内容栏组成，引入el-button组件实现按钮组，采取components实现内栏栏的跳转。
- json数据的获取和渲染
  由于没有使用前后端结合的方式，因此我们在考虑后决定使用axios来实现对json文件中数据的提取。通过axios的get方法来对静态json文件进行解析并提取data数据，并在中使用v-bind对数据进行绑定。

5.3遇到的问题及解决办法

前端问题：

json文件读取问题 初始时我们惆怅应该如何引入json数据，甚至想过直接将数据写入代码中，但是后来看到数据是如此海量时就放弃了，接着寻找其他的办法，我们还尝试过使用require将数据以模块的方式进行引入，但是这样我们读出来的数据总是空白的
解决方法 ：后来通过百度搜索发现了axios，通过将json文件存放在static目录下，·axios能够使用其get方法很好的获取数据。
晋级图线条表示问题 ：因为我们是决定仿真官网进行页面制作，但官网上晋级图之间会有线条表示晋升的关系，而我们查遍大部分组件都没有找到合适的。
解决方法 ：后来钰婷决定通过横向树状图的方式使用纯css来展示线条，事实证明是成功了。
跨域连接问题 ：我们一开始是使用将json文件部署到云服务器上，通过url的方式进行访问json文件，但是一直提示我们出现跨域问题不允许我们进行连接，那时候是真的绝望，跟着教程配置了Nginx.conf文件也没能成功。
解决方法 ：这个方法没能解决（泪奔），我们只能尝试换一种方法，将json文件部署到vue的static静态目录下，又是一通大改，绝望到哭。
云服务器问题：
我们是根据阿里云的教程来部署我们的项目的，因为开始时我们云服务器选择的是windows系统，之后我们使用xShell和xftp去连接我们的远程服务器时总是提示连接失败，查了半天也没有找到相关原因。
解决方法 ：后来才发现就是单纯的因为xShell无法连接远程的Windows系统的原因，且无论是电脑本身还是阿里云服务器上都已经实现了远程连接的按钮，只需要点击就可以实现连接了...这告诉我们，版本和系统是真的重要啊啊啊啊啊

六、6.1代码说明

前端关键代码

选手排名：
选手排名页面我们主要是使用了el-table这个组件来实现数据的渲染和展示。使用v-bind:data="manData" 来绑定数据字段，数据通过axios的get方法获得static目录下的manData数据。
使用el-table-column来设置表头的属性。

获取数据的方法
每日赛事
我们主要通过实现不同日期赛事的切换，为每一个添加@click事件进行事件响应，并使用axios获得不同的数据。
每日赛事的展示我们没有寻找到合适的组件，因此自定义了一个container容器来封装实现数据的展示。其中我们用v-for语句进行数据的渲染。通过点击后axios获得不同日期的数据并填充，并通过v-if语句判断是否为赢家，若是赢家则加粗显示+打钩图标。美中不足的是我们的国旗图案没有实现变换，只有单一的一种国旗。
晋级图
晋级图的方框沿用了每日赛事中的设定，而表示晋级的线条则是通过横向树状图+css代码实现。
晋级图还使用实现了下拉框功能，用户可以通过下拉框来选择对应的晋级赛的比赛类型。

七、心路历程和收获

222000129钰婷的心路历程和收获
这次结对作业因为事先没有规定开发环境的版本，导致我从仓库拉取运行项目时有些功能没反应（呜呜呜吃一堑长一智，以后开发团队项目第一步就是规定开发环境版本和参考文档）。
vue框架对于我来说是个全新的事物，虽然在开发时经常遇到因为少了某个依赖而报错，添加了CSS样式却没有效果的问题。但Vue框架提供了很多组件供我使用，直接引入组件比传统的手动敲各个元素节省了时间和精力。总的来说，框架的学习对于开发效率的提高有相当大的影响。
![在这里插入图片描述](https://img-blog.csdnimg.cn/b116745468714ca7a9bdf845537f0530.jpeg#pic_center =300x300)
222000131诗卉的心路历程和收获
问起来就是一个字：痛，太痛了。从一开始没有同一版本导致两人的代码不能兼容，到后来对vue磕磕绊绊的学习，一切的一切都没有任何捷径，只能靠肝。每一次都要写到深夜才能彻底消除一个bug，但新的一天总是能出现各种各样的新的问题等待我们去解决，感觉无穷无尽呜呜呜。但好在一切都是值得的，正是因为这样投入式的动手实践，才能让我们很快的掌握软件开发中需要注意的各种各样的问题，并真正的理解并在今后的工作中使用到。andand，vue确实好用，就是如果不要有辣么多版本就好了。
八、评价结对队友
222000129钰婷对222000131诗卉的评价
诗卉是个很好的引领者，任务发布后，她搭建了项目的结构并安排了分工，我只需要在她搭建好的项目结构上开发即可。遇到我无法实现的功能她都会很热心地帮助我，而且开发效率很高，以一己之力提高了团队效率（嘿嘿和我的好队友锁死~）。诗卉她总是乐于承担项目中的难点，帮助了我很多很多，和她的每一次合作都是一次愉快的体验。
![在这里插入图片描述](https://img-blog.csdnimg.cn/52c5d4ab556945e29bb3dcf690623c96.jpeg#pic_center =300x300)
222000131诗卉对222000129钰婷的评价
钰婷真的太好了。我属于那种很龟毛、对于界面的设计总是会有突如其来的一个想法(~~但是自己又实现不了~~)这时候总是强大的钰婷站出来扛下了所有，感觉她对css实在厉害的样子，而且会为了实现一个样式而不停的查找尝试，从来都不是敷衍的回答我说算了吧，我觉得这是他让我很爱很爱的一个点啦。
参考文献
gitcode团队项目合作
 vue组件的使用
 自适应网页
 vue项目搭建
 axios教程