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

222200124郑为强 2024-09-30 23:41:33
这个作业属于哪个课程FZU_university
这个作业要求在哪里结对第二次作业——编程实现
这个作业的目标采用web技术来实现第一次结队作业原型中的功能及页面,编码实现原型设计的内容
其他参考文献《构建之法》

目录

  • 一、git仓库链接和代码规范链接
  • 二、PSP表格
  • 三、项目链接
  • 四、成品展示
  • 4.1 奖牌榜展示
  • 4.2每日赛程展示
  • 4.3 对阵图
  • 五、结队讨论过程
  • 六、设计实现过程
  • 6.1 功能结构图
  • 6.2 设计过程
  • 七、关键代码展示
  • 八、心路历程与收获
  • 九、队友评价

一、git仓库链接和代码规范链接

[git仓库连接]https://devcloud.cn-north-4.huaweicloud.com/codehub/project/df2ee7d6edd6464e8e6f2082f57c860d/codehub/2711047/home?ref=master&filePath=css
[代码规范链接]https://devcloud.cn-north-4.huaweicloud.com/codehub/project/df2ee7d6edd6464e8e6f2082f57c860d/codehub/2711047/home?ref=master&filePath=codestyle.md&isFile=true

二、PSP表格

PSPPersonal Software Process Stages预估耗时(分钟)实际耗时(分钟)
Planning计划2020
•Estimate•估计这个任务需要多少时间1515
Development开发800850
•Analysis•需求分析 (包括学习新技术)6060
•Design Spec•生成设计文档55
•Design Review•设计复审55
•Coding Standard•代码规范 (为目前的开发制定合适的规范)1010
•Design•具体设计9090
•Coding•具体编码600650
•Code Review•代码复审3030
•Test•测试(自我测试,修改代码,提交修改)120120
Reporting报告3030
•Test Repor•测试报告1010
•Size Measurement•计算工作量55
•Postmortem & Process Improvement Plan•事后总结, 并提出过程改进计划4040
合计863853

三、项目链接

成品链接

四、成品展示

4.1 奖牌榜展示

总奖牌榜页面显示各个国家的奖牌情况及总数,先按金牌数量,再按银牌数量,最后再按铜牌数量进行排序。

img

4.2每日赛程展示

每日赛程页面展示每天的赛况,用户可以通过选择日期查看特定日期的情况。

img

详细赛况: 在每日赛程点击赛程跳转到详细赛况,看到对应的情况

img

4.3 对阵图

查看该比赛项目的对阵晋级情况,鼠标悬浮于某一比赛上方时,会显示高亮

img

五、结队讨论过程

本次结对作业我们主要通过线上线下一起沟通的方式,确定了小组分工,同时在不断的交流中相互帮助不断提升

img

img

六、设计实现过程

6.1 功能结构图

img

6.2 设计过程

最开始的时候我们希望完成前后端的设计搭建出一个完整的网站。经过这段时间的学习过程,我们解决了上一次个人实践时没有克服的爬虫问题。但是,随着项目进度的深入,我们在前后端结合的时候出现了意外,至今都没有解决。碍于时间的因素,我们最终决定了用纯粹前端的技术来完成这次作业

七、关键代码展示

爬虫的代码展示:
package Pachong;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.JavascriptExecutor;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

