软件工程实践结对作业二

021900521林俊杰 学生 2022-03-26 20:22:18
这个作业属于哪个课程2022年福大-软件工程;软件工程实践-W班
这个作业要求在哪里作业要求
这个作业的目标实现结对作业一原型设计对应的网页
结对学号021900521 221900214
其他参考文献见博客末尾

目录

  • 目录
  • 一、 项目地址
  • 1.1 Gitcode仓库地址
  • 1.2 服务器链接
  • 1.3 代码规范链接
  • 二、 PSP表格&效能分析
  • 2.1 PSP表格
  • 2.2 效能分析
  • 三、成果展示
  • 导航栏
  • 奖牌地图
  • 奖牌总榜
  • 赛程
  • 关于冬奥
  • 四、 结对讨论过程描述
  • 讨论过程截图
  • 四、设计思路
  • 数据库设计
  • schedule表
  • total表
  • 五、 关键代码
  • 奖牌地图
  • 奖牌总榜
  • 每日赛程
  • 关于冬奥
  • 六、 队友互评
  • 七、 心得体会
  • 八、 参考文献

一、 项目地址

1.1 Gitcode仓库地址

PairProject of 021900521_221900214

1.2 服务器链接

the Olympic Winter Games Being 2022

1.3 代码规范链接

本项目 php 代码规范

二、 PSP表格&效能分析

2.1 PSP表格

PSPPersonal Software Process Stages预估消耗时间（分钟）实际消耗时间（分钟）
计划Planning
•估计这个任务需要多久•Estimate1012
开发Development
•需求分析•Analysis1015
•制定代码规范•Deciding Code Style1520
•素材获取•Material acquisition2040
•复习Yii框架及php语法•Previous Improving6090
•编写代码•Coding12001700
•完善及改进•Improve and perfect220400
•撰写报告•Reporting6075
•计算工作量•Workload calculation57
•总结•Summary2030
总计16202389

2.2 效能分析

与预期的时间相比，实际付出的时间还是比较多的，并且其实编码时间还要近似的乘二。分析个中原因主要是因为我们两人都对使用Yii框架编写网页的方式有错估，并且对php的语法也不够熟悉，在编码进行到一半的时候才意识到Yii主要依赖引入Widget来编写网站，依靠自带的Widget其实能呈现的效果非常有限，但是我们两人的php版本都是php5，在win11上要降级composer又非常的困难，这两者版本的不兼容造成了我们无法轻易引入widget，所以在编写赛程和地图板块时走了很多弯路。总之就是php的基础较为薄弱，对yii2.0框架的运用也不够熟悉，造成了这次项目浪费了较多的时间。

三、成果展示

网站分为四部分：奖牌地图、奖牌榜、赛程赛况、关于冬奥

导航栏

img

奖牌地图

奖牌地图包含世界上所有国家，对于有获奖的国家进行涂色，并按照总奖牌数量多少填涂颜色深浅。

在这里插入图片描述

鼠标移动悬停到有颜色国家时，会进行高亮，并且会显示国家英文名和中文名，以及金牌数，银牌数，铜牌数，还有总数。

img

奖牌总榜

奖牌总榜默认按照排名顺序显示各地区奖牌状况，并进行分页显示
主要包括
排名 国家简称 国旗 国家名 奖牌数 金牌数 银牌数 铜牌数

img

并且可以点击 排名 国家简称 国旗 国家名 奖牌数 金牌数 银牌数 铜牌数按钮
按照对应的选项排序，例如按照总奖牌数排序

img

可以并且可以在 排名 国家简称 国旗 国家名 奖牌数 金牌数 银牌数 铜牌数下的输入框进行相关信息搜索，并且可以组合搜索
例如搜索自己想了解的国家

img

赛程

赛程默认按照时间顺序显示比赛，并进行分页显示
主要包括

在这里插入图片描述

可以进行组合查询搜索

img

.

关于冬奥

有各届冬奥了解链接以及吉祥物，底部有冬奥风采轮播图

点击对应超链接了解冬奥详情

img

四、 结对讨论过程描述

有些讨论比如实现工具方法面对面讨论了就没法截图了

讨论过程截图

在这里插入图片描述


在这里插入图片描述

在这里插入图片描述

因为两个人比较熟了，其它聊天记录口嗨比较多就不截了。

