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

222000228黄雨洁 学生 2023-03-24 18:21:48
这个作业属于哪个课程2023年福大-软件工程实践-W班
这个作业要求在哪里结对第二次作业--编程实现
结对学号222000132，222000228
这个作业的目标1.实现原型中的部分功能；2.撰写博客
其他参考文献《构建之法》

目录

  • 一、Gitcode仓库地址和代码规范链接
  • 二、PSP表格
  • 三、项目访问链接
  • 四、成品展示
  • 4.1进入首页
  • 4.2导航栏
  • 4.3选手排名
  • 4.4每日赛程
  • 4.5详细赛况
  • 4.6晋级图
  • 4.7了解更多
  • 五、结对过程讨论
  • 六、设计实现过程
  • 6.1 整体框架
  • 6.2 导航栏设计
  • 6.3 选手排名
  • 6.4 每日赛况
  • 6.5 详细赛况
  • 6.6 晋级图
  • 6.7 了解更多
  • 6.8 进入首页前
  • 七、代码说明
  • 八、心路历程与收获、评价
  • 8.1心路历程与收获
  • 8.2对结对队友的评价

一、Gitcode仓库地址和代码规范链接

222000132_222000228
代码规范

二、PSP表格

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划2025
• Estimate• 估计这个任务需要多少时间2025
Development开发10201530
• Analysis• 需求分析 (包括学习新技术）60120
• Coding Standard• 代码规范 (为目前的开发制定合适的规范)2030
• Design• 具体设计4060
• Coding• 具体编码8001200
• Code Review• 代码复审4040
• Test• 测试（自我测试，修改代码，提交修改）6080
Reporting报告175275
• Deploy• 项目部署100180
• Test Repor• 测试报告3030
• Size Measurement• 计算工作量1515
• Postmortem & Process Improvement Plan• 事后总结3050
合计12151830

三、项目访问链接

云服务器地址
（2023.4.22过期）

四、成品展示

4.1进入首页

进入首页前的页面，点击即可进入首页浏览

请添加图片描述

4.2导航栏

可以选择本网站提供的四个基本栏目，包括选手排名、每日赛况、晋级图以及了解更多。

请添加图片描述

4.3选手排名

展示了Singles Aces Leaders的排名，包括Name、Rank、Matches和Aces.

请添加图片描述

4.4每日赛程

  • 展示每一天的赛事，显示比赛类型(女单男单等)、比赛场地、参与选手、比赛时间和比分，且获胜者姓名加粗显示
  • 支持通过切换日期查看不同比赛日的赛程，包括从Q1到Day14的赛程

请添加图片描述

4.5详细赛况

展示比赛的详细成绩，包含本场比赛参赛选手、每个小场比分和获胜选手、最终比赛的获胜选手等比赛数据，包括set1和set2，可按键返回当日赛程

请添加图片描述

4.6晋级图

  • 可以通过晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分，并高亮显示晋级选手
  • 鼠标移动到某一场比赛时有高亮或显示边框提示
  • 可以按返回键直接回到首页

请添加图片描述

4.7了解更多

共有四个版块，分别为发展历史、赛地、冠军奖杯和中国选手。其中发展历史的六张图片支持轮播图的形式展出，用户可以自行选择观看的图片或等待其自己播放。

请添加图片描述


请添加图片描述

五、结对过程讨论

请添加图片描述

请添加图片描述

请添加图片描述

请添加图片描述

请添加图片描述

六、设计实现过程

6.1 整体框架

在结对讨论之后，我们决定使用php。因为php能够直接读取JSON文件，还支持嵌入HTML，对于前后端都非常友善。

6.2 导航栏设计

根据原型设计的样式，采用侧边导航栏，用div块先设计好大致页面布局，根据每块的内容进行排版，导航栏里的选项使用列表的方式进行实现，同时写CSS文件进行界面美化，实现鼠标悬浮到选项上方及选项选中的效果。

6.3 选手排名

在观察澳网选手排名的显示结构后，我们直接将statistics-name：Aces数组中的数据分为两块，分别是男单和女单来进行显示，对比转换数据后读取其中的full_name(Name)、rank(Rank)、matches(Matches)、value(Aces)。我们在php数组中添加了表格显示，以CSS样式优化后呈现给用户。

6.4 每日赛况

一是日期选择，采用按钮组进行实现，因为做不出来原型设计中左右移动箭头显示被遮住的按钮的效果，所以将按钮全部罗列，点击后日期按钮跳转至读取当日赛况的php文件中，并将日期数据作为id传到php文件中，php根据get的数据进行查询，最后显示赛况界面。
二是将每一个赛况以表格形式呈现，其中获胜方名字字体加粗，并且该单元格背景设置颜色，接下来设置鼠标悬浮高亮效果，以及点击表格进入到详细赛况。

6.5 详细赛况

主要是场次选择后下方赛事数据的改变，场次选择采用下拉列表实现，赛事数据通过php读取json文件后以表格形式呈现，下拉列表选中选项后，通过触发事件判断选中内容，设置div块的display的显示隐藏，以此达到切换效果。因为详细赛况数据较多，只使用Day1第一个比赛的详细赛况数据，其它比赛显示与之相同。

6.6 晋级图

这个页面格式排版比较复杂，数据就直接写在代码里，只有Men’s Singles的晋级图页面，上方下拉列表选择其它选项的时候也是显示相同页面，然后对每个比赛的div块设置鼠标悬浮高亮效果。

6.7 了解更多

在了解更多中，我们提供了四个模块供用户进行观看。分别是发展历史，赛地，冠军奖杯和中国选手。其中赛地，冠军奖杯以及中国选手都图文并茂地向用户讲述了相关方面的知识，而发展历史则采用了轮播图的展示形式，共有六张图片自动播放，并可以让用户自己选择观看某一张图片。

6.8 进入首页前

这是新增的一个页面，制作进入首页前的封面，提示用户进入的是关于澳大利亚网球公开赛的网站。

功能结构图：

请添加图片描述

七、代码说明

1、php用于解析选手排名JSON文件的代码，是本次任务中读取数据的代表代码。
通过file_get_contents(文件名)获取数据文件，利用json_decode()将JSON文件转化为php数组，再按照结构逐一剖析所需要的数据。用字符串$content接收输出的数据表格，配合CSS后直接用于页面的数据显示。

请添加图片描述


2、主要界面框架的html代码和css代码
界面布局分为4块，顶部图片展示，中间的左侧部分做侧边导航栏，右侧作为数据内容展示模块，底部是版权信息。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>首页</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <img src="pic/navbar.png" alt="图片失效" />
        </div>
        <div class="nav">
            <nav>
                <ul class="menus">
                    <li class="li">
                        <a href="showIndex.php" class="on">
                        <i class="fa fa-star-half-full" aria-hidden="true"></i>
                        选手排名</a>
                    </li>
                    <li class="li">
                        <a href="dailyGame.html">
                        <i class="fa fa-table" aria-hidden="true"></i>
                        每日赛程</a>
                    </li>
                    <li class="li">
                        <a href="draws.html">
                        <i class="fa fa-magnet" aria-hidden="true"></i>
                        晋级图</a>
                    </li>
                    <li class="li">
                        <a href="knowmore.php">
                        <i class="fa fa-tags" aria-hidden="true"></i>
                        了解更多</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="content">
        <!-- 详细内容部分省略 -->
        </div>
        <div class="footer">
            <p>copyright@2023 Design by <br />222000132 and 222000228</p>
        </div>

导航栏中有4个选项，以列表形式排版，设置鼠标悬浮到列表项时的效果和选中列表项的效果：使字体放大。

* {
    /* 初始化 */
    margin: 0;
    padding: 0;
}

body {
    /* 100%窗口高度 */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #d3dafa; */
    background-color: #ffffff;
}

ul {
    list-style: none;
}

.container {
    position: relative;
    width: 100%;
    min-height: 100%;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
}

.drawsHeader {
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
}

img {
    left: 0;
    top: 0;
    width: 100%;
    object-fit: cover;
}

nav {
    position: fixed;
    top: 100px;
    left: 0;
    width: 200px;
    height: 100%;
    /* background-color: #8a98c9; */
    float: left;
    background-color: #0091d2;
}

.content {
    position: absolute;
    top: 100px;
    left: 200px;
    background-color: #ffffff;
    width: 80%;
}
.drawsContent {
    position: absolute;
    margin: 0 auto;
    top: 150px;
    left: 0px;
    width: 100%;
    background-color: #fff;
}

.footer {
    height: 50px;
    position: fixed;
    bottom: 0px;
    left: 10px;
    font-size: small;
    color: #eae9e8;
}
.menus {
    margin: 60px 0;
    color: #fff;

}

.li {
    letter-spacing: 2px;
    font-size: 17px;
    font-weight: 600;
    padding: 16px 0;
    transition: 0.3s;
}

.menus li:hover {
    /* background-color: #beb5df; */
    background-color: #0091d2;
    font-size: x-large;
    cursor: pointer;
}

a {
    color: #ffffff;
    text-decoration: none;
}

.on {
    font-size: x-large;
}

.li .fa {
    font-size: 20px;
    width: 50px;
    height: 20px;
    text-align: center;
    margin-left: 5px;
}

.li ul {
    width: 0;
    height: 550px;
    padding: 50px 0;
    /* 绝对定位 */
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    /* background-color: #59699b; */
    background-color: #0091d2;
    transition: 0.3s;
}

.li ul li {
    padding: 16px 24px;
    white-space: nowrap;
    transition: 0.3s;
}

.li:hover ul {
    width: 250px;
}

.li ul li:hover {
    /* background-color: #828eb9; */
    background-color: #0091d2;

}

3、选手排名表格的css代码
通过php获取数据后，以表格的形式展示数据，表格的奇数行和偶数行采用不同颜色显示。

table {
    border-collapse: separate;
    border-spacing: 0px 10px;
    margin: 0 auto;
    text-align: center;
}

table td,
table th {
    border: 5px #cad9ea;
    color: #515151;
    height: 30px;
    width: 110px;
}

table thead th {
    background-color: #CCE8EB;
    width: 100px;
}

table tr:nth-child(odd) {
    background: #fff;
}

table tr:nth-child(even) {
    background: #c7eaf1;
}

4、详细赛况的下拉列表选择场次切换界面的JavaScript代码
通过设置div的diplay属性完成界面的显示及隐藏，以此达到切换效果。

<span class="dropdown2">
     <select id="setChoice" onchange="setChange()">
         <option value="set2">set2</option>
         <option value="set1">set1</option>
     </select>
</span>
<script>
            function setChange() {
                var myselect = document.getElementById('setChoice');
                var index = myselect.selectedIndex;
                var set = myselect.options[index].value; //选中的值
                var divs = document.querySelector('.changebox').querySelectorAll('div');
                if (set == "set2") {
                    divs[0].style.display = 'block';
                    divs[1].style.display = 'none';
                }
                if (set == "set1") {
                    divs[1].style.display = 'block';
                    divs[0].style.display = 'none';
                }
            }
        </script>

5、了解更多的轮播图播放的JavaScript代码

<script>
                // 1. 获取全部图片和按钮
                const imgs = document.querySelectorAll('.slider .imgs img');
                const btns = document.querySelectorAll('.slider .btns span');
                // 2. 设置激活状态
                function setActive() {
                    imgs.forEach(img => img.classList.remove('active'));
                    btns.forEach(btn => btn.classList.remove('active'));
                    event.target.classList.add('active');
                    imgs.forEach(img => {
                        if (img.dataset.index === event.target.dataset.index) {
                            img.classList.add('active')
                        }
                    })
                }
                // 3.定义并调用自动播放函数
                timer = setInterval((arr) => {
                    let i = arr.shift();
                    arr.push(i);
                    btns[i].dispatchEvent(new Event('click'))
                }
                    , 2000, Object.keys(btns));
                //4. 鼠标悬停时自动停止播放
                document.querySelector('.slider .imgs').onmouseover = () => clearInterval(timer);
                //5. 实现鼠标离开时又自动播放
                document.querySelector('.slider .imgs').onmouseout = function () {
                    timer = setInterval((arr) => {
                        let i = arr.shift();
                        arr.push(i);
                        btns[i].dispatchEvent(new Event('click'))
                    }
                        , 2000, Object.keys(btns));
                };
            </script>

八、心路历程与收获、评价

8.1心路历程与收获

222000228：

一开始在确定好使用哪个web框架后，本以为扒完数据之后就万事大吉了，直到真上手后才发现前端的排版和布局更为棘手，这也是我们之前CSS不够熟练酿下的祸端。之前一直觉得前端比后端容易，现在看来都挺难。不过在经历了本次项目后，我深刻认识到了相互配合的重要性，只有各司其职才能做好一个合格的项目。

222000132：

当看完作业要求时就预感到这次作业不好做，果然预感是正确的，光一个首页选手排名的布局排版就折腾了很久，原型设计时直接拖组件有多快乐，编码就有多难过。界面全靠自己一点点组合起来，确实web知识遗忘了太多，捡得很辛苦。虽然这个过程很艰辛，但是我对最终的效果还是比较有成就感的。最后也有挺多收获，狠狠复习了一把web的知识，学会了怎么用git分支合作，如何部署云服务器等，收获不易，还是要坚持努力。

在这里插入图片描述

8.2对结对队友的评价

222000228 to 222000132：

我的结对队友是一个非常刻苦用心的人，这次她负责部署云服务器，钻研了很久，而且为本次项目的页面布局做出了巨大的贡献。她温和友善，容易沟通，做事积极，可谓是非常优秀的队友。

请添加图片描述

222000132 to 222000228：

我觉得她挺厉害的，学习能力特别强。当我还在研究这个界面布局时，她已经用将下一个界面需要的数据处理好了，效率极快，善于交流，积极配合，完成的任务质量也很不错。

...全文
273 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
2023年福大-软件工程实践-W班 2023-03-25
  • 打赏
  • 举报
 回复

1.晋级图的连线未实现？2.功能较完整，但是界面还可以再优化美观一些

2020级计算机系软件工程第二次结对编程作业.zip
2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件...
PairProject:W班软件工程实践结对第二次作业仓库
结对第二次作业-顶会热词统计的实现为了不遗漏作业内容，这里有一个清单检查表方便同学们快速检阅。fork仓库，和伙伴商讨如何通过github协作/代码规范等编程实现功能一，操作爬取的论文列表功能二，爬取结果分析展示...
第2次作业 结对作业1
"软件开发-带用户界面的四则混合运算软件设计" 本文将详细介绍软件开发中的带用户界面的四则混合运算软件设计，包括软件的功能需求、...因此，结对作业需要具备软件开发和设计的知识，能够独立完成软件的设计和实现。
基于Python语言的P4程序结对作业设计源码
项目的具体任务被划分为不同的结对任务，如第一次结对任务、第二次结对任务等等，表明项目采用分阶段的方式进行，每个阶段都有明确的实践目标和学习重点。这种分阶段、结对的作业设计，不仅有助于学生或开发者系统地...
安曼-201d17
一些实验作业将是结对编程作业。 有关完成和提交作业的说明，请参见相应子目录的README文件。 作业是使用专业级git-flow提交的。 如果您还没有这样做，是时候熟悉git核心命令了。 不用担心，我们会根据需要为您...
2023年福大-软件工程实践-W班

688

社区成员

800

社区内容

发帖
与我相关
我的任务
社区描述
2023年福州大学软件工程实践课程W班的教学社区
软件工程团队开发软件构建 高校 福建省·福州市
社区管理员
  • FZU_SE_teacherW
  • 张书旖
  • 郭渊伟
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章