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

222200223徐玮辰 2024-09-30 22:42:30
这个作业属于哪个课程2401_CS_SE_FZU
这个作业要求在哪里结对第二次作业——编程实现
结对学号222200223，222200210
这个作业的目标基于 Web 技术实现原型中的功能
其他参考文献《构建之法》

目录

  • 1.仓库链接和代码规范链接
  • 1.1仓库链接
  • 1.2代码规范链接
  • 2.PSP表格
  • 3.部署地址
  • 4.成品展示
  • 4.1导航栏
  • 4.2主页
  • 4.3奖牌榜
  • 4.4每日赛程
  • 4.5赛程详情
  • 4.6对阵表
  • 4.7了解更多
  • 5.结对讨论过程
  • 6.设计实现过程
  • 6.1功能结构图
  • 6.2分析与设计过程
  • 6.2.1分析阶段
  • 6.2.2设计阶段
  • 6.3实现过程中的问题与解决方式
  • 7.关键代码与思路说明
  • 7.1数据获取关键代码：
  • 7.2赛程关键代码
  • 7.3详细赛况关键代码
  • 8.心路历程和收获
  • 9.评价结对队友

1.仓库链接和代码规范链接

1.1仓库链接

222200210_222200223

1.2代码规范链接

codestyle

2.PSP表格

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划3030
• Estimate• 估计这个任务需要多少时间3030
Development开发13001610
• Analysis• 需求分析（包括学习新技术）300350
• Design Spec• 生成设计文档5050
• Design Review• 设计复审3020
• Coding Standard• 代码规范（为目前的开发制定合适的规范）3060
• Design• 具体设计300400
• Coding• 具体编码400720
• Code Review• 代码复审3060
• Test• 测试（自我测试，修改代码，提交修改）150200
Reporting报告110135
• Test Report• 测试报告4060
• Size Measurement• 计算工作量3015
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划4060
合计14402025

3.部署地址

http://124.71.235.213:12345/

4.成品展示

4.1导航栏

附加功能导航栏：每个页面顶部都有设置导航栏，能够通过导航栏前往首页，奖牌榜页，赛程页面和了解更多页面。

img

4.2主页

主页提供轮播图来让用户观看精彩赛事图片

img

4.3奖牌榜

奖牌榜排名显示

img

4.4每日赛程

展示每一天的赛事，显示比赛类型(足球、七人制橄榄球、手球等)，比赛时间，比赛项目，参赛国家和比赛比分，且获胜国家加粗显示

支持通过切换日期查看不同的赛程

img

4.5赛程详情

支持点击查看详细赛程信息

img

4.6对阵表

比赛晋级图是一种直观的展示比赛进程和结果的工具，它以图表的形式呈现了参赛在各个阶段的表现。

鼠标移动到某一场比赛需要高亮或显示边框提示。

img

4.7了解更多

介绍巴黎奥林匹克运动会的举办背景，通过丰富的图文使平台更具吸引力，引起人们对巴黎奥林匹克运动会的兴趣。

img

5.结对讨论过程

6.设计实现过程

6.1功能结构图

6.2分析与设计过程

6.2.1分析阶段

​ 了解完本次作业要求后，通过分析可知本次作业主要展示2024巴黎奥运会的相关信息，包括奖牌榜、每日赛程和详细赛程，并且数据需要各自进行爬取。因此，我们决定使用后端进行对数据的爬取，运用JSP来处理大量的JSON数据文件，并动态加载不同日期或赛事的详细信息。

6.2.2设计阶段

设计思路：

  • 首页：精彩画面轮播图。
  • 奖牌榜：展示各个国家的奖牌排名。
  • 每日赛程：显示所有日期的对应赛事，可通过选择日期跳转到相应位置。
  • 详细赛况：每日赛程卡片支持点击查看详细赛况，展示比赛的成绩，本场比赛参赛国家等。
  • 对阵表：以图表形式直观呈现各足球队伍的晋级路径和比赛结果。

