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

222200212杨予凡 2024-09-30 22:22:35

这个作业属于哪个课程	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表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	25	35
• Estimate	• 估计这个任务需要多少时间	25	35
Development	开发	1525	1620
• Analysis	• 需求分析 (包括学习新技术）	600	700
• Design Spec	• 生成设计文档	35	40
• Design Review	• 设计复审	40	35
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	30	45
• Design	• 具体设计	200	200
• Coding	• 具体编码	1150	1250
• Code Review	• 代码复审	40	50
• Test	• 测试（自我测试，修改代码，提交修改）	60	100
Reporting	报告	110	145
• Test Repor	• 测试报告	50	80
• Size Measurement	• 计算工作量	30	30
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	30	35
	合计	2260	2400

4.成品展示

1.主页

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

2.奖牌榜

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

3.每日赛程

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

4.详细赛况

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

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

5.对阵表

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

5.结对讨论过程

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

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张上毅：杨予凡同学非常注重细节，力求完美，在完成作业的过程中非常尽职尽责，积极学习相关知识，面对不了解的问题也十分乐于学习。

...全文