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

这个作业属于哪个课程	软件工程23春季学期社区
这个作业要求在哪里	<结对第二次作业–编程实现>
团队成员	222000115 222000125
这个作业的目标	在本次作业里，我们需要编程实现上一次原型设计作业的部分功能
其他参考文献	《构建之法》、CSDN博客

仓库地址链接

点击链接

项目访问链接

Ausopen

项目展示

结对讨论过程

每日赛程的讨论

晋级图画线动效的修改

设计实现过程

设计实现

代码说明

组件结构

每日赛程跳转实现

template中使用element-ui中的卡片组件完成
1.组件

<template>
  <el-card class="box-card">

2.卡片头部显示 比赛类型 时间 completed

      <div slot="header" class="clearfix">
      <div style="display: inline-block; font-size: larger">{{ type }}</div>
      <div
        style="
          display: inline-block;
          margin-left: 350px;
          font-size: small;
          color: gray;
        "
      >
        {{ time }}
      </div>
      <span style="float: right; height: 5px; font-weight: 600">completed</span>
    </div>

3.卡片中间显示选手名字和比分并且用分割线分割两个选手

<div class="text item">
      <div
        v-show="winner_1"
        style="display: inline-block; font-size: large; font-weight: 600"
      >
        {{ player_1 }}
      </div>
      <div
        v-show="winner_1"
        style="float: right; font-size: large; font-weight: 600"
      >
        {{
          score_1[0] + " " + score_1[1] + " " + score_1[2] + " " + score_1[3]
        }}
      </div>
      <div v-show="winner_2" style="display: inline-block; font-size: large">
        {{ player_1 }}
      </div>
      <div v-show="winner_2" style="float: right; font-size: large">
        {{
          score_1[0] + " " + score_1[1] + " " + score_1[2] + " " + score_1[3]
        }}
      </div>
      <div
        style="float: right; font-size: large; color: blue"
        v-show="winner_1"
      >
        win √
      </div>
    </div>
    <el-divider></el-divider>

4.script中定义card的属性用于后边数据渲染

<script>
export default {
  props: [
    "type",
    "time",
    "player_1",
    "player_2",
    "score_1",
    "score_2",
    "winner_1",
    "winner_2",
  ],
};
</script>

晋级图实现

-代码是 JavaScript 代码，它定义了三个函数：drawLine、drawTwoLine 和 showRes，还有一个 onload 函数。onload 函数在页面加载后执行，它定义了一个计时器，每隔两秒执行一次，执行的内容是根据变量 index 的值调用 drawLine、drawTwoLine 和 showRes 函数，其中 drawLine 和 drawTwoLine 函数用于绘制 SVG 图形中的线条，showRes 函数用于显示页面中的结果。这段代码主要用于实现一些动态效果，通过修改 图形的属性，使其呈现动态的效果，同时通过设置 opacity 属性实现渐变显示的效果。

PSP表格

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

心路历程和收获

心路历程

222000125章文佳

• 这次作业难度我认为比上次大，没有学习过的技术更多因此需要自己学习和搜集资料的步骤更多了，在开始项目之前，我花了一些时间学习Vue框架的基础知识。我阅读了Vue官方文档，并尝试了一些Vue的示例项目。这让我对Vue的核心概念有了更好的理解，例如组件、数据绑定、生命周期和指令等等。完成项目时也遇到了很多最开始没有见过的困难，我非常感激我的队友和其他团队的朋友，给予我指导和支持，我们共同解决问题、学习技术、交流经验，这让解决了遇到的困难。
• 完成项目：经过一个月的开发，我们成功地完成了项目，实现了网站的基本功能。在这个过程中，我从中体会到了团队合作的重要性，也意识到自己在技术和思维方面的不足，更有信心面对未来的挑战。
• 总的来说，基于Vue框架的澳大利亚网球公开赛前端项目是一次非常有意义和难忘的经历，让我从中学到了很多东西，也让我更加热爱前端开发。

222000115林函

