584
社区成员
发帖
与我相关
我的任务
分享结队第二次作业--编程实现
| 这个作业属于哪个课程 | 软件工程-23年春季学期 |
|---|---|
| 这个作业要求在哪里 | 结对第二次作业--编程实现 |
| 结对学号 | 222000232、222000435 |
| 这个作业的目标 | 采用web技术来实现原型中的功能 |
| 其他参考文献 | 《构建之法》 |
⚪本项目中的爬取数据行为仅用于课程教学⚪
目录
- 1.git仓库链接和代码规范链接
- 2.PSP表格
- 3.成品展示
- 部署在云服务器上的链接
- 总体演示
- 首页
- 比赛排名
- 每日赛况
- 晋级图
- else/more
- 4.结对讨论过程描述
- 5.设计实现过程
- 6.代码说明
- 7.心路历程和收获
- 8.评价结对队友
1.git仓库链接和代码规范链接
2.PSP表格
| PSP | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 25 | 25 |
| • Estimate | • 估计这个任务需要多少时间 | 760 | 1320 |
| • Design | • 界面设计 | 60 | 120 |
| • Analysis | • 需求分析 | 20 | 60 |
| • Learning | • 学习vue开发工具 | 120 | 240 |
| • Discussion | • 结对讨论 | 30 | 60 |
| • Design Spec | • 生成设计文档 | 60 | 60 |
| Development | ·vue开发 | 360 | 600 |
| • Test and Improvement | • 测试与改进 | 60 | 120 |
| • Achievements Exhibition | • 成果展示 | 20 | 20 |
| • Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 30 | 40 |
| 合计 | 785 | 1345 |
3.成品展示
部署在云服务器上的链接
点我跳转→(●'◡'●)
总体演示
首页
首页部分由几张插图和最近新闻组成，简洁明了，高端大气，让浏览者一眼就知道这是澳大利亚网球赛官方网站（不是）
比赛排名
↓这是咱们的比赛排名表，低调奢华且有内涵（不管！我觉得是就是o(￣▽￣)ブ
每日赛况
每日赛况中可以通过选择日期来查看当日的赛况，这个和上次设计的原型相似哦。看得出来我们都是很念旧的人QWQ
晋级图
这次的晋级图比之前设计的原型还更加细节，嘿嘿嘿。依旧是鼠标移动比赛边框显示高亮，展示了从4th round到决赛的冠军诞生历程，真不戳！
else/more
增加了新闻页面，来了解更多和比赛有关的新闻吧~
自动轮播图，帅气吧(✿◡‿◡)
4.结对讨论过程描述
5.设计实现过程
6.代码说明
比赛排名
经过讨论之后，我们决定参考上一次作业设计的原型，用vue表格来展示选手的比赛排名情况，共两个表格，分别展示男子组比赛排名和女子组比赛排名，表格中显示各个选手的rank、name、matches和aces信息。
<div class="main">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item></el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>选手排名</el-breadcrumb-item>
</el-breadcrumb>
<div id="u67" class="ax_default _一级标题">
<div id="u67_div" class=""></div>
<div id="u67_text" class="text ">
<p><span>Men's</span></p><p><span>Singles Aces Leaders</span></p>
</div>
</div>
<div id="u68" class="ax_default _一级标题">
<div id="u68_div" class=""></div>
<div id="u68_text" class="text ">
<p><span>Womens's </span></p><p><span>Singles Aces Leaders</span></p>
</div>
</div>
<!--卡片视图区-->
<div class="tablePart">
<el-row :span="10">
<el-col :span="10">
<el-table
:data="tableData1"
stripe
style="width: 80%">
<el-table-column
prop="rank"
label="Rank"
width="100">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="matches"
label="Matches"
width="100"
>
</el-table-column>
<el-table-column
prop="aces"
label="Aces"
width="100">
</el-table-column>
</el-table>
</el-col>
<el-col :span="10">
<el-table
:data="tableData2"
stripe
style="width: 80%">
<el-table-column
prop="rank"
label="Rank"
width="100">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="matches"
label="Matches"
width="100">
</el-table-column>
<el-table-column
prop="aces"
label="Aces"
width="100">
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</div>
</div>
每日赛况
采用分页组件来表示日期选择组件，实现点击相应的日期便跳转显示相应的比赛场的信息
<body class="container">
<el-header>
<div class="top-box1">
<NavBar></NavBar>
</div >
</el-header>
<div class="top-box2">
<el-carousel :interval="4000" type="card" height="250px">
<el-carousel-item v-for="item in imgList" :key="item.id">
<img :src="item.url" alt=""/>
</el-carousel-item>
</el-carousel>
</div>
<div class="cards">
<el-row :gutter="0">
<el-col :span="7" offset="" v-for="item in cardList1" :key="item.id"><div class="grid-content ep-bg-purple" />
<Card
:gameType="item.gameType"
:place="item.place"
:lasting="item.lasting"
:score="item.score"
:player="item.player"
></Card></el-col>
</el-row>
</div>
<div>
<div class="page">
<MyPagination @change-page='changePage' :pagesize='10' :total='140' :page='13'></MyPagination>
</div>
</div>
</body>
setup () {
// 筛选条件准备
const reqParams = reactive({
// 当前页码
page: 1,
// 每页的条数
pageSize: 10
})
// 控制页码的变化
const changePage = (page) => {
// 修改分页参数，重新调用接口即可
// console.log(page)
reqParams.page = page
}
// this.page = page;
return { changePage }
}
晋级图
晋级图主要采用html和css来实现
<li id="a5" class="img-list-item">
<div class="winner">
<img src="../assets/image/pl.svg" alt="国旗" class="flag">
<p class="name">H. Hurkacz</p>
<p class="score">6</p>
<p class="score">6</p>
<p class="score">7</p>
</div>
.a5 {
width: 1px;
height: 100px;
background-color: #b9b9b9;
position: absolute;
float: left;
right: 762px;
top: 860px;
}
其他小组件
+导航栏and轮播图
因为导航栏一定追求美观，就没有想着拿自己的粗糙手艺来献丑，网上找的组件又不达我心里的预期，所以导航栏的部分设计用了原型的templete，导航功能的实现是在route.js里注册路由，再使用router-link实现，过程中发现设为首页的页面无法二次跳转，于是找了一个笨方法，注册两个相同页面，一个设为首页一个备用，这样就不会出现首页无法二次跳转的bug了。
轮播图用的是elementplus的组件库里原汁原味的代码，但是使用的时候在显示上有点小bug。只在app.vue里使用的话会出现无法轮播的情况，当我把每个views文件夹里的页面都前进去一个NavBar就可以正常轮播了
<template>
<div id="u6" class="ax_default" data-left="0" data-top="0" data-width="1440" data-height="393">
<!-- Unnamed (矩形) -->
<div id="u7" class="ax_default shape">
<div id="u7_div" class=""></div>
<div id="u7_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
<div id="u12" class="ax_default" data-left="294" data-top="0" data-width="473" data-height="64">
<!-- Unnamed (组合) -->
<div id="u13" class="ax_default" data-left="294" data-top="0" data-width="473" data-height="64">
<!-- Unnamed (矩形) -->
<div id="u14" class="ax_default shape selected">
<div id="u14_div" class="selected"></div>
<div id="u14_text" class="text ">
<p><span><router-link active-class="active" to="/index">首页</router-link></span></p>
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u15" class="ax_default shape">
<div id="u15_div" class=""></div>
<div id="u15_text" class="text ">
<p><span><router-link to="/test">比赛排名</router-link></span></p>
<!-- <p><span>比赛排名</span></p> -->
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u16" class="ax_default shape">
<div id="u16_div" class=""></div>
<div id="u16_text" class="text ">
<p><span><router-link to="/dailyGame">每日赛程</router-link></span></p>
<!-- <p><span>每日赛程</span></p> -->
</div>
</div>
<!-- Unnamed (矩形) -->
<div id="u17" class="ax_default shape">
<div id="u17_div" class=""></div>
<div id="u17_text" class="text ">
<p><span><router-link to="/promotion">晋级图</router-link></span></p>
<!-- <p><span>晋级图</span></p> -->
</div>
</div>
</div>
</div>
<!-- Unnamed (图片 ) -->
<div id="u18" class="ax_default image1">
<img id="u18_img" class="img " src="images/首页/u18.jpg"/>
<div id="u18_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<div id="u24" class="ax_default _二级标题">
<div id="u24_div" class=""></div>
<div id="u24_text" class="text ">
<p><span>Aus open</span></p>
</div>
</div>
<slot></slot>
<div>
<router-view></router-view>
</div>
</template>
+赛况卡片
为了减少代码冗余，将每日赛况的卡片设计成组件，利用v-for循环和el-row、el-col布置在每日赛况页面里，代码看起来更加简洁。
<template>
<div id="u169" class="ax_default" >
<div id="u170" class="ax_default" >
<div id="u171" class="ax_default">
<div id="u172" class="ax_default">
<div id="u173" class="ax_default">
<div id="u174" class="ax_default box_1">
<img id="u174_img" class="img " src="images/每日赛程/u174.svg"/>
<div id="u174_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- 比赛类型 -->
<div id="u175" class="ax_default box_1">
<div id="u175_div" class=""></div>
<div id="u175_text" class="text ">
<p><span> {{gameType}} </span></p>
</div>
</div>
</div>
</div>
<div id="u176" class="ax_default label">
<div id="u176_div" class=""></div>
<div id="u176_text" class="text ">
<p><span>{{ place }}</span></p>
</div>
</div>
<div id="u177" class="ax_default label">
<div id="u177_div" class=""></div>
<div id="u177_text" class="text ">
<p><span> {{lasting}}</span></p>
</div>
</div>
<!-- lable -->
<div id="u178" class="ax_default label">
<div id="u178_div" class=""></div>
<div id="u178_text" class="text ">
<p><span>Complete</span></p>
</div>
</div>
<!-- button -->
<div id="u179" class="ax_default link_button">
<div id="u179_div" class=""></div>
<div id="u179_text" class="text ">
<button>more</button>
</div>
</div>
<!-- 比分 -->
<div>
<div id="u180" class="ax_default label">
<div id="u180_div" class=""></div>
<div id="u180_text" class="text ">
<p><span> {{score[0].set[0]}} </span></p>
</div>
</div>
<div id="u181" class="ax_default label">
<div id="u181_div" class=""></div>
<div id="u181_text" class="text ">
<p><span> {{score[0].set[1]}} </span></p>
</div>
</div>
<div id="u182" class="ax_default label">
<div id="u182_div" class=""></div>
<div id="u182_text" class="text ">
<p><span>{{ score[1].set[0] }}</span></p>
</div>
</div>
<div id="u183" class="ax_default label">
<div id="u183_div" class=""></div>
<div id="u183_text" class="text ">
<p><span>{{ score[1].set[1] }}</span></p>
</div>
</div>
</div>
<!-- 运动员 -->
<div id="u184" class="ax_default label">
<div id="u184_div" class=""></div>
<div id="u184_text" class="text ">
<p><span> {{player[0]}} </span></p>
</div>
</div>
<!-- -->
<div id="u186" class="ax_default label">
<div id="u186_div" class=""></div>
<div id="u186_text" class="text ">
<p><span> {{player[1]}}</span></p>
</div>
</div>
</div>
<!-- Unnamed (线段) -->
<div id="u188" class="ax_default line">
<img id="u188_img" class="img " src="images/每日赛程/u188.svg"/>
<div id="u188_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- Unnamed (线段) -->
<div id="u189" class="ax_default line">
<img id="u189_img" class="img " src="images/每日赛程/u189.svg"/>
<div id="u189_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>
</div>
</template>
7.心路历程和收获
222000232：
有的项目它看着没什么，实际上没什么，做起来很有什么（你要不要看看你自己在说什么）我以为我在发布任务前一天晚上就开始配置vue框架需要的环境，把它搭起来，已然是非常之超前，非常之未雨绸缪了，不禁十分甚至九分佩服自己的先见之明（虽然说安装vue的时候出现了各种各样奇葩的问题导致花了一个晚上的时间才稀里糊涂的安装好，电脑hp-111111，但鄙人深信，万事开头难，接下来就简单了）然而，第二天开始就持续发烧了两天😫最高达到39.8°的战绩┭┮﹏┭┮导致根本没那个能力好好做作业了，这两天贡献度≈0（抓狂）让本就不富裕的任务完成时间雪上加霜。而且一点都不简单啊啊啊QWQ大病初愈持续熬夜赶进度，到ddl的时候已经有些精神涣散了...然后这个vue还各种报错...不幸中的万幸是我的队友真的好给力啊！！！
总的来说，一个字：好累（这不是两个字吗）
还有就是要好好锻炼身体，身体健康真的很重要（质朴）
还有就是vue框架真的很厉害（也很会报错▔皿▔）
还有...好吧没有了(●'◡'●)
222000435：
作业要求一发下来就做好了打硬仗的心理准备，但是经过五六天的边学边写bug边面向百度debug的折磨，只能说痛不欲生天要亡我。vue的安装配置是这次作业的第一关。一开始装node.js的时候我还在想这也没有很难吧，直到我接连装了npm、淘宝镜像、vue-cli、elementPlus等等等等，其中常常因为版本冲突不得不对npm进行重装，可以说是花了快两天才把整个环境搞好，然后就是边学边写bug这件事情。粗看vue文件的结构我觉得不过是把html、css、js合并成一个而已并且支持组件复用而已吧，学起来应该很快的，结果事实证明我错了。确实网上教程也有学时不长的，但是一遍过这样囫囵吞枣并不能学得很明白，
setup函数、watch监听、树这些知识块写了错，错了改，耗费了大量时间，所以我们的解决方案也一直在改。因为时间不够的原因，导致我们组的计划一直在退而求其次，本想争取一把把附加功能的详情做出来，结果也只来得及做个首页，还好至少最终成品算看得过去。网页做出来是一回事，但是还有部署服务器的问题。之前并没有接触过这项工作，这次第一次处理也是手忙脚乱，一边处理bug一边冒新的bug，总体来说并不顺利，甚至我室友也上手帮忙了，也有没办法解决的bug，到底能不能部署成功就看这最后一小时了。要说这次作业的收获肯定是有的，毕竟vue最基础的一些东西还是比较明白了，部署服务器也算有接触了，希望下次遇到同样的问题能更加从容地面对和解决。
8.评价结对队友
222000232：
好！厉！害！！！！啊！全能型高手！靠谱，非常靠谱！超级无敌靠谱！谢谢大佬这么厉害还不嫌弃我带我玩QwQ碰到的好多bug她都帮忙解决掉了！！而且真的脾气很好很温柔很有耐心啊啊啊啊！！！这谁不爱啊！我直接muamuamua实名制表白（你能不能冷静一点）从现在起我就是叶老师唯粉，谁敢跟她作对我跟谁急（大声哔哔）
222000435：
完成这次作业的过程中真的是一波三折，我俩经历五六天的互相debug革命友谊已经是比海深的程度了，虽然任务期间队友身体抱恙，但一直很认真地在做自己分配到的任务，作业的相当一部分文本也都是她在负责，我俩编程能力都不算太强但好在愿意花时间，最终才有我们作品的呈现。
...全文
请发表友善的回复…
发表回复