四、设计思路

在这里插入图片描述

前端页面大体设计思路和原型设计时相差无几，并利用Gii生成的CRUD模型来进行页面与数据的交互。

数据库设计

在这里插入图片描述

其中schedule为赛程表，存储赛程信息。total存储奖牌榜信息，migration为系统自动生成的保存版本信息的表，表中字段如下图所示。

schedule表

在这里插入图片描述

total表

在这里插入图片描述

五、 关键代码

我们利用GII生成相应模型类，以及对应模型搜索类，还有基本控制类，以及基本view文件

项目结构

img

奖牌地图

奖牌地图部分引入highchart，得到初步的奖牌地图，
关键代码

img


将 highchart中data赋值为 键为hc-key即为国家两个字母缩写，
值为该国家对应奖牌总数，通过给getTotalCount函数传入三个字母简写进行返回对应总数

img


并且highchart引用world.js并且将js各个国家name属性显示到地图上
通过在world.js中name对字符串值追加各国金银铜，达到显示金银铜牌数的目的

奖牌总榜

设计思路

对于访问index.php?r=total/index的链接
会由TotalController下的 actionIndex()进行接收请求以及传dataProvider数据以及请求参数容器searchModel给view以渲染视图

    public function actionIndex()
    {
        $searchModel = new TotalSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }

view目录下total目录下的index.php文件
利用yii自带GridView小部件用于在网格中显示数据。网格表的列根据 yii\grid\Column 类进行配置，并且会根据$searchModel进行搜索相关数据并进行显示
并且利用 


        'rowOptions'=>function($model){
                if ($model->countryid == 'CHN')
                {
                    aa();
                    return ['style'=>'color:red;'];
                }
                else if (aa() % 2 == 0)
                    return ['style'=>'color:white;'];
                else
                    return ['style'=>'color:#0036a0;'];

        },

将奇数行显示蓝色，偶数行显示白色，并且另外将中国这行高亮显示红色

关键代码

<img src="https://p4.img.cctvpic.com/photoAlbum/page/performance/img/2022/2/20/1645366824272_174.jpg"  height="600" width="1150" />

<div class="total-index">

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            'rank:text:排名',
            'countryid:text:国家简称',
            [
                'label' => '国旗',
                "format"=>'raw',
                'value' => function($model) {
                    return Html::img("https://p1.img.cctvpic.com/sports/data/olympic/teamImg/".$model->countryid.".png",["width"=>"80","height"=>"80"]);
                },
            ],
            'countryname:text:国家名',
            'count:text:奖牌数',
            'gold:text:金牌数',
             'silver:text:银牌数',
             'bronze:text:铜牌数',

        ],

        'rowOptions'=>function($model){
                if ($model->countryid == 'CHN')
                {
                    aa();
                    return ['style'=>'color:red;'];
                }
                else if (aa() % 2 == 0)
                    return ['style'=>'color:white;'];
                else
                    return ['style'=>'color:#0036a0;'];

        },
    ]); ?>
</div>

每日赛程

利用yii2.0的gridView小部件，引入dataProvider和filterModel，编写shedule和scheduleSearch类的逻辑，实现赛程显示，模糊搜索，组合查询等功能。

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
//                ['class' => 'yii\grid\SerialColumn'],

            ['attribute'=>'startdatecn',
                'label'=>'时间',

             'filter'=>\common\models\Schedule::getDate(),
            ],

            ['attribute'=>'itemcodename',
                'label'=>'大项',
              'filter' =>\common\models\Schedule::findBySql("select distinct itemcodename from schedule")
                  ->indexBy('itemcodename')
                ->column(),
            ],


            ['attribute'=>'title',
                'label'=> '比赛',
                'value' => function ($query=array()) {
                    if ($query->homename != null)
                        return "{$query->title} {$query->homename}  VS  {$query->awayname}";
                    return $query->title;
                },
                'filter' =>\common\models\Schedule::findBySql("select distinct title from schedule")
                    ->indexBy('title')
                    ->column(),

            ],

            ['attribute'=>'venuename',
                'label'=> '场馆',
                'filter' =>\common\models\Schedule::findBySql("select distinct venuename from schedule")
                    ->indexBy('venuename')
                    ->column(),
            ],

        ],

    ]); ?>

