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

222000333谢奕学生 2023-03-24 23:54:12

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第二次作业--编程实现
结对学号	222000333_222000118
这个作业的目标	编码实现原型的功能，部署项目到云服务器
其他参考文献	黑马vue3教程

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

3.成果展示

首页轮播图展示部分选手

使用首页导航进行页面切换

切换日期查看赛程

查看新闻

查看详细赛程

查看选手排名

通过首页进入新闻页面

4.访问链接

访问地址

5.设计实现过程

5.1设计思路

功能结构图为：

本次编码实现使用了纯前端方法实现，使用的框架是vue3.0。在本地配置好vue框架环境后，打开项目目录，对项目进行初始化。
将整个网站分为，首页，每日赛况，晋级图，新闻，了解更多，排名几个部分，其中首页包含了轮播图和部分新闻预览，每日赛程页面中包含了不同日期选项，用户可以更改选项查看对应日期的赛程；点击每个赛程后看查看详细赛况。页面间的跳转均通过配置路由实现。

5.2遇到的问题以及解决方式

问题1：自定义全局组件无法显示在页面上
解决方式：在main.js文件中，自定义app来接收createApp方法返回的对象，在使用mount()方法之前先使用component()方法,组件就可以正常使用了。
问题2：git上传文件时没有权限

解决方式：运用对应指令申请ssh密钥，在本地保存密钥的文件中复制密钥的内容之后在gitcode中新增ssh密钥。

6.代码说明

轮播图实现代码为：

<div class="home">
  <Menu></Menu>
  <div class="showImg" >
  
  <img  v-for="(item) in imgArr" 
       :key="item.id"
       :src="item.url" 
       alt="暂无图片" 
       v-show="item.id===currentIndex" 
       >
  
  <div  @click="clickIcon('up')"   class="iconDiv icon-left"> 
      <i class="el-icon-caret-left"></i>
  </div>
  
  <div  @click="clickIcon('down')"  class="iconDiv icon-right">
      <i class="el-icon-caret-right"></i>
  </div>
 
  <div class="banner-circle">
      <ul>
          <li @click="changeImg(item.id)" 
              v-for="(item) in imgArr" 
              :key="item.id"
              :class="item.id===currentIndex? 'active': '' "
           ></li>
      </ul>
  </div>
</div>

methods:{
          
          clickIcon(val){
              if(val==='down'){
                  this.currentIndex++;
                  if(this.currentIndex===this.imgArr.length){
                      this.currentIndex = 0;
                  }
              }else{
                  /* 第一种写法
                  this.currentIndex--;
                  if(this.currentIndex < 0){
                      this.currentIndex = this.imgArr.length-1;
                  } */
                  // 第二种写法
                  if(this.currentIndex === 0){
                      this.currentIndex = this.imgArr.length;
                  }
                  this.currentIndex--;
              }
          },
          // 点击控制圆点
          changeImg(index){
              this.currentIndex = index
          },
          
      },

导航栏代码为：

<template>
<div class="nav">
      <ul
        @click="() => this.btnMenu(index)"
        v-for="(item, index) in this.list"
        :key="item.index"
      >
        <li class="nav-list">
          <router-link
            :class="this.isActiveNum === index ? 'isActive' : ''"
            :to="item.link"
            >{{ item.menu }}</router-link>
        </li>
      </ul>
    
    </div>
    </template>

export default {
  setup() {
    const isActiveNum = ref(0);
    const menuList = reactive([
      { menu: "首页", link: "/" },
      { menu: "每日赛况", link: "/detail" },
      { menu: "晋级图", link: "/promote" },
      { menu: "新闻", link: "/news" },
      {menu:"排名",link:"/rank"},
      { menu: "了解更多", link: "/more" },
    ]);
    const list = toRaw(menuList);
    onMounted(() => {});
    const btnMenu = (index) => {
      isActiveNum.value = index;
    };
    return {  btnMenu, isActiveNum,  list };
  },
};

7.结对讨论过程

首先我们进行了关于分工和实现方式的讨论，由于时间和实现难度问题，我们最终决定使用纯前端方式实现原型，使用框架为vue3，关于拓展功能，我们添加了新闻功能。

8.心路过程以及收获

222000333：
本来以为先前已经学过了vue3，就可以顺利地编写页面，但是在看教程跟着教程打代码和自己写完全是两回事，动不动就会出现各种错误，如果直接在命令行程序中显示的话，基本都可以找到对应的文件找到对应的代码行，修正错误，但编写时更常出现的是不会在命令行提示的错误，可能是使用方法的顺序不对，或是在某个地方多打或少打一个0，导致组件错位。
在这次结对我了解到自己在实战方面的不足，经常犯低级错误，同时也认识到了代码规范的重要性，平时在完成作业时，因为程序代码行数少，我总是想到怎么写就怎么写，从来没有注意过写代码规范，如变量和方法的命名，缩进，不同代码间的空行。但是这次作业的代码量相比以往有了很大提升，而且还是两人合作，统一的代码格式可以帮助我们更好地理解代码结构和不同代码的作用，同时在程序报错的时候，也能方便找到错误的代码，可以提高合作编程的效率。
222000118:
我们计划使用vue框架来开发本次项目，但是对于我来说使用vue开发项目就是从零开始入门。诚然，vue是当今前端开发中常用的框架之一，我自然希望在这次的结对作业中就能够直接学习完vue的入门知识并能应用到项目开发中，但一周的时间确实十分紧迫，现实情况是我确实难以胜任在这么短的时间内完成所有的学习和开发工作，最终的作业并不能达到自己满意的目标。此外，在最后时间和开发内容产生冲突的时候，我仍然不愿意在表现形式和功能性上作出舍弃，这种既要又要的做事方式使得开发计划不能按时完成，如不加改正也将在未来再次出现同样的问题。
9.评价队友
222000333：
队友在开发过程中起到了很大帮助，交流时让我获得了很大启发，关于编程的见解也有值得我借鉴的地方，总的来说，是个合格的合作队友。
222000118：
XY同学务实且有追求，她不但大胆进取得选择学习vue语言并投入开发，并且在开发过程中也担起了主要内容开发的重任。

...全文