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

[222100320陈昕萌]

这个作业属于哪个课程	软件工程
这个作业要求在哪里	[结对第二次作业——编程实现]
结对学号	222100319,222100320
这个作业的目标	git协作开发，前后端分离web开发
其他参考文献	《构造之法》，spring boot,mybatils,vue官方文档
目录 1、git仓库链接和代码规范链接 2、PSP表格 3、成品展示 4、结对讨论过程描述 5、设计实现过程 6、关键代码说明 7、心路历程和收获 8、评价结对队友

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

git仓库
代码规范

2、PSP表格

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

3、成品展示

截图展示

1. 选手信息
   展示选手信息（包括Country，Athlete，Gender），并对于性别设置不同的显示颜色用于区分
   

   

2. 每日赛况
   选择所要查看的那一天的赛事，显示比赛类型与比赛时间，并且对决赛进行突出显示。并支持点击查看本场赛事的详细赛况，点击后跳转到详细赛况

3. 详细赛况
   设计按钮可选择所要查看的赛事，点击后跳转至对应赛事并展示所有比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等。
   

   

4. 奖牌榜

5. 附加功能
   附加功能一：设计了了解更多的页面，在其中使用英文介绍了跳水项目以及此项比赛的历史

附加功能二：添加设计了主页面，其中使用了轮播图来用于展示跳水项目

附加功能三：在选手信息界面设置了一个下拉列表用于选择性别，并提供选择和重置两个按钮，可用于对数据进行筛选后输出

附加功能4：在每日赛程部分添加了日历选择器，可通过用户自定义选择日期来显示数据，并在上方添加文字提醒有赛程的日期

附加功能5：在详细赛况部分对表格显示进行优化，将前三名的Rank显示更改为金银铜牌的图片，在奖牌榜中同样进行了显示的优化，有在有获得奖牌的选手分别在对应的位置添加奖牌图片

4、结对讨论过程描述

在拿到题目之后，由于之前有学过java基本知识,我们便决定使用当前主流的java EE开发的springboot+vue+mybatils框架进行设计
在开发初期，我们通过讨论确定了各自的分工，并确定了对应的数据交互方式，之后我们便各自学习对应的设计部分的相关知识，进行开发与设计。
我们由于是同一个宿舍的，大部分以线下讨论为主，只有部分聊天截图:

5、设计实现过程

功能结构图

此次的web设计采用了前后端分离开发，它将前端和后端的开发分离开来，使得两者能够独立进行开发、测试和部署。其与传统开发模式相比：
1、并行开发：前后端分离允许前端和后端团队并行开发，提高了开发效率。前端可以专注于用户界面和用户体验的设计与开发，而后端则可以专注于业务逻辑和数据处理的实现。
2、灵活性和可维护性：前后端分离使得前端和后端的代码彼此独立，降低了耦合度，提高了代码的灵活性和可维护性。如果需要修改或者更新某一部分功能，可以只修改对应的前端或后端代码，而不影响到另一部分。
3、扩展性：前后端分离使得系统的不同部分可以分别进行扩展，从而更容易实现系统的水平扩展和垂直扩展，提高了系统的可扩展性。
4、技术栈选择：前后端分离使得前端和后端可以选择更适合自己的技术栈，而不受限于对方的技术选型。这样可以根据项目需求和团队技术储备选择最合适的技术栈，提高了开发的灵活性和效率。

本次开发选用了当今主流的vue+springboot+mybatiles的web开发模式
Vue.js作为前端框架，负责实现用户界面和用户交互逻辑，通过Vue Router实现前端路由管理，通过Vuex实现前端状态管理，可以利用Vue的组件化特性来实现复杂的页面结构和交互效果。

在本次开发中选择最新的vue3作为前端框架进行开发，主要使用了其中的Axios,element plus组件，vue Routetr进行前端的开发，其中Axios负责与后端进行交互，从而获取后端传过来的数据。element plus组件用于界面的优化设计，此次开发中使用了其中的表格样式与时间选择器组件，vue Routetr用于前端路由的处理以完成页面间的跳转

Spring Boot作为后端框架，负责实现业务逻辑和数据处理逻辑，通过@RestController注解实现RESTful API接口，通过Spring Security实现用户认证和授权，可以利用Spring Boot的自动化配置和快速开发特性来快速搭建和开发后端服务。
MyBatis作为持久层框架，负责实现与数据库的交互操作，通过Mapper接口和XML映射文件来实现数据库的CRUD操作，可以利用MyBatis的动态SQL和缓存等特性来优化数据库访问性能。

