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

222100222林致超 2024-03-23 23:32:18

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第二次作业——编程实现
结对学号	222100209、222100222
这个作业的目标	git协作开发、web前后端分离开发实现原型、docker容器化部署
其他参考文献	《构建之法》、Spring Boot、vue、Docker

一、Git仓库&代码规范

代码仓库: pair-project · GitCode

Java后端开发规范: Alibaba开发规约

JavaScript前端开发规范：Airbnb JavaScript Style Guide

二、PSP表格

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

三、成品展示

前端访问地址

后端在线接口文档

截图展示：

基础功能
- 功能1：选手信息
  展示选手信息（包括选手照片，Country，Athlete，Gender，DOB），并对选手照片的加载作出优化，防止一次加载过多数据阻塞页面，提升用户体验
- 功能2：每日赛况
  展示每一天的赛事，显示比赛类型与比赛时间，并且对决赛进行突出显示，支持点击查看本场赛事的详细赛况，点击后跳转到详细赛况页面并且会展开每日赛况页面所点击的比赛详情
- 功能3：详细赛况
  展示所有比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等。同时对每一类比赛进行分阶段展示，可以选择查看决赛结果或预赛结果

切换查看预赛结果

功能4：奖牌榜

添加奖牌图标，更加直观友好地展示各个参赛国的获奖情况。

附加功能
- 了解更多
  - 用轮播图和展开栏来介绍赛事相关信息，图文结合，引起人们对世界游泳锦标赛的兴趣。
- 表格信息筛选：选手信息界面提供表格筛选功能，可以对国家，性别进行筛选，方便用户查看
- 点击Confirm确定键，完成筛选，点击Reset重置键，恢复表格
- 并且支持多项组合筛选
- 优化用户体验：由于请求后端数据需要一定时间，页面首次加载数据会展示loading组件，直到数据加载完毕，并且再次会到该页面无需重复加载，提升用户体验。
- 提供全局导航组件（不随页面滚动，不会被遮挡），并且带一个返回按钮，用户可以随时随地切换导航与返回上一个页面，更加灵活方便，并且页面背景会随导航变化而切换。

四、结对过程

在我们拿到题目后，我和队友首先进行了头脑风暴，讨论了如何划分任务和确定技术栈。我们一起分析了题目需求，明确了前后端的分工和接口设计。在讨论过程中，我们共同提出了一些解决方案，并商讨了各自的想法和建议。

在解决问题的过程中，我们经常进行交流和讨论，分享遇到的困难和解决方案。有时候遇到问题我们会一起查找资料，阅读文档或搜索网络资源来解决。我们也会互相帮助，分享发现的有用信息和技巧，共同克服困难。

我们的合作过程中注重沟通和合作，保持开放的心态，尊重彼此的意见和建议。通过密切合作，我们不仅解决了问题，还学到了很多新知识，提高了技术水平。整个结对过程让我们更加紧密地合作，克服困难，最终顺利完成了项目。

以下是部分讨论结对过程的聊天截图；共同规定接口文档到部署项目编写文档；约定时间线下讨论线下实践；

五、设计过程

整体设计思路

采用前后端分离开发，我们都知道MVC模式，只要我们将浏览器视为前端，而服务器视为后端，可以将改进的MVC模式简化为前后端分离模式：

前后端分离设计是一种常见的软件架构设计方式，它将前端（用户界面）和后端（服务器端）分开开发、部署和维护。这种设计方式有以下几个优点：

独立开发：前后端分离设计让前端开发人员可以专注于用户界面的设计和交互逻辑，后端开发人员则可以专注于业务逻辑和数据处理，互不干扰地进行开发工作。
灵活性：由于前后端各自独立开发，因此可以选择最适合自己的技术栈和工具，提高开发效率和灵活性。前端可以使用各种现代的前端框架（如React、Angular、Vue.js），后端可以选择适合的后端框架（如Spring Boot、Express.js）。
性能优化：前后端分离设计可以让前端和后端各自专注于优化自己的部分，提高整体系统的性能。前端可以优化页面加载速度和用户体验，后端可以优化数据处理和接口性能。
可扩展性：通过前后端分离设计，可以更容易地扩展和维护系统。例如，可以更容易地替换前端或后端的部分，而不会影响整体系统的稳定性。
团队协作：前后端分离设计促进了前后端开发团队之间的协作和沟通，可以更好地分工合作，提高项目的开发效率和质量。