扩展功能：

  • 导航栏：每个页面顶部都有设置导航栏，能够通过导航栏前往首页，奖牌榜页，赛程页面和了解更多页面。
  • 了解更多： 介绍一些官网的新闻和一些比赛视频。

6.3实现过程中的问题与解决方式

问题一：动态读取其他网页的数据不稳定并且耗时较长

解决方式：直接用后端将数据爬取成json文件，进行本地读取。

7.关键代码与思路说明

7.1数据获取关键代码：

  1. URL构建：根据给定的日期构建API请求URL。
  2. HTTP请求：使用HttpClient发送GET请求到指定URL。
  3. 响应处理：检查HTTP响应状态码，如果不是200，则抛出异常。
  4. 数据解析：如果请求成功，解析JSON响应数据。
public static void main(String[] args) {
    String startDate = "2024-07-24";
    String endDate = "2024-08-11";

    LocalDate start = LocalDate.parse(startDate);
    LocalDate end = LocalDate.parse(endDate);

    List<Map<String, Object>> allResults = new ArrayList<>();

    for (LocalDate date = start; !date.isAfter(end); date = date.plusDays(1)) {
        try {
            List<Map<String, Object>> dailyResults = fetchScheduleDataWithRetries(date.toString());
            allResults.addAll(dailyResults);
        } catch (Exception e) {
            System.err.println("Error fetching data for date " + date + ": " + e.getMessage());
        }
    }

    allResults.sort((map1, map2) -> map1.get("startDate").toString().compareTo(map2.get("startDate").toString()));

    allResults.forEach(System.out::println);
}
public static List<Map<String, Object>> fetchScheduleData(String date) throws Exception {
    String urlString = "https://sph-s-api.olympics.com/summer/schedules/api/CHI/schedule/day/" + date;

    HttpClient client = HttpClient.newHttpClient();
    HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create(urlString))
            .GET()
            .build();

    HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());

    if (response.statusCode() != 200) {
        throw new RuntimeException("Failed to fetch data: HTTP error code " + response.statusCode());
    }

    return parseJsonData(response.body());
}

7.2赛程关键代码

这段代码是一个用于显示奥运会赛程的网页应用程序的片段。它使用了JSP（JavaServer Pages）技术来动态生成网页内容。以下是代码的详细思路：

  • 日期选择器表单：用户可以通过表单选择日期来查看特定日期的奥运会赛程。

    • input 元素用于选择日期，readonly 属性表示用户不能直接输入日期，只能通过选择器选择。
    • 提交按钮用于提交所选日期。

  • 后台逻辑（JSP脚本）：

    • 获取用户选择的日期：使用 request.getParameter("selectedDate") 获取用户选择的日期参数。如果用户没有选择日期，默认设置为 "2024-07-24"。
    • 构建JSON文件路径：根据所选日期构建对应的JSON文件路径，假设每个日期都有一个对应的JSON文件存储该日的赛事信息。
    • 读取JSON文件：使用 JSONParser 解析JSON文件内容，将赛事信息存储在 JSONArray 对象中。如果文件存在且解析成功，赛事信息将被加载到 events 数组中。

  • 前端展示（JSTL标签）：

    • 使用 <c:forEach> 标签迭代 events 数组中的每个事件。
    • 每个事件的信息被展示为一个链接，点击后可以查看该事件的详细信息。
    • 显示赛事时间、项目名称和单位名称。
    • 显示参赛者信息，包括国旗、参赛者名称和分数。分数较高的一方名称以粗体显示。
