【无标题】

这个作业属于哪个课程	2022年春软件工程实践F班
这个作业要求在哪里	软件工程实践——结对作业一
结对学号	221900111 221900213
这个作业的目标	采用web技术来实现结对作业一所制作的原型中的功能。
其他参考文献	CSDN，百度

GitCode仓库

git仓库

代码规范

腾讯前端代码规范

PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	30
• Estimate	• 估计这个任务需要多少时间	30	30
Development	开发	1760	2265
• Analysis	• 需求分析 (包括学习新技术)	240	320
•Discuss	• 结对讨论	120	150
• Design Spec	• 生成设计文档	30	50
• Design Review	• 设计复审	20	30
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	10	15
• Design	• 具体设计	50	90
• Coding	• 具体编码	1200	1500
• Code Review	• 代码复审	30	50
• Test	• 功能测试	60	60
Reporting	报告	145	165
• Write Blog	• 撰写博客	100	120
• Size Measurement	• 计算工作量	15	20
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	30	25
	合计	1935	2460

成果展示

云服务器访问地址

云服务器访问地址

奖牌地图

每日赛程

奖牌总榜

冬奥知识

讨论过程

我们首先对实现工具做出了分析，原本我们打算使用jsp实现web网页编程，后来讨论决定用html编程。在编写了一部分代码之后，我们开始尝试建立共同的gitee仓库并进行提交合并。

设计实现过程

设计构思

搭建网站可以有很多种框架，刚开始我们在网上查找了一些资料，计划用jsp来制作，但是我们两人都没学过jsp，所以就放弃了，使用前端html+css+js进行开发。因为之前已经制作了网站的原型，所以网站的大体构造已经出来了，但是要完完全全实现原型的效果有一定的困难，因为在原型制作的过程中可以直接使用软件自带的小物件进行装饰，在实际编写css代码时难度较大，所以就选择对页面进行了简化。
网站包括四大部分：奖牌榜、每日赛程、奖牌地图和奥运知识，奖牌榜将中国的获奖情况放在了最上面，下面使用table控件以表格的形式展示。每日赛程中有一副小日历，点击相应的日期可以跳转查看当天的赛程。奥运知识是我们从网上整合了一些这届冬奥会以及历届冬奥会的相关知识，以图文结合的形式呈现给用户。奖牌地图的实现较为困难，我们在网络上找到了相关的代码，应用的是bootstrap框架和jQuery技术，使用hover属性时鼠标移动到相应国家上时可以显示出相应国家的获奖情况，源代码将中国与台湾省分隔，我们进行了修改将他们合并。

网站功能框架

代码说明

页头代码

<div id="header">
            <nav style="text-align: center;">
                <button class="button1"><a href="jiangpai.html">奖牌榜</a></button>
                <button class="button1"><a href="saicheng.html">赛程赛事</a></button>
                <button class="button1"><a href="map.html">赛事地图</a></a></button>
                <button class="button1"><a href="zhishi.html">冬奥知识</a></button>
            </nav>
            </div>

奖牌榜表格样式

        <style>
            .table1 table {
                width: 500px;;
                margin:15px 0;
                border:0;
            }
            .table1 th {
                font-weight:bold;
                background-color:#e7f6fe;
                color:#020d13
            }
            .table1,.table1 th,.table1 td {
                font-size:0.95em;
                text-align:center;
                padding:4px;
                border-collapse:collapse;
            }
            .table1 th,.table1 td {
                border: 1px solid #ffffff;
                border-width:1px
            }
            .table1 th {
                border: 1px solid #e7f6fe;
                border-width:1px 0 1px 0
            }
            .table1 td {
                border: 1px solid #eeeeee;
                border-width:1px 0 1px 0
            }
            .table1 tr {
                border: 1px solid #ffffff;
            }
            .table1 tr:nth-child(odd){
                background-color:#f7f7f7;
            }
            .table1 tr:nth-child(even){
                background-color:#ffffff;
            }

            .table2 table {
                width: 500px;;
                margin:15px 0;
                border:0;
            }
            .table2 th {
                font-weight:bold;
                background-color:#e7f6fe;
                color:#ee0808
            }
            
            </style>

每日赛程表

<div id="date">
        <b>日期</b>
            <div>
                <button type="button"><a href="02.html">02</a></button>
                <button type="button"><a href="03.html">03</a></button>
                <button type="button"><a href="04.html">04</a></button>
                <button type="button"><a href="05.html">05</a></button>
                <button type="button"><a href="06.html">06</a></button>
                <button type="button"><a href="07.html">07</a></button>
                <button type="button"><a href="08.html">08</a></button>
                <br> 
                <button type="button"><a href="09.html">09</a></button>
                <button type="button"><a href="10.html">10</a></button>
                <button type="button"><a href="11.html">11</a></button>
                <button type="button"><a href="12.html">12</a></button>
                <button type="button"><a href="13.html">13</a></button>
                <button type="button"><a href="14.html">14</a></button>
                <button type="button"><a href="15.html">15</a></button>
                <br> 
                <button type="button"><a href="16.html">16</a></button>
                <button type="button"><a href="17.html">17</a></button>
                <button type="button"><a href="18.html">18</a></button>
                <button type="button"><a href="19.html">19</a></button>
                <button type="button"><a href="20.html">20</a></button>
            </div>
        </div>

奖牌地图部分代码

心路历程和收获

我们两人本身的编码能力较差，所以这次制作的网站也较为简陋，但是也是一次很宝贵的实践体验，锻炼了自己与他人配合交流的能力，也能更加熟练的去自己查找相关的资料。上学期学习的web程序设计已经遗忘了一些内容，但是经过这次实践对于web程序开发的技术有了更深入的了解，学着不断完善自己的作品。

有待提升的方面

这次程序的代码结果较为混乱，没有将html代码和css、js进行分离。
实现的功能较为简陋

结对感受

221900213郭佳豪
这次结对还是比较顺利的，一开始我们的分工就很明确，在跟林昊扬同学商讨了作业目标之后，我们就开始着手做了。虽然期间遇到了一些困难，比如代码运行出现的问题，但通过两个人的谈论之后问题也是迎刃而解。
221900111林昊扬
这次结对我们在开始进行工作前进行了充分的讨论，有了明确的目标，所以在编写代码的过程中还是比较顺畅的，当然也会有遇到bug的时候，但是经过两个人的讨论和在网上查找资料，问题基本都能得到解决。