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

052101413任广湃 2024-03-26 15:55:14

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	结对第二次作业——编程实现
结对学号	112101341、052101413
这个作业的目标	学习结对合作编程
其他参考文献	《构建之法》、Angular中文文档、Django文档

1 gitcode仓库地址

Gitcode仓库地址：仓库地址

前端代码规范：Angular风格指南

后端代码规范：Django风格指南

2 PSP表格

PSP表格

PSP	Personal Software Process Stages	预估消耗时间（分钟）	实际消耗时间（分钟）
Planning	计划	20	20
•Estimate	•估计这个任务需要多久	20	20
Development	开发	700	800
•Analysis	•需求理解与分析	30	30
•Tool Choice	•选择原型设计工具	10	10
•Coding	•具体编码	400	450
•Group Discussion	•结对讨论	25	50
•Study	•学习新技术	235	260
Reporting	报告	60	70
•Reporting	•撰写博客	60	70
Size Measurement	计算工作量	10	10
Postmortem	事后总结	45	60
总计		835	960

3 成品展示

前端地址：前端

后端地址：后端

选手栏首页

在这里插入图片描述

选手栏底部换页，选择页面

在这里插入图片描述

赛况栏首页

在这里插入图片描述

赛况根据时间选择页面

在这里插入图片描述

详细赛况

在这里插入图片描述

各国奖牌详情

在这里插入图片描述

关于本赛事

在这里插入图片描述

4 结对讨论过程描述

在这里插入图片描述

5 设计实现过程

5.1整体设计思路

前端使用Angular，后端使用Django，前端通过HTTP请求与后端进行通信，后端处理请求后，将数据打包成JSON格式返回给前端，Angular使用HttpClient模块发送请求和接收响应，前端解析JSON数据并将其显示到用户界面，后端专注于数据处理和业务逻辑，前端负责数据展示和用户交互，二者通过API进行松耦合的交互，确保了前后端的高度独立和可维护性，可以实现前后端的高度分离和独立开发，还能通过优化前端的异步处理和后端的并发处理能力，有效提高应用的性能和并发处理能力。

5.2前端架构

dive-web # 项目根目录

│ .gitignore # Git忽略文件，指定了不应该被Git跟踪的文件和目录

│ angular.json # Angular CLI的配置文件，用于定义项目的工作空间、构建选项等

│ package-lock.json # 自动生成的文件，用于记录当前状态下实际安装的npm包的具体来源和版本号

│ package.json # 定义了项目的元数据和依赖关系的npm配置文件

│README.md# 项目的README文件，通常包含项目说明、安装步骤和使用方法

│ tsconfig.app.json # TypeScript编译器的配置文件，用于Angular应用的编译设置

│ tsconfig.json # 项目级的TypeScript编译器配置文件，定义了TypeScript编译的基础选项

│ tsconfig.spec.json # 用于TypeScript编译器的测试设置，专门为单元测试准备

│

├─dist # 构建输出目录，这里存放Angular构建工具生成的生产环境用的文件

│

└─src # 包含项目源代码的目录

│ favicon.ico # 网站的图标文件

│ index.html # 主HTML文件，Angular应用的入口点

│ main.ts # Angular主启动文件，用于引导应用的根模块

│ styles.scss # 全局样式文件，SCSS格式

│ theme.less # 全局主题样式文件，LESS格式

│

├─app # Angular应用的核心模块目录

│ │ app.component.html # 应用的根组件模板文件

│ │ app.component.scss # 根组件的样式文件

│ │ app.component.ts # 根组件的TypeScript逻辑文件

│ │ app.config.ts # 应用配置文件，可能包含环境变量等

│ │ app.routes.ts # 应用路由配置文件，定义了URL与组件的映射关系

│ │ ng-zorro.module.ts # NG-ZORRO组件库的模块配置文件，用于Angular应用

│ │ utc-to-local.pipe.ts # 自定义管道，用于将UTC时间转换为本地时间显示

│ │

│ ├─about # “关于”页面的组件目录

│ │ about.component.html # “关于”页面的HTML模板

│ │ about.component.scss # “关于”页面的样式文件

│ │ about.component.ts # “关于”页面的TypeScript逻辑文件

