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

222200424 赵伟豪 2024-09-30 23:37:15

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

这个作业属于哪个课程FZU_SE_teacherW_4
这个作业要求在哪里结对作业第二次——编程实现
结对学号222200424赵伟豪
这个作业的目标通过编程实现原型设计中所构想的功能
其他参考文献《构建之法》 https://blog.csdn.net/zong596568821xp/article/details/83277729?

目录

  • 结对作业第二次——编程实现
  • 1. git仓库链接和代码规范链接
  • git仓库链接
  • 代码规范
  • 2. PSP表格
  • 3. 成品展示
  • 首页及了解更多
  • 奖牌榜
  • 每日赛程
  • 对阵表
  • 4. 结对讨论过程描述
  • 5. 设计实现过程
  • 设计思路
  • 功能结构图
  • 部署过程
  • 6. 代码说明
  • 7. 心路历程和收获
  • 8. 评价结对队友

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

git仓库链接

代码规范

2. PSP表格

PSPPersonal Software Process Stages预估耗时（分钟实际耗时（分钟
Planning计划2025
• Estimate• 估计这个任务需要多少时间6070
Development开发11601480
• Analysis• 需求分析150180
• Learning• 学习新技术200240
• Discussion• 结对讨论3040
• Code Standard• 代码规范6090
• Code• 编码500700
• Code Review• 代码复审6050
• Test and Improvement• 测试与改进120190
Reporting报告110120
• Test Report• 测试报告3035
• Size Measurement• 计算工作量1015
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划6080
合计12801645

3. 成品展示

首页及了解更多

  • 展示巴黎奥运会风采，左上角为各个功能的菜单栏，用户可根据需求选择进入

img

奖牌榜

  • 以金牌数量对各国进行排序

img

img

img

img

img

img

每日赛程

  • 用户可选择日期进入不同比赛日，查看每日比赛安排

img

img

  • 点击可以看到比分

img

对阵表

  • 用户查看详细赛况后，可选择进入查看对阵表：

img

4. 结对讨论过程描述

没有结对，我通过上网学习和请教别人完成了本次作业。

5. 设计实现过程

设计思路

奖牌榜排名:展示各国奖牌排名。

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

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

详细赛况:展示比赛的成绩，包含本场比赛参赛国家，初赛名单和比赛详情等.

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

功能结构图

以下是本次设计的2024奥运会网站的功能结构图：

部署过程

因为是第一次利用服务器配置一台云电脑并搭建一个网站，之前也没有项目部署的经验，因此完全是根据教学走的，为此还购买了阿里云服务器。

6. 代码说明

页内跳转实现

使用a标签，并将 href 指向目标元素的 id。在点击时，页面会自动滚动到带有该 id 的部分：

<nav>
            <ul>
                <li><a href="#news">最新新闻</a></li>
                <li><a href="#events">活动日程</a></li>
                <li><a href="#athletes">运动员介绍</a></li>
                <li><a href="#tickets">购票信息</a></li>
                <li><a href="index.html">奖牌榜</a></li>
                <li><a href="schedule.html">赛程</a></li>
                <li><a href="details.html">对阵表</a></li>
            </ul>
        </nav>

使用交互

为了提高用户的使用体验，我们为按钮设置了多种的交互，例如选中样式变化和鼠标悬停效果等。

/* 链接悬停时的样式 / a:hover { color: #007BFF; / 悬停时将颜色更改为蓝色 / text-decoration: underline; / 悬停时显示下划线 */ }

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
}


header {
    background-color: #004d99; 
    color: white;
    padding: 10px 20px;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

header .logo {
    height: 80px; 
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}


#hero img {
    width: 100%; 
    height: auto; 
    display: block;
}

#hero {
    text-align: center;
    position: relative;
}

#hero h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 2em;
}


section {
    padding: 20px;
    margin-top: 90px; 
}

.news-card, .athlete-profile, .events-table, .tickets-section {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 10px 20px;
    margin-top: 20px;
}





    function switchDate(selectedDate) {
        const containers = document.querySelectorAll('.container');
        containers.forEach(container => {
            if (container.id === selectedDate) {
                container.style.display = 'block'; 
            } else {
                container.style.display = 'none'; // 隐藏其他日期的容器
            }
        });
    }

首页代码展示

 <header>
        <img src="img/logo.png" alt="巴黎奥运会标志" class="logo">
        <nav>
            <ul>
                <li><a href="#news">最新新闻</a></li>
                <li><a href="#events">活动日程</a></li>
                <li><a href="#athletes">运动员介绍</a></li>
                <li><a href="#tickets">购票信息</a></li>
                <li><a href="index.html">奖牌榜</a></li>
                <li><a href="schedule.html">赛程</a></li>
                <li><a href="details.html">对阵表</a></li>
            </ul>
        </nav>
    </header>
    
    <section id="hero">
        <img src="img/奥运会1.jpg" alt="巴黎风光">
        <h1>欢迎来到巴黎奥运会</h1>
    </section>
<section id="news">
    <h2>最新新闻</h2>
    <div class="news-card">
        <img src="img/筹备.jpg" alt="新闻图片">
        <div class="news-content">
            <h3>奥运筹备工作全面启动</h3>
            <p>了解巴黎如何准备这次全球盛事。</p>
            <a href="full-news.html">阅读更多</a>
        </div>
    </div>
    <!-- 更多新闻卡片 -->
