软件工程实践———

这个作业属于哪个课程	软件工程实践2022年春-F班
这个作业要求在哪里	软件工程实践————结对作业二
结对学号	221900418 221900403
这个作业的目标	实现上次作业的原型中的部分功能
其他参考文献	CSDN 、BiliBili 、博客园、GitHub

文章目录

一、博客链接
二、代码规范参考
三、代码仓库
四、 PSP表格
五、项目展示
- 1、项目部署地址
- 2、项目展示
六、结对讨论过程描述
七、设计实现过程
八、代码说明
九、心路历程和收获
十、评价结对队友

一、博客链接

221900403
221900418

二、代码规范参考

前端代码规范

三、代码仓库

代码仓库地址

四、 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	45
• Estimate	• 估计这个任务需要多少时间	30	45
Development	开发	370	660
• Analysis	• 需求分析 (包括学习新技术)	90	200
• Medal map design	• 奖牌地图设计	60	60
•Medal list design	•奖牌总榜设计	30	30
• Daily schedule design	• 每日赛程设计	60	200
•Learn more about design	•了解更多设计	30	30
•Detailed schedule design	• 详细赛程设计	20	50
•Beautification design	• 美化设计	20	90
Reporting	报告	30	60
• Size Measurement	• 计算工作量	10	20
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	20	40
	合计	430	765

五、项目展示

1、项目部署地址

项目地址

2、项目展示

初始界面&了解更多：主要进行了对吉祥物的介绍、三个运动项目和冬奥会图片，主要实现了文字图片的排版、雪花动画和走马灯

奖牌总榜：可以查看获奖各国的具体奖牌数，高亮了中国，表格使用斑马纹样式，可以分开各国，当鼠标移到上方时，背景色会变透明
每日赛程：通过表格展示各项目的详细赛程，显示比赛时间、大项名称、比赛名称、场馆等信息，同时支持通过选择、切换比赛日期、项目、场馆的形式来筛选用户希望查看的赛程
详细赛况：目前只实现了三个项目详细赛况，通过表格展示
奖牌地图：以世界地图的形式直观地展示各个参赛国家的奖牌数，在地图上使用不同的颜色代表大致的奖牌数区间，颜色深浅表示奖牌数的多少，鼠标点击或移动到每个国家会高亮显示奖牌信息

六、结对讨论过程描述

结对队友为舍友，主要通过线下沟通，线上主要用来分享网站和学习素材

七、设计实现过程

设计初期我们本来是想选择使用vue3.0框架来实现，但后来我们选择了纯前端进行开发，就认为使用vue太麻烦了，直接引入需要的js文件和css样式表，就可以直接实现。

八、代码说明

页眉栏

<img src="src/img/tou.png" style="margin:0 auto;width:100%"><el-row style="background-color: #b5dfff"><el-col :span="4"></el-col><el-col :span="4" style="text-align:center"><el-button size="large" type="primary" plain><a href="index.html">冬奥知识</a></el-button></el-col><el-col :span="4" style="text-align:center"><el-button size="large" type="primary" plain><a href="奖牌总榜.html">奖牌总榜</a></el-button></el-button></el-col><el-col :span="4" style="text-align:center"><el-button size="large" type="primary" plain><a href="每日赛程.html">每日赛程</a></el-button></el-col><el-col :span="4" style="text-align:center"><el-button size="large" type="primary" plain><a href="奖牌地图.html">奖牌地图</a></el-button></el-col><el-col :span="4"></el-col></el-row>

每日赛程的样例示范

    <el-row><el-col :span="8" style="text-align:center"><el-button size="large" type="primary" plain><a href="单板滑雪男子坡面障碍技巧决赛.html">详细赛程案例-单板滑雪男子坡面障碍技巧决赛</a></el-col><el-col :span="8" style="text-align:center"><el-button size="large" type="primary" plain><a href="冰壶混双循环赛第1轮.html">详细赛程案例-冰壶混双循环赛第1轮</a></el-col><el-col :span="8" style="text-align:center"><el-button size="large" type="primary" plain><a href="速度滑冰女子3000米.html">详细赛程案例-速度滑冰女子3000米</a></el-col></el-row>

雪花特效

