结对作业二

第二次结对作业

这个作业属于哪个课程	2021春软件工程实践S班 (福州大学)
这个作业要求在哪	https://edu.cnblogs.com/campus/fzu/FZUSESPR21/homework/11891
结对学号	221801101，221801122
这个作业的目标	掌握Github的使用，学会把项目部署到服务器
其它参考文献	《Node.js实战》
Github仓库链接：https://github.com/Scott233/PairProject
代码规范链接：https://github.com/Scott233/PairProject/blob/main/CodeStyle.md
PSP表格：
预估耗时（分钟）
--
计划	30
估算这个任务需要多长时间	10
开发	60
需求分析	40
生成设计文档
设计复审
代码规范
具体设计
具体编码	720
代码复审	120
测试
报告
测试报告	20
计算工作量
事后总结
总计	1310
成果展示
链接：http://81.69.199.136/PairHomework/
页面截图：
页面描述：

• 这次把所有功能汇集在一个页面。
• 左上区为提取到的10个热词，以Badge的方式展示，点击可在右半区自动搜索该热词。

  

• 左下区为根据当前正在被搜索的热词近10年来的出现次数绘制的折线图，反映了该关键词出现频率的变化趋势。

  

• 右半区为搜索框和搜索列表。打开页面会自动搜索当前Top1的热词。搜索依据有标题、关键词和摘要。搜索结果为随机25个符合搜索条件的论文信息。

  

• 点击标题后的红色”移除“按钮，即可删除该条目。

  

• 搜索结果中出现关键词的地方会有黄色荧光笔效果的高亮显示。

  

结对讨论过程描述

• 项目开始时，我们在宿舍进行了讨论，确定了需求、实现方式（node.js）和代码规范（官方建议怎么写就怎么写）。
• 写代码阶段主要通过QQ聊天、QQ电话等途径进行沟通，以下是项目晚期的沟通截图。

  

  设计实现过程
• 先通过Java程序，从助教爬取的数据中，提取有效信息并合并至一个json文件中。

  

• 项目的目录结构：

  

• 后端使用Nginx+Node.js实现，Nginx的路由配置文件的部分内容：

  

• 在使用MySQL数据库的过程中遇到了一点小困难，最终决定暂时放弃数据库，直接把数据文件的内容读取到Node.js程序的一个json数组中与前端的http请求进行交互。

const fs = require('fs');
fs.readFile('data.json','utf-8',(err,data)=>{
	//取出json数组
	const arr = JSON.parse(data);
	//创建服务器
	const server = ...;
	//服务器监听某端口，响应http请求
	server.listen(xxxx,'127.0.0.1');
});
           

• 后端3个接口：

  

• top10.js不接收参数，直接返回data.json中出现频次最高的10个词（从高到低排序）；
• search.js接受1个关键词参数，以json数组的形式返回搜索结果。如果数量不超出25，则直接返回；超出25则随机截取一段长度为25的数组返回。关键函数如下：

function getSearchResult(paperArray, keyword) {
    const filteredArr = paperArray.filter(it => it['title'].indexOf(keyword) > -1 || it['keywords'].indexOf(keyword) > -1 || it['abstraction'] && it['abstraction'].indexOf(keyword) > -1);
    if (filteredArr.length <= 25)
        return filteredArr;
    const start = Math.floor(Math.random() * (filteredArr.length - 26))
    return filteredArr.slice(start, start + 25);
}
           

• trend.js接受1个关键词参数，返回一个json数组，代表该关键词在2010到2019年的论文中的出现频次；
• 每次通过3个接口请求到的数据会被打印至浏览器控制台：

  

• 前端为静态界面，由Nginx路由，通过ajax向后端请求数据。
• 前端除了折线图使用了chart.js外，其它动态部分均是收到请求数据后由原生js手动渲染，如下：

const container = document.getElementById('...');
const li = document.createElement('li');
li.append('......');
li.append('......');
container.append(li);
           

心路历程

• 因为两个人都是后端小白，担心时间不够，就早早原价购买了腾讯云云服务器开始钻研，错过了学生优惠，哭唧唧/(ㄒoㄒ)/~~
• 搭建服务器的过程中遇到了很多困难，在此不点名特别答谢班里的一位后端大佬的慷慨帮助。看到一串串完完整整、整整齐齐的json数据从服务器取出并打印到控制台上，那一刻简直爽极了。
• 界面大体完工后，看着后端的数据神奇地显示在了自己写的网站上，虽然界面过于简洁，但很有成就感。
• 顺便想在这里吐槽一下Github的连接极不稳定。网页经常登陆不上去，按照网上的偏方修改hosts文件也没有用。10次push9次timeout，急死个宝宝。

  

  

  

  

  对队友的评价
• 221801101王思皓对221801122张骁：建议抽空把电脑屏幕修理一下，多花时间打好编程基础。
• 221801122张骁对221801101王思皓：有能力有担当，做事不拖沓，办事效率高，我从他身上学到了很多。