结对第二次作业
结对第二次作业
| 这个作业属于哪个课程 | 2021春软件工程实践 -W班 (福州大学) |
|---|---|
| 这个作业要求在哪里 | 结对第二次作业——顶会热词统计的实现 |
| 结对学号 | 061800217、221801133 |
| 这个作业的目标 | 实现对已爬取的论文列表进行操作、分析已爬取到的论文信息，提取top10个热门领域或热门研究方向 |
目录：
-
- 刚开始拿到题目时，我们的讨论
-
- 遇到的问题及解决方案
-
- 为实现功能进行的资料查找
-
- 结对讨论截图
-
- 实现过程
-
- 功能结构图
-
- 关键代码及解释思路
-
- 结对开发项目的心路历程与收获
-
- 评价结对队友
一、 Github仓库地址
二、 PSP表格
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 20 | 10 |
| Estimate | 估计任务需要时间 | 20 | 10 |
| Development | 开发 | 3900 | 4792 |
| Requirement analysis | 需求分析 | 30 | 35 |
| Team discussion | 讨论 | 70 | 70 |
| divide the work | 分工 | 20 | 10 |
| Database design | 数据库设计 | 30 | 27 |
| Design of implementation mode | 实现方式设计 | 30 | 50 |
| Design Spec | 生成设计文档 | 30 | 60 |
| Learning | 为实现功能进行的学习 | 60 | 220 |
| Design Review | 设计复审 | 40 | 50 |
| Coding | 具体编码 | 3300 | 3560 |
| Code Review | 代码复审 | 100 | 180 |
| Connection | 连接 | 30 | 30 |
| Code Review | 部署 | 40 | 70 |
| Testing | 测试 | 120 | 430 |
| Reporting | 报告 | 180 | 215 |
| Test Repor | 测试报告 | 90 | 100 |
| Person Repor | 个人报告 | 30 | 50 |
| Size Measurement | 计算工作量 | 20 | 25 |
| Postmortem & Prrocess Improvement Plan | 事后总结&提出过程改进计划 | 40 | 40 |
| 合计 | 4100 | 5017 |
- 最开始我们选择PHP语言，但是后面觉得想做前后端分离，于是前端选择了VUE框架，选择nodejs做后端，这导致学习时间大大增加，不过也因此更深入学习了新的技术。
- 因为选择前后端分离的做法，因此数据传输是很重要的一栏。因为前端在测试数据传输的时候，试图在使用post的时候直接进入网站查看传输的数据，但是由于网站默认get方式传输，接受不到前端的数据，然后前端就卡在这里，导致测试时间大大地增加。
- 在后端测试传输的数据时，发现使用数组传输json数组出现了问题，并且因为query的异步机制，导致数据库查找内容无法及时传输，因此对代码进行了修改，代码复审时间比预计的要长。
三、 云服务器访问链接
可使用的用户名和密码
用户：lisi
密码：123456
服务器将会于4天后过期
四、 成品展示
1、游客界面，有三大顶会和系统功能的介绍
2、登录界面
3、登录出现用户不存在，密码错误情况
4、注册界面
5、论文管理界面
6、论文界面分页，链接，删除
7、模糊查询，在搜索框输入想查询的词汇，将以名字和关键词为查询范围查询
8、论文分析界面，向用户展现用户论文列表的top10词云以及饼图
9、点击词云搜索该关键词的相关论文
10、为用户展现热词的走势图
五、 结对讨论过程
1、刚开始拿到题目时，我们的过程
先使用HTML+CSS+Jacascript实现静态页面，暂定选择PHP进行连接数据库和处理数据
2、遇到的问题及解决方案
问题：（前端来找后端）我用POST拿不到数据啊，咋办啊，我百度了好久，从post失败发展到尝试all了
解决过程：后端询问一下发现，前端尝试直接post数据，使用浏览器测试post，但是由于在浏览器输入地址，回车默认是以get方式提交，因此测试一直不成功。后面后端使用postman，选择post方式就可以看到传输的数据了。
解决方案：postman
问题：（前端又来找后端）是不是let和var定义的变量name里面存不了值，但是req.body可以正常取到传输过来的值耶。
解决过程：刚开始，后端以为是console.log(）函数使用出了问题，或者是前端测试的时候 在接受到数据后因为某些操作更改了name里面的值。但后面看到完整代码，发现是前端在编写接受的数据时，后端传输的json数据中，数据名为“username”，但前端却尝试以req.body.name接收数据
解决方案：认真看后端编写的数据传输图
问题：使用qurey函数对数据库进行增删改查，无法将结果return
解决过程: 该函数是异步函数，会等待主函数执行完成后执行，因此使用return 无法返回结果，需要使用 promise或async/await函数才能输出结果。
解决方案：使用promise或async、await等待qurey函数执行完成。
问题：但是当在初始化论文分析页面的时候发现使用上述解决方案 ，无法return 结果，同时，用户进行多次查询,后端会报错。
解决过程：发现是（也有猜测）是，原本设计在每次进行增删改查的时候连接数据库开始查询，查询结束之后关闭连接。初始化论文分析页面需要进行多次查询（去不同的表当中查找东西），因此在可能数据因为连接关闭而无法传输，同时在开启一次数据库连接中只能进行一次查询。后面选用数据库连接池，可以同时进行多次连接，每次连接结合后使用release释放连接而不是结束连接.
解决方案：连接数据库的方式更改为使用连接池。
问题：在部署服务器的时候nginx打开后，在网站上一直显示出错
解决过程：其实一开始部署服务器是跟着阿里的文档、百度搜索出来的文档去部署，基本不太懂输入的内容是什么意思，突然发现nginx打开后，网页显示不了，就马上去百度，根据查找到的内容去更改配置、查看网络连接、杀死进程…… 后面问题还是没有解决，但是对刚刚做了什么更改比较了解了，就问了一下舍友，结果她一看就知道是什么问题，是因为我只是重新加载nginx，但并没有重启，所以更改的配置文件没有起作用，她指导我重启一下就打开网站了！
解决方案：一位超厉害的舍友
问题：前端后期东西越写越杂，在完工时突然搭好的页面乱码。
解决过程：百度，没有方案。回看代码，发现在定义vue的style时，删去scoped，导致该页面样式覆盖至全局。
解决方案：加上scoped，好好听老师讲课，不该删的不要碰。
问题：在论文分析板块，点击关键词搜索相关论文，但由于表格在事件前已经渲染好，无法将数据添加至表格中。
解决过程：单独编写表格，与点击事件，排除后端未拿到数据及数据解析错误的原因。只能将原因归结于界面结构复杂，mounted事件过杂。
解决方案：将搜索的关键词通过url传送，再用created拿到关键词，get传送给后端，获取数据。因为界面结构简单，加载运行很快。
3、为实现功能进行的资料查找
Express
Nodejs
Query函数
mysql连接池
Vue
Element-ui
vue+nodejs部署
nodejs环境部署
4、结对讨论截图
---1、qq讨论
2、共同编写博客内容
3、线下讨论
六、 设计实现
1、实现过程
1、实现方法选择
前端选择使用 VUE框架搭建静态页面，插入ElementUI制作图标，后端选择nodeJS，使用express 应用开发框架，数据库选择 mysql数据库。
2、功能讨论
模糊查询功能：后端分析用户输入语句，依次查询（模糊搜索截图）
数据分析功能：后端读取数据库中的keyword内容并且存入Map数组，记录keyword出现次数、来源会议和年份，存入新表，在每次加载页面的时候返回。
分页功能：前端传入 page和pageSize，后端将其与数据库查询结果必将，返回结果行数小于pageSize的内容。
3、数据传输方式
2、功能结构图
七、 代码说明
1、关键代码及解释思路
- promise类的使用
为实现模糊搜索，后端接收到用户的input后，以空格分割搜索数据，然后进行多次查询，使用promise.then等待数据搜索完成后再使用request传输数据。
- 初始化论文列表并实现分页显示
为实现分页，前端传来page和pageSize说明页数和将要展示的行数。在sql语句中使用‘limit‘’返回内容。
- 使用get方法传入用户输入内容，删除论文时论文id。
- 使用post方法传输大量数据，例如，在用户登录时，查询并返回用户论文列表。
- 使用post方法传输私密信息，例如，在登录界面传输用户登录信息
- 使用express框架
使用express路由请求、接受信息。使用app.listen()快捷方法监听接口。
7、使用线程池，设计线程池最大连接数为500，在分析关键词的时候可以快速将关键词数据写入数据库
前端
1、路由器部署路径
2、echarts和element-ui的全局部署
3、通过URL在两个页面传递参数
4、前端与后端之间通过使用axios进行数据传递
5、使用element-ui的抽屉型表格，同时使用scope插槽获得点击的当前表单行数，实现链接跳转，删除功能。
八、 结对感受及队友评价
1、结对开发项目的心路历程与收获
珏：从一开始不知道从哪下手到现在完成结对作业，这个过程很漫长。一是时间上因为延迟提交，所以觉得时间很长，同时在这个作业中经历了团队github实战，与之相比显得更漫长。二是我们两位同学技术有限，一开始的时候并没有很确定怎么去写，后面选择的vue和nodejs并不是特别擅长，而且没有部署服务器的经验，所以我们先是学习了一段时间，然后一边学习一写，才慢慢理清思路要怎么实现，这个过程也感觉很漫长。结对的最大好处是两个人会互相鼓励，一起编程的时候也感觉更“热闹”。
思雨：开发过程其实很累，因为都是使用新技术，花了一半时间用在学习上，一半时间在开发项目上。整个过程最难在于前后端连接和部署，前后端完全分离的模式给我们带来很大的麻烦，但是也因为前后端分离，所以开发可以并行。同时也明白写代码没有什么捷径可以走，前端控件大量使用element-ui，但是它的控件本事较难修改，也会有很多不兼容的问题，带来的便利和玛麻烦是对等的。语言有1它的好处，自然也有它的限制，这其中需要我去深入学习。
1、评价结对队友
思雨=》珏：这次没有帮上忙，项目最难的部署和复杂的后端都由队友包办了，有点羞愧。同样是学习新的语言，队友表现的比较踏实认真，吸收极快，我因为学习慢，有些慌张，希望能向对方学习。总之，彼此都辛苦了。
珏=》思雨：刚开始完全不知道要怎么开始写，只能从会的html、css开始，是思雨提出来使用vue框架和nodejs做后端！她在学校vue方面很快，也能及时指出我在数据传输反面的问题，并且经常讨论数据库的设计。为了完成作业两个人都熬了好多个夜，但同时都学习了新的内容，并运用上了新学习的知识。
