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

222100105黄娇茹 2024-03-26 22:18:00
这个作业属于哪个课程2302软件工程
这个作业要求在哪里结对第二次作业——编程实现
结对学号222100102 & 222100105
这个作业的目标git 协作，vue2框架实现第一次结对作业原型并撰写博客
其他参考文献VUE2 element ui axios教程 CSDN网站

目录

  • 1. git仓库链接和代码规范链接
  • 2. PSP表格
  • 3.成品展示
  • 3.1项目访问链接
  • 3.2 成品展示
  • 3.2.1首页
  • 3.2.2选手信息
  • 3.2.3每日赛程
  • 3.2.4详细赛况
  • 3.2.5奖牌榜
  • 3.2.6了解更多
  • 4.结对讨论过程描述
  • 5.设计实现过程
  • 5.1功能结构图
  • 5.2 设计思路
  • 5.3问题分析
  • 6.代码说明
  • 6.1导航栏
  • 6.2 选手信息
  • 6.3每日赛程
  • 6.4 详细赛况
  • 6.5 奖牌榜
  • 7.心路历程和收获
  • 8.评价结对队友

1. git仓库链接和代码规范链接

2. PSP表格

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

3.成品展示

3.1项目访问链接

3.2 成品展示

3.2.1首页

  • 轮播图：展示赛事精彩瞬间
  • 时间线：介绍大赛背景和历史

    在这里插入图片描述

3.2.2选手信息

  • 表格直观展示所有参赛选手的姓名、国家等信息，数据来自跳水比赛66th International Divers’ Day Rostock

    在这里插入图片描述

3.2.3每日赛程

  • 下拉框选择日期，查看当天的赛事，决赛加图标突出显示，点击右侧按钮可查看对应的详细赛况

    在这里插入图片描述

3.2.4详细赛况

  • 折叠面板展示所有比赛项目，点击可展开项目的决赛结果，也可以点击按钮查看初赛、半决赛的结果

    在这里插入图片描述

3.2.5奖牌榜

  • 利用echarts实现奖牌柱状图，直观展示每个国家的奖牌数量
  • 表格展示各国家的获奖情况

    在这里插入图片描述

3.2.6了解更多

  • 图文结合视频展示赛事更多内容，吸引用户了解世界游泳锦标赛

    在这里插入图片描述

4.结对讨论过程描述

分工如下：

  • 222100102关心悦：设计首页， 选手信息，奖牌榜，了解更多，负责后期美化和部分博客的编写
  • 222100105黄娇茹：设计每日赛程，详细赛程, 数据读取，负责后期美化和部分博客的编写

起先两人计划使用前后端结合完成编码实现原型作业，但是在尝试之后，发现不太好上手springboot,且由于时间紧迫，转而使用纯前端vue2框架进行开发设计。

结对过程中不仅有线上沟通，也有大部分时间在线下进行交流和解惑，通过b站的视频学习，我们将导航分为五个模块对不同页面进行跳转：首页，选手信息，每日赛程，详细赛程，了解更多。

线上讨论图片如下:

在这里插入图片描述


在这里插入图片描述

5.设计实现过程

5.1功能结构图

在这里插入图片描述

5.2 设计思路

  • 页面设计

    使用vue2框架，引入element ui进行页面美化展示

  • json数据获取和渲染
    使用axios库来实现对json文件中数据的提取。通过axios的get方法来对静态json文件进行解析并提取data数据，并在中使用v-bind对数据进行绑定。

  • 主要板块：

    • 首页：Carousel走马灯和Timeline 时间线展示赛事精彩集锦和历史背景
    • 选手信息：el-table表格展示JSON文件中的数据
    • 每日赛程：根据el-select下拉框的选中值读取相关JSON文件，数据填入el-table表格展示；按钮点击跳转页面，数据同样填入el-table表格展示
    • 详细赛况：collapse折叠面板展示所有比赛项目，根据所选值展开比赛结果，展开部分的实现思路同上
    • 了解更多：多组件展示图文、视频

5.3问题分析

222100102：

在起初的时候会因为vue和vue cli版本不一致，依赖安装失败的各种问题而沮丧，中后期会因为各种样式渲染，数据读取，方法编写，还有git团队协作的操作冲突出现bug，需要转换思路以及参考各种博主的方法进行一步步改错和调整，而且需要认真查找资料以及相互讨论，才能解决疑难并加快开发效率（坚信沟通的力量：D

  • 页面跳转无效果

    在实现进行页面跳转时，发现运用指令npm i vue-router安装vue-router后没有效果出现bug,查找资料发现2022年2月7号以后，vue-router的默认版本为4版本，并且只能在vue3中使用，vue-router3才能在vue2中使用，因为我们使用vue2,所以要指定版本@3

    在这里插入图片描述