总的来说，前后端分离设计方式能够提高开发效率、系统性能和团队协作效果，是当前许多项目选择的主流架构设计方式之一。

前端vue架构设计

项目结构

.        
└─node_modules                                      // npm依赖            
├─src                                              // 源码目录
│  └─api                                           // 封装请求，统一管理api接口
│  └─assets                                        // 存放静态资源
│  └─components                                    // 可复用组件
│  └─router                                       // 路由配置
│  └─store                                         // pinia仓库，用于组件间通信
│  └─utils                                        // 工具函数
│  └─views                                         // 视图组件
├─codestyle.md                                    // 代码规范
├─.eslintrc                                       // 代码风格检查配置
├─.prettierrc                                    // 代码格式检查配置
├─ vite.config                                    // vite打包工具配置

技术选项

Vue 3: 使用 Vue 3 构建前端应用。
Vue Router: 用于处理前端路由。
Pinia: 用于管理应用的状态。
Axios : 用于发起 HTTP 请求。
ESLint: 用于代码风格检查。
Babel: 用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本。
Vite: 用于打包构建应用。

关键概念

组件化开发: 将页面拆分为独立的组件，以提高复用性和维护性。
单文件组件（SFC）: Vue 3 推荐使用单文件组件格式，将模板、样式和逻辑组合在一个文件中。
响应式数据: Vue 3 使用响应式系统来追踪并响应数据的变化。
组合式 API: Vue 3 引入了组合式 API，使组件的逻辑更加清晰和灵活。
路由管理: 使用 Vue Router 来管理前端路由，实现页面之间的导航。
状态管理: 使用 Pinia来集中管理应用的状态，方便不同组件之间的通信和状态共享

后端SpringBoot架构设计

在我们的后端项目中，使用SpringBoot框架进行设计，Spring Boot就像是我们搭建后端应用程序的工具箱，让我们可以快速搭建和运行应用程序，就像搭积木一样简单方便。

在接口开发方面，采用MVC模式，将项目主体分成了三部分：模型（处理数据）、视图（展示给用户的界面）、控制器（处理用户请求和返回结果），让整个项目更有条理，方便管理和维护。就像是一个有组织有纪律的团队，每个人分工明确，合作顺畅，最终完成了项目的开发和运行。

下面是详细的后端项目架构设计说明

.                        
├─src                                              // 源码目录
│  └─main                  
│      ├─java              
│      │  └─com            
│      │      └─lear
│      │          ├─common                                // 通用常数包 (包括统一封装返回结果)
│      │          ├─config                                // 配置包
│      │          ├─controller                        // 控制器层
│      │          ├─entity                                // 实体封装包
│      │          ├─service                                // 业务层
│      │          └─util                                // 工具类
│      └─resources                                        // 资源目录
│          └─datas                                                // 本地数据
│              └─results
├─codestyle.md                                // 代码规范
├─codestyle.pdf                                // 完整的开发规约
├─Docker                                        // 容器构建脚本
└─pom.xml                                        // Maven项目管理文件

架构设计遵守关注点分离原则(Soc)：

模块化：将应用分解为独立的模块，每个模块负责一个独立的功能。
分层架构：如前所述，通过将系统分解为表示层、业务逻辑层和数据访问层等，来隔离不同层次的关注点。
组件化：构建独立的、可复用的组件，每个组件实现一个特定的功能或关注点。

(关注点分离（Separation of Concerns，简称SoC）是软件工程中的一个设计原则，它鼓励将一个复杂的问题分解成多个更小的、更易于管理的部分。每个部分解决问题的一个特定方面，即一个“关注点”。通过这种方式，关注点分离旨在提高软件的可维护性、可扩展性和可复用性，同时减少代码的复杂度。)

六、代码说明

前端关键代码

应用入口

路由配置

统一管理api