在后端部分主要使用的注解有@Mapper，@select,@RestController，@CrossOrigin，@Autowired，@RequestMapping等
@Mapper 注解用于标识一个接口是 MyBatis 的 Mapper 接口。在使用 @MapperScan 注解扫描 Mapper 接口所在的包时，如果该包下的接口上有 @Mapper 注解，就会被扫描并注册为 MyBatis 的映射器
@RestController 注解将一个类声明为 RESTful 风格的控制器（Controller）。其会直接返回 JSON/XML 等数据格式，而不是视图，更加易于前后端之间数据的交互
@CrossOrigin：@CrossOrigin 注解用于解决跨域资源共享（CORS）的问题
@Autowired：@Autowired 自动装配 Spring 容器中的 Bean，一个类需要使用其他类的实例时，可以使用 @Autowired 注解来自动注入该实例，无需手动创建
@RequestMapping：将 HTTP 请求映射到 Controller 的处理方法上

6、关键代码说明

前端部分
导航栏设计以及Vue Router路由设置

选手信息展示部分下拉菜单及表格的设计

日期选择部分对于日期选择器选择日期格式化与获取的数据进行比对，展示所选择日期对应的数据

详细赛况部分，对于前三名显示改为金银铜牌的设计

轮播图部分设计

后端部分
controller(控制层)部分

解析json数据部分

ORM映射部分

7、心路历程和收获

222100319陈司怀：
作为后端开发工程师，在本次结对开发项目中，我认识到了团队协作对于项目成功的重要性。与前端开发同事的紧密合作使我们成功地搭建了一个功能完善的Web服务原型。在项目开发过程中，我承担了设计和实现后端逻辑的责任，并与前端同事密切沟通，确保了前后端数据交互的顺畅。

在这个过程中，我的主要工作是通过学习基本springboot框架，通过ORM获得数据库中文件并使用RequestMapping将其发送给前端的同学供其进行进一步的加工与渲染，此外通过框架的学习我也深刻体会到了代码结构化的的优势，可以更高效地完成需求。通过结对编程，我们互相讨论，共同优化性能，在学习新知识的同时也收获了团队合作带来的成就感和快乐。
222100320陈昕萌:

作为前端开发工程师，这次与后端开发同学的结对开发让有了整体的设计与开发有了新的体会。在项目方向部分，我负责获取后端同学的json数据后加以渲染美化。通过与后端同学的紧密合作，让我不断学习和进步，不仅技术水平得到提升，同时也学会了团队协作和沟通。

在结对开发的过程中，我学习了vue3框架的基本使用，与之前的html,css,js开发相比，框架为我们提供了许多现成的实现与组件，能够实现高效开发。与后端同学一起审查代码，优化性能，不断改进用户体验，让我意识到团队合作的重要性。我们共同克服了遇到的技术难题，取得了令人满意的成果。通过此次的前端开发，我体会到尽管在设计方面前后端是分离的，但再实际的设计思想与理念中两者有着许多的共同之处，vue框架中同样使用了大量的后端常用的设计方法，对前后端都有一定程度的理解与体会才能开发出更加完善的产品。

8、评价结对队友

222100319陈司怀：
作为后端，我非常欣赏与我合作的前端开发同学。他展现了出色的前端技术能力。在项目中，他总是能够准确理解我的后端需求，并且能够高效地调用后端接口，通过对于数据的处理，实现前端页面的功能。他的代码质量和对性能优化的关注让我深受启发，我们共同克服了技术难题，取得了令人满意的成果。
222100320陈昕萌:
作为前端开发者，我对我们团队的后端开发同学印象非常深刻。他们不仅精通后端技术，而且在项目中展现出了极高的专业素养和责任心。每当我需要与后端进行数据交互或者解决某些与后端相关的问题时，他们总是能够耐心地解答我的疑惑，为我提供清晰的接口文档和数据结构。他们的代码质量也让我非常钦佩，清晰的逻辑结构和严谨的编程风格使得我们的项目更加稳健和可维护。与他们一起工作让我学到了很多，我相信在他们的协助下，我们能够共同构建出更优秀的产品。