第二次结对作业——代码实现

222200216张上毅 2024-09-30 22:38:51
这个作业属于哪个课程2024软件工程实践
这个作业要求在哪里软结对第二次作业——编程实现
结对学号<222200212、222200216>
这个作业的目标实现上一次结对原型设计所构想的功能
其他参考文献《构建之法》、CSDN

目录

  • 1.CodeArt项目地址
  • 2.访问链接
  • 3.PSP表格
  • 4.成品展示
  • 1.主页
  • 2.奖牌榜
  • 3.每日赛程
  • 4.详细赛况
  • 5.对阵表
  • 5.结对讨论过程
  • 6.设计实现过程
  • 7.代码说明
  • 主页代码展示
  • 应用router实现页面的跳转
  • 每日赛程的数据读取，使用了getJSON方法
  • 每日赛程代码展示 采用来下拉列表，和列表的斑马纹
  • 8.数据来源
  • 9.分工、心路历程、互相评价

1.CodeArt项目地址

仓库地址

2.访问链接

网页地址

3.PSP表格

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划2535
• Estimate• 估计这个任务需要多少时间2535
Development开发15251620
• Analysis• 需求分析 (包括学习新技术）600700
• Design Spec• 生成设计文档3540
• Design Review• 设计复审4035
• Coding Standard• 代码规范 (为目前的开发制定合适的规范)3045
• Design• 具体设计200200
• Coding• 具体编码11501250
• Code Review• 代码复审4050
• Test• 测试（自我测试，修改代码，提交修改）60100
Reporting报告110145
• Test Repor• 测试报告5080
• Size Measurement• 计算工作量3030
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划3035
合计22602400

4.成品展示

1.主页

设置跑马灯展示奥运相关信息，定时滑动展示图片，也可以手动点击改变。同时设有三个按钮分别跳转主页、每日赛程和奖牌榜。

2.奖牌榜

鼠标移到对应国家高亮显示。

img

3.每日赛程

可选择查看不同日期的赛程表，点击查看详情可跳转至相应赛况。

img

img

4.详细赛况

本次作业以几内亚和新西兰的对战为例：

img

出赛名单和详细赛况可以分别点开，详细赛况中还有上下半场可以点开查看具体情况。

img

img

5.对阵表

对阵表可以点击详细赛况中的“对阵表”按钮进入。

img

5.结对讨论过程

我们的讨论以线下为主，线上主要是互传文件和链接。

img

img

img

img

6.设计实现过程

刚拿到题目我们一头雾水，根本不知道该怎么入手。随后学习了一些前端的相关知识，我们决定一边研究vue框架一边通过前端三件套实现作业。
我们以上次作业为模板，尽可能类似地实现对应功能。

7.代码说明

主页代码展示

使用了vue3，引入elment plus 和router组件来实现一些功能，比如圆角按钮，跑马灯等。

<template>
  <div>
    <div class="olyM">
      <img width="10%" src="../data/u37.png" alt="" height:0>
    </div>
     <div class="caRou" m="t-4" height:0>
      <el-carousel trigger="click" height="900px">
        <el-carousel-item v-for="item in carouseData" :key="item">
          <img :src="item.url" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
   <div class="mb-4">
      <el-button round onclick="window.location.href = '/'"> 主页 </el-button>
      <el-button round onclick="location.href='/Total/Total.html'">奖牌榜 </el-button>
      <el-button round onclick="location.href='/Schedule/Schedule.html'" >每日赛程 </el-button>
    </div>
    <div  id="picLeft">
      <img src="../data/04.png" alt="">
    </div>
    <div  id="picRight">
      <img src="../data/05.png" alt="">
    </div>
  </template>
  <style>
  .olyM{
    position:absolute;
    left: 48%;
    z-index: 10;
  }
  .caRou{
    width: 100%;
  }
  .mb-4{
    position:absolute;
    left: 20px;
    top: 20px;
    z-index: 9;
  }
  #picLeft{
    position: relative;
    top:100px;
    left: 150px;
    display: inline-block;
  }
  #picRight{
    position: relative;
    right: -400px;
    display: inline-block;
  }
  </style>