222100105：

  • 起步阶段是vue的各种配置，解决版本不同等各种bug废了一番功夫
  • 实现阶段为实现下拉框，用v-model获得选中值后不知道如何获取比赛数据，最终利用上次作业的后端代码生成JSON文件，引入axios库，用get方法获取数据
  • git操作时，通过网络资料熟悉分支操作，有一次push时报错，网络上的方法解决不了问题，通过与队友的沟通，明确了是仓库权限的问题（沟通万岁！）

6.代码说明

6.1导航栏

  • 设置导航栏不同模块对应的页面名称，在router文件夹中的index.js配置跳转路由，保证各个页面之间能够切换。
<template>
 <div class="h">
 <el-menu
      router
      :default-active="this.$route.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#fff"
      text-color="#000"
      active-text-color="#409EFF"
      id="menu"
    >
      <el-menu-item index="/HomePage">首页</el-menu-item>
      <el-menu-item index="/AthletesPage">选手信息</el-menu-item>
      <el-menu-item index="/DailySchedule">每日赛况</el-menu-item>
      <el-menu-item index="/DetailedResults">详细赛况</el-menu-item>
      <el-menu-item index="/MedalPage">奖牌榜</el-menu-item>
      <el-menu-item index="/MorePage">了解更多</el-menu-item>
    </el-menu>
   </div>
   </template>

6.2 选手信息

  • 通过el-table生成表格框架，读取js对象的数据进行填充。
<template>
<div>
 <transition
     appear
      name="animate__animated animate__bounce"
      enter-active-class="animate__rubberBand"
    >
    </transition>
    <div class="main">
    <div class="tableShow">
      <el-table
        :data="athleteData"
        stripe
        style="width: 100%"
        height="1000"
        :header-cell-style="{
          'background-color':'rgb(81, 130, 187)',
          'color': '#fff',
          'border-bottom-width': 0,
          textAlign:'center'
        }"
        :cell-style="{ 'font-size': '15px', 'font-weight': 'bold' ,'color': '#000',textAlign:'center'}"
      >
        <el-table-column prop="country" label="Country" width="200">
        </el-table-column>
        <el-table-column prop="name" label="Athlete" width="400">
        </el-table-column>
        <el-table-column prop="sex" label="Gender" width="200">
        </el-table-column>
        <el-table-column prop="dob" label="DOB"> 
        </el-table-column>
        <el-table-column label="Discipline" width="150">Diving</el-table-column>
      </el-table>
    </div>
   </div>
   </div>
  </template>
  <script>
import { Athlete } from "../assets/athletes";
export default {
name: "AthletesPage",
data() {
   return {
     athleteData: Athlete,
    };
   },
   };
  </script>

6.3每日赛程

  • 下拉框el-select显示日期供用户选择，根据当前值获取赛事名称（即JSON文件名），利用axios查询对应JSON文件，将查询结果填充el-table表格数据，展示当天赛程
  • 点击按钮，利用router传递赛事id，结果页面接收参数，利用axios查询相关JSON文件，查询结果填入table表格，展示比赛结果
<div class="mainPlace">
       <div class="dropdown-container">
            
         <el-row class="selection">
         <span>比赛日期：</span>
         <el-select v-model="selectedValue">
           <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
           </el-option>
         </el-select>
         </el-row>
            

         <div class="box">
         <el-table :data="eventList" class="table"
           stripe
           :header-cell-style="{
             color: '#000000',
             'font-size':'21px',
             'font-weight': 'bold',
             'border-bottom': '1px dotted  #0F0A3B',
             textAlign:'center'
           }"
           :cell-style="{ 'font-size': '18px', 'font-weight': 'bold', textAlign:'center'}"
         >
           <el-table-column label="Time" prop="Time" width="200"></el-table-column>
           <el-table-column label="EventName" prop="DisciplineName" width="300"></el-table-column>
           <el-table-column label="Stage" width="200">
             <template slot-scope="scope">
                 <el-image :src='imgFinal' style="width: 25px; height: 25px" v-if="(scope.row.Name)=='Final'"></el-image>
                 <span>{{ scope.row.Name }}</span>
             </template>
           </el-table-column> 
           <el-table-column label="Detail" width="200">
             <template slot-scope="scope">
               <el-button type="primary" @click="goToDetail(scope.row.DisciplineName)">EVENT DETAIL<i class="el-icon-right"></i></el-button>
             </template>
           </el-table-column>
         </el-table>
       </div>
       </div>
   </div>

  • 数据处理：

     <script>
