| 這個作業屬於哪個課程 | 2021春軟件工程實踐|S班（福州大學） |
|---|---|
| 這個作業要求在哪里 | 作業具體要求 |
| 結對學號 | 221801233 221801411 |
| 這個作業的描述 | 1、操作爬取的論文列表 2、爬取結果分析展示 3、爬取論文信息(附加功能，實現有附加分) 4、將項目部署到服務器上 |
目錄
1.github鏈接和代碼規范連接
2.PSP表格
| PSP2.1 | Personal Software Process Stages | 預估耗時（分鍾） | 實際耗時（分鍾） |
|---|---|---|---|
| Planning | 計划 | 30 | 45 |
| • Estimate | • 估計這個任務需要多少時間 | 30 | 45 |
| Development | 開發 | 4560 | 5060 |
| • Analysis | • 需求分析 (包括學習新技術) | 2160 | 2160 |
| • Design Spec | • 生成設計文檔 | 120 | 100 |
| • Design Review | • 設計復審 | 60 | 30 |
| • Coding Standard | • 代碼規范 (為目前的開發制定合適的規范) | 60 | 60 |
| • Design | • 具體設計 | 60 | 60 |
| • Coding | • 具體編碼 | 1920 | 2460 |
| • Code Review | • 代碼復審 | 60 | 60 |
| • Test | • 測試（自我測試，修改代碼，提交修改） | 120 | 130 |
| Reporting | 報告 | 300 | 260 |
| • Test Repor | • 測試報告 | 120 | 120 |
| • Size Measurement | • 計算工作量 | 60 | 40 |
| • Postmortem & Process Improvement Plan | • 事后總結, 並提出過程改進計划 | 120 | 100 |
| 合計 | 4890 | 5365 |
3.雲服務器地址
4.成品展示
4.1頁面展示(圖片)
首頁
在頁面左邊設置分類卡片
top10熱詞導航
文章詳情頁
4.2功能實現展示(動圖gif)
1.首頁展示(論文列表,分頁)
2.模糊搜索功能和論文列表跳轉詳情頁展示
3.刪除功能
4.關鍵詞圖譜相關,並跳轉
5.頂會趨勢圖
5.附加功能
我們這次爬蟲先是用爬蟲工具進行爬蟲,之后改用python進行爬取
1.爬蟲工具實現
2.python實現
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from urllib.parse import urljoin
import time
import random
import json
import csv
...
browser.find_element_by_class_name('head ').click()
...
abstract = div.find_element_by_class_name('_ngcontent-asv-c29').text
...
data_dict = {}
data_dict['title'] = title
data_dict['abstract'] = abstract
data_dict['year'] = year
data_dict['keyword'] =keyword
data_dict['time'] = time
data_dict['link'] = link
data_list.append(data_dict)
...
if not Btn:
break
else:
Btn.click()
# 如果到了爬取的頁數就退出
if count == page:
break
count += 1
# 延遲兩秒，我們不是在攻擊服務器
time.sleep(2)
# 全部爬取結束后退出瀏覽器
browser.quit()
...
with open('paperInfo.json', 'a+', encoding='utf-8') as f:
json.dump(data_list, f, ensure_ascii=False, indent=4)
print('json文件寫入完成')
JSON文件部分截圖：
5.結對討論過程描述和設計實現過程
1.前面分配工作以及實現語言及技術的選定在線上討論決定。任務是按照各自時間的多少、掌握相關技術的程度來進行分配的；由於本學期兩個人都有選修Javaee這門課，首頁我們決定用Javaee實現。
2.在具體實現的過程中，隊友會幫忙找學習資料和素材；特別是在前端頁面這一塊，相對討論的比較多。
3.更多的時間是在活動室進行編程和討論。
以下是線上討論截圖：
6.設計實現過程及代碼說明
6.1論文首頁功能
首先是對首頁論文列表的后端具體功能實現
其中關鍵部分是對數據庫進行數據獲取,進入一個對象的list中返給前端
List<User> l = new ArrayList<User>();
try (Connection c = DBUtil.getConnection(); Statement s = c.createStatement()) {
String sql = "select * from paper";
ResultSet rs = s.executeQuery(sql);
int i=0;
while (rs.next()&&i<span+cur) {
i++;
if(i>=cur) {
String title = rs.getString("title");
String digest = rs.getString("digest");
String key = rs.getString("key");
String year = rs.getString("year");
String time = rs.getString("time");
String link = rs.getString("link");
int id = rs.getInt("id");
User user = new User();
user.setTitle(title);
user.setYear(year);
user.setTime(time);
user.setKey(key);
user.setDigest(digest);
user.setLink(link);
user.setId(id);
l.add(user);
}
}
} catch (SQLException e) {
e.printStackTrace();
}
6.2模糊搜索功能
通過對獲取的字符串對數據庫的字段分別進行相關搜索,返回獲得的內容並展示
List<User> l = new ArrayList<User>();
try (Connection c = DBUtil.getConnection(); Statement s = c.createStatement()) {
String sql = "select * from paper where title LIKE '%"+search+"%' "+"OR digest LIKE '%"+search+"%' "+" OR paper.time LIKE '%"+search+"%' "+"OR paper.key LIKE '%"+search+"%' "+"OR paper.year LIKE '%"+search+"%' "+" OR link LIKE '%"+search+"%' ";
ResultSet rs = s.executeQuery(sql);
int i=0;
...
6.3刪除功能
每一個刪除按鈕可以獲得當前論文項的id,並傳給后端,進行數據庫操作
String returnint=req.getParameter("id");
int id=0;
if(returnint!=null){
id=Integer.parseInt(returnint);
}
UserDAO userDAO=new UserDAOImpl();
if(id!=0)
userDAO.delete(id);
int returnid=id-(id%10)+1;
RequestDispatcher rd;
rd=req.getRequestDispatcher("InfoServlet?id="+returnid);
rd.forward(req, resp);
6.4分頁功能
對每一頁進行論文展示數限制,從前端獲取當前頁數來進行相應跳轉
int span=5;
int cur = 1;
int total = userDAO.getTotal();
//page.setTotal(total);
req.setAttribute("total",total);
String back = req.getParameter("id");
if (back != null) {
cur = Integer.parseInt(back);
}
List<User> users = userDAO.list(cur-cur%span+1,span);
int newone=cur-cur%span+1;
6.5關鍵詞圖譜
通過echarts實現,用一個柱狀圖和一個餅圖來對關鍵詞展示,通過wordcount獲得TOP10關鍵詞傳給數據,並實現在兩個圖中的點擊關鍵詞跳轉到相關論文頁面的功能
legend: {
data: ["Facial Landmark", "Surface", "3-D acition", "Object motion", "Face detection", "Forward Passstereo","video caption", "Image Retrieval","Human parsing", "Face alignment",]
},
xAxis: {
data: ["Top10", ]
},
yAxis: {},
series: [{
name: 'Facial Landmark',
type: 'bar',
data: [
{ value:198, url:"SearchServlet?id=241"},
]
},
myChart.setOption(option);
myChart.on("click",function(e){
console.log(e);
window.open(e.data.url,'_self');
});
name: '搜索次數',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
data: [
{ value:198, name:"Facial Landmark",url:"SearchServlet?id=241"},
{ value:176, name:"Surface",url:"SearchServlet?id=114"},
{ value:389, name:"3-D acition",url:"SearchServlet?id=267"},
{ value:451, name:"Object motion",url:"SearchServlet?id=273"},
6.6頂會趨勢圖
同樣是通過echarts實現,用折線圖實現
var myChart = echarts.init(document.getElementById('chart1'),'light');
var option;
option = {
// title: {
// top:'0',
// text: '熱詞趨勢'
// },
tooltip: {
trigger: 'axis'
},
legend: {
data: ['CVPR','ICCV','ECCV']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
6.7頁面設計
通過不同div將頁面分成上層導航欄,內容左部分,右列表和底部footer
<footer class="ui inverted vertical segment ">
<!-- center aligned將容器內的所有塊居中顯示-->
<div class="ui center aligned container">
<!-- style="width: 100em "-->
<div class="ui inverted divided stackable grid">
<div class="three wide column">
<div class="ui inverted link list" >
<div class="item">
<img src="./images/MyIDcard.png" class="ui rounded png" alt="" style="width: 100px">
</div>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header my-opacity-adjust">最新論文</h4>
<div class="ui inverted link list" >
<a href="#" class="item"style="width: 15em ">論文作者故事(Writer Story)</a>
<a href="#" class="item"style="width: 15em ">團隊合作很重要</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header my-opacity-adjust">聯系我們</h4>
<div class="ui inverted link list" >
<a href="#" class="item"style="width: 15em ">Email:3360068374@qq.com</a>
<a href="#" class="item"style="width: 15em ">QQ:3360068374</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header my-opacity-adjust" style="width:30em" >網站介紹</h4>
<p class="my-text-thin my-text-spaced my-opacity-adjust"style="width:35em">我們致力於將來自計算機視覺領域世界三大頂級會議（即CVPR、ICCV和ECCV）的論文進行資源整合並進行數據分析。希望對來訪者有所幫助...</p>
</div>
</div>
<div class="ui inverted section divider"></div>
<p class="my-text-thin my-text-spaced my-opacity-adjust">Copyright by 2021 MyPaperTeam LilCrab&CPZ</p>
</div>
</footer>
7.功能結構圖
8.心路歷程和收獲&評價結對隊友
8.1心路歷程和收獲
陳鵬楨
不得不說這是第一次如此的開發經歷,不論是工作量還是工作模式,都對自己提出了很多的挑戰,深有體會的是,高壓模式下學習的效率和心態的起伏都有很高的要求,但也正是這種模式最能歷練產生真正的實踐學習成果,不論是服務器的部署,還是javaweb項目的初試開發,以及頁面之間的跳轉都是這短短時間內對自己的學習測試,欣慰的是,最后都順利的完成了.通過這次作業,也深感緊壓出成果的魅力,希望下次能體會細水長流出結果的醇香.總的來說,這次作業付出了很多的時間和情緒,但也對一些技術都能有了一些基本的了解和認知,以及快速的上手,對於自己的收獲我還是很認可的
黨朝媚
結對編程作業剛開始布置任務時，由於補考以及其他課程作業與軟件工程實踐作業全部堆疊在一起，我一度不知道怎么安排時間，在有向隊友、老師以及助教求助，自己做通了思想工作，這才開始了結對編程的作業。從時間和效率的角度出發，我選擇了做前端。說實話做前端的經驗比后端的更少，期間由於技術不成熟的問題效率低的不行，再加上自己情緒不穩定的壞毛病，雖然時間花了不少，但是前端也只是勉強完成。收獲是明白了其實有時候並不需要把自己的感受看得那么重要，因為這個世界除了自己還有其他人。
8.2評價結對隊友
陳鵬楨
對隊友前端框架新搭建的樣式還是基本滿意的,能滿足論文展示的基本要求,隊友應該是一個十分細心的女孩子,所以可能在一定方面工作效率還有待提高,但總體態度還是比較欣慰的,相比於別人昏昏碌碌的態度,隊友能夠跟上節奏,花時間去做我對目前項目進度提出的要求我就已經很滿意了,自己在繁瑣的代碼工作中可能有時候會催促進度,感激隊友的還算比較積極的態度
黨朝媚
隊友能力很強，性格頁很直爽，效率很高，對我很包容。