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

最新推荐文章于 2024-08-22 16:58:41 发布
最新推荐文章于 2024-08-22 16:58:41 发布
阅读量131 收藏
点赞数
文章标签： git github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57322237/article/details/129758741
版权
这个作业属于哪个课程软件工程23年春季
这个作业要求在哪里结对第二次作业–编程实现
结对学号222000123、222000214
这个作业的目标结对编程、部署云服务器、撰写博客与PPT
其他参考文献CSDN、博客园等

文章目录

一、git仓库链接和代码规范链接

1.1 git仓库地址
1.2 代码规范地址

二、PSP表格

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划3020
• Estimate• 估计这个任务需要多少时间3020
Development开发7301000
• Analysis• 需求分析3045
• Learning• 学习相关技术90125
• Discussion• 结对讨论4060
• Design Spec• 具体设计3030
• Design• 具体代码编写480600
• Test and Improvement• 代码测试与改进60140
Reporting报告80100
• Achievements Exhibition• 项目成果展示4060
• Problem Analysis & Postmortem• 问题的分析和事后总结4040
合计8401080

三、成品展示

3.1 云服务器地址

👉这是云服务器地址
（过期时间：2023-10-18）

3.2 成品演示

演示

四、结对讨论过程描述

本来我们打算完成一个前后端分离项目，但是由于时间比较赶，前端都有点完成不了，于是我们转为纯前端vue开发，数据先存在前端的js文件中

在这里插入图片描述

五、设计实现过程

5.1 功能结构图

在这里插入图片描述

5.2 实现过程

  1. 首页：使用ElementUI轮播图组件展示一些澳网的新闻图片，在轮播图组件中渲染图片和设置自动轮播、滑动等效果

  2. 选手排名：使用表格显示个人得分排名。在文件中定义一个数据数组来存储选手的得分信息，使用ElementUI的表格组件读取数组中的信息并展示

  3. 每日赛况：使用Vue的动态渲染来展示数据，通过按钮组实现每日比赛的切换，不同按钮传递不同的消息进而展示不同的赛况信息

  4. 晋级图：定义晋级图组件，并传递选手晋升路线的数据，鼠标悬停时高亮展示选手详细信息

  5. 详细赛况：每日赛况页面跳转过来时，携带不同的消息，进而展示不同比赛的详细信息

  6. 了解更多：展示澳网的相关故事与基本介绍

六、代码说明

每日赛程页面设计

  • 页面的名称为 Daily.vue，包含一个标题组件和一个内容区域；

  • 每日赛况内容存储在数组中，每个数组包含了比赛的信息，如比赛类型、比赛选手、比分等等；

  • 点击页面上的按钮可以切换显示不同日期的比赛；

  • 通过计算属性content，根据当前选中的日期来确定要显示哪些比赛信息；

  • getWinner方法用于确定比赛的获胜者，它根据两个选手的得分来判断谁是赢家，添加class进行样式修改；

  • toDetails方法用于将用户导航到详细赛况页面，它使用Vue路由器的$router.push方法实现跳转；

<!-- 每日赛况主要内容区域 -->
    <div class="mainContent" style="margin: 0 30px;width: 900px;">
      <el-card class="box-card" v-for="(item, index) in content" :key="index"
        style="margin: 10px 10px;display: inline-block;width: 400px; border-radius: 30px">
        <el-row :gutter="10">
          <el-col class="show" :span="14">
            <!-- 比赛类型 -->
            <strong>{{ item.type }}</strong>
            <br>
            <!-- 比赛场地 -->
            <span class="text">{{ item.round }}</span>
          </el-col>
          <el-col class="show" :span="5" offset="3">
            <strong>Complete</strong>
            <br>
            <!-- 比赛时间 -->
            <span class="text">{{ item.time }}</span>
          </el-col>
        </el-row>
        <hr class="divide">
        <el-row :gutter="10" :class="getWinner(item.score1, item.score2)">
          <el-col :span="2">
            <img :src="item.nation1" class="nationIcon" />
          </el-col>
          <!-- 比赛选手 -->
          <el-col class="show" :span="7" offset="2">
            {{ item.player1 }}
          </el-col>
          <!-- 比赛得分 -->
          <el-col class="show" :span="6" offset="7">
            {{ item.score1 }}
          </el-col>
        </el-row>
        <hr class="divide">
        <el-row :gutter="10" :class="getWinner(item.score2, item.score1)">
          <el-col :span="2">
            <img :src="item.nation2" class="nationIcon" />
          </el-col>
          <!-- 比赛选手 -->
          <el-col class="show" :span="7" offset="2">
            {{ item.player2 }}
          </el-col>
          <!-- 比赛得分 -->
          <el-col class="show" :span="6" offset="7">
            {{ item.score2 }}
          </el-col>
        </el-row>
        <hr class="divide">
        <!-- 跳转到详细赛况 -->
        <el-row>
          <el-button round class="more" @click="toDetails(index + 1)">查 看 详 情</el-button>
        </el-row>
      </el-card>
    </div>

  methods: {
    // 传递消息方法
    setMessage(value) {
      this.message = value
    },
    // 获取获胜者方法
    getWinner(score, otherScore) {
      const scores1 = score.split(' ');
      const scores2 = otherScore.split(' ');
      const sum = scores1.reduce((total, score) => total + parseInt(score), 0);
      const otherSum = scores2.reduce((total, score) => total + parseInt(score), 0);
      return sum > otherSum ? 'winner' : '';
    },
    // 跳转到详细界面方法
    toDetails(panel) {
      this.$router.push({ name: 'Details', params: { panel: panel } })
    }
  },

