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

222100118赵大伟 2024-03-26 18:03:11

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第二次作业--编程实现
结对学号	222100118 222100121
这个作业的目标	采用web技术来实现原型中的功能
其他参考文献	《构建之法》、vue3文档

1. Gitcode仓库地址和代码规范链接

1.1 Gitcode仓库地址

仓库链接

1.2 代码规范链接

地址

2. PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	30
• Estimate	• 估计这个任务需要多少时间	30	30
Development	开发	1520	1640
• Analysis	• 需求分析 (包括学习新技术）	500	540
• Design Spec	• 生成设计文档	60	40
• Design Review	• 设计复审	60	40
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	20	30
• Design	• 具体设计	80	180
• Coding	• 具体编码	300	360
• Code Review	• 代码复审	60	50
• Test	• 测试（自我测试，修改代码，提交修改）	240	300
Reporting	报告	110	105
• Test Repor	• 测试报告	100	120
• Size Measurement	• 计算工作量	20	15
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	30	30
	合计	1700	1835

3. 成品展示

3.1 网页链接

世界游泳锦标赛

3.2 网页展示

网页整体采用了绿色和蓝色的配色，网页简约直观

主页导航栏跳转效果

通过点击导航栏来切换到对应的页面
主页轮播图切换效果

主页的轮播图
主页布局展示

主页分为三个部分，分别是轮播图、直击现场和拼搏奋斗
主页跳转展示

在拼搏奋斗部分可以通过点击图片跳转到选手信息、赛程安排和详细赛况页面
选手信息页面布局展示

选手信息页面由两部分组成，第一部分展示选手比赛时的照片，通过点击查看详细，可以下滑跳转到第二部分选手排名。

选手排名列表展示

选手排名列表显示各国选手的具体排名和比赛成绩，并支持下滑查看
赛事安排页面布局展示

赛事安排界面也分为两个部分，第一个部分展示选手比赛时照片，第二部分是比赛的具体安排，通过两个下拉选择器，分别选择全部比赛或者决赛，以及具体的比赛日期。
详细赛况布局展示

详细赛况分为三个部分，第一个部分是通过搜索框输入文字搜索比赛，第二个部分展示比赛的热点新闻，第三个比分展示比赛的精彩时刻照片

4. 结对讨论过程描述

在这里插入图片描述

5. 设计实现过程

5.1 功能结构图

在这里插入图片描述

5.2 设计实现过程

分析作业要求发现后端没有什么必要（第一次作业都已经知道对应数据的api了，再写个后端也是纯粹的再转发一遍），于是打算仅使用前端技术实现，我们使用vue框架完成界面的搭建，网页主体分为三部分，页眉、页面以及页脚，页面间的跳转使用路由跳转到组件，让用户跳转页面时拥有更好的体验。组件库使用Element Plus，配合vue3向用户展现更加丰富的页面。

6. 代码说明

下面是主体部分，虽然简短但非常好的体现了一个页面的架构：

<template>
    <div class="common-layout" >
        <el-container style="background-image: linear-gradient(to bottom right, #34d89f, #209bdd);">
            <el-header style="height: 20px;margin-top: 10px">
                <div style="height: 100vh;overflow: hidden;display: flex">
                    <h1 style="flex: 1;text-align: right;color: dodgerblue;margin-top: 10px" ><el-icon><StarFilled /></el-icon>世界游泳锦标赛<el-icon><StarFilled /></el-icon></h1>
                    <nav style="width: 1100px;z-index: 1;margin-top: 10px;text-align: center">
                        <el-button style="width: 70px" @click="router.push('/')" type="success">首页</el-button>
                        <el-button style="width: 70px" @click="router.push('/about')" type="success">选手信息</el-button>
                        <el-button style="width: 70px" @click="router.push('/course')" type="success">赛程安排</el-button>
                        <el-button style="width: 70px" @click="router.push('/situation')" type="success">详细赛况</el-button>
                    </nav>
                </div>
            </el-header>
            <el-main style="">
                <router-view v-slot="{ Component }">
                    <transition mode="out-in" name="el-fade-in-linear">
                        <component :is="Component" />
                    </transition>
                </router-view>
            </el-main>
            <el-footer style="height: 140px">
                <el-divider>
                    <span style="color: grey;font-size: 0"></span>
                </el-divider>
                <div style="overflow: hidden;display: flex">
                    <div style="flex: 1;text-align: right;color: dodgerblue;margin-top: 0" >
                        <el-text>2024软工5组</el-text><el-icon style="font-size: 50px;text-align: right;margin-top: 20px"><Trophy /></el-icon>
                    </div>
                    <div style="width: 1100px;margin-top: 10px;text-align: center">
                        <el-text style="font-size: 20px">关于我们</el-text>
                        <div>
                            <el-text>222100118,222100121</el-text>
                        </div>
                        <el-text style="font-size: 15px;color: black;text-align: right">隐私政策&nbsp服务条款&nbspCookie设置</el-text>
                    </div>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

下面是配置的路由部分：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path:'/',
      name:'home',
      component:()=>import('@/components/home.vue')
    },
    {
      path:'/about',
      name:'about',
      component:()=>import('@/components/about.vue')
    },
    {
      path:'/course',
      name:'course',
      component:()=>import('@/components/course.vue')
    },
    {
      path:'/situation',
      name:'situation',
      component:()=>import('@/components/situation.vue')
    }

  ]
})