ScheduleSearch的Search方法

 public function search($params)
    {
        $query = Schedule::find();

        // add conditions that should always apply here

        $dataProvider = new ActiveDataProvider([
            'query' => $query,
        ]);

        $this->load($params);

        if (!$this->validate()) {
            
            // $query->where('0=1');
            return $dataProvider;
        }

        // grid filtering conditions
        $query->andFilterWhere([
            'startdatecn' => $this->startdatecn,
        ]);

        $query->andFilterWhere(['like', 'id', $this->id])
            ->andFilterWhere(['like', 'itemcodename', $this->itemcodename])
            ->andFilterWhere(['like', 'title', $this->title])
            ->andFilterWhere(['like', 'venuename', $this->venuename])
            ->andFilterWhere(['like', 'homename', $this->homename])
            ->andFilterWhere(['like', 'awayname', $this->awayname])
            ->andFilterWhere(['like', 'homescore', $this->homescore])
            ->andFilterWhere(['like', 'awayscore', $this->awayscore]);

        return $dataProvider;
    }

Schedule类的getData方法

public static function getDate(){
        $dates = Schedule::find()
           ->select(['DATE_FORMAT(startdatecn,"%d日%H:%i")'])
            //->select("startdatecn")
            ->from('schedule')
            ->distinct()
            ->indexBy("startdatecn")
           ->orderBy(['startdatecn' => SORT_ASC])
            ->column();
        return $dates;
    }

关于冬奥

这个页面其实就与php没什么关系了，基本可以说是纯html/css页面

<!-- 其中一个简介的样式-->
<button class="date0">
    <img class="data_logo0" src="../../image/2022panda.png" height="100px" width="100px"/>
    <div class="introduction0">
        <div class="introduction_title0" >
            <a href="https://baike.baidu.com/item/2022%E5%B9%B4%E5%8C%97%E4%BA%AC%E5%86%AC%E5%AD%A3%E5%A5%A5%E8%BF%90%E4%BC%9A/12061628?fromtitle=2022%E5%86%AC%E5%A5%A5%E4%BC%9A&fromid=22749318&fr=aladdin" target="_blank">2022北京冬奥会</a>
        </div>
        <div class="introduction_img0">
            <a href="https://baike.baidu.com/item/2022%E5%B9%B4%E5%8C%97%E4%BA%AC%E5%86%AC%E5%AD%A3%E5%A5%A5%E8%BF%90%E4%BC%9A/12061628?fromtitle=2022%E5%86%AC%E5%A5%A5%E4%BC%9A&fromid=22749318&fr=aladdin" target="_blank">第24届冬季奥林匹克运动会（XXIV Olympic Winter Games），简称2022年北京冬季奥运会，是由中国举办的国际性奥林匹克赛事，于2022年2月4日开幕，2月20日闭幕。2022年北京冬季奥运会共设7个大项，15个分项，109个小项。</a>
        </div>
    </div>
</button>

<!--轮播图的css及html代码-->

<style type="text/css">

        /*标题样式*/
        p{
            text-align: center;
            font-size: 25px;
            color: cadetblue;
            font-family: fantasy;

        }

        .imgBox{
            border-top: 2px solid cadetblue;
            width: 80%;
            height: 500px;
            margin: 0 auto;

        }

        .imgBox img{
            width: 80%;
            height: 500px;
            margin: 0 auto;
            padding-top: 30px;

        }

        .img1{
            display: block;
        }

        .img2{
            display: none;
        }

        .img3{
            display: none;
        }
    </style>
<p>冬奥风采</p>
<div class="imgBox">
    <img class="img-slide img1" src="https://p2.img.cctvpic.com/photoAlbum/page/performance/img/2022/2/21/1645421982313_521.jpg" alt="1">
    <img class="img-slide img2" src="https://p2.img.cctvpic.com/photoAlbum/page/performance/img/2022/2/21/1645416176196_372.jpg" alt="2">
    <img class="img-slide img3" src="https://p5.img.cctvpic.com/photoAlbum/page/performance/img/2022/2/20/1645368874877_875.jpg" alt="3">
</div>

六、 队友互评

  • 林俊杰评何震东：动手能力强，善于沟通交流，愿意主动分担任务，能很好得运用以往的项目经验，对新的知识上手很快，总之是靠谱的成年男性。
