软件工程实践--第二次结对作业 编码实现

软件工程实践第2次结对作业

这个作业属于哪个课程	软件工程
这个作业要求在哪里	作业描述
结对学号	<222000124_222000121>
这个作业的目标	<使用vue框架实现第一次结对作业的原型>
其他参考文献	《0基础入门Vue2》

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

1.1Git仓库链接
1.2代码规范链接
云服务器部署

2 PSP表格

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

3 成品展示

4 结对讨论过程描述

刚开始我们计划使用原生三件套完成这次编码实现原型的作业，但在设计的过程中，发现原生的三件套并不方便，考虑到后面的团队作业也需要使用vue开发前端，我们决定转战vue，通过视频学习，我们对页面进行划分，类似于原型设计，一共四个页面，首页，选手排名，每日赛程，晋级图。

5 代码说明

首页轮播图

 <el-carousel indicator-position="outside" style="margin-top: 60px;" >
        <el-carousel-item v-for="item in imgList" :key="item.name" height="10">
        <img :src="item.src" style="height:180%;width:100%;" alt="图片丢失了" :title="item.title" />
 </el-carousel-item>

比赛卡片自定义属性

export default {
     props:["type","time","player_1","player_2","score_1","score_2","winner_1","winner_2"],
}

比赛界面，v-for循环创建比赛卡片组件，给每个属性赋值传入的一条条数据

<Games v-for="game in game" :key="game.id" :type="game.type" :time="game.time" :player_1="game
                .player_1" :player_2="game.player_2" :score_1="game.score_1" :score_2="game.score_2" :winner_1="game.winner_1" :winner_2="game.winner_2"
                style="float: left;margin:20px ;width:30%;"></Games>

排名界面引入男选手排名表，女选手排名表组件

import Table from '@/components/Table.vue';
import Table2 from '@/components/Table2.vue';

表格组件，定义传入数据参数 name ，matches， aces

<el-table :data="tableData" stripe style="width: 100%" >
        <el-table-column prop="name" label="" width="170">
        </el-table-column>
        <el-table-column type="index" label="Rank" width="150">
        </el-table-column>
        <el-table-column prop="matches" label="Matches" width="150">
        </el-table-column>
        <el-table-column prop="aces" label="Aces">
        </el-table-column>
    </el-table>

路由配置

export default new VueRouter({
    routes:[
        {path:'/Games',component: Games},
        {path:'/Rank',component: Rank},
        {path:'/',component:Home},
        {path:'/About',component:About},
        {path:'/Promotion',component:Promotion},
    ]
}

```javascrip
main.js里面要对vue-router进行引用
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import router from './router'
import 'element-ui/lib/theme-chalk/index.css';
import './registerServiceWorker'

Vue.use(ElementUI);
Vue.use(router);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

导航栏代码

```html
<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="/">首页</el-menu-item>
      <el-menu-item index="/Rank">选手排名</el-menu-item>
      <el-menu-item index="/Games">每日赛况</el-menu-item>
      <el-menu-item index="/Promotion">晋级图</el-menu-item>
      <el-menu-item index="/About">了解更多</el-menu-item>
    </el-menu>

引入比赛数据

import{Day1} from "@/assets/data/data";
import{Day2} from "@/assets/data/data";
import{Day3} from "@/assets/data/data";
import{Day4} from "@/assets/data/data";
import{Day5} from "@/assets/data/data";
import{Day6} from "@/assets/data/data";
import{Day7} from "@/assets/data/data";
import{Day8} from "@/assets/data/data";
import{Q1} from "@/assets/data/data";
import{Q2} from "@/assets/data/data";

import {Men} from "@/assets/data/data";
export default {
    data() {
        return {
            tableData:Men
        }
    }
}

6 设计实现过程

设计思路：通过对Vue和element ui的学习，我们知道了vue是一个可以组件化的框架，我们将每个页面所需的组件都放在名为Components的文件夹下，并设置每个组件的样式等，在所需要的页面里面调用组件，我们一共规划了四个页面，首页Home，选手排名Rank，详细赛况Games，晋级图Promotion，，首页只起到浏览器打开时默认的path，选手排名页将放置选手排名的Lable组件，在页面两边分别显示男选手排名和女选手排名；详细赛况页面放置Day1-Day8以及Q1 Q2共十个按钮，通过点击不同按钮，将每天的比赛信息读入组件Cards并展示出来，每日的比赛信息和原型设计作业类似；晋级图页面将展示从4th阶段到产生冠军阶段的四轮晋级情况。

6.1遇到的困难以及解决

问题1

在做导航栏时，我们一开始是将导航栏的代码放在每一个页面里，这样做的话，每个页面的代码除了要实现页面的功能，还有导航栏的代码，这样代码过于臃肿，在学习了vue框架的结构化后，我们将headline导航栏做成一个components组件，在每个页面中只需要调用它并且在js里面声明接口。

问题2

在每日赛程的界面，要根据当天比赛的场次而动态增加或删除一个Cards组件，我们一开始打算使用静态的写法，有几场比赛就放几个Cards组件，但这样一来当数据增加或减少时，改动的代码量很大，所以使用vue的v-for，循环遍历data里面比赛的场次，并将比赛信息显示在Cards里面。

6.2功能流程图

7 心路历程和收获

222000124许定伟：在这次作业完成中，我学会了vue的安装和使用，对以后的团队作业和未来工作都有很大帮助，又点亮了技能树中的一点，并且在xue开发中，通过对Components的使用，更好的体验到了封装和代码的可复用的重要性。

222000121罗耀坤：本次作业时间不算充裕，而且我们很久没做Web项目了有点遗忘。这次用的是vue框架，之前都没用过，属于是边学边做。这次结对加深了对Web的熟练度，以及加强了和队友协作的能力。虽然遇到很多麻烦但都勉强解决了。

8 评价结对队友

222000124许定伟对222000121罗耀坤评价：耀坤和我都是vue的零基础入门学习，我们在短短的五天内，就利用所学可以做出虽然很简陋功能也简单的项目，我觉得离不开他对学习和项目开发认真的态度。

222000121罗耀坤对222000124许定伟评价：队友积极向上，工作不拖沓勇于承担，能力强。让我感受到团队协作的好处。