表格筛选与分批请求头像

后端关键代码

视图层:
- 根据Soc原则，将控制层根据需求独立为一个controller类，调用业务层代码，并使用统一封装结果类来向前端返回json类型数据。
模型层
- 将前端所需要的数据分析抽象为各个字段，并封装到类中作为vo使用。在业务中将处理后的数据封装进对象，再通过控制器返回给前端。

业务层
- 业务中各个功能的服务类相互调用，有爬取数据的爬虫服务、封装数据的封装服务等等，相互调用完成所需业务

容器化部署关键代码

后端

FROM java:8

MAINTAINER Sky_Dog<362664609@qq.com>

COPY *.jar /app.jar

VOLUME ["/log"]

CMD ["--server.port=11111"]

EXPOSE 11111

ENTRYPOINT ["java","-jar","/app.jar"]

前端

FROM nginx
MAINTAINER Sky_Dog<362664609@qq.com>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

容器管理

version: '3'

services:
  boot:
    build:
      context: back-end/
      dockerfile: back-end/Dockerfile
    environment:
      TZ: Asia/Shanghai
    ports:
      - "11112:11111"
    volumes:
      - ./log/boot/:/log/
    restart: always
  vue:
    build:
      context: front-end/
      dockerfile: back-end/Dockerfile
    environment:
      TZ: Asia/Shanghai
    ports:
      - "11111:80"
    restart: always

启动

七、心路历程与收获

222100209李炎东:

作为后端开发工程师，在这次结对开发项目中，我深刻体会到了团队协作的重要性。通过与前端开发同学的密切合作，我们成功地搭建了一个功能完善的web服务原型。在开发过程中，我负责设计和实现后端逻辑，同时与前端同学紧密沟通，确保前后端的数据交互顺畅。

在项目中，我学会了更好地理解前端需求，提供清晰的接口文档和数据结构，以便前端同学能够更高效地调用后端接口。同时，通过结对编程，我也加深了对代码质量和可维护性的重视，我们相互审查代码，共同优化性能，确保系统稳定性。

最重要的收获是团队合作带来的成就感和快乐。与优秀的前端开发同学一起工作，让我在项目中不断成长，不仅技术水平得到提升，更重要的是学会了倾听、沟通和协作。这种团队合作的经验将使我在未来的软件开发项目中更加游刃有余。

222100222林致超:

作为前端开发工程师，这次与后端开发同学的结对开发让我受益匪浅。在项目中，我负责实现用户界面和与后端的数据交互。通过与后端同学的紧密合作，我更好地理解了后端逻辑和数据结构，从而更高效地调用后端接口，实现了前端页面的功能。

在结对开发的过程中，我学会了更好地规划前端代码结构，提高代码的可读性和可维护性。与后端同学一起审查代码，优化性能，不断改进用户体验，让我意识到团队合作的重要性。我们共同克服了遇到的技术难题，取得了令人满意的成果。

最大的收获是在团队合作中成长。与优秀的后端开发同学一起工作，让我不断学习和进步，不仅技术水平得到提升，更重要的是学会了团队协作和沟通。这次结对开发的经历让我更加自信地面对未来的项目挑战，相信团队合作的力量能够创造更多的价值。

八、评价结对队友

222100209李炎东: 作为后端，我非常欣赏与我合作的前端开发同学。他展现了出色的前端技术能力和团队合作精神。在项目中，他总是能够准确理解我的后端需求，并且能够高效地调用后端接口，实现前端页面的功能。他的代码规范，对用户体验的关注以及与我密切合作的态度让整个项目进展顺利。他的团队协作能力和技术水平让我深感钦佩，相信我们的合作必将创造更多的价值。

222100222林致超: 作为前端开发工程师，我对与我合作的后端开发同学深表敬意。他展现了出色的后端技术能力和团队合作精神。在项目中，他设计和实现的后端逻辑为整个项目奠定了坚实基础。他提供清晰的接口文档和数据结构，让我能够更好地理解后端逻辑，实现前端页面的功能。他的代码质量和对性能优化的关注让我深受启发，我们共同克服了技术难题，取得了令人满意的成果。

...全文