import scheduleJson from "../jsons/schedule.json";
export default {
  data() {
    return {
      //数据部分，此处省略
    }
  },
  methods:{
    goToDetail(eName){
      for(let a in this.eventsList){
        if(this.eventsList[a].title==eName){
          let indexs=this.eventsList[a].id;
          console.log('indexs: '+indexs)
          this.$router.push({path:'/ResultsPage',query:{indexs}});
        }
      }
      
    }
  },
  computed:{
    eventList:{
      get(){
        return scheduleJson.filter((item)=> item.Date === this.selectedValue)
      }
    }
  }
};
</script>

6.4 详细赛况

  • 用collapse折叠面板展示各项目，根据当前值展开赛事结果，数据获取方法同上，一样是根据当前值查询JSON文件，结果填入表格
<div class="mainPlane">
    <el-collapse accordion v-model="activeName" @change="getDetail">
      <div>
        <el-collapse-item v-for ="(event,index) in eventList" :key='index' :title='event.title' :name='index' class="collapse-item">
        <div class="box">
           <el-button type="primary" round @click="showInfo(0)" class="btn">Final</el-button>
           <el-button type="primary" round v-if="buttonNum==3" @click="showInfo(1)" class="btn">Semifinal</el-button>
           <el-button type="primary" round v-if="buttonNum==3" @click="showInfo(2)" class="btn">Preliminary</el-button>
           <el-button type="primary" round v-if="buttonNum==2" @click="showInfo(1)" class="btn">Preliminary</el-button>
         </div>
   
         <div class="box">
           <el-table :data="resultList" 
           stripe
           style="width:100%"
           :header-cell-style="{
             'background-color':'rgb(81, 130, 187)',
             'color': '#fff',
             textAlign:'center',
             'border-bottom': '1px dotted  #0F0A3B',
           }"
           :cell-style="{ 'font-size': '15px', 'font-weight': 'bold' ,'color': '#000',textAlign:'center'}"
         >
          <el-table-column label="Overall Rank" prop="rank" width="150"></el-table-column>
          <el-table-column label="Country" prop="country" width="180"></el-table-column>
           <el-table-column label="Athlete" prop="athlets" width="250"></el-table-column>
           <el-table-column label="Age" prop="age" width="150"></el-table-column>
           <el-table-column label="Points" prop="ponits" width="200"></el-table-column>
           <el-table-column label="Pts Behind" prop="behind" width="200"></el-table-column>
         </el-table>
      </div>
        </el-collapse-item>
       </div>
       </el-collapse>
     </div>

6.5 奖牌榜

  • 通过引入echarts第三方库的柱状图对奖牌数据进行直观体现,其中通过map函数对data数据进行筛选遍历得到柱状图各个信息的展示。
    <script>
import * as echarts from "echarts";
export default {
name: "MedalPage",
data() {
  return {
    medalData//8组数据这里不展示
    };
    },
    methods: {
  getRenderer() {
    console.log(this.$echarts);
      // 基于准备好的dom，初始化echarts实例
      let EChart = this.$echarts.init(document.getElementById("EChart"));
      // 配置参数
      let config = {
        legend: {
          data: [
            {
              name: "Gold",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#D0E6A5" },
                  { offset: 1, color: "#FFDD94" },
                ]),
              },//通过 new echarts的一个实例进行渐变色彩的渲染
            },
            {
              name: "Silver",
              itemStyle//和上述一样
            },
            {
              name: "Bronze",
              itemStyle//和上述一样
            },
          ],
        },
          tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(240,248,255,.6)",
          textStyle: {
            fontSize: 14,
            color: "#778899",
          },
        },
    xAxis: {
      type: "category",
      data: this.medalData.map((item) => {
        const temp = JSON.parse(JSON.stringify(item)); //为了防止错误发生，采用深拷贝
        return temp.country;
      }),
    },
    yAxis: { type: "value" },
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      {
        name: "Gold",
        type: "bar",
        data: this.medalData.map((item) => {
          const temp = JSON.parse(JSON.stringify(item)); //采用深拷贝
          return temp.gold;
        }),
        itemStyle //同渐变原理
          },
        },
      },
      {
        name: "Silver",
        type: "bar",
        data: this.medalData.map((item) => {
          const temp = JSON.parse(JSON.stringify(item)); //采用深拷贝
          return temp.silver;
        }),
        itemStyle: //同渐变原理
    
      },
          {
        name: "Bronze",
        type: "bar",
        data: this.medalData.map((item) => {
          const temp = JSON.parse(JSON.stringify(item)); //采用深拷贝
          return temp.bronze;
        }),
        itemStyle//色彩设置
      },
    ],
    };
    // 设置参数
  config && EChart.setOption(config);
  },
  mounted() {
// 挂载时立即调用渲染
  this.getRenderer();
    },
    </script>

