软件工程第二次结对作业

最新推荐文章于 2024-06-16 06:32:35 发布

OZLIINEX

最新推荐文章于 2024-06-16 06:32:35 发布

阅读量974

点赞数 24

文章标签：软件工程

本文链接：https://blog.csdn.net/ozline/article/details/137029511

版权

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	软件工程第二次结对作业
这个作业的目标	完成世界跳水锦标赛的部分功能设计
其他参考文献	无

仓库相关

OZLIINEX / pair-project · GitCode

其中包含源代码和设计代码

PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Estimate	• 估计这个任务需要多少时间	10	14
• Analysis	• 需求分析（包括学习新技术）	120	100
• Design Spec	• 代码分工	60	30
• Design Review	• 代码实现	480	273
• Design	• 代码改进	30	15
• Test Report	• 报告	120	150
• Size Measurement	• 计算工作量	30	50
• Postmortem & Process Improvement Plan	• 事后总结，并提出改进计划	60	70
	合计	910	693

结对讨论过程

我们首先在宿舍内进行分工讨论，具体流程为（假设052106112 为 A，052106114 为 B）

A 进行代码基建构建
B 设计数据图
A 进行代码开发
B 进行代码审核
A 进行代码复审

之后二人合并提交代码，并发起 pr 请求

由于我们是舍友，实际上我们也进行了多次深夜讨论（这和我们第一次原型设计是类似的），在白天，由于准备面试和考研的原因，我们分居异地，但我们借助聊天软件继续进行坦率的沟通交流

设计实现过程

我们使用纯前端来实现该项目，我们尽量剔除了不必要的信息与数据（因为我们很菜）

选手信息

每日赛况

详细赛况

奖牌榜

代码说明

使用 Bootstrap5 显示 navbar

    <nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-secondary">
        <div class="container-fluid justify-content-center">
            <a class="nav-link text-white" href="players.html">选手信息</a>
            <a class="nav-link text-white" href="daily.html">每日赛况</a>
            <a class="nav-link text-white" href="details.html">详细赛况</a>
            <a class="nav-link text-white" href="modals.html">奖牌榜</a>
        </div>
    </nav>

我们通过 bootstrap5 的样式将 navbar 整合到页面底部，并进行优化

同时我们使用了部分的 Vue 特性，具体代码如下

<script src="js/players.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        athletes: []
    },
    mounted() {
        this.athletes = loadAthletes(athleteData);
    }
});
</script>

其中我们将 loadAthletes 引用改到 js/players.js中，以实现动态加载

以下是一个较为完整的页面图

<!DOCTYPE html>
<html>
<head>
    <title>Athletes Information</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/players.css">
</head>
<body>

<div id="app">
    <nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-secondary">
        <div class="container-fluid justify-content-center">
            <a class="nav-link text-white" href="players.html">选手信息</a>
            <a class="nav-link text-white" href="daily.html">每日赛况</a>
            <a class="nav-link text-white" href="details.html">详细赛况</a>
            <a class="nav-link text-white" href="modals.html">奖牌榜</a>
        </div>
    </nav>

    <div class="container"></div>

    <table border="1">
        <tr>
            <th>Country</th>
            <th>Athlete</th>
            <th>Gender</th>
            <th>DOB</th>
            <th>Discipline</th>
        </tr>

        <tr v-for="athlete in athletes">
            <td>{{ athlete.country }}</td>
            <td>{{ athlete.name }}</td>
            <td>{{ athlete.gender }}</td>
            <td>{{ athlete.dob }}</td>
            <td>{{ athlete.discipline }}</td>
        </tr>
    </table>
</div>

<script src="js/players.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        athletes: []
    },
    mounted() {
        this.athletes = loadAthletes(athleteData);
    }
});
</script>

</body>
</html>

在代码设计上，项目遵循标准的前端项目三件套拆分

心路历程和收获

对于两个人的分工而言，实际上困难在于安排任务，我们没有一个良好的前端设计基础（都是偏AI 和服务端的同学），因此我们降低了我们的预期——直接完成 4 个页面的设计即可，在页面设计上，我们也借助了 bootstrap5 的特性

实际上在整个设计过程中，十分考验我们的团队配合，我们需要从零开始（有点夸张）学习前端内容，同时借助简易的 vue 工具来实现界面设计与交互，一周的时间对于我们两位来说是比较短暂的，因此我们这个项目在匆忙之中落幕，但是紧张的开发过程也令我们收获不少，我们简单的入门了 vue，同时解决了一定的数据处理难题（在数据处理部分，我们也在线下和其他同学进行沟通，对方提供了数据的处理样本和方式）

或许在未来，我们团队的两人可以变成全栈选手，希望在未来可以继续脚踏实地，认真的学习

评价结对队友

052106112 林黄骁：代码开发负责认真，具有分歧时妥善的解决分歧，坦率沟通、坦诚相待，认真讨论解决问题的途径，并将问题落实解决

052106114 杨必烨：数据搜集负责认真，同时提供了相较于之前更加完善的原型图，快速的解决问题，同时可以协助林黄骁进行代码开发工作

OZLIINEX

关注

24
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
0
评论
软件工程第二次结对作业

实际上在整个设计过程中，十分考验我们的团队配合，我们需要从零开始（有点夸张）学习前端内容，同时借助简易的 vue 工具来实现界面设计与交互，一周的时间对于我们两位来说是比较短暂的，因此我们这个项目在匆忙之中落幕，但是紧张的开发过程也令我们收获不少，我们简单的入门了 vue，同时解决了一定的数据处理难题（在数据处理部分，我们也在线下和其他同学进行沟通，对方提供了数据的处理样本和方式），因此我们降低了我们的预期——直接完成 4 个页面的设计即可，在页面设计上，我们也借助了 bootstrap5 的特性。
复制链接

扫一扫