<div class="content">
    <div class="container">
        <h1>奥运赛程</h1>
        <!-- 日期选择器 -->
        <form method="get">
            <label for="datepicker">选择日期:</label>
            <input type="text" id="datepicker" name="selectedDate" readonly />
            <button type="submit">查看赛程</button>
        </form>
        <%
            String selectedDate = request.getParameter("selectedDate");
            if (selectedDate == null || selectedDate.isEmpty()) {
                selectedDate = "2024-07-24"; // 默认日期
            }
            // 构建JSON文件路径
            String filePath = application.getRealPath("/data/" + selectedDate + ".json");
            File jsonFile = new File(filePath);
            JSONArray events = new JSONArray();
            if (jsonFile.exists()) {
                JSONParser parser = new JSONParser();
                try (BufferedReader reader = new BufferedReader(new InputStreamReader(new FileInputStream(jsonFile), "UTF-8"))) {
                    Object obj = parser.parse(reader);
                    events = (JSONArray) obj;
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }

            pageContext.setAttribute("events", events);
        %>

        <!-- 使用 JSTL 标签来迭代事件 -->
        <c:forEach var="event" items="${events}">
            <a href="detail.jsp?eventId=${event.id}" style="text-decoration:none;color:black;">
                <div class="event">
                    <div class="time">${event.startDate.substring(11,16)}</div>
                    <div class="sport">
                            ${event.disciplineName} - ${event.eventUnitName}
                    </div>

                    <!-- 显示竞争者 -->
                    <c:if test="${not empty event.competitor1Name}">
                        <div class="team">
                            <img src="https://gstatic.olympics.com/s1/t_original/static/noc/oly/3x2/180x120/${event.competitor1Noc}.png" alt="${event.competitor1Noc} flag" class="flag">
                            <span class="team-name" style="${event.mark1 > event.mark2 ? 'font-weight:bold;' : ''}">
                                    ${event.competitor1Name}
                            </span>
                            <div class="score-container">
                                <span class="score">${event.mark1}</span>
                            </div>
                        </div>
                    </c:if>

                    <c:if test="${not empty event.competitor2Name}">
                        <div class="team">
                            <img src="https://gstatic.olympics.com/s1/t_original/static/noc/oly/3x2/180x120/${event.competitor2Noc}.png" alt="${event.competitor2Noc} flag" class="flag">
                            <span class="team-name" style="${event.mark2 > event.mark1 ? 'font-weight:bold;' : ''}">
                                    ${event.competitor2Name}
                            </span>
                            <div class="score-container">
                                <span class="score">${event.mark2}</span>
                            </div>
                        </div>
                    </c:if>
                </div>
            </a>
        </c:forEach>
    </div>
</div>

7.3详细赛况关键代码

这段JavaScript代码用于在详细赛况上动态显示和分页展示比赛信息。它提供了一个交互式界面，让用户能够查看比赛详情并通过分页按钮浏览不同的比赛页。以下是代码的详细介绍：

  • 数据初始化：

    • matches：包含比赛信息的数组，由服务器端通过 gson.toJson(matches) 转换为JSON格式并嵌入到JavaScript中。
    • currentPage 和 itemsPerPage：用于控制分页逻辑，分别表示当前页码和每页显示的比赛数量。

  • 函数定义：

    • **renderMatches()**：

      • 清空现有的比赛容器内容。
      • 根据 currentPage 和 itemsPerPage 计算当前页应显示的比赛范围。
      • 遍历当前页的比赛数据，生成HTML元素并插入到页面中。
      • 每个比赛包括事件名称、参赛者信息（国旗、名字、得分）和比赛时间。
      • 为每个比赛卡片添加点击事件监听器，以实现高亮显示效果。

    • **updatePaginationButtons()**：

      • 更新分页按钮状态，使“上一页”按钮在第一页时禁用，“下一页”按钮在最后一页时禁用。

    • **prevPage() 和 nextPage()**：

      • 分别用于切换到上一页和下一页，并重新渲染比赛信息。

    • **highlightButton(button)**：

      • 用于高亮显示被点击的导航按钮，移除其他按钮的选中状态。

    • **highlightMatch(matchDiv)**：

      • 用于高亮显示被点击的比赛卡片，移除其他卡片的选中状态。

  • 事件绑定：

    • 在页面加载完成后，调用 renderMatches() 函数以初始化比赛展示。
    • 默认高亮显示第一个导航按钮。
<script>
    var matches = <%= gson.toJson(matches) %>;
    var currentPage = 0;
    var itemsPerPage = 3;

    function renderMatches() {
        var container = document.getElementById('matchContainer');
        container.innerHTML = '';

        var start = currentPage * itemsPerPage;
        var end = Math.min(start + itemsPerPage, matches.length);

        for (var i = start; i < end; i++) {
            var match = matches[i];

            var competitorsHtml = match.competitors.map(function(c) {
                var flagUrl = "https://gstatic.olympics.com/s1/t_original/static/noc/oly/3x2/180x120/" + c.noc + ".png";
                return '<div style="display:flex; align-items:center; justify-content:space-between;">' +
                    '<div><img src="' + flagUrl + '" alt="' + c.noc + ' Flag" style="height:20px; margin-right:5px;"> ' +
                    c.name + '</div><div>' + c.mark + '</div></div>';
            }).join('');

            var matchDiv = document.createElement('div');
            matchDiv.className = 'match';

            matchDiv.innerHTML = '<h3>' + match.eventUnitName + ', 比赛 ' + match.order + '</h3>' +
                competitorsHtml +
                '<p style="display:flex; justify-content:space-between;">' +
                '<span>' + new Date(match.startDate).toLocaleString('zh-CN', { month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' }) +
                '</span><span>已结束</span></p>';

            // 添加点击事件监听器以实现高亮效果
            matchDiv.addEventListener('click', function() {
                highlightMatch(this);
            });

            container.appendChild(matchDiv);
        }

        updatePaginationButtons();
    }


    function updatePaginationButtons() {
        var prevButton = document.querySelector('.pagination-buttons button:first-child');
        var nextButton = document.querySelector('.pagination-buttons button:last-child');

        prevButton.disabled = currentPage === 0;
        nextButton.disabled = (currentPage + 1) * itemsPerPage >= matches.length;
    }

    function prevPage() {
        if (currentPage > 0) {
            currentPage--;
            renderMatches();
        }
    }

    function nextPage() {
        if ((currentPage + 1) * itemsPerPage < matches.length) {
            currentPage++;
            renderMatches();
        }
    }

    window.onload = function() {
        renderMatches();

        // 默认选中第一个按钮
        var firstButton = document.querySelector('.nav-buttons .button');
        highlightButton(firstButton);
    };

    function highlightButton(button) {
        // 移除所有按钮的 'selected' 类
        var buttons = document.getElementsByClassName('button');
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].classList.remove('selected');
        }

        // 为点击的按钮添加 'selected' 类
        button.classList.add('selected');
    }

    function highlightMatch(matchDiv) {
        // 移除所有比赛卡片的 'selected' 类
        var matches = document.getElementsByClassName('match');
        for (var i = 0; i < matches.length; i++) {
            matches[i].classList.remove('selected');
        }

        // 为点击的比赛卡片添加 'selected' 类
        matchDiv.classList.add('selected');
    }

</script>

8.心路历程和收获

222200223徐玮辰：

通过这个项目，我对前端需求的理解更加深入，这使我能够为队友提供更清晰、更易用的数据结构和接口。通过与队友的紧密合作，我也更加重视代码质量和可维护性，我们共同审查和优化代码，确保系统的稳定性和性能。最重要的是，我体验到了团队合作的价值和乐趣。与优秀的前端开发人员一起工作，不仅让我在技术上有所提升，也让我学会了如何更好地倾听、沟通和协作。这种团队合作的经验将在我未来的软件开发项目中发挥重要作用。

222200210苏臻炜：

在这次项目中，我最大的收获是团队合作带来的成长和自信。本次由我来进行jsp代码编写，队友进行数据的获取，让我拥有一次很好的jsp网页设计经验。这种经验让我对未来的项目挑战充满信心，我相信团队合作的力量能够带来更多的成功。同时，我也意识到软件工程是一条需要不断学习和改进的道路，每一次的实践都是一次宝贵的经验，让我能够不断反思和提升自己。通过这次实践，我对自己的能力和潜力有了更深的理解，并对未来充满期待。

9.评价结对队友

222200223徐玮辰:

队友富有远见和谋略，并且善于分配任务，可以成为一个可靠的小组或团队的核心人员。并且他的前端技术水平过硬，在项目中，他总是能够高效地调用我提供的数据，实现前端页面的创作。在他的帮助下我对前端技术有了更深刻的理解，受益匪浅。

222200210苏臻炜:

队友在团队合作中展现了出色的精神，始终保持认真负责的态度，时间观念强，所有任务都在规划下有序地完成。在项目中，队友的数据模块设计和实现为整个项目奠定了坚实的基础，他提供的清晰数据结构使我能够轻松理解和实现前端页面的功能。同时，队友对代码性能优化的关注给我留下了深刻的印象，我们共同克服了技术难题，取得了令人满意的成果。

...全文
32 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
AJAX——新手快车道
AJAX——新手快车道 前言 AJAX是什么？ 首先、AJAX是一种很酷的技术，一旦采用了AJAX，就能让你的Web页面， 你的网站，甚至连同你们公司，都变得很酷。在Web2.0的时代里，不使用一点 AJAX技术的网站，就会显得很老土，很落伍。 但是，这样的理解，其实是很肤浅的。仅仅是从一个外行，从一个使用者的 角度出发，来理解AJAX，就像我在本书的第一章AJAX我也行中那样，开发 出很愚蠢，甚至都没有资格被称之为AJAX应用的纯IE、XMLHTTP应用。 AJAX更酷的一点在于，对于传统的Web开发人员来说，AJAX所运用的， 是更加先进的，更加标准化的，更加和谐高效的，完整的Web开发技术体系。 遵循这样的体系开发Web应用，能让你的开发过程变得更加轻松，也能使你们 的开发团队，显得很酷。在Web2.0 的时代里，还在采用过时的技术来开发 Web，会显得很老土，很落伍。 AJAX的相关组成技术，每一个都已经出现了N年以上了，对这些技术的 组合运用，也远远早于AJAX这个名词出现之前。所以，我真正敬佩的，并非提 出 AJAX这个缩写的Jesse James Garrett。而是那些早在N年以前，就已经在探索、 实践的先行者，他们始终在追求的：是更好的用户体验，以及更好的开发体验。 这样的精神，才是最可宝贵的，也是最值得我们学习的。许多年过去以后，当我 们再回头来看当年的这些热门技术，也许早已经变得老土，变得落伍了。在这样 的历程中，哪些人会成长为高手？会成长为大师呢？就是那些永不满足，永远 在追求更好的用户体验，永远在追求更好的开发体验的人！ 新手如何上路 软件开发这个领域，永远都在飞速发展，大家都必须不断的学习新的知识、 技能、框架、IDE、甚至新的语言。传说中的骨灰级高手们，就像传说中的大侠， 任何武器、哪怕是一块木头到了他们手里，也能发挥惊人的威力，人家练了几十 年的看家本领，他们随手使来，也竟然像是打娘胎里就开始练了一样。为什么？ 就算不吹那么玄的，平常我们能够碰到的那些老手，在学新东西的时候， 也比那些新手学得更快，理解得更深，运用得更熟练。而新手们呢？往往就会漫 无头绪，焦头烂额，以一副张着茫然的大眼睛的经典表情，出现在各大论坛的 新手求助区里。他们欠缺的，究竟是什么呢？为什么老手学新东西，就没遇到那 么多困难呢？ 泛泛地说，自然是经验上的欠缺。仔细地说来，又可以分为三个方面： 一、本质，一种技术与另一种技术之间，往往会有本质上的相通之处，当你 对一种技术的理解与思考越来越深入时，学习一种新技术也会更加容易。触类旁 通，举一反三的能力，就是来自于对于技术本质的追寻。 二、地图，本质上或多或少的相通，也提示着我们技术之间的相互关联，当 你了解的技术越多，了解得越是深入，在你的内心，就能建立起越发清晰的技 术地图。各种知识都有一个自然、合理的位置。那么当一个老手要学习一门新技术 的时候，他其实并非在探索一个全新的、未知的领域，而是有很多脉络可寻，也 很多已知可以帮助他们快速了解未知。 三、技巧，面对同样的未知，面对同样的难题，新手们一筹莫展，而老手们 却掌握着更多的技巧和手段，帮助他们试探可能性、缩小问题的范围、迅速定位 问题、不犯明显愚蠢的错误、甚至能够列举出更具命中力的搜索关键词，而这些 技巧，都帮助老手在前进的道路上，更少跌倒，即使跌倒，也能更快的爬起来。 作为一本写给新手的入门书籍，我们希望展现给读者的，是一个老手如何 学习新技术的过程。我们相信，这样的一个学习过程，对于新手来说，是更具有 价值的。 何谓快车道 必须老老实实的承认，我吹牛了！老手虽然会比新手学习得更快一些，但 是也同样会碰到麻烦，遇到障碍，感觉头痛。如果没有真正的专家的指导，我不 可能如此迅速地将AJAX掌握到目前这样的程度，要真是让我自学三个月，然 后就写出书来的话，那真是在骗钱了。 老手能够快速学习的另一个重要的诀窍是：认识很多牛人朋友 如果没有李锟与赵泽欣的专家级指导与帮助，如果没有与李锟AJAX结对 编程的体验，如果没有三个人在MSN上无数次的长聊，我想要在短期内建立起： 对于AJAX本质的理解； 对于整个AJAX以及相关技术地图的理解； 对于AJAX编程开发所需要的很多技巧、手段的掌握； 几乎是不可能的。 如果没有（N多需要感谢的人）的（N多方面的帮助），我们这本书，也 不可能以现在这样的深度，以（N个月）内完成的速度，送到读者的面前。 希望这本书，能够对大家快速学习AJAX，有所帮助。
软件工程综合实践专题第二次作业———结对编程心得体会
软件工程综合实践专题第二次作业———结对编程 学习了软件工程综合实践专题这门课程，懂得了结对编程是指两个人一起，用一台电脑，鼠标，键盘的一种编程方式。 王文娟老师在课后留下了一道随机出三百道四则运算的题目并要求采用结对编程的方式和搭档共同完成 在这次的编程过程中，我和我的搭档第一次接触并采用结对编程的这种编程模式，也就是两个人同时在一台电脑上进行编程，下面是我们写出的代码以及一些在这个过程中...
结对作业第二次——原型实现
然后一次设计选手信息，每日赛况、详细赛况、奖牌榜和了解更多的部分，同样是按照之前设计的模板来进行排版设计和功能设计，其中所需要的数据都是从助教给的网站上的数据手打下来的。首先进入网站的首页，页首是导航栏，可以点击跳转到对应的部分，一共有五个部分，分别是首页，选手信息，每日赛况、详细赛况、奖牌榜和了解更多。这部分主要就是赛事信息的下展菜单的实现重要，在js中用表格的方式展开信息，并把它们封装到一个函数（toggleDropdown）里，触发点击事件的时候调用这个函数实现下展的功能。选手的详细信息如上图所示。
【demx96】美容美甲类网站手机模板.zip
【demx96】美容美甲类网站手机模板.zip
【图像去噪】基于matlab小波域双重局部维纳滤波图像去噪（含PSNR）【含Matlab源码 1642期】.md
【图像去噪】基于matlab小波域双重局部维纳滤波图像去噪（含PSNR）【含Matlab源码 1642期】
2401_CS_SE_FZU

109

社区成员

394

社区内容

发帖
与我相关
我的任务
社区描述
202401_CS_SE_FZU
软件工程 高校
社区管理员
  • FZU_SE_TeacherL
  • 032002124林日臻
  • 助教姜词杰
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章