结对作业二
第二次结对作业
| 这个作业属于哪个课程 | 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 |
| 生成设计文档 | 30 |
| 设计复审 | 30 |
| 代码规范 | 10 |
| 具体设计 | 30 |
| 具体编码 | 720 |
| 代码复审 | 120 |
| 测试 | 120 |
| 报告 | 60 |
| 测试报告 | 20 |
| 计算工作量 | 10 |
| 事后总结 | 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王思皓：有能力有担当，做事不拖沓，办事效率高，我从他身上学到了很多。
