| 這個作業屬於哪個課程 | 2021春軟件工程實踐S班 (福州大學) |
|---|---|
| 這個作業要求在哪里 | 結對作業二——頂會熱詞統計的實現 |
| 結對學號 | 221801105，221801110 |
| 這個作業的目標 | 實現頂會熱詞統計網頁版功能 |
| 其他參考文獻 | html5+css3網頁設計基礎教程 |
作業基本信息...
一、PSP表格和效能分析
| PSP2.1 | Personal Software Process Stages | 預估耗時（分鍾） | 實際耗時（分鍾） |
|---|---|---|---|
| Planning | 計划 | ||
| • Estimate | • 估計這個任務需要多少時間 | 20 | 30 |
| Development | 開發 | ||
| • Analysis | • 需求分析 (包括學習新技術) | 160 | 140 |
| • Design Spec | • 生成設計文檔 | 120 | 90 |
| • Design Review | • 設計復審 | 90 | 70 |
| • Coding Standard | • 代碼規范 (為目前的開發制定合適的規范) | 70 | 50 |
| • Design | • 具體設計 | 210 | 160 |
| • Coding | • 具體編碼 | 1400 | 2750 |
| • Code Review | • 代碼復審 | 200 | 250 |
| • Test | • 測試（自我測試，修改代碼，提交修改） | 300 | 240 |
| Reporting | 報告 | ||
| • Test Report | • 測試報告 | 30 | 30 |
| • Size Measurement | • 計算工作量 | 10 | 10 |
| • Postmortem & Process Improvement Plan | • 事后總結, 並提出過程改進計划 | 10 | 20 |
| 合計 | 2620 | 3840 |
效能分析：
分析設計過程比預計花的時間少，可能是因為上一次原型設計作業做的差不多了；編碼過程花的時間比預計的多得多。
作業完成效率整體較低，主要原因是結對雙方Web基礎都不扎實，學完即忘，導致編程時到處找資料花了很多時間。
二、git倉庫、代碼規范和部署到雲服務器后的訪問鏈接
git倉庫：https://github.com/AgCl9/PairProject
代碼規范：https://github.com/AgCl9/PairProject/blob/main/221801105%26221801110/codestyle.md
部署到雲服務器：http://82.157.53.91:8080/221801105_221801110/index.html
三、成品展示
-
首頁：
-
論文爬取頁面：（暫時沒有實現）
-
論文查詢頁面：
-
列表管理頁面：
- 點擊刪除按鈕后：
- 點擊刪除按鈕后：
-
熱詞分析首頁：
- 下拉列表框可以選擇頂會名稱：
- CVPR：
- ECCV：
- ICCV：
- 下拉列表框可以選擇頂會名稱：
四、設計實現過程
- 功能結構圖：
- 過程描述：
1. 首頁：
根據原型設計，考慮在圖片下面加入四個按鈕，分別跳轉到論文爬取、論文查詢、列表管理、熱詞統計頁面。
2. 論文查詢：
利用Web開發的表單功能，實現查詢數據的提交，提交到后台處理。使用php編程語言在服務器上開發，傳入數據庫文件和sql語句實現。（似乎沒有實現）
3. 列表管理：
以表格形式展示，展示出標題、關鍵詞、摘要、原文鏈接信息，並設置刪除按鈕供用戶刪除論文。
4. 熱詞統計：
考慮用一個下拉列表框選擇頂會名稱，然后對每個頂會統計出來的熱詞進行動圖的設計。動圖考慮用echarts組件，利用JavaScript進行傳值。
一張動圖呈現一個頂會的熱詞變化趨勢。
五、代碼說明
- 首頁，利用button的onclick屬性，實現頁面跳轉。
<div id="header">
<h1>頂會熱詞統計</h1>
</div>
<div id="content">
<div id="pic">
<img src="img/v2_qpoiu2.jpg" alt="" />
</div>
<div id="btn">
<button type="button" id="crawl" onclick="window.open('html/crawl.html','_self')">論文爬取</button>
<button type="button" id="search" onclick="window.open('html/search.html','_self')">論文查詢</button>
<button type="button" id="list" onclick="window.open('html/list.html','_self')">列表管理</button>
<button type="button" id="analysis" onclick="window.open('html/hot_word.html','_self')">熱詞分析</button>
</div>
</div>
- 論文查詢：
首頁放置一個輸入框和一個查詢按鈕。利用表單實現。
<div id="content">
<form action="search_result.html" method="get">
<input type="text" id="passage" name="search" />
<input type="submit" id="submit" value="查詢" onclick="search()"/>
</form>
<div id="btn">
<button type="button" id="exit" onclick="window.open('../index.html','_self')">返回首頁</button>
</div>
</div>
- 列表頁面：放置一個表格顯示列表
<table border="1" width="75%" align="center">
<caption id="biaoti">論文總覽</caption>
<tr>
<th>標題</th>
<th>關鍵詞</th>
<th>摘要</th>
<th>原文鏈接</th>
</tr>
<tr>
<td class = "zhengwen">Learning 3D Keypoint Descriptors for Non-rigid Shape Matching</td>
<td class = "zhengwen">Local feature descriptor,Triplet CNNs,Non-rigid shapes</td>
<td class = "zhengwen">In this paper, ……………….</td>
<td class = "zhengwen">https://doi.org/10.1007/978-3-030-01237-3_1</td>
<td><button onclick ="remove(this)">刪除</button></td>
</tr>
設置css布局：
#biaoti {
font-size: 26px;
}
table {
table-layout:fixed;
}
.zhengwen{
background-color: #f3f3f3;
word-wrap:break-word;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.btn1 {
float: right;
background-color: #5BC0DE;
font-size: 1.8em;
height:100px;
width:180px;
}
- 熱詞分析：引入echarts.min.js文件實現圖表功能：
<head>
<meta charset="utf-8">
<title>熱詞分析</title>
<link rel="stylesheet" type="text/css" href="../css/hot_word.css">
<script src="../echart/echarts.min.js"></script>
</head>
首頁利用一個下拉列表框，用於選擇頂會名稱：
<div id = "content">
<select name="dgLink2" id = "selection" style="WIDTH: 150px" onchange="MM_jumpMenu('parent',this,0)">
<option value="#">請選擇頂會名稱：</option>
<option value="cvpr.html">CVPR</option>
<option value="eccv.html">ECCV</option>
<option value="iccv.html">ICCV</option>
</select>
</div>
<div id="btn">
<button class = "btn1" onclick="window.open('../index.html','_self')">返回首頁<button>
</div>
引入script文件實現下拉列表框的動作：
<script type="text/JavaScript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
引入script實現動圖的設計（此處以ICCV為例），使用的數據為上次WordCount程序運行得到的結果（由於頂會熱詞在一段時間內是不會有變化的，故直接寫入echart頁面，似乎太過簡單粗暴）：
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var chartDom = document.getElementById('content');
var myChart = echarts.init(chartDom);
var option1;
var data = [];
for (let i = 0; i < 10; ++i) {
data.push(111);
}
option1 = {
xAxis: {
max: 'dataMax',
},
yAxis: {
type: 'category',
data: [ 'Training', 'Cameras', 'Computer vision', 'Feature extraction', 'Shape', 'Robustness', 'Visualization', '3D displays', 'Image segmentation', 'Image reconstruction'],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
},
series: [{
realtimeSort: true,
name: 'X',
type: 'bar',
data: data,
label: {
show: true,
position: 'right',
valueAnimation: true
}
}],
legend: {
show: true
},
animationDuration: 0,
animationDurationUpdate: 1000,
animationEasing: 'linear',
animationEasingUpdate: 'linear'
};
setTimeout(function () {
run();
}, 1);
if (option1 && typeof option1 === 'object') {
myChart.setOption(option1);
}
</script>
六、心路歷程和收獲
- 221801105：
在作業發布之后，我們在當天就進行了討論，決定先撰寫前端的頁面；剛開始撰寫html時，由於不夠熟練，布局顯得非常混亂，整體外觀丑陋；在所有頁面撰寫完成之后，於是我們兩人進行分工，我負責熱詞分析和論文管理頁面的改進，在原有的基礎上，改變布局並增加了CSS樣式。
后來設計歷年熱詞趨勢圖時，陷入了困境，於是在和隊友討論以及向同學求助后，得知了可以利用echarts實現圖表，在網上資料和隊友的幫助下，成功實現了從靜態圖向動態圖的轉變。
- 221801110：
感覺本次作業實現難度很大，可以說“設計得多美觀，實現起來就多痛苦”，並且要求不能使用原型工具生成代碼。寫了一周無用代碼，沒什么進展的情況下，看到旁邊的同學不是用JavaEE的知識就是用vue框架，而這些知識是我從來沒有接觸過的，也都是頭一次聽說，在時間趨緊的前提下自學vue框架，估計基本無法實現，無奈只能用純前端開發。還是使用html、css、javascript進行開發。
純前端開發中也遇到了諸多問題，從這次作業中發現了web知識學的不扎實的問題（從頁面寫的時間過長可以看出），之后最為明確的目標是學會vue框架，這樣可能更加輕松實現Web編程。因為更大的網頁程序是不可能去用純前端進行開發的。
七、討論過程與評價結對隊友
-
討論過程：
通過討論，考慮到雙方的Web基礎水平（都很差）、學習新的vue框架現學現用需要的時間（花時間還可能會在限定時間里面做不出來），和deadline等因素，兩人確定用傳統的html、css、js等語言，純前端編寫代碼。
兩人一起討論了程序設計的方式和布局。發現設計出好多不美觀的頁面，都一起討論並修改了。 -
討論照片：
-
221801105對221801110的評價： 這次原型設計的實現，我們一起相互幫助，使得實現的功能更加完善；在我們結對編程的過程中，我經常會出現一些設計上的細節錯誤，得益於他的及時糾正，我們的合作才能更加有條不紊，能高效地完成任務。
-
221801110對221801105的評價：隊友雖然不太會，但願意去做，可以的。結對過程中遇到的困難，願意一起解決，也是可以的。可以一起完成，無論做的怎樣都是可以的。