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

222100431姚宇杰 2024-03-26 19:04:19

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第二次作业——编程实现
结对学号	222100431、222100432
这个作业的目标	对结对作业的平台原型具体实现
其他参考文献	无

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

3.成品展示

OVERVIEW 首页
ATHLETES 运动员信息
RESULTS 详细赛况

点击下拉按钮可以展示具体内容
SCHEDULE 每日赛况

点击Event Details按钮跳转RESULT页面展示信息
MEDAL 奖牌榜

展示各国家奖牌信息

4.视频链接

视频链接

5.设计实现过程

本次代码主要靠前端实现，通过编写html文件在网页上显示信息。

平台分为主界面，每日赛况，详细赛况，运动员信息和奖牌榜。分别对五个页面编写html代码，对其中的一些交互功能进行跳转。

代码规范

HTML 代码规范（源自支付宝开发者社区）

1、 DOCTYPE 声明

一个 DOCTYPE 必须包含以下部分，并严格按照顺序出现：

一个 ASCII 字符串 “<!DOCTYPE>” ，大小写不敏感
一个或多个空白字符
一个 ASCII 字符串” html ”，大小写不敏感
一个可选的历史遗留的 DOCTYPE 字符串（DOCTYPE legacy string），或者一个可选的已过时但被允许的 DOCTYPE 字符串（obsolete permitted DOCTYPE string）字符串
一个或多个空白字符
一个编码为 U+003E 的字符 “>”

2、HTML基础代码块

文件应以<!DOCTYPE.....>首行顶格开始，这句话告诉浏览器这是一个什么文件，通常会使用<!DOCTYPE html>。
必须在head元素内部的meta标签内声明文档的字符编码charset, 如：<meta charset="UTF-8">，这句代码告诉浏览器应该此HTML文件使用的字符集是什么，如果不加此行代码，那么在浏览器中可能显示为乱码
页面的title是极为重要的不可缺少的一项。通常用我们编辑器快捷键就能得到(VSCode中敲 !号后按tab 就能补全得到)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

3、HTML代码结构和视觉顺序基本保持一致

按照从上之下，从左到右的视觉顺序书写HTML结构。
有时候为了便于搜索引擎抓取,我们也会将重要内容在HTML结构顺序上提前，因为搜索引擎抓取网页内容是自上而下的，所以将重要内容在HTML结构顺序上提前可便于抓取重要的内容
不要使用table布局，现在基本上被淘汰了，而应该代之以div来布局，方便控制。

4、结构、表现、行为三者分类，避免内联

使用link引入外部css文件到head中。注意：一般我们不使用@import来引入外部css文件
使用script将js文件引入，并置于body底部，这时js文件会最后加载，html会最先加载，用户体验会更好。（注意：并不是所有的js文件都要放置于body的底部，如当我们需要使用js文件动态修改meta元素内容时，需要将js文件引入到head标签中)

5、保持良好的树形结构

每一个块级元素都另起一行，每一行都是用tab缩进对齐。如果不是块级元素，比如几个行内元素，我们把他写在一行即可。注意：html、 head、 body ，其他的大都正常缩进
当然，我们也可以在大的模块之间用空行空开，在模块内不要使用多余的空行,下面为实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>努力学习的汪</title>
</head>
<body>
  <h1>HTML整体结构规范</h1>
  <div>
    <span>行内元素</span><span>写在一行</span>
    <div>
     <p>这是一个段落</p>
    </div>
  </div>
</body>
</html>

6、关于使用className的小细节

一个标签上引用的className不要过多，越少越好。
对于一个语义化的内部标签，应该尽量避免使用className

6.代码说明

具体代码

首页
运动员信息

每日赛况
RESULT
MEDAL

###7.结对协作

功能结构图

讨论

8.心路历程和收获

本次结对作业让我们深刻体验到了团队合作的重要性。与搭档共同分工合作，需要密切的沟通和协调，以确保项目进展顺利。通过与搭档的合作，我学会了倾听和尊重他人意见，学会了在团队中有效地沟通和协作。在实现平台的过程中，我们面临了各种各样的难题和挑战。促使着我们学会了设计和开发方面的技术知识，最终克服困难，实现了平台。