结对第二次作业
| 这个作业属于哪个课程 | <2021春软件工程实践S班 (福州大学)> |
|---|---|
| 这个作业要求在哪里 | <结对第二次作业> |
| 结对学号 | <221801410、041801406> |
| 这个作业的目标 | <编程实现定会热词统计、撰写博客> |
| 其他参考文献 | 无 |
作业描述：编程实现顶会热词统计，基础功能的实现，部署在云服务器上。撰写博客。
项目访问连接
git仓库链接和代码规范链接
PSP表格
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 30 | 15 |
| • Estimate | • 估计这个任务需要多少时间 | 30 | 15 |
| Development | 开发 | 1930 | 2240 |
| • Analysis | • 需求分析 (包括学习新技术) | 150 | 200 |
| • Design Spec | • 生成设计文档 | 20 | 0 |
| • Design Review | • 设计复审 | 10 | 10 |
| • Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 40 | 60 |
| • Design | • 具体设计 | 30 | 40 |
| • Coding | • 具体编码 | 1500 | 1800 |
| • Code Review | • 代码复审 | 60 | 30 |
| • Test | • 测试（自我测试，修改代码，提交修改 | 120 | 100 |
| Reporting | 报告 | 70 | 55 |
| • Test Repor | • 测试报告 | 30 | 30 |
| • Size Measurement | • 计算工作量 | 20 | 10 |
| • Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 20 | 15 |
| 合计 | 2030 | 2310 |
成品展示
（由于博客园相册无法上传大于2MB的照片，所以以下动图只能展示功能没法整个界面展示。）
-
搜索界面
-
走马灯背景展示
-
查询跳转至论文列表
-
查询界面完整展示
-
分页及删除功能
-
排序及对列表模糊搜索
-
浏览查看论文详细信息
-
热词分析界面
-
关键词图谱点击跳转到相关论文列表
-
其中一个顶会的热词走势
结对讨论过程描述
结对讨论过程：
- 刚接到要编码实现这次作业时，我们两个人是处于比较懵的状态的，一时间不知道如何下手，所以我们决定先约出来开个小会。因为语言和框架的不限制，我们最迫切需要决定的准备事项便是选定用什么技术来实现我们的这次作业。由于两人之前都未学习过框架的使用，都只在web实践上使用过YII框架，所以我们决定使用同种语言的ThinkPHP框架来学习应该会比较快速。前端界面直接不借用框架进行编写。
- 由于之前已经设计过网站的原型，所以我们的讨论如何实现时，决定按照我们的原型，先把网页的大体布局做出来，所以接下去最需要考虑的是我们的功能如何实现。
- 在刚开始动手实现时，我们两个人一起学习前后端的编写，但是后来发现，我们总是在重复解决相同的困难：如怎么解析url传来的值，如何调用后端接口来获得值。在两个人坐在一起编程看到对方电脑上搜索到了跟自己相同的资料界面，才意识到我们这样合作的效率是非常低的。所以在这之后我们才决定，先把功能实现分成界面实现和值的获取这两部分来分工，这样就不会把时间花在同样的困难上。从这以后我们的效率开始加速了。
截图展示
- 而在这一次的结对过程中，我们使用线上讨论也仅在如下图二那样突然想到一个什么之前没考虑到的地方，才会临时通过聊天软件来讨论。这里也要特别感谢结对队友041801406同学，照顾到我是台式机不方便移动，虽然没有住在同一栋楼，但是在空余或者没课的时候还是带着电脑，来我的宿舍，两个人坐在一起互相监督互相学习，这样才有结对编程的感觉。
设计实现过程
-
根据本次作业要求以及之前的原型设计，构建了如下功能结构图：
-
实现的过程是，我们先构建了四个主界面的大概布局，以及网站背景。这些都是根据我们原型的设计来的。在接下去的实现中，我们发现自己写的table表格样式不够好看，功能也不够智能，所以技术上引用了Element UI的一些组件，如我们的论文展示列表。在实现读取数据之前，学习了关于ajax的用法，利用 ajax访问接口的url从后端数据库读取的转换成json数据。我们的数据是利用助教提供的数据，筛选后存入我们的数据库中。在关键词云的实现使用了css和html直接写出标签云的效果，点击可以跳转到论文查询列表，利用关键词从数据库中查询。热词走势的技术实现我们使用了Echarts的动态柱状图排序，从数据库中动态读取热词数，通过setTimeout()方法，延迟地加给柱状图，从而实现，根据不同年份，数据会区分地增加上去，并根据累计出现次数排序。
代码说明
1.根据不同页面传过来的url的不同的后缀来确定根据关键词查找还是根据题目查找
if (wordlist[1] == "1") {
if (wordlist[0] != '') {
$.ajax({
url: '../index.php/index/Serchfunctionrchdata?words=' + wordlist[0],
type: 'get',
data: {},
dataType: 'json'
}).then(function(res) {
for (var i in res) {
td.push(res[i]); //把从json获取的数据赋值给数组
}
}).fail(function() {
console.log('失败');
})
}
} else if (wordlist[1] == "2") {
if (wordlist[0] != '') {
wordlist[0]=wordlist[0].replaceAll("%20"," ");
console.log(wordlist[0]);
$.ajax({
url: '../index.php/index/Serchfunctionrchbykeyword?words=' + wordlist[0],
type: 'get',
data: {},
dataType: 'json'
}).then(function(res) {
for (var i in res) {
td.push(res[i]) //把从json获取的数据赋值给数组
}
}).fail(function() {
console.log('失败');
})
}
}
- 论文列表对title的模糊搜索
devfilter: function(val, oldval) {
this.tableData = this.sourceData.filter(item => (~item.title.indexOf(val)));
},
- 动态根据查询数据的数目对论文列表进行分页。
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currpage"
:page-sizes="[5,10,15,20]"
:page-size="pagesize"
layout="total,sizes,prev,pager,next,jumper"
:total="tableData.length"
></el-pagination>
handleSizeChange(val) {
this.pagesize = val;
},
handleCurrentChange(val) {
this.currpage = val;
},
- 列表排序和删除浏览，从一查询的论文列表中查找是否与点击事件相同的值，删除相同值的那一条数据便实现了删除功能。
viewClick(row){
var s=row.title;
window.location="../index/Paperscan?data="+s;
},
handleClick(row) {
this.tableData.splice(this.tableData.findIndex(e => e.title == row.title), 1);
this.sourceData=this.tableData;
},
changeTableSort(column) {
//获取字段名称和排序类型
var fieldName = column.prop;
var sortingType = column.order;
//按照降序排序
if (sortingType == "descending") {
this.tableData = this.tableData.sort(function(a, b) {
a = a[fieldName];
b = b[fieldName];
if (a.length == b.length) {
return b.localeCompare(a);
} else {
return b.length - a.length;
}
});
}
//按照升序排序
else {
this.tableData = this.tableData.sort(function(a, b) {
a = a[fieldName];
b = b[fieldName];
if (a.length == b.length) {
return a.localeCompare(b);
} else {
return a.length - b.length;
}
});
}
}
- 走马灯效果，使得首页背景可以切换
<template>
<div class="block">
<el-carousel trigger="click" height="100%" :autoplay="false" arrow="always">
<el-carousel-item v-for="item in 7" :key="item">
<el-breadcrumb separator="/">
<el-breadcrumb-item><a href="../public">论文搜索</a></el-breadcrumb-item>
<el-breadcrumb-item><a href="../public/index/Paperanalysis" id="paperanalysis">论文分析</a></el-breadcrumb-item>
</el-breadcrumb>
</el-carousel-item>
</el-carousel>
</div>
</template>
- 接口中使用原生数据库语句进行模糊搜索，并且解决跨域问题。根据get获得地值，利用%在select语句中的用法来实现模糊搜索。
header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:GET');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
public function serchdata($words = " Information")
{
$words = $_GET["words"]; //获取前端传来的值
$data = Db::query("select title,keyword,releasetime from paper where title like '%".$words."%'");
return json($data);
}
- 对echarts动态柱状图动态地赋值，并利用setTimeout来控制运行的时间。通过时间的控制表达著逐年往上加数据的走势效果。每年数据的增加都同理。
run()
{
$.ajax(
{
url: '../index.php/index/Serchfunction/get2020CVPRkey',
type: 'get',
data: {},
dataType: 'json'
}).then(function (res)
{
var data = option.series[0].data;
for (var i in res)
{
data[i]+=res[i].time;
}
myChart.setOption(option);
}).fail(function ()
{
console.log('失败');
})
}
setTimeout(function() {
run();
}, 0);
- 动态地根据圈中以及位置对关键词图谱中的词赋予不同的样式效果
ul.cloud a[data-weight="1"] { --size: 0.5; font-style: italic;}
ul.cloud a[data-weight="2"] { --size: 1.5; }
ul.cloud a[data-weight="3"] { --size: 2.5;font-style: italic; }
ul.cloud a[data-weight="4"] { --size: 3.5; }
ul.cloud a[data-weight="5"] { --size: 4.5;font-style: italic; }
ul.cloud a[data-weight="6"] { --size: 5.5; }
ul.cloud a[data-weight="7"] { --size: 6.5; font-style: italic;}
ul.cloud a[data-weight="8"] { --size: 7.5; }
ul.cloud a[data-weight="9"] { --size: 8.5;font-style: italic; }
ul.cloud li:nth-child(2n+1) a { color: rgb(9, 190, 9); }
ul.cloud li:nth-child(3n+1) a { color: rgb(53, 147, 224); }
ul.cloud li:nth-child(4n+1) a { color: rgb(211, 51, 139); }
ul.cloud li:nth-child(5n+1) a { color: rgb(115, 4, 219); }
心路历程和收获
- 221801410的心路历程和收获：
在这次结对中，从对框架的一无所知到初步了解使用，学到了挺多东西，一味地怕、觉得很难做是永远不会有结果的，感悟还是那一句话万事开头难。开始动手之后才会迎来各种不同的问题，项目也才会被推进。学好基础真的很重要，在这次结对中最困难的不是对新技术的理解，而是在使用时总是冒出一些小BUG，改起来对心态和体力都是一种考验。在使用ajax的时候是遇到麻烦最多的时候，从忘记应用jQuery到无法跨域访问后端接口，再到得到json数据以后由于基础不扎实，想直接把数据赋值给数组，最终发现要对得到的数据利用循环解析成数组后才能赋值。看起来都是一些基础到不行的问题，却困扰了我一整个下午的时间。不过努力查找问题解决之后，收获还是非常大的，刚学会ajax的使用就在团队作业二中使用到了，如果当时没有花时间学习和使用ajax，在团队编程时可能会更吃瘪。虽然过程很累，但是回报却来得非常快，总算是努力之后得到了一些成功。心路历程从惧怕->接受->全身心投入，一步步收获都很大，感觉自己的能力确实有一些提升。最大的便是理解前后端分离及传值的原理，学会了Echarts的使用，并且根据自己的需要能进行改动。
- 041801406的心路历程和收获：
1.应该打好扎实的js基础，才不会在开发时到处碰壁却不找不到错误的原因。
2.element ui真好用，下次我还用
3.设计原型时就应该考虑好网页的布局，要仔细的想。不然在后面觉得不合适想改都改不了
4.github一定要先拉取在push
5.说实话结对作业和团队作业交替在一起进行，虽然都是web开发，但是真的很难及时转换。而且疲劳感也会累加上去
6.资源定位最好使用相对定位。
7.结对时1+1也不一定大于二，但总体来说有个人跟着吐槽不会枯燥
8.实践也确实大大的提升了web开发的水平
评价结对队友
- 041801406对221801410的评价：
221801410同学比较勤奋认真，他对于作业的态度是比较严谨仔细的，这点恰恰是我所不具备的，我对于作业是比较随缘进行的。也能默默扛起比较吃力的任务。（比如他其实本身也是想做前端开发，但是因为我不想学后端他就自愿去学习后端框架）。我认为一次结对里能有这样区别较大的两个人，是比较有趣的
- 221801410对041801406的评价：
041801406同学学习能力很强，对于没有接触过的组件以及代码也能很快地学会并运用。性格也比我稳重的多，我在遇到bug一直改不出来时就会显得很急躁，但是队友总是能很冷静地对代码进行不断地查错修改，在这点上拟补了我的不足。对合作也十分积极，在合作上也十分替我着想，辛苦他对我们队伍的付出，才能进行到从结对作业一那样网上交流，到真正坐在一起互相监督实现结对编程。
数据库表设计