public class Dtpq {
public static void main(String[] args) {
// 设置ChromeDriver的路径
System.setProperty("webdriver.chrome.driver", "D:\儿歌舞蹈\chromedriver-win64\chromedriver-win64\chromedriver.exe");
// 初始化Chrome浏览器驱动
WebDriver driver = new ChromeDriver(); // 非无头模式

    try 
    {
        // 打开网页
        driver.get("https://olympics.com/zh/paris-2024/medals");
        // 等待页面加载完成和动态内容加载
        JavascriptExecutor js = (JavascriptExecutor) driver;
        Set<String> processedCountries = new HashSet<>(); // 存储已处理过的国家名称

        while (true) {
            // 获取当前页面上的所有元素
            List<WebElement> rows = driver.findElements(By.cssSelector("div[data-testid='noc-row']"));
            String lastProcessedCountry = "";

            for (WebElement row : rows) {
                String country = row.findElement(By.cssSelector("span.euzfwma5")).getText();
                // 如果该国家已经处理过,则跳过
                if (processedCountries.contains(country)) {
                    continue;
                }
                processedCountries.add(country); // 标记该国家为已处理
                lastProcessedCountry = country;

                // 获取数据
                List<WebElement> medalCounts = row.findElements(By.cssSelector("span.e1oix8v91"));
                // 请确保这里的索引是正确的
                int gold = !medalCounts.get(1).getText().isEmpty() ? Integer.parseInt(medalCounts.get(1).getText()) : 0;
                int silver = !medalCounts.get(2).getText().isEmpty() ? Integer.parseInt(medalCounts.get(2).getText()) : 0;
                int bronze = !medalCounts.get(3).getText().isEmpty() ? Integer.parseInt(medalCounts.get(3).getText()) : 0;
                int total = !medalCounts.get(4).getText().isEmpty() ? Integer.parseInt(medalCounts.get(4).getText()) : 0;

                System.out.println(country + " - " + gold + "金 " + silver + "银 " + bronze + "铜 " + total + "总");
            }

            // 检查是否有新的元素被处理
            if (lastProcessedCountry.equals("")) {
                // 如果没有新的元素,可能已经到达页面底部或者存在其他问题
                break;
            }

            // 滚动页面
            js.executeScript("window.scrollBy(0, 500);"); // 每次向下滚动500像素

            // 等待一段时间,让页面有机会加载新数据
            Thread.sleep(1000);

            // 检查是否到达页面底部
            boolean isAtBottom = (Boolean) js.executeScript(
                "return (window.innerHeight + window.scrollY) >= document.body.offsetHeight;"
            );

            // 如果到达底部,则停止滚动
            if (isAtBottom) {
                break;
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        // 关闭浏览器
        if (driver != null) {
            driver.quit();
        }
    }
}

}

部分HTML代码

img

八、心路历程与收获

222200123的心路历程和收获:我得到了很好的机会学习了很多前端知识,例如HTML、CSS和JavaScript。原本我对HTML的理解只停留在表面,这次的经历让我能够更加熟练地使用HTML语句。同时,我也学会了如何使用CSS进行页面布局和美化,以及如何用JavaScript实现动态效果。结对编程不仅锻炼了我的团队协作能力,还大大提高了我解决问题的能力。通过与队友的交流,我学会了更多高效的编程技巧和最佳实践。

222200124的心路历程和收获:通过这个项目,我学会了如何高效地进行团队协作和沟通,这对于未来在企业中参与大型项目非常有帮助。同时,项目管理的经验让我更加成熟,能够在复杂环境中保持冷静,合理分配任务,确保项目顺利进行。部署项目到服务器的过程也让我了解了实际生产环境中的许多细节,这对我的职业发展非常有益。在实践的过程中对前后端的知识完整的进行了一次运用,理解了很多以前死记硬背的地方。

九、队友评价

222200123:我的队友给予了我很大的帮助。他不仅在技术上提供了很多支持,还让我深刻意识到两个人如果能够很好地配合,效率会比一个人单独工作高得多。在项目中,我的队友展现出了出色的团队合作精神和解决技术问题的能力,为我们项目的顺利进行做出了重要贡献。他的专业能力和沟通技巧使我们的团队能够更有效地协作,共同推动项目的成功。

222200124:我的队友表现得非常出色。他在项目中不仅展示了强大的技术能力,还在团队协作方面起到了关键作用。我们经常一起讨论问题,寻找最佳解决方案,这种高效的沟通使我们的工作效率大大提高。我的队友在处理复杂的技术难题时总是能够迅速找到解决方案,确保了项目的顺利推进。他的专业素养和团队精神极大地提升了我们团队的整体表现,使我们在短时间内完成了高质量的项目。

...全文
196 1 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
助教袁金凡 助教 2024-10-13
  • 打赏
  • 举报
回复

你的成品链接不是超链接,不能跳转到你的项目

239

社区成员

发帖
与我相关
我的任务
社区管理员
  • FZU_SE_teacherW
  • 助教赖晋松
  • D's Honey
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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