导航栏组件

  • 导航栏组件使用了 Element UI 库定义的水平导航菜单。菜单有六个item，每个item都由一个 el-menu-item 组件包裹在一个 router-link 组件中，用于链接到应用程序的不同路由；

  • default-active 属性设置初始活动菜单项的索引，@select 事件在选择菜单项时触发，调用 handleSelect 方法。background-color、text-color 和 active-text-color 属性设置菜单的样式；

<template>
  <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
    background-color="#545c6446" text-color="#fff" active-text-color="#ffd04b">
    <el-col :span="4" style="margin-top: 5px"><img id="logo" src="../components/img/ao.png"></el-col>
    <router-link to="/main">
      <el-col :span="4">
        <el-menu-item index="1">首页</el-menu-item>
      </el-col>
    </router-link>
    <router-link to="/daily">
      <el-col :span="4">
        <el-menu-item index="2">每日赛程</el-menu-item>
      </el-col>
    </router-link>
    <router-link to="/rank">
      <el-col :span="4">
        <el-menu-item index="4">选手排名</el-menu-item>
      </el-col>
    </router-link>
    <router-link to="/promotion">
      <el-col :span="4">
        <el-menu-item index="5">晋级图</el-menu-item>
      </el-col>
    </router-link>
    <router-link to="/about">
      <el-col :span="4">
        <el-menu-item index="6">了解更多</el-menu-item>
      </el-col>
    </router-link>
  </el-menu>
</template>

卡片组件设计

  • 该卡片组件用于显示两位选手的比赛成绩和国家信息，并根据两位选手的得分比较来确定胜者并添加相应的样式；

  • getWinner方法用于比较两位选手的得分，并返回一个CSS类名，以确定哪位选手是赢家。如果第一个选手的得分高于第二个选手，则将CSS类名“winner”添加到第一个选手的元素中；如果第二个选手的得分高于第一个选手，则将CSS类名“winner”添加到第二个选手的元素中。如果两个选手得分相同，则不会添加任何样式；

  • 该组件使用Element UI库中的el-card和el-col组件来布局和显示信息，使用v-for指令来显示每个选手的得分。

<template>
  <!-- 模仿中继器组件 -->
  <el-card class="box-card">
    <!-- 比较成绩，获取胜者，添加样式 -->
    <div class="player" :class="getWinner(scores1, scores2)">
      <!-- 国家图片 -->
      <el-col :span="3"><img :src="nationList[0].nation" class="image"></el-col>
      <!-- 选手姓名 -->
      <el-col :span="3"><span>{{ names[0].name }}</span></el-col>
      <!-- 比赛得分 -->
      <el-col :span="6" offset="12">
        <span class="score" v-for="item in scores1">{{ item.score }}</span>
      </el-col>
    </div>
    <el-divider></el-divider>
    <div class="player" :class="getWinner(scores2, scores1)">
      <el-col :span="3"><img :src="nationList[1].nation" class="image"></el-col>
      <el-col :span="3"><span>{{ names[1].name }}</span></el-col>
      <el-col :span="6" offset="12">
        <span class="score" v-for="item in scores2">{{ item.score }}</span>
      </el-col>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "Repeater",
  data() {
    return {
    }
  },
  props: {
    // 国家图片的url
    nationList: {
      type: Array
    },
    // 选手姓名
    names: {
      type: Array
    },
    // 选手1得分
    scores1: {
      type: Array
    },
    // 选手2得分
    scores2: {
      type: Array
    }
  },
  methods: {
    getWinner(scores, otherScores) {
      const sum = scores.reduce((total, score) => total + parseInt(score.score), 0);
      const otherSum = otherScores.reduce((total, score) => total + parseInt(score.score), 0);
      return sum > otherSum ? 'winner' : '';
    }
  },
}
</script>

不同组件之间的参数传递（以Title.vue为例）