7.心路历程和收获

222100102关心悦：起初选择vue框架是因为其功能的强大，但是短时间内上手对我而言还是有难度的，在一些比较复杂的功能上常常没有头绪，但vue框架提供了很多组件，还有element ui，帮助我更方便地使用各个已经有所渲染的组件。当然，整个项目过程中必不可少的出现好多bug，前期的依赖安装到后期的各种样式渲染，都是一次次难忘的经历，后面会好好继续学习vue,真正理解相关的知识；同时二人协作也让我更加认识理解git分支的各种命令，对后面的团队作业打下基础。

222100105黄娇茹：起初打算采用前后端分离的模式，研究一天后了解到新手学习的工作量过大，赶紧转战纯前端。转战前端的第一个难关就是配置环境，在网络资料和队友的帮助下，将bug一一解决。相对于前后端结合，前端更容易上手，尤其vue框架还提供了许多组件。当然，在具体编码时，还是有很多细节需要学习，在协作过程中，我也逐渐学习vue的知识和git分支的操作，收获颇丰。

8.评价结对队友

222100102关心悦 对 222100105黄娇茹的评价：

队友在数据读取方面教会了我许多，和她的合作非常愉快。同时，我们也进行了很多次的线下交流，可以相互提出一些功能实现的想法，沟通也很和谐，总的来说是个很可靠的伙伴:D。

222100105黄娇茹 对 222100102关心悦的评价：

队友实干能力很棒，前期我研究前后端分离，浪费了一些时间，后来在队友的基础框架和结构分析下，迅速了解了研究方向，用效率弥补损失的时间。在线上交流中，队友回复及时，帮我解决了很多配置方面的问题，提供了项目的基础框架，后期我们相互沟通，合作愉快，总之，是个非常可靠的队友。

...全文
96 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
2020级计算机系软件工程第二次结对编程作业.zip
2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip 2020级计算机系软件工程第二次结对编程作业.zip
PairProject:W班软件工程实践结对第二次作业仓库
结对第二次作业-顶会热词统计的实现 为了不遗漏作业内容，这里有一个清单检查表方便同学们快速检阅。 fork仓库，和伙伴商讨如何通过github协作/代码规范等 编程实现 功能一，操作爬取的论文列表 功能二，爬取结果分析展示 功能三，爬取论文信息（附加功能，实现有附加分） 其他附加功能 部署 发布发布版本，发起拉取请求 撰写博客，在预先之前提交一份博客 包含作业描述和目录 核对评分标准 上一次结对作业中，大家都和小伙伴完成了原型的设计，那么现在再联合小伙伴动手实现原型中的部分功能吧。采用网络技术来实现原型中的功能。 一，作业内容 1.基础功能 功能1：对已爬取的论文列表进行操作 可对论文列表进行删除； 可对论文列表进行查询详细信息（支持模糊查询，查询结果的展示，排序等功能可自行设计）； 功能2：分析已爬取到的论文信息，提取top10个热门领域或热门研究方向 形成如关键字图谱之类直观的查看方式
第2次作业 结对作业1
第2次作业 结对作业1
基于Python语言的P4程序结对作业设计源码
该项目是一款基于Python语言的P4程序结对作业设计源码，总文件量为114个，其中Python源文件57个，JSON配置文件24个，P4配置文件11个，Markdown文档8个，PNG图像文件3个，许可证文件1个，以及多个Makefile文件。该项目旨在通过结对作业的形式，提升编程能力和团队合作精神。
安曼-201d17
代码201：软件开发基础 欢迎使用Code 201！ 这是一门基于您对HTML，CSS，JavaScript，git和常规Web开发的基础知识的课程，为您深入学习任何Code 301类奠定了基础。 介绍 一般课程安排为： 全职 兼职 话题 第一周 第1周和第2周 基本HTML，CSS和Javascript 第二周 第三周和第四周 使用DOM 第三周 第五周和第六周 与图书馆合作 第四周 第七周和第八周 项目周 作业 实验时间代码分配遵循每个上课时间。 您可以在每个类文件夹的子目录中找到这些分配。 作业内容每天都会非常具体，具体取决于主题。 一些实验作业将是结对编程作业。 有关完成和提交作业的说明，请参见相应子目录的README文件。 作业是使用专业级git-flow提交的。 如果您还没有这样做，是时候熟悉git核心命令了。 不用担心，我们会根据需要为您提供逐步帮助。 备忘单和资源
2302软件工程

122

社区成员

758

社区内容

发帖
与我相关
我的任务
社区描述
FZU-SE
软件工程 高校
社区管理员
  • LinQF39
  • 助教-吴可仪
  • 一杯时间
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章