这个作业属于哪个课程 | <软件工程-23年春季学期> |
---|---|
这个作业要求在哪里 | [作业要求的链接]((https://bbs.csdn.net/topics/614125572) |
结对学号 | 222000101,222000106 |
这个作业的目标 | 编程实现上一次原型设计作业的部分功能 |
其他参考文献 | 各种视频 |
仓库地址
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 |
项目访问链接
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:
后端队友写接口的速度十分迅速,可以在我实现接口功能之前,提供完整详细的接口文档,省去了很多交流上的难题,对服务器的部署也十分轻车熟路,完成了整个项目的部署,十分可靠。