581
社区成员
发帖
与我相关
我的任务
分享结对第二次作业--编程实现
| 这个作业属于哪个课程 | 软件工程-23年春季学期 |
|---|---|
| 这个作业要求在哪里 | 结对第二次作业--编程实现-CSDN社区 |
| 结对学号 | 222000117 222000120 |
| 这个作业的目标 | 将第一次结对作业的原型设计实现出来，主要包括查看选手排名，每日赛况，晋级图等功能，并且运用web技术来实现这些功能，最后部署在服务器上，进行测试。 |
| 其他参考文献 | 《构建之法》 |
目录
- 1 git仓库链接和代码规范链接
- 2 成品展示
- 项目链接
- 项目展示
- 3 结对讨论过程描述
- 4 设计实现过程
- 设计思路
- 功能流程图
- 5 关键代码说明
- 页首导航条
- 6 心路历程和收获
- 7 评价结对队友
- 8 PSP表格
1 git仓库链接和代码规范链接
2 成品展示
项目链接
项目展示
主页演示
男单选手排名演示
女单选手排名演示
每日赛程演示
每日赛程演示（高亮，日期切换）
晋级图演示
详细赛况演示
详细赛况演示（切换set）
了解更多演示
gif动画演示
3 结对讨论过程描述
在刚开始进行本次作业的时候，我们了解到身边的同学们很多都想要使用vue框架进行开发。因为之前没有使用过vue框架，我们先对其进行了一定的了解，再经过与纯前端技术开发对比后，我们认为使用框架使得项目结构更加清晰，代码可复用性更高，最终选择使用vue框架。由于我们队伍经常进行线下讨论，线上的讨论记录只覆盖到本次项目实现的部分阶段。以下截取部分讨论截图展示。
对于提交规定的讨论：
对项目规定的讨论的讨论：
4 设计实现过程
设计思路
设计思路：通过对Vue的学习，我们了解到vue是一个组件化的框架，我们可以组成页面所需的组件都放在名为Components的文件夹下，然后在有需要的页面里调用组件。我们一共规划了四个页面，首页Home，详细赛况Detail，晋级图Promotion，了解更多About，同时要求的选手排名Rank我们做成了抽屉式页面并嵌入在页首导航栏HeadNav中。
功能流程图
5 关键代码说明
页首导航条
以下是页首导航条实现代码的<template>部分，主要包括导航条、占位div、嵌入导航条的选手信息Rank抽屉页面，分别在块div1，placeHolder，div2中实现。导航条使用element-plus中的<el-menu>组件实现，选手排名部分使用<el-drawer>实现（通过点击菜单项进行区分显示的抽屉组件，正常情况下两个抽屉都处于不显示状态）
<template>
<div id="div1">
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" router="true" @select="handleSelect">
<div class="flex-grow2" />
<el-image style="width: 100px; height: 60px" :src="AOUrl" :fit="Fit" />
<div class="flex-grow" />
<el-menu-item index="/">Home</el-menu-item>
<el-sub-menu index="1">
<template #title>选手排名</template>
<el-menu-item><el-text class="mx-1" @click="drawer1 = true">男单排名</el-text></el-menu-item>
<el-menu-item><el-text class="mx-1" @click="drawer2 = true">女单排名</el-text></el-menu-item>
</el-sub-menu>
<el-menu-item index="/DailyComp">每日赛程</el-menu-item>
<el-menu-item index="/PromotionView">晋级图</el-menu-item>
<el-menu-item index="/about">了解更多</el-menu-item>
</el-menu>
</div>
<div id="placeHolder"></div>
<div id="div2">
<el-drawer v-model="drawer1" title="I am the title" :direction="direction" :before-close="handleClose" size="50%">
<template #default>
<el-scrollbar ref="scrollbarRef" height="100%" always @scroll="scroll">
<div style="position:relative; height=100%">
<div id="logo" class="center">
<el-image style="width: 200px; height: 120px" :src="AOUrl" :fit="Fit" />
</div>
<div id="winner" class="center">
<div style="height: 50px;"></div>
<el-image style="width: 600px; height: 500px" :src="manWinnerUrl" :fit="Fit" />
</div>
<div id="statement">
<div style="height: 250px;"></div>
<el-image style="width: 400px; height: 500px" :src="manStatementUrl" :fit="Fit" />
</div>
<div id="rank" style="position:absolute; top:580px" class="center">
<ManRank></ManRank>
</div>
</div>
</el-scrollbar>
</template>
</el-drawer>
<el-drawer v-model="drawer2" title="I am the title" :direction="direction" :before-close="handleClose" size="50%">
<template #default>
<el-scrollbar ref="scrollbarRef" height="100%" always @scroll="scroll">
<div style="position:relative; height=100%">
<div id="logo" class="center">
<el-image style="width: 200px; height: 120px" :src="AOUrl" :fit="Fit" />
</div>
<div id="winner" class="center">
<div style="height: 50px;"></div>
<el-image style="width: 600px; height: 500px" :src="womanWinnerUrl" :fit="Fit" />
</div>
<div id="statement">
<div style="height: 250px;"></div>
<el-image style="width: 400px; height: 500px" :src="womanStatementUrl" :fit="Fit" />
</div>
<div id="rank" style="position:absolute; top:580px" class="center">
<WomenRank></WomenRank>
</div>
</div>
</el-scrollbar>
</template>
</el-drawer>
</div>
</template>
赛程卡片实现代码的<template>部分，同时在每日赛事等需要赛程卡片的页面中用v-for实现根据数据自动生成卡片。
<el-card class="box-card" style="width: 498px;">
<div slot="header" class="clearfix">
<div style="display: inline-block;font-size: larger;">{{ type }}</div>
<span style="float: right; height: 5px;font-weight: 600;">completed</span>
<div style="display: inline-block;float: right;margin-left: 350px;font-size: small;color: gray;">{{ time }}
</div>
</div>
<el-divider></el-divider>
<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: red;" v-show="winner_1">√ </div>
</div>
<el-divider></el-divider>
<div class="text item">
<div v-show="winner_2" style="display: inline-block;font-size: large;font-weight: 600;">{{ player_2 }}</div>
<div v-show="winner_2" style="float: right;font-size: large;font-weight: 600;">{{ score_2[0] }} {{
score_2[1]
}} {{ score_2[2] }} {{ score_2[3] }}</div>
<div v-show="winner_1" style="display: inline-block;font-size: large;">{{ player_2 }}</div>
<div v-show="winner_1" style="float: right;font-size: large;">{{ score_2[0] }} {{ score_2[1] }}
{{ score_2[2] }} {{ score_2[3] }}</div>
<div style="float: right; font-size: large;color: red;" v-show="winner_2">√ </div>
</div>
</el-card>
日常赛事界面，v-for循环创建比赛卡片组件Games，给每个属性赋值传入的一条条数据
<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 ;"></Games>
晋级图在背景基础上使用v-for生成结点treeNode并实现自动布局
<div style="margin-left: 0px;">
<treeNode v-for="game in game" :id="game.id" :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:0px ;position: absolute; "></treeNode>
</div>
路由配置，实现页面之间跳转时的导航功能
routes: [
{
path: '/',
name: 'home',
component: () => import('../views/HomeView.vue')
},
{
path: '/PromotionView',
name: 'PromotionView',
component: PromotionView
},
{
path: '/Detail',
name: 'Detail',
component: Detail
},
{
path: '/DailyComp',
name: 'DailyComp',
component: () => import('../views/DailyComp.vue')
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
6 心路历程和收获
222000117林进锟：我原本就认为这个项目的工作量应该不小，但是开发过程的繁琐和耗时还是远远超出了我的预估，同时再加上学习新知识（Vue3框架）的压力，整个开发过程可谓痛苦，但好在最后我们还是完成了开发，同时部署云服务器也算是顺利完成，还算给坎坷的开发过程收了个好尾。在本次项目开发过程中，我对于对Vue3框架有更深入的了解，学到了新的Vue3指令，如v-for和v-bind，以及Vue3中的组件和路由系统等新特性。这些知识对于今后的前端开发非常有用。
222000120林奕鑫：一开始，我对整个项目的规划和实现都感到有些迷茫。我不知道从哪里开始，也不知道该如何分配时间和任务。在和我的团队成员交流之后，我们决定了一个合理的计划，并制定了一个开发路线图，从而使我们更好地开始这个项目。在实际的开发过程中，我遇到了很多的问题。比如说，我对Vue3的指令和组件的使用还不是很熟悉，还需要查阅很多相关的文档和资料。此外，我还遇到了很多的代码问题，比如说代码冲突、调试错误等等。这些问题都让我感到有些无从下手。但是，随着时间的推移，我慢慢地开始理解Vue3框架，并熟悉了项目的代码结构和逻辑。我发现自己已经掌握了很多新的技能和知识，并且能够独立地解决一些代码问题。这让我感到非常自豪和满足。
7 评价结对队友
222000117林进锟对222000120林奕鑫评价：我认为林奕鑫是一个非常好的团队合作伙伴。他始终保持着开放的心态，并且愿意听取我的意见和建议。他的沟通能力也非常出色，能够很好地协调和解决团队内部的矛盾和问题。他的责任心、技能水平和团队合作精神都非常优秀，对于我们的项目完成起到了非常重要的作用。我很荣幸能够与他一起合作完成这个项目。
222000120林奕鑫对222000117林进锟评价：我认为我的队友（林进锟）在我们的项目中表现非常出色。首先，他是一个非常有责任心和敬业精神的人。在整个项目的过程中，他一直保持着高度的专注和积极的态度，从不放松对项目的关注。他始终遵守我们的规划和时间表，并且时刻准备好为项目做出贡献。其次，林进锟的技能水平也非常出色。他对Vue3框架的理解非常深入，能够熟练地运用Vue3的指令和组件完成项目的开发，还能够很好地处理一些代码问题。
8 PSP表格
| PSP | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 15 | 15 |
| • Estimate | • 估计这个任务需要多少时间 | 15 | 15 |
| Development | 开发 | 995 | 1265 |
| • Analysis | • 需求分析 (包括学习新技术） | 150 | 180 |
| • Design Spec | • 生成设计文档 | 15 | 15 |
| • Design Review | • 设计复审 | 5 | 5 |
| • Coding Standard | • 制定代码规范 | 15 | 20 |
| • Design | • 具体设计 | 30 | 25 |
| • Coding | • 具体编码 | 600 | 720 |
| • Code Review | • 代码复审 | 60 | 60 |
| • Test | • 测试 | 120 | 240 |
| Reporting | 报告 | 30 | 40 |
| • Test Report | • 测试报告 | 10 | 20 |
| • Size Measurement | • 计算工作量 | 10 | 10 |
| • Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 10 | 15 |
| 合计 | 1040 | 1320 |
...全文
请发表友善的回复…
发表回复
