软件工程实践结对作业二

最新推荐文章于 2024-11-16 21:24:49 发布

Veteran_C

最新推荐文章于 2024-11-16 21:24:49 发布

阅读量1.5k

点赞数

分类专栏：随笔文章标签： php javascript

本文链接：https://blog.csdn.net/qq_45754630/article/details/123442013

版权

这个作业属于哪个课程	<2022年福大-软件工程、实践-W班>
这个作业要求在哪里	<软件工程实践结对作业二>
结对学号	<221900112、221900104>
这个作业的目标	<实现冬奥栏目原型中的功能、项目部署、结对合作>
其他参考文献	见文章末尾

1、Gitcode仓库地址

我们的Gitcode仓库地址

2、代码规范地址

我们的代码规范地址

3、项目成果地址

我们的项目结果地址

4、PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	30
• Estimate	• 估计这个任务需要多少时间	30	30
Development	开发	900	993
• Analysis	• 需求分析	10	5
• Technology selection	• 技术选择（包括学习）	50	65
• Code specification	• 代码规范制定	20	30
• Front End	前端
• Head	• 网页首部	15	13
• Home Page	• 首页	90	105
• Medal List	• 奖牌榜	60	45
• Schedule	• 赛程榜	80	95
• Map	• 地图	150	160
• Expand	• 拓展项目	150	160
• Back End	后端
• Database	• 数据库设计与导入	30	25
• Medal Data	• 奖牌相关数据	35	40
• Schedule Data	• 赛程相关数据	40	40
• Other Data	• 拓展相关数据	20	30
• Other	其他
• Revise	• 整体完善和测试	30	30
• Deployment	• 项目部署	120	150
Reporting	报告	90	105
• Writing Repor	• 撰写报告	60	75
• Size Measurement	• 计算工作量	10	10
• Postmortem	• 事后总结	20	20
	合计	1020	1128

5、项目成品展示

5.1 主页展示（关于冬奥）

部分展示因审核而做出模糊处理
主页（关于冬奥）由三个部分组成，第一个部分是今日要闻，第二部分是对冬奥的主要项目的介绍，最后一部分即冬奥锦集。其中，当用户点击今日要闻的链接时，即可跳转到相应的新闻页面。
今日要闻部分：
在这里插入图片描述
项目展示部分：