│ │

│ ├─athlete # “运动员”页面的组件目录

│ │ athlete.component.html # “运动员”页面的HTML模板

│ │ athlete.component.scss # “运动员”页面的样式文件

│ │ athlete.component.ts # “运动员”页面的TypeScript逻辑文件

│ │

│ ├─medal # “奖牌”页面的组件目录

│ │ medal.component.html # “奖牌”页面的HTML模板

│ │ medal.component.scss # “奖牌”页面的样式文件

│ │ medal.component.ts # “奖牌”页面的TypeScript逻辑文件

│ │

│ ├─result # “结果”页面的组件目录

│ │ result.component.html # “结果”页面的HTML模板

│ │ result.component.scss # “结果”页面的样式文件

│ │ result.component.ts # “结果”页面的TypeScript逻辑文件

│ │

│ └─schedule # “日程”页面的组件目录

│ schedule.component.html # “日程”页面的HTML模板

│ schedule.component.scss # “日程”页面的样式文件

│ schedule.component.ts # “日程”页面的TypeScript逻辑文件

│

└─assets # 资源文件目录，用于存放图像、图标、样式和静态数据文件

.gitkeep # 一个空文件，用来让Git保持跟踪空目录

background.jpg # 背景图像文件

icon.webp # 比赛图标的webp格式版本

技术栈选项:

• Angular 17: 使用 Angular 17 构建前端应用，一个全面的前端框架，用于开发高性能的单页面应用。

• Angular Router: 用于处理前端路由，支持懒加载、路由守卫等高级功能。

• NG-ZORRO: 一个基于 Angular 17 的 UI 组件库，为应用提供了丰富的界面组件。

• RxJS: 用于应用中的异步编程和事件处理，提供了强大的数据流控制能力。

• TypeScript: 作为项目的主要开发语言，提供了类型安全和最新的ECMAScript特性。

• Angular CLI: 用于项目的脚手架、构建和开发工具链，简化了Angular应用的开发和构建过程。

5.3后端架构

dive-server： # 项目根目录

│

├── .gitignore # Git忽略文件，用于指定哪些文件不被Git版本控制系统追踪

├── db.sqlite3 # SQLite数据库文件，Django默认的轻量级数据库

├──manage.py# Django项目管理脚本，用于执行各种Django命令如运行服务器、数据库迁移等

├── requirements.txt # 项目依赖文件，列出了所有需要的Python包

│

├── athlete # athlete应用目录

│ ├──apps.py# 应用配置文件，每个Django应用都需要有一个

│ ├──models.py# 模型定义文件，定义了athlete应用的数据模型

│ ├──serializer.py# 序列化器文件，用于定义数据的序列化和反序列化规则

│ ├──views.py# 视图文件，处理请求并返回响应

│ ├──init.py # Python包初始化文件

│ └── migrations # 数据库迁移目录，存储模型变更的迁移文件

│ ├── 0001_initial.py # 初始迁移文件

│ ├── 0002_athlete_countrycode.py

│ ├── 0003_athlete_resultid_athlete_image.py

│ └──init.py # Python包初始化文件

│

├── dive_server # 项目的核心配置目录

│ ├──asgi.py# ASGI配置文件，用于异步服务器网关接口，适用于异步web应用

│ ├──settings.py# Django项目的设置/配置文件

│ ├──urls.py# 项目的URL声明，用于将URL路径映射到视图

│ ├──wsgi.py# WSGI兼容的Web服务器入口，用于部署

│ └──init.py # Python包初始化文件

│

├── medal # medal应用目录

│ ├──apps.py# 应用配置文件

│ ├──models.py# 模型定义文件

│ ├──serializer.py# 序列化器文件

│ ├──views.py# 视图文件

│ ├──init.py # Python包初始化文件

│ └── migrations # 数据库迁移目录

│ ├── 0001_initial.py

│ ├── 0002_rename_contryname_medal_countryname.py

│ ├── 0003_alter_medal_table.py

│ └──init.py # Python包初始化文件

│

├── schedule # schedule应用目录

│ ├──apps.py# 应用配置文件

│ ├──models.py# 模型定义文件

│ ├──serializer.py# 序列化器文件

│ ├──views.py# 视图文件