<section class="headerBg index-pc-v2 CN"><div id="snowflake" style="display: block;"><div class="snow"></div></div></section>

走马灯

<div id="Carousel"><el-carousel indicator-position="outside" type="card" :loop="true" :autoplay="true" :interval="2000" height="350px"><el-carousel-item v-for="url in imgs" :key="url"><el-imagestyle="width: 100%;height: 100%;":src="url":fit="fit"></el-image></el-carousel-item></el-carousel></div>
<script>Vue.createApp({}).use(ElementPlus).mount('#dazs')Vue.createApp({el: '#app',data() {return {fit: 'cover',imgs: ['src/img/pic1.jpeg','src/img/pic2.webp','src/img/pic3.png','src/img/pic4.png','src/img/pic5.png'],};screenWidth :0},methods:{setSize() {// 通过浏览器宽度(图片宽度)计算高度this.bannerHeight = 400 / 1920 * this.screenWidth;},},mounted() {// 首次加载时,需要调用一次this.screenWidth =  window.innerWidth;this.setSize();// 窗口大小发生改变时,调用一次window.onresize = () =>{this.screenWidth =  window.innerWidth;this.setSize();}}}).use(ElementPlus).mount('#Carousel')
</script>

奖牌总榜

<el-table  :data="items" border stripe style="width: 100%" :row-class-name="tableRowClassName" ><el-table-column prop="rank" label="名次" width="180" ></el-table-column><el-table-column prop="countryname" label="国家名称" ></el-table-column><el-table-column prop="gold"><template #header><img src="src/img/1.png" width="50" height="50"></template></el-table-column><el-table-column prop="silver"><template #header><img src="src/img/2.png" width="50" height="50"></template></el-table-column><el-table-column prop="bronze"><template #header><img src="src/img/3.png" width="50" height="50"></template></el-table-column><el-table-column prop="count" label="总计" ></el-table-column>
</el-table>
methods :{tableRowClassName({row,rowIndex}){if (rowIndex === 2) {return "success-row"}return 'warning-row'}},
<style>.el-table .success-row {background-color: #ffde57;}.el-table .warning-row {background-color: #d1eefd;}
</style>

每日赛程

<el-table  :data="sche" border stripe style="width: 100%" ><el-table-column prop="startdatecn" label="比赛时间" width="180":filters="[...        ]":filter-method="filterdate":filtered-value="['02-20']"></el-table-column><el-table-column prop="itemcodename" label="大项名称":filters="[... ]":filter-method="filteritem"></el-table-column><el-table-column prop="title" label="比赛名称" ></el-table-column><el-table-column prop="venuename" label="场馆":filters="[....   ]":filter-method="filterven"></el-table-column><el-table-column prop="homename" label="比赛国家" ></el-table-column><el-table-column prop="awayname" label="比赛国家" ></el-table-column></el-table>Vue.createApp({methods :{filterdate(v,r){return r.startdatecn.includes(v);},filteritem(v,r){return r.itemcodename.includes(v);},filterven(v,r){return r.venuename.includes(v);}},data() {return {sche:schedule}}}).use(ElementPlus).mount('#mrsc')

世界地图配置

let option = {backgroundColor: "#ffffff",title: {    //地图显示标题show: false,text: '',top:"30px",left: 'center',textStyle: {color: '#000000'}},visualMap: {   //图列显示柱type: 'piecewise',left:30,realtime: false,calculable : true,color: ['#0071fd','#2c89fa', '#58a0f6','#8cbbf5','gray'],pieces: [{gte: 20, label: '20以上'},{gte: 11, lte: 20, label: '11-20'},{gte: 6, lte: 10, label: '6-10'},{gte: 1, lte: 5, label: '1-5'},{lt: 1,  label: '0'}]},toolbox: {  //工具栏show: false,orient: 'vertical',top:50,itemGap:20,left:30,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},tooltip: {  //提示框组件show: true,trigger: 'item',formatter: function(dataMap) {str = ''+dataMap.name+'</br>奖牌数:'+dataMap.value+'</br>金牌榜第'+dataMap.data.rank+'名</br>金:'+dataMap.data.k+'</br>银:'+dataMap.data.s+'</br>铜:'+dataMap.data.breturn str}},series: [{name:"奖牌数",type: 'map',mapType: 'world',roam: true,zoom: 1,mapLocation: {y: 100},data: dataMap,   //绑定数据nameMap: nameComparison,symbolSize: 12,label: {normal: {show: false},emphasis: {show: true},},itemStyle: {emphasis: {borderColor: 'transparent',borderWidth: 1}}}],

九、心路历程和收获

221900403:前期本打算使用vue3.0框架，但在学习过程中出现各种各样的问题，但ddl将近和其他课程的作业压身，就果断放弃了，但还是学到了不少关于vue框架的知识，后面也有使用cdn引入来使用vue框架，总的来说还是很开心的。

221900418:一开始就看好了vue3这个框架，因为网页都是偏向静态的，所以采用CDN引入的方式来使用此框架，因为这样不会很大，本来在每日赛程处打算做几个独立于表格外的筛选框，可是苦于不够熟系vue，所以虽然花费了很多时间还是无功而返，只能说懂得了要及时放弃沉没成本。

十、评价结对队友

to 221900418：
老林还是牛的，前面使用vue不成功，后面他想到可以直接cdn引入，解决了很大一部分问题

to 221900403
勤劳认真，工作认真负责，对任务十分有热情，并且很有学习的欲望。

软件工程实践————结对作业二相关推荐

软件工程实践结对作业二
这个作业属于哪个课程 2022年福大-软件工程;软件工程实践-W班这个作业要求在哪里要求在这里这个作业的目标以北京冬奥会赛事信息平台为载体,初步接触需求分析,了解NABCD模型在实际中的应用, ...
软件工程实践结对作业一
这个作业属于哪个课程 <2022年福大-软件工程.实践-W班> 这个作业要求在哪里 <软件工程实践结对作业一> 这个作业的目标 <结对合作,NABCD模型,需求分析,原型 ...
软件工程实践——结对作业一
这个作业属于哪个课程 2022年春软件工程实践F班这个作业要求在哪里软件工程实践--结对作业一结对学号 221900111 221900213 这个作业的目标 1.阅读<构建之法>第 ...
终章 - 软件工程实践总结作业
终章 - 软件工程实践总结作业一.请回望暑假时的第一次作业,你对于软件工程课程的想象当时正值酷暑,快开学了,在家里也是无所事事,就花费了一些心思写下了那份第一次作业.现在看来,当时的想象还是蛮符合 ...
【评分】个人作业——软件工程实践总结作业
[评分]个人作业--软件工程实践总结作业总结按时交 - 有分晚交 - 0分迟交一周以上 - 倒扣本次作业分数抄袭 - 倒扣本次作业分数本次作业蔡安琪同学相较更认真仔细,大家可前往参考: ...
软件工程实践团队作业一
这个作业属于哪个课程 <软件工程23年春季> 这个作业要求在哪里 <软件工程实践团队作业一> 这个作业的目标组建团队确定选题明确绩效考核制度撰写博客与PPT 其他参考文 ...
2018软件工程实践第一次作业
2018软件工程实践第一次作业 1. 简单介绍 031602418:我是正在努力拯救发量的李翔:我的爱好是搜罗使头发乌黑浓密的方法:最推荐玫瑰一楼的乡村荷叶饭:有生发方法的小伙伴请联系我! 2. 阅读 ...
2022秋软工实践个人作业二
2022秋软工实践个人作业二 Task I Task II 这个作业属于哪个课程软工实践这个作业要求在哪里 2022秋软工实践个人作业二这个作业的目标 git html 学号 032002342 ...
个人作业——软件工程实践总结作业（天亮了）
一.请回望暑假时的第一次作业,你对于软件工程课程的想象 1) 在哪些方面达到了你的期待和目标,哪些方面还存在哪些不足,为什么? 软工实践终于结束了,周五答辩完成后给我的第一感觉就是"天亮了& ...

软件工程实践————结对作业二

文章目录

一、博客链接

二、代码规范参考

三、代码仓库

四、 PSP表格

五、项目展示

1、项目部署地址

2、项目展示

六、结对讨论过程描述

七、设计实现过程

八、代码说明

九、心路历程和收获

十、评价结对队友

软件工程实践————结对作业二相关推荐

最新文章

热门文章