卧龙
  • 何震东评林俊杰：思路清晰，对于解决问题总有自己的一些小妙招，面对看似麻烦的问题总能转变思路以更简单更好的效果呈现，总能规划好项目，按照计划执行，有条不紊。

在这里插入图片描述

七、 心得体会

  • 一方面是对php做网站的速度有所耳闻，一方面是抱着尝试的心态。我们选择了html+css+php+Yii2.0框架来实现这次项目，但是因为php的基础较为薄弱和对yii2.0框架的运用不熟悉，致使我们没有完全运用出gii生成原型代码的优势，而且相比于Java完善的环境，网上关于yii的资料也是比较少的，这使得在编写前端代码的时候使得工作量超级加倍，但是经过这次的教训，我们对php+yii2.0的应用也较为纯熟，在这次踩坑之后，相信以后就不会遇到类似的问题，后续涉及到web开发的时候也同样会考虑使用vue+springboot的模式。
  • 这次开发是我们两人第二次利用远程仓库进行协同开发，相比于上次的困难重重，这次的过程可以说是比较顺利的，协同开发过程中基本没有发生丢代码之类的尴尬问题。
  • 这次作业也是一次很好的锻炼机会，但在后续的团队作业中应该要更加注重效率的问题。

八、 参考文献

php_Yii2.0

Yii2.0 权威指南

地图来源

国旗来源冬奥CCTV接口

PHP官网

Class yii\grid\GridView

...全文
128 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
助教_吕庆炜 2022-04-03
  • 打赏
  • 举报
 回复

总体功能完成得比较全面！
如果背景色和表格可以做一些配色设计的话会更美观些。

021900521林俊杰 学生 2022-03-28
  • 打赏
  • 举报
 回复
回答附加问题： 1.因为我们使用的Yii2.0框架，如果是以全运会（或其他体育赛事）为背景做类似工作，只需要将数据库中引入对应数据，并用gii生成对应的CRUD模型即可。 2.如果是在手机端的话，Yii恐怕只能用作于API接口，如果是安卓开发可能需要用Java或Kotlin对大部分模块进行重构。
软件工程实践结对作业二.md
软件工程实践结对作业二.md
福州大学软件工程第一次结对作业-学长去哪了？-.zip
福州大学软件工程第一次结对作业-学长去哪了？-
PairProject:W班软件工程实践结对第二次作业仓库
结对第二次作业-顶会热词统计的实现 为了不遗漏作业内容，这里有一个清单检查表方便同学们快速检阅。 fork仓库，和伙伴商讨如何通过github协作/代码规范等 编程实现 功能一，操作爬取的论文列表 功能二，爬取结果分析展示 功能三，爬取论文信息（附加功能，实现有附加分） 其他附加功能 部署 发布发布版本，发起拉取请求 撰写博客，在预先之前提交一份博客 包含作业描述和目录 核对评分标准 上一次结对作业中，大家都和小伙伴完成了原型的设计，那么现在再联合小伙伴动手实现原型中的部分功能吧。采用网络技术来实现原型中的功能。 一，作业内容 1.基础功能 功能1：对已爬取的论文列表进行操作 可对论文列表进行删除； 可对论文列表进行查询详细信息（支持模糊查询，查询结果的展示，排序等功能可自行设计）； 功能2：分析已爬取到的论文信息，提取top10个热门领域或热门研究方向 形成如关键字图谱之类直观的查看方式
软件工程作业——四则运算生成器
软件工程结对作业。程序可基本实现添加括号，选择难度，保存算式及答案的功能。
基于Python语言的P4程序结对作业设计源码
该项目是一款基于Python语言的P4程序结对作业设计源码，总文件量为114个，其中Python源文件57个，JSON配置文件24个，P4配置文件11个，Markdown文档8个，PNG图像文件3个，许可证文件1个，以及多个Makefile文件。该项目旨在通过结对作业的形式，提升编程能力和团队合作精神。
2022年福大-软件工程、实践-W班

142

社区成员

922

社区内容

发帖
与我相关
我的任务
社区描述
2022年福大-软件工程;软件工程实践-W班
软件工程 高校
社区管理员
  • FZU_SE_teacherW
  • 丝雨_xrc
  • Lyu-
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章