冬奥锦集展示部分：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yi2bLJmx-1648275318961)(https://img-community.csdnimg.cn/images/cd3eeef9d7c74f45aa09976987517bc5.JPG “#left”)]

新闻点击演示部分：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7yaNh84l-1648275318962)(https://img-community.csdnimg.cn/images/061f5990ae044ea28ec4f7ebf918b874.gif “#left”)]

5.2 奖牌榜展示

显示各个国家的金牌、银牌、铜牌、总奖牌数以及对应排名，并且高亮显示中国队的奖牌行。
在这里插入图片描述

5.3 赛程榜展示

分为两部分：快捷时间查询方式，通过点击上方对应的日期即可查询对应日期的赛程；或者通过三个选择框：日期、比赛项目、比赛场馆，来查询对应的比赛；
快捷时间查询方式展示：
在这里插入图片描述
选择框查询方式展示：

5.4 地图展示

左下为奖牌榜展示图，底下为图例，不同的国家根据获得的奖牌数不同而有不同层次的颜色。当移动到对应的国家奖牌榜奖牌榜将做出相应的变化，同时该国家颜色会高亮改变。

在这里插入图片描述

5.5 小项目展示

此次沿用原型设计的三个小项目，分别为男子滑降（02-07）、冰壶（02-20）和冰球（02-04）。其中，男子滑降展示选手比赛排名、出场顺序、背心号码、国家、成绩等信息；冰壶展示对局总比分榜，出场名单，小局得分等信息；冰球展示对局总比分榜，小节的比分、出场名单、赛况具体数据等信息；
男子滑降展示：
在这里插入图片描述

冰壶展示：
在这里插入图片描述

冰球展示：
在这里插入图片描述

6、设计实现过程

6.1 如何设计

经过我们的分析并确定了方法 见8.2讨论过程 跳转，由于上一步已经确定了要编写前、后端，接着我们确定如何实现前后端的交互，首先是要把所需要的数据（来源自个人第一次作业的 .json数据文件），例如国家奖牌榜、赛程数据放入 Mysql数据库之中，通过后端 PHP代码的编写，进行数据库的（增删）查（改）功能，接着传给前端的 javaScript/jQuery进行处理，（由于一个较熟悉jQuery，一个较熟悉javaScript，就采用两种技术来编写从后端传来的数据），通过 JSON数组/html元素标签作为传递媒介。然后给各个页面编写对应的三件套 HTML+CSS+JS

进一步细分要完成的功能，主要是以下这几部分，同时做出结构图：

固定头部部分、导航栏、冰壶、冰球、主页：通过网页和样式的编写完成，多用表格展示
奖牌榜：前端通过请求后端得到的数据，解析传来的JSON文件并通过表格进行展示
奖牌地图：前端通过请求后端得到的数据，解析JSON文件设置对应的属性以及交互事件
赛程榜：前端通过请求后端得到的数据，通过设置传来的HTML标签进行交互
男子滑降：前端通过请求后端得到的数据，解析JSON文件并通过表格进行展示

6.2 结构图

在这里插入图片描述

6.3 遇到的问题/以及解决方案

问题1：犹豫是直接使用读JSON文件还是从数据库读出再打包，最后衡量规范性以及数据安全性、可操作性的因素，还是选择用数据库作为数据存放，此时就出现问题，JSON如何又快又方便的进入数据库，由于MySQL仅支持sql语句，如果一个一个插入效率非常低，后考虑通过编写php代码，先读取并解析JSON文件，在将其导入。由于一些知识的遗忘，在这方面其实花费了我们很多的时间，后面发现Navicat可以直接导入多种形式的文件，追悔莫及，但复习了一遍php以及数据库知识还是值得的。
问题2：开发过程中，在localhost上调试的时候，经常修改了文件但不起作用，一度怀疑是自身的逻辑问题，疯狂的找自己代码的BUG，迟迟不能解决，最后通过F12审阅了一下，发现资源内容中并没有修改，但查看本地已经修改，又怀疑是自己的环境出现了奇怪的问题，几经重装也得不到好转，后经过同学提点，才发现是浏览器缓存导致页面内容没有及时更新！

7、代码说明

7.1 前端重要代码

地图的编写，利用表格的形式对地图的小奖牌榜展示，先编写出表格的表头，表数据通过JavaScript编写，接着就是svg图形，在每个地图地形path标签中有几个重要属性，countryId用于识别是哪个国家，fill用于对国家的颜色进行填充；图例说明也直接通过circle和text的组合使用嵌入svg标签中。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-Type" content="text/html; charset=utf-8" />
        <title>奖牌地图</title>
        <link rel="stylesheet" type="text/css" href="../css/head.css" />
        <link rel="stylesheet" type="text/css" href="../css/map.css" />
        <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="../js/map.js"></script>
    </head>
    <body>
        <div class="content">   
            <table id="medals">
                <tr>
                    <th id="countryName" colspan="4">中国</th>
                    <th></th>
                    <th></th>
                </tr>
                <tr class="t1">
                    <td>奖牌榜第</td>
                    <td id="rank">3</td>
                    <td>名</td>
                </tr>
                <tr class="t2">
                    <td>金</td>
                    <td id="gold">9</td>
                    <td><img src="../image/gold.png" width="35px" height="35px"/></td>
                </tr>
                <tr class="t3">
                    <td>银</td>
                    <td id="silver">4</td>
                    <td><img src="../image/silver.png" width="35px" height="35px" /></td>
                </tr>
                <tr class="t4">
                    <td>铜</td>
                    <td id="bronze">2</td>
                    <td><img src="../image/bronze.png" width="35px" height="35px" /></td>
                </tr>    
                <tr class="t5">