688
社区成员
发帖
与我相关
我的任务
分享结对第二次作业--编程实现
| 这个作业属于哪个课程 | 2023年福大-软件工程实践-W班 |
|---|---|
| 这个作业要求在哪里 | 结对第二次作业--编程实现 |
| 结对学号 | 222000109、222000112 |
| 这个作业的目标 | fork仓库，和伙伴商讨如何通过git协作/代码规范等 编程实现网页原型 撰写博客 |
| 其他参考文献 | 澳大利亚网球公开赛、ElementUI、Vue.js菜鸟教程 |
目录
- 一、Gitcode仓库链接和代码规范链接
- 1.1 Gitcode仓库地址
- 1.2 代码规范地址
- 二、PSP表格
- 三、项目访问链接
- 四、成品展示
- 五、结对讨论过程描述
- 六、设计实现过程描述
- 6.1 功能结构图
- 6.2 技术栈
- 6.3 具体设计
- 七、代码说明
- 八、结对的心路历程与收获
- 九、结对队友互评
一、Gitcode仓库链接和代码规范链接
1.1 Gitcode仓库地址
1.2 代码规范地址
二、PSP表格
| PSP | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 30 | 30 |
| • Estimate | • 估计这个任务需要多少时间 | 30 | 30 |
| Development | 开发 | 1510 | 1970 |
| • Analysis | • 需求分析 (包括学习新技术) | 180 | 300 |
| • Design Spec | • 生成设计文档 | 60 | 60 |
| • Design Review | • 设计复审 | 30 | 30 |
| • Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 30 | 60 |
| • Design | • 具体设计 | 60 | 90 |
| • Coding | • 具体编码 | 1000 | 1200 |
| • Code Review | • 代码复审 | 30 | 30 |
| • Test | • 测试（接口测试，修改代码，提交修改） | 120 | 120 |
| Reporting | 报告 | 180 | 180 |
| • Test and use Repor | • 接口、使用报告 | 120 | 120 |
| • Size Measurement | • 计算工作量 | 30 | 30 |
| • Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 30 | 30 |
三、项目访问链接
四、成品展示
- 首页
使用走马灯与折叠面板组件实现
- 晋级图
蓝底加粗即为获胜者
选手排名
比赛结果
当内容过多时可以移动上方的导航条
- 详细赛况
实现了Day1中的第二场比赛
实现了Day2中的第一场比赛
五、结对讨论过程描述
前期技术学习
实现过程讨论
（因为两人是舍友，所以语言交流较少，文件传输较多）
六、设计实现过程描述
6.1 功能结构图
6.2 技术栈
Vue.js+ElementUI
6.3 具体设计
导航栏和路由
为在编写页面时方便对单个页面进行操作，我们将导航栏设计为组件，再为每个页面编写对应路由，使不用在每个页面中重复添加导航栏，也使每个页面对应的网址不同，便于区分。
晋级图页面
我们使用了ElementUI的走马灯组件实现澳公官网的赛程切换效果，但是由于该组件不能实现不同页面的并列放置，我们选择了其中的卡片模式，虽然只有最中间的卡片是原有大小，但是其效果更接近原网页。这样也会使得整个界面不过于拥挤。
对于其中每一场的比赛，我们采取了ElementUI的表格实现，获胜者显示为蓝底加粗字体，更加醒目的展示了获胜者。每日赛况页面
为实现多个日期并列的放置，我们使用了导航菜单组件实现不同日期比赛结果的切换，但是不像导航栏那样添加路由，而是直接在组件内部切换，只改变当页的内容而不影响其他组件。
具体实现了Day1和Day2中的部分赛况。
详细赛况
将每日赛况日期对应的比赛表格添加上路由，点击具体比赛进入详细赛况页面，同时网址改变。
具体实现了Day1第二场比赛与Day2第一场比赛的部分详细赛况
数据存储
对与有规则的数据，我们将其写成json数据的格式存储在script标签下的data元素中；对于无规则数据，为编写方便，将其视为普通html元素并写在template标签中。
七、代码说明
页面框架
为分离各个页面，我们在APP.vue中编写了如下框架：导航栏+页面内容+页脚，这样在单独页面的编写中就不用再添加导航栏和页脚等重复内容
<template> <div id="app"> <Navbar></Navbar> <router-view></router-view> <Footer></Footer> </div> </template> <script> import Navbar from "./components/Navbar.vue"; import Footer from "./components/Footer.vue"; export default { name: 'app', components: { Navbar, Footer, } } </script>导航栏
使用了ElementUI的导航菜单组件，并为每个菜单项添加路由，当点击菜单项时，页面内容显示对应页面且网站地址改变
<template> <div> <div> <el-menu :default-active="this.$route.path" style="min-height: 80px" class="el-menu-demo" mode="horizontal" router @select="handleSelect" background-color="white" text-color="black" text-font-size="3.0rem" active-text-color="#1E90FF"> <span style="float: left; padding: 0 30px 0 30px;"><img src="../assets/澳网.png"/></span> <el-menu-item style="min-height: 80px; min-width: 22%" v-for="(item,i) in navList" :key="i" :index="item.name"> <h1>{{ item.navItem }}</h1> </el-menu-item> </el-menu> </div> </div> </template> <script> export default { name: "Navbar", data() { return { navList:[ {name:'/Main', navItem:'首页'}, {name:'/Promotion', navItem:'晋级图'}, {name:'/Ranking', navItem:'选手排名'}, {name:'/Results', navItem:'比赛结果'}, ] }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } } } </script> <style scoped> ::v-deep .is-active { color: black; font-weight: bolder; border-bottom-color: rgb(51, 105, 241); } </style>
页头
使用vue中父组件向子组件传参的方法，将当前页面的页名传给页头组件，使其显示对应的页名
<Header title="晋级图"></Header><template> <div> <div class="header"> <h1 style="color: azure;">{{title}}</h1> </div> </div> </template> <script> export default { name: "Header", props: ['title'], data() { return {} } } </script>晋级图
使用了ElementUI的走马灯组件，实现了点击左右按钮或页面进行不同轮次比赛的赛程切换。每个走马灯页面中又添加了该轮次对应的比赛场次数量的表格，并根据script标签中的数据按列读取并存放，最后利用methods里的自定义方法返回规定的样式改变其底色与字体。
<el-carousel-item style="width: 600px;"> <h1>Final</h1> <div style="padding: 130px 100px 100px 100px;"> <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 0 6px rgba(0, 0, 0, .2)"> <el-table :data="tableData15" style="width: 100%" :show-header="false" :row-class-name="tableRowClassName1"> <el-table-column prop="img" width="30"> <template v-slot:default="scope"> <el-image :src="scope.row.img" alt="" style="width: 20px;height: 20px"/> </template> </el-table-column> <el-table-column prop="name" width="180"> </el-table-column> <el-table-column width="90"> </el-table-column> <el-table-column prop="data" width="100"> </el-table-column> </el-table> </div> </div> </el-carousel-item>比赛结果
使用了ElementUI的标签页组件，方便在不重新加载或切换网页的情况下，展示不同日期的比赛结果
<el-tab-pane label="Day1"> <h2>Rod Laver Arena</h2> <div style="width: 430px;padding: 50px 5px 10px 50px;display: inline-block;"> <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 0 6px rgba(0, 0, 0, .2)"> <el-table :data="tableData1" :row-class-name="tableRowClassName1"> <el-table-column prop="img" width="30"> <template v-slot:default="scope"> <el-image :src="scope.row.img" alt="" style="width: 20px;height: 20px"/> </template> </el-table-column> <el-table-column prop="name" width="180"> <template slot="header" slot-scope="scope"> <div>Women’s Singles <br/><span> Round 1 • Rod Laver Arena </span></div> </template> </el-table-column> <el-table-column width="120"> </el-table-column> <el-table-column prop="data" width="100"> <template slot="header" slot-scope="scope"> <div>Complete <br/><span> 1h 15m </span></div> </template> </el-table-column> </el-table> </div> </div> </el-tab-pane>详细赛况
由于ElementUI的表格不方便调整单元格样式，我们使用了html的表格，并让表格内容存放于div中，通过div的v-for操作实现赛况数据的循环输出
<table style="border: 1px solid lightgrey;"> <div v-for="item in detailsList1"> <tr> <td style="border: 0; vertical-align: middle; width: 50px;" rowspan="2"> <img :src="item.url" style="height: 30px; width: 30px;"> </td> <td style="border: 0; text-align: left; width: 200px; height: 10px;"> {{ item.name }} <span style="color: grey; font-size: x-small;">-{{ item.time }}</span> </td> <td style="border: 0; height: 10px; width: 500px; text-align: right;"> <b>{{ item.score }}</b> </td> <tr> <td style="border: 0; width: 1000px; text-align: left;"> <div style="color: grey; font-size: x-small;">{{ item.commentary }}</div> </td> </tr> </tr> <hr color="lightgray"> </div> </table>
八、结对的心路历程与收获
222000109方龙飞
经过两次的结对作业，我对结对合作完成项目有了更深的理解，和队友直接的配合也更加默契。当面对用已有知识无法解决的问题时，因为队友的存在，我也更愿意花时间去学习新的知识和技术。但是一周的时间确实非常紧迫，学习vue再运用到项目中基本耗费了所有的精力，所以才选择纯前端的方式完成。如果时间充裕，我会尽我所能再撰写后端的代码并完成前后端交互。
在本次项目完成过程中，不仅学习了Vue框架，还巩固熟练了html和css的知识，这也是第一次自己设计原型、再根据原型构建完整的网站，受益匪浅。
222000112李思腾
在这次的结对过程中遇到的麻烦同样是接连不断，首先是各种环境的配置与前期使用技术的讨论，再到后来对各种细节的共同商讨，种种困难也让我认识到了团队的重要，在互相的帮扶之下，项目才能够趋于完美。而这次的作业数据众多，许多重复性的工作让人疲惫，设计前后端的交互任务也不了了之。
整个任务我的收获：最重要的是了解了vue框架的使用，为自己的技术方面丰富了一点点，其次就是对于git的各类操作更加熟练，也意识到了git结合各类代码编辑器的重要性。
九、结对队友互评
222000109方龙飞对222000112李思腾：
李思腾同学对新知识学习吸收很快，在实践过程表现得很有想法，他可以把现有的知识有机地结合在一起，实现新的效果；也能很快吸收新知识并转化为带有个人特色的代码。在结对过程中多亏有李思腾同学的合作，我们才能共同构建出完整的网站。
222000112李思腾对222000109方龙飞：
方龙飞同学在初期很快的确定好了技术路线，并且快速的构建好了大框架，让我上手的更加舒适流畅，并且对待一些奇怪的bug也很认真的钻研修改，愿意花费时间和精力在上面，总体来说，是一位让人放心的队友。
...全文
请发表友善的回复…
发表回复