<script>
export default {
  name: 'caRou',
  data () {
    return {
      carouseData: [
        { url: require('../data/01.png') },
        { url: require('../data/02.png') },
        { url: require('../data/03.png') }
      ]
    }
  }
}
</script>

应用router实现页面的跳转

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('../views/index.vue')
  },
  {
    path: '/page2',
    component: () => import('../views/page2.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

每日赛程的数据读取，使用了getJSON方法

$(document).ready(function() {
    // 当用户选择不同的日期时，加载相应的JSON文件
    $('#scheduleSelect').on('change', function() {
        const selectedFile = $(this).val(); // 获取下拉框中选择的文件名
        loadSchedule(selectedFile); // 调用加载赛程的函数
    });

    // 初始化时加载默认的赛程
    loadSchedule('../data/schedule/0724.json');

    // 加载赛程的函数
    function loadSchedule(file) {
        $.getJSON(file, function(data) {
            const matchList = data.data.matchList;
            const tableBody = $('#scheduleTable');
            tableBody.empty(); // 清空表格内容

            // 如果没有比赛数据，显示提示信息
            if (matchList.length === 0) {
                tableBody.append('<tr><td colspan="6">当天没有比赛</td></tr>');
                return;
            }

            // 遍历比赛数据，生成表格行
            $.each(matchList, function(index, match) {
                const row = `
                    <tr>
                        <td>${match.title} <el-button round onclick="window.location.href = '/page2'">奖牌榜 </el-button> </td>
                        <td>${match.startdatecn}</td>
                        <td>${match.homename}</td>
                        <td>${match.awayname}</td>
                        <td>${match.homescore} - ${match.awayscore}</td>
                        <td>${match.itemcodename}</td>
                    </tr>
                `;
                tableBody.append(row);
            });
        }).fail(function() {
            // 如果文件加载失败，显示错误信息
            $('#scheduleTable').html('<tr><td colspan="6">无法加载赛程数据，请检查文件路径。</td></tr>');
        });
    }
});

每日赛程代码展示 采用来下拉列表，和列表的斑马纹

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日赛程</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 jQuery -->
    <link rel="stylesheet" href="CSSofSchedule.css">
</head>
<body>
    <a href="/"  class="button1">主页</a>
    <a href="../Schedule/Schedule.html"  class="button2">每日赛程</a>
    <a href="../Total/Total.html"  class="button3">奖牌榜</a>
    <img src="./image/center.jpg" alt="background" width="100%" height="300px" style="position: absolute;">
    <img src="./image/u37.png" alt="" style="position: absolute;left: 1215px;" height="120px">
    <div class="container">
    <h1 style="position: absolute;color: aliceblue;left: 1210px;top: 150px;">每日赛程</h1>
    <select id="scheduleSelect">
        <option value="../data/schedule/0724.json">2024年7月24日</option>
        <option value="../data/schedule/0725.json">2024年7月25日</option>
        <option value="../data/schedule/0726.json">2024年7月26日</option>
        <option value="../data/schedule/0727.json">2024年7月27日</option>
        <option value="../data/schedule/0728.json">2024年7月28日</option>
        <option value="../data/schedule/0729.json">2024年7月29日</option>
        <option value="../data/schedule/0730.json">2024年7月30日</option>
        <option value="../data/schedule/0731.json">2024年7月31日</option>
        <option value="../data/schedule/0801.json">2024年8月01日</option>
        <option value="../data/schedule/0802.json">2024年8月02日</option>
        <option value="../data/schedule/0803.json">2024年8月03日</option>
        <option value="../data/schedule/0804.json">2024年8月04日</option>
        <option value="../data/schedule/0805.json">2024年8月05日</option>
        <option value="../data/schedule/0806.json">2024年8月06日</option>
        <option value="../data/schedule/0807.json">2024年8月07日</option>
        <option value="../data/schedule/0808.json">2024年8月08日</option>
        <option value="../data/schedule/0809.json">2024年8月09日</option>
        <option value="../data/schedule/0810.json">2024年8月10日</option>
        <option value="../data/schedule/0811.json">2024年8月11日</option>
        <!-- 可以继续添加更多的日期和文件 -->
    </select>

    <!-- 表格展示每日赛程 -->
    <table>
        <thead>
            <tr>
                <th>比赛标题</th>
                <th>开始时间</th>
                <th>主队</th>
                <th>客队</th>
                <th>比分</th>
                <th>比赛类型</th>
            </tr>
        </thead>
        <tbody id="scheduleTable">
            <tr><td colspan="6">请选择日期以查看赛程</td></tr>
        </tbody>
    </table>
</div>
<script src="JSofSchedule.js"></script>


</body>
</html>

8.数据来源

本次作业数据来源与前次一致，均来自官网爬取。

9.分工、心路历程、互相评价

222200212杨予凡：完成主页和详细赛况
222200216张上毅：完成每日赛程，奖牌榜和对阵表

222200212杨予凡：这次作业花了很多时间学习vue相关知识，因没有基础，所以在学习时处处碰壁，经常遇到一个bug需要花费很长时间解决的问题。好在最后还是完成了作业，看着自己做出的网页还是很有成就感，对于作业中学习到的知识也很满足。
222200216张上毅: 一开始感到这次作业无从下手，在学习了前端知识后逐渐对本次作业有了初步的认识，通过几天的学习和询问同学最后成功完成。在学习的过程中感受到自己自学的能力更进一步。

222200212杨予凡：张上毅同学在结对作业中非常认真负责，能够很好地完成自己分工的任务，并且在沟通地过程中非常耐心，为我们的作业做出了很多的贡献。
222200216张上毅：杨予凡同学非常注重细节，力求完美，在完成作业的过程中非常尽职尽责，积极学习相关知识，面对不了解的问题也十分乐于学习。

...全文
103 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
结对第二次作业——编程实现
结对第二次作业——编程实现
结对作业——第二次作业
结对作业——第二次作业 标签： 软工实践 结对项目 结对成员 031502404 陈邡 031502443 郑书豪 Github项目地址 数据生成 数据地址 生成原理 使用C++的Json库对数据进行Json格式的输出。 students部分 free_time：将空闲时间字符串分为三段字符串进行拼接。在常量字符串数组中存入周一到周日对应的字符串，每次随机取出一条作为字符串第一段。开始时间...
第二次结对编程作业——毕设导师智能匹配
第二次结对编程作业——毕设导师智能匹配 031402337 胡心颖 031402341 王婷婷 作业概述 编码实现一个毕设导师的智能匹配的程序。 提供输入包括：30个老师（包含带学生数的要求的上限，单个数值，在[0,8]内），100个学生（包含绩点信息），每个学生有5个导师志愿（志愿的导师可以重复但不能空缺）。 实现一个智能自动分配算法，根据输入信息，输出导师和学生间的匹配信息（一个学生只能有...
结对作业第二次——原型实现
然后一次设计选手信息，每日赛况、详细赛况、奖牌榜和了解更多的部分，同样是按照之前设计的模板来进行排版设计和功能设计，其中所需要的数据都是从助教给的网站上的数据手打下来的。首先进入网站的首页，页首是导航栏，可以点击跳转到对应的部分，一共有五个部分，分别是首页，选手信息，每日赛况、详细赛况、奖牌榜和了解更多。这部分主要就是赛事信息的下展菜单的实现重要，在js中用表格的方式展开信息，并把它们封装到一个函数（toggleDropdown）里，触发点击事件的时候调用这个函数实现下展的功能。选手的详细信息如上图所示。
第二次结对作业——学生与部门的匹配
结对成员： 031501102 叶文滔 031502409 杜宏庆 Github地址： https://github.com/a270331257/Matching 部分数据展示： 学生数据 部门数据 数据生成原理： 数据生成的流程首先是建立各种需要的数据的随机库，比如星期几、时间段、兴趣标签的库等，然后从各个随机库中随机选取内容进行组装，组成一个完成的学生或部门实体。组装过程...
2401_CS_SE_FZU

108

社区成员

361

社区内容

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

加载中

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

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

+ 用AI写文章