</section>
<section id="events">
    <h2>赛事安排</h2>
    <table class="events-table">
        <tr>
            <th>日期</th>
            <th>项目</th>
            <th>地点</th>
        </tr>
        <tr>
            <td>2024-07-25</td>
            <td>开幕式</td>
            <td>巴黎国家体育场</td>
        </tr>
    </table>
</section>
<section id="athletes">
    <h2>运动员风采</h2>
    <div class="athlete-profile">
        <img src="img/运动员.jpg" alt="运动员照片">
        <div class="profile-content">
            <h3>李雷 (田径)</h3>
            <p>探索李雷在田径界的辉煌成就。</p>
        </div>
    </div>
</section>
<section id="tickets">
    <h2>门票预订</h2>
    <p>现在就预订门票，确保您的席位！</p>
    <a href="tickets.html" class="btn">购买门票</a>
</section>

    <footer>
        <p>© 2024 巴黎奥运会</p>
    </footer>
    
<script src="script.js"></script>




body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
}


header {
    background-color: #004d99; 
    color: white;
    padding: 10px 20px;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

header .logo {
    height: 80px; 
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}


#hero img {
    width: 100%; 
    height: auto; 
    display: block;
}

#hero {
    text-align: center;
    position: relative;
}

#hero h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 2em;
}


section {
    padding: 20px;
    margin-top: 90px; 
}

.news-card, .athlete-profile, .events-table, .tickets-section {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 10px 20px;
    margin-top: 20px;
}

7. 心路历程和收获

222200424赵伟豪：

因为队友和另外一个人组队了，所以我决定单通，拿到这个问题的时候，我还不知道怎么入手，加上又是单通，倍感压力。好在在网上能学习相关知识，经过学习相关知识后，认识到时间紧张，决定采取纯前端的开发方式。编码实现的过程中，也多多少少遇到一些困难，面对这些困难，我会去CSDN社区搜索相关解决方法，如果还是解决不了，就求助其他同学。虽然有一些磕磕绊绊，我还是成功地完成了此次作业，这对我们日后的学习生活乃至工作方面都有了巨大的提升。

总的来说，结对完成此次设计编码对于我来说是一段非常宝贵的经历。在这个过程中，我学到了很多关于html编码的技巧和方法，也学到了前端布局的技巧。这些经验和收获将会对我的未来发展和工作有着很大的帮助。

8. 评价结对队友

222200424赵伟豪：

在此次结对协作中，我合理地给出了实现方案和设计思路，让我对此次作业有了一个目标明确的框架，行之有效。同时，我对方案的实践能力也还可以，能够较好地实现的方案，并且最终完成了作业。

...全文
266 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
助教林泽源 2024-10-15
  • 打赏
  • 举报
 回复

没有讨论过程，结对作业还是得和他人合作

222200424 赵伟豪 2024-10-01
  • 打赏
  • 举报
 回复

img


功能结构图漏掉了

结对第二次作业——编程实现
结对第二次作业——编程实现
结对作业第二次——原型实现
然后一次设计选手信息，每日赛况、详细赛况、奖牌榜和了解更多的部分，同样是按照之前设计的模板来进行排版设计和功能设计，其中所需要的数据都是从助教给的网站上的数据手打下来的。首先进入网站的首页，页首是导航栏，可以点击跳转到对应的部分，一共有五个部分，分别是首页，选手信息，每日赛况、详细赛况、奖牌榜和了解更多。这部分主要就是赛事信息的下展菜单的实现重要，在js中用表格的方式展开信息，并把它们封装到一个函数（toggleDropdown）里，触发点击事件的时候调用这个函数实现下展的功能。选手的详细信息如上图所示。
软件工程综合实践专题第二次作业———结对编程心得体会
软件工程综合实践专题第二次作业———结对编程 学习了软件工程综合实践专题这门课程，懂得了结对编程是指两个人一起，用一台电脑，鼠标，键盘的一种编程方式。 王文娟老师在课后留下了一道随机出三百道四则运算的题目并要求采用结对编程的方式和搭档共同完成 在这次的编程过程中，我和我的搭档第一次接触并采用结对编程的这种编程模式，也就是两个人同时在一台电脑上进行编程，下面是我们写出的代码以及一些在这个过程中...
第六次作业——结对编程第二次
第六次作业——结对编程第二次 结对情况 自己 532 智慧 队友 327 帅珍 队友博客链接:http://www.cnblogs.com/llsz/p/7674003.html 使用语言：C/C++ [github作业地址](https://github.com/llsz/Stu_Depart ) 设计说明 接口设计（API) 内部实现设计（类图） 匹配算法设计（思想/流程等） 关于算法的...
WPF+IOC+MVVM 医院自助检验检查报告打印.zip
WPF+IOC+MVVM 医院自助检验检查报告打印.zip
FZU_SE_teacherW_4

239

社区成员

900

社区内容

发帖
与我相关
我的任务
社区管理员
  • FZU_SE_teacherW
  • 202501福大-软件工程实践-W班
  • D's Honey
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章