结对第二次作业——编程实现

222000233邵菀姿 2023-03-24 23:47:55

这个作业属于哪个课程	<软件工程-23年春季学期>
这个作业要求在哪里	<结对第二次作业——编程实现>
结对学号	222000328、222000233
这个作业的目标	用web技术实现原型中的功能
其他参考文献	vue框架教程、csdn、Element组件库

一、GitCode仓库地址
二、项目访问链接
三、项目展示
主页
选手排名
每日赛程
详细赛况
晋级图
了解更多
四、过程描述
1、设计实现过程
2、功能结构图
五、 PSP表格
六、关键代码
主页
选手排名
每日赛况
详细赛况
晋级图
了解更多
七、关于结对开发项目
1. 心路历程及收获
2. 评价队友

一、GitCode仓库地址

gitcode仓库地址

二、项目访问链接

地址

三、项目展示

主页

除了基础功能外，我们增加了主页，该界面能够使得客户看到一些澳网比赛的精彩瞬间，使页面更加美观，增强客户对澳网的兴趣。主页的设计一共分为两部分，一部分是澳洲网球公开赛相关图片的轮播，一部分是进入澳网详细界面的按钮。

选手排名

选手排名主要分为男单和女单的排名，排名以表格的形式展示，且按照排名依次列下，能够使客户直观的看到各个选手的名次信息。同时表格的底色采用常用的深浅交换形式，使得信息体现更加清晰。

每日赛程

每日赛程界面的设计分为两部分，第一部分是时间选择的按钮，第二部分是赛程的展示。用户还可点击按钮查看详细赛况。

详细赛况

详细赛况界面的设计参考于澳网，以图表的形式列出详细的比赛信息。

晋级图

主要展示第四轮以后的晋级图

了解更多

设置了了解更多页面，以卡片的形式展示四个与澳网有关的网站，用户可点击查看更多与澳网有关的信息。

四、过程描述

1、设计实现过程

（由于在一个宿舍，都是线下交流，只有一些分享教程的聊天记录）

2、功能结构图

五、 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	40	60
Prepare	准备工作	130	200
• Analysis	• 需求理解	20	30
• Learning	• 学习vue框架	90	150
• Standard	• 制定设计规范	20	20
Design	界面设计	520	880
• Siscuss	• 结对讨论	20	40
• Firstly Design	• 初步界面设计	400	600
• Beautify	• 美化设计	100	240
Summarize	事后总结	50	90
• Process Improvement Plan	• 提出过程改进计划	20	30
• Report	• 总结报告	30	60
	合计	750	1230

六、关键代码

主页

AustralianOpen.vue 主页分为两块，上半部分用Element的Carousel走马灯组件设置图片轮播，下半部分有一个Button，点击可以进入详细界面。

<div class="ausopen">
    <div class="block">
        <!--设置图片轮播-->
        <el-carousel ref="nop" arrow="never" height="550px" width="800px" :autoplay="true">
            <div @touchstart="start($event)" @touchmove="move($event)">
                <el-carousel-item class="el_carousel__item_style" v-for="item in list" v-bind:key="item">
                    <el-image class="el_carousel__item_image" :src="item.value"></el-image>
                </el-carousel-item>
            </div>
        </el-carousel>
    </div>
    <div>
        <!--设置澳网图标-->
        <svg xmlns="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 88 44" width=100px height=100px>
            <title>Australian Open Logo</title>
            <path d="M65.4 31.1c-5.2 0-9.4-4.2-9.4-9.5 0-5.2 4.2-9.5 9.4-9.5s9.4 4.2 9.4 9.5-4.2 9.5-9.4 9.5M65.5 0C53.6 0 44 9.7 44 21.7s9.6 21.7 21.5 21.7S87 33.7 87 21.7C86.9 9.7 77.3 0 65.5 0"></path>
            <path d="M25 1h-6.9L0 42.5h13.4L21.6 21l8.1 21.5h13.4z"></path>
        </svg>
        <!--设置按钮-->
        <button class="btn" @click="details">Learn More</button>
    </div>
</div>