• 初期准备：在开始项目之前，我们首先要理解项目需求和要求，熟悉Vue框架的基本概念和使用方法，以及掌握一些必要的前端技术。为了更好地开始项目，我自己进行了一些练习，比如学习如何使用Vue-cli创建项目，掌握如何使用Vue组件等等。
• 面对挑战：在项目开发的过程中，我们遇到了很多挑战，比如设计界面、编写复杂的组件、处理数据的请求等等。在面对这些挑战时，我感到有点不知所措，但是在和队友的沟通和协作中，我们能够共同找到解决问题的方法。
• 学习和成长：在项目开发的过程中，我学到了很多新的知识和技能，比如使用Vue-router实现路由管理、使用Vuex进行状态管理等等。在这个过程中，我不断地学习和成长，掌握了新的技术，提高了自己的能力。

收获

222000115林函

• 当我们决定采用Vue框架进行结对编程实现澳大利亚网球赛前端页面展示时，我感到兴奋并且接收挑战。以下是我在这个项目中的心路历程总结：
• 1.了解Vue框架：在开始项目之前，我花了一些时间学习Vue框架的基础知识。我阅读了Vue官方文档，并尝试了一些Vue的示例项目。这让我对Vue的核心概念有了更好的理解，例如组件、数据绑定、生命周期和指令等等。
• 2.结对编程的再次体验：在上次的作业中我就已经与我的伙伴一同编写代码，但这次面临这样对于我们来说全新的技术和挑战。在与我的合作伙伴一起编写代码时，我发现这是一种非常有效的学习方式。我们可以互相分享我们的思维方式和技术知识，并解决遇到的问题。
• 3.团队协作能力得到提高：通过结对编程的方式并且使用git管理代码，我们加强了与队友之间的协作，共同解决问题。我们学会了如何在合作中更好地沟通、交流和协调工作。

222000125章文佳

• 1.深入了解Vue框架：通过开发项目，我们更深入地了解了Vue框架的特性和工作原理。我们学习了Vue组件、指令、路由、状态管理等方面的知识，并将其应用到项目中。
• 2.熟练掌握前端开发技术：在项目中，我们学习和使用了许多上学期web前端开发技术，如HTML、CSS、JavaScript、Bootstrap等。我们通过项目中遇到的实际问题来提高自己的技术水平，并尝试使用新的技术来解决问题。
• 3.学会团队合作：在项目开发过程中，我们不断进行沟通，共同解决问题，充分发挥每个人的专长。这种团队合作的方式让我们互相学习，更好地理解项目，使得项目开发更加高效。在前端三大件的使用上林函是比我优秀的，所以在作业分配上他完成首页和晋级图以及了解更多三个页面以及一些页面美化工作，我则完成每日赛程和选手排名两个需要函数回调的页面。
• 发现自己的不足之处：在项目开发过程中，我们遇到了很多技术难题，例如组件复用、状态管理等。这些难题让我们发现了自己的不足之处，提高了自我认知和技术水平。

评价结对队友

222000115林函

• 技术水平高：我的队友对Vue框架有比我多的理解，并且能够熟练地使用Vue的各种特性和工具。在开发过程中，我的队友能够快速地解决技术难题，为我们的项目节省了很多时间。
• 代码质量高：我队友能够编写清晰、简洁、可读性强的代码，并注重代码风格的统一性。这让我们的代码更容易维护和扩展，也更容易被其他开发人员理解和使用。
• 沟通能力强：文佳善于沟通，并能够清晰地表达自己的想法和观点。这使得我们能够更好地协作，共同解决问题，并且减少了我们之间的误解和沟通障碍。

222000125章文佳

• 代码风格统一：林函能够编写出与我的队友相似的代码风格，这让我们的代码看起来更加整洁和规范。这也让我们更容易地合并代码和解决冲突。
• 团队协作能力强：队友善于与我协作，并能够根据我们的计划和进度来合理安排工作。能够认真聆听队友的想法，并尊重我的的意见。
• 学习能力强：在项目中，林函积极地学习Vue框架和前端开发技术，并能够快速地将所学的知识应用到项目中。不断地寻求反馈和改进，以提高的技能水平。