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

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表格

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

...全文
94 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
AJAX——新手快车道
编程的体验，如果没有三个人在MSN上无数次的长聊，我想要在短期内建立起： 对于AJAX本质的理解； 对于整个AJAX以及相关技术地图的理解； 对于AJAX编程开发所需要的很多技巧、手段的掌握； 几乎是不可能的。 如果没有...
软件工程综合实践专题第二次作业———结对编程心得体会
软件工程综合实践专题第二次作业———结对编程 学习了软件工程综合实践专题这门课程，懂得了结对编程是指两个人一起，用一台电脑，鼠标，键盘的一种编程方式。 王文娟老师在课后留下了一道随机出三百道四则运算的...
结对作业第二次——原型实现
然后一次设计选手信息，每日赛况、详细赛况、奖牌榜和了解更多的部分，同样是按照之前设计的模板来进行排版设计和功能设计，其中所需要的数据都是从助教给的网站上的数据手打下来的。首先进入网站的首页，页首是导航...
《Dcat-admin自定义页面实用技巧分享》
资源下载链接为： https://pan.quark.cn/s/67c535f75d4c 在 IT 领域，Dcat-admin 是一款基于 Laravel 和 Bootstrap 的后台管理系统框架，它拥有众多组件和便捷的生成工具，能够助力开发者快速搭建后台管理界面。本文将重点剖析如何在 Dcat-admin 中实现自定义页面，涵盖控制器、接口、JavaScript、CSS、模板等方面，以及它们的存放位置和编写规范。自定义页面的关键在于新建一个控制器。在 Dcat-admin 中，控制器主要负责处理用户请求并给出响应。可在 app/Http/Controllers 文件夹下新建一个 PHP 类，比如命名为 CustomPageController，并继承 Dcat\Admin\Controllers\Administrable 基类。要在控制器里注册相应的方法，像 index() 用于展示页面，store() 用于数据存储等。接着，要为自定义页面搭建 API 接口。接口一般存放在 app/Http/Controllers/api 文件夹中，主要处理前端交互数据。可以创建一个 CustomPageApi 类，提供获取或更新页面数据的接口，并通过 Laravel 的 Route::controller() 方法在 routes/api.php 文件中注册这些接口。 对于前端资源，Dcat-admin 支持 Eloquent JavaScript（EJS）和 Less。JavaScript 文件通常放在 resources/assets/js 文件夹下，可创建一个 custom_page.js 文件，用于处理页面交互逻辑。CSS 文件则存放在 resources/assets/less 文件夹里，创建一个 custom_page.less 文件来进行样式定义。别忘了在 webpa
电力电子领域单相桥式整流电路Matlab Simulink仿真实现及波形分析 - 整流电路 (07月28日)
单相桥式整流电路在Matlab Simulink环境下的建模方法及其波形特性分析。首先，文中指导了如何搭建基本的单相桥式整流电路模型，包括选择合适的元件（如交流电源、晶闸管）以及正确配置它们的关键参数（如电压峰值、频率）。然后，重点讲解了通过调整触发相位角来改变输出波形的方法，并提供了具体的MATLAB代码用于自动化测试不同的触发角度，从而观察波形变化规律。此外，还讨论了一些常见的调试技巧，比如优化求解器设置避免数值不稳定性和加入RC缓冲电路改善波形质量。最后，利用快速傅立叶变换（FFT）对输出电压进行频谱分析，评估谐波成分。 适用人群：电气工程专业学生、从事电力电子研究的技术人员、希望深入了解整流电路特性的科研工作者。 使用场景及目标：适用于需要构建单相桥式整流电路仿真模型的研究项目或者教学演示；帮助使用者掌握整流电路的工作原理、波形特征及其受控因素；为撰写相关领域的学术论文提供有力的数据支持。 其他说明：文中提供的实例不仅有助于理解理论概念，而且能够作为实际应用中的参考案例。
2401_CS_SE_FZU

111

社区成员

870

社区内容

发帖
与我相关
我的任务
社区描述
202401_CS_SE_FZU
软件工程 高校
社区管理员
  • FZU_SE_TeacherL
  • 言1837
  • 防震水泥
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章