結對第二次作業
| 這個作業屬於哪個課程 | 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方面很快，也能及時指出我在數據傳輸反面的問題，並且經常討論數據庫的設計。為了完成作業兩個人都熬了好多個夜，但同時都學習了新的內容，並運用上了新學習的知識。