export default {
    name: 'index',
    //返回轮播图片地址
    data(){
        return {
            type: false,
            list: [{
                "name": 1,
                "value": "./static/pic/m1.jpg"
            }, {
                "name": 2,
                "value": "./static/pic/m2.jpg"
            }, {
                "name": 3,
                "value": "./static/pic/m3.jpg"
            }, {
                "name": 4,
                "value": "./static/pic/m4.jpg"
            }],
            startX: '',
            startY: '',
            moveY: '',
            moveX: '',
            startTime: '',
        }
    },
    //设置按钮点击事件
    methods:{
        details(){
            this.$router.replace('/Layout')
        }
    }

/*轮播图样式设置 */
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

/*设置鼠标经停按钮时样式的变化 */
button:hover{
    color: #F2F2F2;
    background: #02A7F0;
}

选手排名

Layout.vue 上半部分引用Menu.vue设置导航栏，下半部分引用Element带斑马纹的表格组件设置表格。

<!--设置背景图片-->
<div class="background">
    <img src="static\pic\p2.jpg" width="100%" height="100%" alt="" />
</div>
<!--引入导航栏-->
<div id="menu">
    <Menu/>
</div>
<!--主体内容-->
<div id="content">
    <div>
        <span id="ti1">Men's Single Aces</span>
        <span id="ti2">Woman's Single Aces</span>
    </div>
    
    <div>
        <span id="ti3">Leaders</span>
        <span id="ti4">Leaders</span>
    </div>
    <!--设置表格-->
    <el-table id="table1"
      :data="tableData1"
      stripe
      style="width: 360px ">
      <el-table-column
        prop="name1"
        label=""
        width="140">
      </el-table-column>
      <el-table-column
        prop="rank1"
        label="Rank"
        width="70">
      </el-table-column>
      <el-table-column
        prop="matches1"
        label="Matches"
        width="80">
      </el-table-column>
      <el-table-column
        prop="aces1"
        label="Aces"
        width="70">
      </el-table-column>
    </el-table>

    <el-table id="table2"
      :data="tableData2"
      stripe
      style="width: 360px">
      <el-table-column
        prop="name2"
        label=""
        width="140">
      </el-table-column>
      <el-table-column
        prop="rank2"
        label="Rank"
        width="70">
      </el-table-column>
      <el-table-column
        prop="matches2"
        label="Matches"
        width="80">
      </el-table-column>
      <el-table-column
        prop="aces2"
        label="Aces"
        width="70">
      </el-table-column>
    </el-table>
</div>

<script>
import Menu from '../components/Menu'
export default {
    //引入Menu组件
    components: { Menu},
    name: 'Ranking',
    //设置表格数据
    data() {
        return {
            tableData1: [{
                name1:'Ben Shelton',
                rank1: '1',
                matches1: '5',
                aces1: '85'
            }, {
                name1:'Stefanos Tsitsipas',
                rank1: '2',
                matches1: '7',
                aces1: '84'
            }
            //....省略数据设置
            ]
        }
    }
}
</script>

每日赛况

DailySchedule.vue 引用Menu.vue设置导航栏，引用DayButtons.vue设置选择日期的按钮，引用Day1.vue显示比赛信息。

<div class="background">
    <img src="static\pic\p1.jpg" width="100%" height="100%" alt="" />
</div>
<div id="menu"><Menu/></div>
<div id="content">
    <div id="btn"><DayButtons/></div>
    <div id="day"><Day1/></div>
</div>

<script>
    import Menu from '../components/Menu'
    import DayButtons from '../components/DayButtons'
    import Day1 from '../components/Day1'
    export default {
        components: { Menu,DayButtons,Day1},
    }
</script>

DayButtons.vue 用列表的形式设置按钮，并为每个按钮添加点击事件。

<div class="buttons">
    <ul>
        <li><svg @click="turnleft" t="1679453034319" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4747" width="200" height="200"><path d="M512 64C265.6 64 64 265.6 64 512s201.6 448 448 448 448-201.6 448-448S758.4 64 512 64z m0 852c-222.2 0-404-181.8-404-404s181.8-404 404-404 404 181.8 404 404-181.8 404-404 404z" p-id="4748" data-spm-anchor-id="a313x.7781069.0.i30" class="selected" fill="#ffffff"></path><path d="M418 512l179.6-179.6c8.6-8.6 8.6-22.5 0-31.1s-22.5-8.6-31.1 0L371.3 496.4c-8.6 8.6-8.6 22.5 0 31.1l195.2 195.2c8.6 8.6 22.5 8.6 31.1 0 8.6-8.6 8.6-22.5 0-31.1L418 512z" p-id="4749" data-spm-anchor-id="a313x.7781069.0.i29" class="" fill="#1296db"></path></svg></li>
        <li><button @click="day1">Q1</button></li>
        <li><button @click="day1">Q2</button></li>
        <li><button @click="day1">Q3</button></li>
        <li><button @click="day1">Q4</button></li>
        <li><button @click="day1">Day1</button></li>
        <li><button @click="day1">Day2</button></li>
        <li><button @click="day1">Day3</button></li>
        <li><button @click="day1">Day4</button></li>
        <li><button @click="day1">Day5</button></li>
        <li><button @click="day1">Day6</button></li>
        <li><button @click="day1">Day7</button></li>
        <li><button @click="day1">Day8</button></li>
        <li><button @click="day1">Day9</button></li>
        <li><svg @click="turnright" t="1679453283680" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7230" width="200" height="200"><path d="M512 960C265.6 960 64 758.4 64 512S265.6 64 512 64s448 201.6 448 448-201.6 448-448 448z m0-852c-222.2 0-404 181.8-404 404s181.8 404 404 404 404-181.8 404-404-181.8-404-404-404z" p-id="7231" data-spm-anchor-id="a313x.7781069.0.i44" class="" fill="#ffffff"></path><path d="M652.7 496.4L457.6 301.3c-8.6-8.6-22.5-8.6-31.1 0s-8.6 22.5 0 31.1L606 512 426.4 691.6c-8.6 8.6-8.6 22.5 0 31.1 8.6 8.6 22.5 8.6 31.1 0l195.2-195.2c8.6-8.5 8.6-22.5 0-31.1z" p-id="7232" data-spm-anchor-id="a313x.7781069.0.i43" class="selected" fill="#1296db"></path></svg></li>
    </ul>
</div>

详细赛况

DetailedMatchSituation.vue 引用Menu.vue设置导航栏，用table设置详细赛况。

晋级图

PromotionChart.vue 引用Menu.vue设置导航栏，引用Element的el-card卡片以及水平分割线el-divider、竖直分割线el-divider。用按钮实现PromotionChart与PromotionChart2之间的跳转。

<!--晋级图卡片示例-->
<el-card class="box-card" id="box1">
    <div class="text item">
        <img id="pic" src="static\pic\1.svg">
        {{ 'Y.Nishioka 31&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp; 0&nbsp; 0&nbsp; 6' }}
    </div>
    <div class="text item">
        <img id="pic" src="static\pic\29.svg">
        {{ 'K.Khachanov 18&emsp;&emsp;&nbsp;&nbsp;&nbsp;&nbsp;' }}
        <svg id="ppic" t="1679571569124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8887" width="200" height="200"><path d="M997.888 70.144C686.592 261.12 460.8 502.272 358.912 623.104L110.08 428.032 0 516.608l429.568 437.248C503.296 764.416 737.792 394.24 1024 131.072l-26.112-60.928m0 0z" p-id="8888" fill="#1296db"></path></svg>
        {{ '6&nbsp; 6&nbsp; 7' }}
    </div>
</el-card>

<!--横线示例-->
<div>
    <el-divider id="line1"></el-divider>
    <el-divider id="line2"></el-divider>
    <el-divider id="line3"></el-divider>
    <el-divider id="line4"></el-divider>
    <el-divider id="line5"></el-divider>
    <el-divider id="line6"></el-divider>
    <el-divider id="line7"></el-divider>
    <el-divider id="line8"></el-divider>
</div>

<!--竖线示例-->
<div>
    <el-divider direction="vertical" id="vline1"></el-divider>
    <el-divider direction="vertical" id="vline2"></el-divider>
    <el-divider direction="vertical" id="vline3"></el-divider>
    <el-divider direction="vertical" id="vline4"></el-divider>
</div>

了解更多

LearnMore.vue 引用Menu.vue设置导航栏，引用Element带图片的卡片。

<!--示例-->
<el-row>
    <el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 2 : 0">
        <el-card :body-style="{ padding: '0px' }">
            <img src="static\pic\learn1.jpg" class="image">
            <div style="padding: 14px;">
                <b>澳网公开赛百度百科</b>
                <a target="_blank" href="https://baike.baidu.com/item/%E6%BE%B3%E5%A4%A7%E5%88%A9%E4%BA%9A%E7%BD%91%E7%90%83%E5%85%AC%E5%BC%80%E8%B5%9B/1212603?fr=aladdin">
                    <svg t="1679592427699" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2757" width="20" height="20"><path d="M121.964897 709.911936a416.481669 416.481669 0 1 1 589.035039 0 416.737493 416.737493 0 0 1-589.035039 0z m497.577915-498.857036a287.802136 287.802136 0 1 0 0 407.463868 287.802136 287.802136 0 0 0 0-407.463868z m405.481232 696.289301l-117.039535 116.655799L704.604333 831.428393l127.91206-127.91206z" fill="#7ec1e4" p-id="2758"></path></svg>
                </a>
            </div>
        </el-card>
    </el-col>
</el-row>

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
  
.clearfix:after {
    clear: both
}

七、关于结对开发项目

1. 心路历程及收获

邵菀姿：通过这次的结对合作，我体会到了线下沟通的重要性，线下沟通能够很好的提升沟通的效率，又能够使问题得到及时的反馈。

崔玉玲：结对之前很怕因为自己爱拖拖拉拉导致作业写不完，但是发现有队友之后会增加我对作业的积极性。在这次结对中，我学会使用原型设计软件来做原型设计，也对vue框架有了更多的了解，也发现了分工合作会提高作业效率。

2. 评价队友

邵菀姿：崔玉玲同学认真负责，会及时沟通，主动分配任务，行动力强，让我感受到了团队合作的优势。

~~（插播一张cyl同学熬夜敲代码图）~~

崔玉玲：因为跟邵菀姿同学在一个宿舍，所以我们的线下交流会很方便，在我有不懂或者出现bug的时候，她会帮助我解决问题，在我犯懒的时候也会督促我写作业。

...全文

113 回复打赏收藏转发到动态举报

写回复

用AI写文章

切换为时间正序

请发表友善的回复…

发表回复

AJAX——新手快车道前言 AJAX是什么？首先、AJAX是一种很酷的技术，一旦采用了AJAX，就能让你的Web页面，你的网站，甚至连同你们公司，都变得很酷。在Web2.0的时代里，不使用一点 AJAX技术的网站，就会显得很老土，很落伍。但是，这样的理解，其实是很肤浅的。仅仅是从一个外行，从一个使用者的角度出发，来理解AJAX，就像我在本书的第一章AJAX我也行中那样，开发出很愚蠢，甚至都没有资格被称之为AJAX应用的纯IE、XMLHTTP应用。 AJAX更酷的一点在于，对于传统的Web开发人员来说，AJAX所运用的，是更加先进的，更加标准化的，更加和谐高效的，完整的Web开发技术体系。遵循这样的体系开发Web应用，能让你的开发过程变得更加轻松，也能使你们的开发团队，显得很酷。在Web2.0 的时代里，还在采用过时的技术来开发 Web，会显得很老土，很落伍。 AJAX的相关组成技术，每一个都已经出现了N年以上了，对这些技术的组合运用，也远远早于AJAX这个名词出现之前。所以，我真正敬佩的，并非提出 AJAX这个缩写的Jesse James Garrett。而是那些早在N年以前，就已经在探索、实践的先行者，他们始终在追求的：是更好的用户体验，以及更好的开发体验。这样的精神，才是最可宝贵的，也是最值得我们学习的。许多年过去以后，当我们再回头来看当年的这些热门技术，也许早已经变得老土，变得落伍了。在这样的历程中，哪些人会成长为高手？会成长为大师呢？就是那些永不满足，永远在追求更好的用户体验，永远在追求更好的开发体验的人！新手如何上路软件开发这个领域，永远都在飞速发展，大家都必须不断的学习新的知识、技能、框架、IDE、甚至新的语言。传说中的骨灰级高手们，就像传说中的大侠，任何武器、哪怕是一块木头到了他们手里，也能发挥惊人的威力，人家练了几十年的看家本领，他们随手使来，也竟然像是打娘胎里就开始练了一样。为什么？就算不吹那么玄的，平常我们能够碰到的那些老手，在学新东西的时候，也比那些新手学得更快，理解得更深，运用得更熟练。而新手们呢？往往就会漫无头绪，焦头烂额，以一副张着茫然的大眼睛的经典表情，出现在各大论坛的新手求助区里。他们欠缺的，究竟是什么呢？为什么老手学新东西，就没遇到那么多困难呢？泛泛地说，自然是经验上的欠缺。仔细地说来，又可以分为三个方面：一、本质，一种技术与另一种技术之间，往往会有本质上的相通之处，当你对一种技术的理解与思考越来越深入时，学习一种新技术也会更加容易。触类旁通，举一反三的能力，就是来自于对于技术本质的追寻。二、地图，本质上或多或少的相通，也提示着我们技术之间的相互关联，当你了解的技术越多，了解得越是深入，在你的内心，就能建立起越发清晰的技术地图。各种知识都有一个自然、合理的位置。那么当一个老手要学习一门新技术的时候，他其实并非在探索一个全新的、未知的领域，而是有很多脉络可寻，也很多已知可以帮助他们快速了解未知。三、技巧，面对同样的未知，面对同样的难题，新手们一筹莫展，而老手们却掌握着更多的技巧和手段，帮助他们试探可能性、缩小问题的范围、迅速定位问题、不犯明显愚蠢的错误、甚至能够列举出更具命中力的搜索关键词，而这些技巧，都帮助老手在前进的道路上，更少跌倒，即使跌倒，也能更快的爬起来。作为一本写给新手的入门书籍，我们希望展现给读者的，是一个老手如何学习新技术的过程。我们相信，这样的一个学习过程，对于新手来说，是更具有价值的。何谓快车道必须老老实实的承认，我吹牛了！老手虽然会比新手学习得更快一些，但是也同样会碰到麻烦，遇到障碍，感觉头痛。如果没有真正的专家的指导，我不可能如此迅速地将AJAX掌握到目前这样的程度，要真是让我自学三个月，然后就写出书来的话，那真是在骗钱了。老手能够快速学习的另一个重要的诀窍是：认识很多牛人朋友 如果没有李锟与赵泽欣的专家级指导与帮助，如果没有与李锟AJAX结对编程的体验，如果没有三个人在MSN上无数次的长聊，我想要在短期内建立起：对于AJAX本质的理解；对于整个AJAX以及相关技术地图的理解；对于AJAX编程开发所需要的很多技巧、手段的掌握；几乎是不可能的。如果没有（N多需要感谢的人）的（N多方面的帮助），我们这本书，也不可能以现在这样的深度，以（N个月）内完成的速度，送到读者的面前。希望这本书，能够对大家快速学习AJAX，有所帮助。

软件工程综合实践专题第二次作业———结对编程学习了软件工程综合实践专题这门课程，懂得了结对编程是指两个人一起，用一台电脑，鼠标，键盘的一种编程方式。王文娟老师在课后留下了一道随机出三百道四则运算的题目并要求采用结对编程的方式和搭档共同完成在这次的编程过程中，我和我的搭档第一次接触并采用结对编程的这种编程模式，也就是两个人同时在一台电脑上进行编程，下面是我们写出的代码以及一些在这个过程中...

然后一次设计选手信息，每日赛况、详细赛况、奖牌榜和了解更多的部分，同样是按照之前设计的模板来进行排版设计和功能设计，其中所需要的数据都是从助教给的网站上的数据手打下来的。首先进入网站的首页，页首是导航栏，可以点击跳转到对应的部分，一共有五个部分，分别是首页，选手信息，每日赛况、详细赛况、奖牌榜和了解更多。这部分主要就是赛事信息的下展菜单的实现重要，在js中用表格的方式展开信息，并把它们封装到一个函数（toggleDropdown）里，触发点击事件的时候调用这个函数实现下展的功能。选手的详细信息如上图所示。

2008-中国大数据金融信息服务业发展趋势与挑战.docx

我国工业自动化行业细分领域负重前行国产替代进程持续推进.docx

软件工程-23年春季学期

586

社区成员

874

社区内容

发帖

与我相关

我的任务

软件工程高校

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章

结对第二次作业——编程实现

目录

一、GitCode仓库地址

二、项目访问链接

三、项目展示

主页

选手排名

每日赛程

详细赛况

晋级图

了解更多

四、过程描述

1、设计实现过程

2、功能结构图

五、 PSP表格

六、关键代码

主页

选手排名

每日赛况

详细赛况

晋级图

了解更多

七、关于结对开发项目

1. 心路历程及收获

2. 评价队友