<template>
  <div style="margin:10px;border-radius: 20px">
   <!-- 接收各页面title参数，显示出来 -->
    <div class="banner">
      {{ title }}
    </div>
  </div>
</template>

<script>
export default {
  name: "Title",
  props: {
    title: {
      type: String,
    }
  }
}
</script>

<style scoped>
.banner {
  font-size: xx-large;
  text-align: center;
  color: #f1e4c9;
  background-image: linear-gradient(97deg, #17caea, #6078ea);
  box-shadow: 6px 6px 6px #626e85;
  border-radius: 60px;
  line-height: 60px;
  height: 60px;
}
</style>

在首页中引用Title.vue

<template>
  <div id="main" >
    <!-- 传递title参数 -->
    <Title :title="title"></Title>
    <carousel style="width: 100%;margin: 0 auto;background-color:#fefefe;"></carousel>
  </div>
</template>

<script>
import Carousel from "../components/Carousel";
import Title from "../components/Title";

export default {
  name: "Main",
  components: {Title, Carousel},
  data(){
    return{
      title:"首页•资讯",
    }
  }
}
</script>

七、心路历程和收获

222000123：

  • 虽然之前自己有学过Vue和SpringBoot框架，但是并没有认真写过一个项目，只懂得一些基本的语法，写起项目来磕磕碰碰，很多要用的技术想得起来却不会使用；还有许多本来可以简单实现的操作由于自己想得太复杂了，于是实现起来变得非常困难，还是得多去向别人学习，借鉴他人实用的开发方式；这次项目时间有点赶，由于刚开始没有好好规划时间，做起来手忙脚乱，后面确定了方向和使用的技术后，规划好每天要完成的任务，写起项目来才开始顺滑起来。

  • 通过这次结对编程，我明白了不断学习回顾技术相关知识点不如多去实战写写项目积累经验，毕竟，光眼睛学会了是不够了，这样后面开发才能更加得心应手；还有，一定要做好规划，不能想到什么先写什么，这样后面项目的推进会变得非常混乱。

222000214：

  • 先说问题吧，此次主要问题大概是自己的技术不过关，比如框架的学习有点赶鸭子上架，实际上自己并没有很好的运用框架来方便项目实现；其次就是过于依赖现成的模板库了，于是思维定势了，一些原生代码能够简单实现的内容还浪费了不少时间；所以说，学框架还是要深入理解，实战熟悉，否则很容易变成半吊子。
  • 感觉这次结对编程中的最大收获，就是发现学习技术的路还很长，自己还要多多实践，积累项目开发经验；然后就是认为自己时间不够就乱了阵脚，抗压能力较弱这个问题也要慢慢改正了，否则也很容易影响到其他人的情绪。还是要积极地去看待并解决问题，遇到问题也要及时与伙伴商量！

八、评价结对队友

王惠对曹斯杰的评价：

曹斯杰同学做事认真积极、执行力强，善于学习新技术，没有拖延的情况，积极按照时间规划推进项目进度；通过与他的交流与合作，能够对项目所用的技术有更深刻的理解，一些自己不了解的技术也能与他进行互补；总的来说，曹斯杰同学办事效率很高，对于项目整体的方向有合理地规划，解决问题能力很强，是一位优秀可靠的队友。

曹斯杰对王惠的评价：

王惠同学在结对过程中给予了我不少帮助，也乐于分享自己学过的技术，让我能够快速的上手一些没怎么深入学习过的框架；由于这次作业时间紧、工作量大，所以自己多少有点消极，但是王惠同学能够及时根据结对进度，积极讨论调整，能很好的解决我遇到的难题，让我的心理负担少了不少；总的说来，与王惠结对合作还是很愉快的。

九、参考文献

朽ち木とうこ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
结对第二次作业——编程实现
qq_56172732的博客
03-24 150
首页：其中是含有四种图片的轮播图，循环播放赛程期间的热点图片选手排名：其中两种表格，分别存放选手的Rank、Matches、Aces信息。每日赛程：里面放在不同日期、不同场地、不同比赛的信息详细赛况：放在特定比赛的详细信息，并且可以下拉选择不同比赛场次晋级图：里面存放晋级路线图，并高亮显示获胜者种子选手：展示未来最具潜力的选手排名。了解更多：放在有关澳大利亚历史的时间线并配上两张图片，有李娜夺冠照片哦。
第二次程序作业
weixin_44382383的博客
03-08 228
一.题目分析 题目要求：求出任意俩个数的最大公约数和最小公倍数 题目分析： （1）.辗转相除法： 1.将大数给a，小数给b； 2.求a%b的余数； 3.若余数的值为0，则b就是最大公约数； 4.如果余数的值不为0，把b的值给a，余数的值给b； 5.返回第二步； 6.用最开始a与b的乘积除以最大公约数的值就是最小公倍 数了。 （2）.穷举法： 1.将大数给a，小数给b； 2.利用循环，从b开始递减...
结对第二次作业---编程实现
中国移不动的博客
03-24 295
这次项目时间有点赶，由于刚开始没有好好规划时间，做起来手忙脚乱，后面确定了方向和使用的技术后，规划好每天要完成的任务，写起项目来才开始顺滑起来。通过与他的交流与合作，能够对项目所用的技术有更深刻的理解，一些自己不了解的技术也能与他进行互补；由于这次作业时间紧、工作量大，所以自己多少有点消极，但是王惠同学能够及时根据结对进度，积极讨论调整，能很好的解决我遇到的难题，让我的心理负担少了不少；每日赛况：使用Vue的动态渲染来展示数据，通过按钮组实现每日比赛的切换，不同按钮传递不同的消息进而展示不用的赛况信息。
结对第二次作业-编程实现
m0_64752203的博客
03-25 767
页面头部包含一个带有Logo和标题的header，以及一个离开的导航栏nav，导航栏链接到不同页面。页面主体部分有一个容器div，内部包含一个轮播图slide，展示多个项目item，通过不同的背景图片和描述信息展示内容。运动员信息展示页面，包括顶部的带有logo的标题栏、导航栏（默认隐藏）、运动员信息标题部分、以列表形式展示的运动员数据等。了解更多页面是一个展示赛事信息和视频的页面。面对挑战，我们都能够齐心协力，共同应对，我认为小L同学是一个非常出色的合作伙伴，她的创新思维和高效执行力让我受益匪浅。
结对第一次作业-原型网页
03-10
原型输出为网页
2020级计算机系软件工程第二次结对编程作业.zip
04-08
2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件...
结对编程－魔方1
08-03
实现这样的程序需要掌握文件输入输出、条件判断、字符串处理、二维数组操作以及用户交互等多方面的编程技能。通过结对编程，学生可以共同学习这些技能，提高问题解决能力，并增进团队合作精神。
结对编程－快排1
08-03
在本任务中，学生们被要求采用结对编程的方式实现【快速排序】算法。快速排序是一种高效的排序算法，基于分治策略。传统的快速排序算法通常通过选择一个“基准”元素，然后将数组分为小于基准和大于基准的两部分，再...
PairProject:W班软件工程实践结对第二次作业仓库
04-01
结对第二次作业-顶会热词统计的实现为了不遗漏作业内容，这里有一个清单检查表方便同学们快速检阅。fork仓库，和伙伴商讨如何通过github协作/代码规范等编程实现功能一，操作爬取的论文列表功能二，爬取结果分析展示...
【Git】克隆并push远程指定分支
Jerryqjr的博客
08-19 215
【代码】【Git】克隆并push远程指定分支。
git 修改远程仓库的 URL
最新发布
xiaozhi
08-22 144
git remote set-url origin
01 SSH--
m0_46671240的博客
08-19 275
SSH
在PasteSpider中使用gitee的webhook实现类似Jenkins的CI/CD持续部署
08-19 604
使用PasteSpider，可以让小内存的服务器实现类似Jenkins的CI/CD持续部署的功能！
国内用户快速部署Scoop@一键加速安装scoop@Deploy-ScoopForCNUser
xuchaoxin1375的博客
08-21 718
脚本参考了多个相关的项目，做了整合，相关参考链接放到函数文档中。
git flow如何切换到develop
phplife的电子商务网上商城专栏
08-22 99
在Git中，使用Git Flow我们通常会有两个主要的分支：master和develop。这将会切换到develop分支并且更新它以反映远程仓库中的最新状态。
git fetch和git pull的区别
hutaotaotao的博客
08-22 477
git fetch和git pull对本地仓库分支和工作区的影响区别
利用modelscope下载模型
qq_42178122的博客
08-18 692
ModelScope作为一个先进的“模型即服务”(MaaS)平台，它的核心在于汇聚人工智能领域的尖端模型，降低了在现实世界应用这些前沿技术的门槛。该平台通过ModelScope库展现了其强大功能，这一库专为简化开发者体验而设计，无论是在计算机视觉（CV）、自然语言处理（NLP）、语音识别、多模态分析，还是科学计算领域，它都能提供一个统一、高效的接口去执行推理、定制训练及性能评估任务。
Git入门 -- 分支
qq_64037280的博客
08-21 385
git merge一共有三种模式–ff自动合并：当合并的分支为当前分支的后代，会自动执行–ff，若不匹配则执行–no-ff合并。–no-ff非Fast-forward模式：在任何情况下都会创建新的commit多方合并（即使被合并的分支为自己的直接后代）。–ff-only：只会按照 Fast-forward 模式进行合并，如果不符合条件（并非当前分支的直接后代），则会拒绝合并请求并且退出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值