122
社区成员
发帖
与我相关
我的任务
分享结对第二次作业——编程实现
| 这个作业属于哪个课程 | 2302软件工程 |
|---|---|
| 这个作业要求在哪里 | [结对第二次作业-编程实现] |
| 结对学号 | <222100327 222100329> |
| 这个作业的目标 | 实现上次作业中原型，构建网站。 |
| 其他参考文献 | 《构建之法》 |
目录
- 1. Gitcode仓库链接和代码规范链接
- 1.1 Gitcode仓库链接
- 1.2 代码规范链接
- 2. PSP表格
- 3. 成品展示
- 4. 重点页面设计代码解析
- 1.赛程页面设计
- 2.运动员页面设计
- 5. 心路历程和收获
- 222100327同学
- 222100327同学
1. Gitcode仓库链接和代码规范链接
1.1 Gitcode仓库链接
1.2 代码规范链接
2. PSP表格
| PSP | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 30 | 30 |
| • Estimate | • 估计这个任务需要多少时间 | 30 | 30 |
| Development | 开发 | 1560 | 1590 |
| • Analysis | • 需求分析 (包括学习新技术) | 300 | 400 |
| • Design Spec | • 生成设计文档 | 60 | 100 |
| • Design Review | • 设计复审 | 30 | 40 |
| • Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 30 | 60 |
| • Design | • 具体设计 | 30 | 60 |
| • Coding | • 具体编码 | 1050 | 720 |
| • Code Review | • 代码复审 | 10 | 30 |
| • Test | • 测试（接口测试，修改代码，提交修改） | 100 | 90 |
| Reporting | 报告 | 100 | 210 |
| • Test and use Repor | • 接口、使用报告 | 60 | 220 |
| • Size Measurement | • 计算工作量 | 30 | 20 |
| • Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 20 | 20 |
| 合计 | 1700 | 1980 |
3. 成品展示
云端链接
首页
页面顶部的header是一个导航栏nav，链接到各个页面。在header和nav之间有一个突出显示欢迎信息的div。页面主体有一个容器div，内含轮播图slide，展示多个项目item，每个项目有背景图片和描述信息。采用响应式布局，确保在不同屏幕大小下的良好适应性。
选手信息
页面顶部包括带有logo的标题栏，以及默认隐藏的导航栏。运动员信息展示分为标题部分和以列表形式呈现的数据。页面以蓝色和白色为主色调，采用简洁明了的布局，灵活运用flex布局和斑马线效果以提升视觉体验，每位运动员的国家、姓名、性别和出生日期。
每日赛况
包括排名、国家代码、姓名、年龄、总积分、距离领先积分。整体布局清晰，赛程内容按日期分组，包括比赛类型、进行阶段、比赛时间等信息，并提供了查看详情按钮。设计使用户能轻松浏览每日赛程和选择日期查看相关内容。
奖牌榜
使用echarts库创建奖牌榜图表，图表以柱状图形式展示各国金牌、银牌、铜牌数据。
4. 重点页面设计代码解析
1.赛程页面设计
1.页面包括一个顶部的header和一个包含导航链接的nav。
2.导航链接指向不同的页面，如首页、选手信息、每日赛况等。
3.页面主体部分包括一个标题为"Schedual"的div，以及一个用于选择日期的按钮组。
4.点击日期按钮可以显示对应日期的赛程信息。
5.赛程信息以卡片形式展示，包括比赛类型、进行阶段、比赛时间等。
6.用户可以点击卡片上的按钮查看详细赛况。
7.页面加载时，通过监听鼠标悬停在标题上来显示或隐藏导航栏。
<template>
<!-- 页面顶部的header和导航栏 -->
<header>
<img src="../assets/logo.png" alt="Logo" class="small-logo">
<h1 id="tournament">TOURNAMENT</h1>
</header>
<nav>
<!-- 导航链接 -->
<a href="FirstPage">首页</a>
<a href="AthletesPage">选手信息</a>
<a href="SchedualPage" style="text-shadow: 2px 2px 4px #9ec4ec;">每日赛况</a>
<a href="MedalPage">奖牌榜</a>
<a href="MorePage">了解更多</a>
</nav>
<!-- 赛程信息展示部分 -->
<div id="Schedual">
<h2>Schedual</h2>
<!-- 日期选择按钮组 -->
<el-row class="buttonGroup">
<!-- 点击按钮可显示对应日期的赛程信息 -->
<el-button v-for="day in days" :key="day" @click="setMessage(day)" :class="{ 'clickedButton': message === day }">{{ day }}</el-button>
</el-row>
<!-- 赛程信息卡片展示区域 -->
<div class="mainContent">
<el-card v-for="item in content" :key="item.id" class="box-card">
<strong>{{ item.type }}</strong>
<span>{{ item.time }}</span>
<span>{{ item.play }}</span>
<!-- 点击按钮跳转到详细赛况页面 -->
<el-button @click="toDetails(item)">查看详情</el-button>
</el-card>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
name: "SchedulePage",
setup() {
const message = ref(null);
// 监听鼠标悬停在标题上来显示或隐藏导航栏
onMounted(() => {
const tournament = document.getElementById("tournament");
const nav = document.querySelector("nav");
tournament.addEventListener("mouseover", function() {
nav.style.display = "block";
nav.addEventListener("mouseover", function() {
nav.style.display = "block";
});
nav.addEventListener("mouseout", function() {
nav.style.display = "none";
});
});
tournament.addEventListener("mouseout", function() {
nav.style.display = "none";
});
});
// 根据选择的日期显示对应的赛程信息
const setMessage = (value) => {
message.value = value;
};
// 跳转到详细赛况页面
const toDetails = (panel) => {
localStorage.setItem('detailType', panel.type);
localStorage.setItem('detailPlay', panel.play);
this.$router.push({ name: 'DetailsPage' });
};
return {
message,
setMessage,
toDetails
};
}
}
</script>
2.运动员页面设计
8.页面顶部有一个带有Logo和标题的header，Logo是一个图片，标题为"TOURNAMENT"。
9.导航栏包含几个链接，分别指向不同的页面，但默认是隐藏的。
10.页面主体部分展示了运动员信息，包括一个标题"H2"和一个运动员信息列表。
11.运动员信息列表中包含运动员的国家、姓名、性别和出生日期等信息。
12.页面加载时会异步获取运动员信息的JSON数据，并将数据展示在页面上。
13.通过鼠标悬停在标题上时，导航栏会显示，移出时导航栏隐藏。
<template>
<header>
<img src="../assets/logo.png" alt="Logo" class="small-logo">
<h1 id="tournament">TOURNAMENT</h1>
</header>
<nav style="display: none;">
<a href="FirstPage">首页</a>
<a href="AthletesPage" style="text-shadow: 2px 2px 4px #9ec4ec;">选手信息</a>
<a href="SchedualPage">每日赛况</a>
<a href="MedalPage">奖牌榜</a>
<a href="MorePage">了解更多</a>
</nav>
<div id="Athletes">
<h2>Athletes</h2>
</div>
<div id="message">
<ul id="athletesList">
<li class="header">
<div>Country</div>
<div>Athlete</div>
<div>Gender</div>
<div>DOB</div>
</li>
<li v-for="(athlete, index) in athletes" :key="index">
<div>{{ athlete.country }}</div>
<div>{{ athlete.fullName }}</div>
<div>{{ athlete.gender }}</div>
<div>{{ athlete.dob }}</div>
</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const athletes = ref([]);
onMounted(() => {
// 数据获取逻辑，异步获取运动员信息并填充到运动员列表中
fetch('/athletes.json')
.then(response => response.json())
.then(data => {
// 处理JSON数据并填充到运动员列表中
})
.catch(error => {
console.error('Failed to fetch JSON:', error);
});
});
</script>
5. 心路历程和收获
222100327同学
通过本次软件开发项目，我们深刻认识到了技术框架的价值和团队合作的重要性。框架的运用大大提升了项目开发的效率，但也暴露了我们在框架理解和掌握方面的不足。我们意识到需要持续学习和提升专业素养，以更好地适应技术的发展。另外，团队合作中的沟通与协作也是关键，它们决定了项目的成败。因此，我们将更加注重团队间的沟通与合作，以期在未来的项目中取得更好的成果。这次经历让我们深刻明白，软件工程是一项持续不断学习和改进的过程，而每一次实践都是宝贵的经验，我们将不断努力前行，成为更优秀的软件工程师。
222100327同学
在这次软件开发项目中，我们领略到了技术框架的威力和团队合作的重要性。框架的应用极大地提高了项目开发的效率，但也暴露了我们在框架理解和掌握方面的不足之处。因此，我们意识到需要持续不断地学习和提升自己的专业水平，以更好地应对未来的挑战。同时，团队合作的成功离不开有效的沟通和协作，这是确保项目顺利进行的关键。通过这次实践，我们吸取了宝贵的经验教训，明白了自身的不足之处，也更加坚定了自己不断进步的决心。
...全文
请发表友善的回复…
发表回复