│ ├──init.py # Python包初始化文件

│ └── migrations # 数据库迁移目录

│ ├── 0001_initial.py

│ ├── 0002_alter_schedule_table.py

│ ├── 0003_schedule_date.py

│ └──init.py # Python包初始化文件

│

├── templates # 模板目录，存放Django模板文件

└── Utils # 实用工具目录

├──model.py# 模型相关的工具类或函数

├──response.py# 响应相关的工具类或函数

└──viewset.py# 视图集相关的工具类或函数

后端的根目录中，.gitignore文件确保了特定的文件和目录（如Python编译产生的.pyc文件或开发环境特定文件）不被Git版本控制系统追踪，从而避免了不必要的文件提交到代码仓库。db.sqlite3是Django默认使用的轻量级数据库文件，提供了快速启动和开发的能力，而无需配置复杂的数据库系统。manage.py是Django项目的命令行工具入口，支持开发者执行包括数据库迁移、测试运行和开发服务器启动在内的多种开发相关任务。requirements.txt文件列出了项目所需的所有Python依赖包，简化了环境配置过程。

项目中的athlete、medal和schedule目录分别代表着不同的Django应用模块，每个模块都负责处理与其相关的业务逻辑和数据模型。在这些应用目录中，models.py定义了应用的数据模型，即数据库的表结构和关系；views.py包含了处理客户端请求并返回响应的视图函数或类；serializer.py则用于将复杂的数据类型如查询集和模型实例转换为Python数据类型，以便轻松渲染为JSON或其他内容类型。migrations目录存放着数据库迁移文件，这些文件记录了模型定义的变更历史，使得数据库结构的版本控制和修改变得简单。

dive_server目录包含了项目的核心配置，如settings.py配置文件定义了项目的全局设置，包括数据库配置、安全设置、静态文件处理等。urls.py则是项目URL的声明文件，它将URL路径映射到对应的视图处理函数或类，是Django强大的URL设计的体现。asgi.py和wsgi.py文件分别提供了异步和同步Web服务器的入口点，确保了项目可以适配不同的生产环境。

最后，Utils目录则包含了项目中使用的各种实用工具类和函数，如模型处理、响应格式化等，以支持更干净、更模块化的代码设计。

6 代码说明

6.1前端关键代码

schedule 页面主要代码
html渲染

在这里插入图片描述

获取全部athlete数据：

在这里插入图片描述

schedule页面主要代码
html渲染：

在这里插入图片描述

获取schedule信息，并进行数据处理：

在这里插入图片描述

result界面主要代码：

在这里插入图片描述

根据父组件传入的result，获取运动员头像

在这里插入图片描述

medal界面主要代码
html渲染：

在这里插入图片描述

获取medal：

在这里插入图片描述

6.2后端关键代码

模型定义：

在这里插入图片描述

view层：爬取数据与返回数据逻辑

在这里插入图片描述

7 心路历程和收获

112101341俞子涵:

刚开始与前端同学合作时，有时我会认为前端的需求对我来说显得不切实际，尤其是在时间紧迫的情况下。后来经过沟通，我开始意识到，为了提供优秀的用户体验，前端所做的努力和遇到的挑战同样复杂。我学会了从用户的角度来看待问题，这对我设计后端架构和接口时非常有帮助。

我也开始更积极地与前端沟通，讨论如何更好地协作。通过这些交流，我了解到前端开发者对于接口的需求，并尽可能地优化我的代码以满足他们的需求，同时也保证了后端的性能和安全。在这个过程中，我们都有所成长。前端同学增强了对后端逻辑的理解，而我也更加注重用户体验和接口的友好性。

052101413任广湃:

这次与后端开发同学的结对开发让我受益匪浅。在项目合作中，我逐渐明白了沟通的重要性。我开始在提出需求前，先尝试从后端的角度考虑问题，这帮助我更准确地传达我的需求，并理解后端的限制和挑战。通过不断的学习和沟通，我和后端同学之间建立了更深的信任和理解，这让我们的合作更加顺畅，也大大提高了开发效率。经历了最初的挑战之后，我们学会了如何更有效地沟通。这意味着在日后的合作中我们可以更好地定义需求，减少误解和返工。