| 這個作業屬於哪個課程 | 2021春軟件工程實踐/S班 |
|---|---|
| 結對學號 | 221801109 、221801130 |
| 這個作業要求在哪里 | 結對作業二 |
| 作業的目標 | 閱讀《構建之法》並體現成果、完成原型模型設計、撰寫博客 |
| 其他參考文獻 | CSDN、簡書、《構建之法》、GitHub |
git倉庫鏈接和代碼規范鏈接
項目服務器鏈接
PSP表格
| PSP2.1 | Personal Software Process Stages | 預估耗時（分鍾） | 實際耗時（分鍾） |
|---|---|---|---|
| Planning | 計划 | ||
| • Estimate | • 估計這個任務需要多少時間 | 60 | 60 |
| Development | 開發 | ||
| • Analysis | • 需求分析 (包括學習新技術) | 600 | 550 |
| • Design Spec | • 生成設計文檔 | 120 | 100 |
| • Design Review | • 設計復審 | 60 | 100 |
| • Coding Standard | • 代碼規范 (為目前的開發制定合適的規范) | 20 | 20 |
| • Design | • 具體設計 | 500 | 550 |
| • Coding | • 具體編碼 | 900 | 950 |
| • Code Review | • 代碼復審 | 240 | 180 |
| • Test | • 測試（自我測試，修改代碼，提交修改） | 100 | 180 |
| Reporting | 報告 | 150 | 140 |
| • Test Repor | • 測試報告 | 60 | 70 |
| • Size Measurement | • 計算工作量 | 30 | 20 |
| • Postmortem & Process Improvement Plan | • 事后總結, 並提出過程改進計划 | 60 | 50 |
| 合計 | 2750 | 2800 |
成品展示
1、查詢功能（模糊搜索）：
2、翻頁功能
3、查看論文詳情功能
4、刪除功能
5、熱詞分析功能（ICCV、ECCV、CVPR）
6、查看top10領域
7、完整呈現結果 —— GIF動圖：
結對討論過程描述
首先拿到題目進行了需求分析，互相討論之后大致了解了題目所要實現的功能。經過資料查詢和探討之后，我們決定采用jsp+servlet技術來實現本次作業。我們將討論過程分為三部分。
第一部分：web前端討論。
問題：制作怎樣的web前端，如何制作？
解決：由於第一次結對時已經對平台原型進行了較為充分的討論，所以我們以原型模型為模板，進行原型模型樣式的前端設計；查閱和復習web前端知識。
第二部分：前后端交互討論。
問題：如何實現頁面功能、頁面的跳轉，以及頁面之間、servlet之間如何傳值
解決：由於這部分兩人都沒有什么經驗，於是在這部分上花費了大部分時間進行資料查詢共享，疑惑點討論，最后采用form表單以及href方式解決問題。
第三部分：頁面美化討論
問題：當前頁面初步成型，實現了大部分功能，但頁面較不美觀，如何進行頁面美化？
解決：在網上查閱資料並討論最終通過CSS實現了頁面美化。
結對過程截圖：
設計實現過程
首先我們根據作業一中設計的原型模型，對前端網頁進行了初步的設計，達到了原形模型大部分的頁面預期效果。
然后完成Jason數據的解析和數據庫表設計，並將解析的數據，按照設計好的數據庫模型存入數據庫。
之后根據前端的設計，進行后端的邏輯開發：首先完成與數據庫的對接，然后對各個頁面的邏輯功能進行開發設計，完成頁面跳轉，數據讀取，數據分析，以及模糊查詢等一系列功能,完成了對已爬取的論文列表進行操作。之后分別再echarts官網和動態柱狀圖視頻中學習了詞雲圖和熱度趨勢的制作，順利制作出TOP10詞雲圖和三大平台熱度走勢。
最后對基本完成的平台進行了進一步美化，至此平台初步完成。
數據庫表設計：
post表：
topKeyWord表：
功能結構圖：
代碼說明
一、論文操作
1、定義文章類接口
public interface PostDAO {
int getTotal();
void delete(String title) ;
List<Post> list();
List<Post> list(String text);
}
2、關鍵接口實現
@Override
public List<Post> list() {
String sql = "select * from post";
List<Post> postList = new ArrayList<>();
try (Connection c = DBUtil.getConnection(); Statement s = c.createStatement()) {
ResultSet rs = s.executeQuery(sql);
while (rs.next()) {
String title = rs.getString("title");
String content = rs.getString("content");
String link = rs.getString("link");
String keyWord = rs.getString("keyWord");
String time = rs.getString("time");
String platform = rs.getString("platform");
postList.add(new Post(title, content, link, keyWord, time, platform));
}
} catch (SQLException e) {
e.printStackTrace();
}
return postList;
}
@Override
public List<Post> list(String text) {
String sql = "select * from post where title like '%" + text + "%' or keyword like '%" + text + "%' ";
List<Post> postList = new ArrayList<>();
try (Connection c = DBUtil.getConnection(); Statement s = c.createStatement()) {
ResultSet rs = s.executeQuery(sql);
while (rs.next()) {
String title = rs.getString("title");
String content = rs.getString("content");
String link = rs.getString("link");
String keyWord = rs.getString("keyWord");
String time = rs.getString("time");
String platform = rs.getString("platform");
postList.add(new Post(title, content, link, keyWord, time, platform));
}
} catch (SQLException e) {
e.printStackTrace();
}
return postList;
}
3、通過PostServlet調用文章類接口進行模糊查詢並將得到的List返回index.jsp中，實現文章顯示功能。
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
req.setCharacterEncoding("utf-8");
List<Post> list = new ArrayList<>();
`
`
`
postList = postDAO.list(string);
req.setAttribute("key",string);
req.setAttribute("postList",list);
req.setAttribute("count",count);
req.setAttribute("page",page);
req.getRequestDispatcher("/index.jsp").forward(req,resp);
}
<c:forEach items="${postList}" var="post">
<tr>
<td width="15%">${post.title} </td>
<td width="15%">${post.content} "></td>
<td width="26%">${post.keyWord} <input type="hidden" id="key" name="key" value="${key}"></td>
<td width="20%">${post.link}</td>
<td width="8%">${post.time}</td>
<td width="8%">${post.platform}</td>
<td width="5%">
<input type="button" id="see" name="see" value="查看" onclick="window.location='content?title=${post.title}&key=${key}'">
</td>
</tr>
</c:forEach>
4、實現翻頁功能,通過每次只讀取List中十條記錄的方式來實現翻頁功能；當觸發向前翻頁按鈕時，list讀取向前回滾十條；觸發向后翻頁按鈕，list往后讀取十條；通過count和page返回當前頁數和總頁數。
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
req.setCharacterEncoding("utf-8");
List<Post> list = new ArrayList<>() ;
int count = 0;
String string = " ";
System.out.println(req.getParameter("key"));
if (req.getParameter("nex") != null) { //往后翻頁
count = (Integer.parseInt(req.getParameter("nex")) + 1) * 10;
string = req.getParameter("string2");
} else if (req.getParameter("pre") != null) { //往前翻頁
count = (Integer.parseInt(req.getParameter("pre")) - 1) *10;
string = req.getParameter("string1");
}
List<Post> postList = new ArrayList<>();
postList = postDAO.list(string);
int size = postList.size();
int page = 1;
if (size % 10 == 0) {// 如果記錄總條數對每頁顯示記錄數取整等於0，則表示頁面數剛好分完。
page = size / 10;
list = postList.subList(count, count+10);
} else {// 如果取不盡，那么就添加一頁來放剩余的記錄
if (size <= 10) {
page = 1;
list = postList.subList(count, size);
} else {
page = postList.size() / 10 + 1;
if (count < (page-1)*10 ) {
list = postList.subList(count, count+10);
} else {
list = postList.subList(count, count+postList.size()-(page-1)*10);
}
}
}
}
<form method="post" id="form4" action="<%=path%>/hello">
<c:if test="${key!=null}">
<input type="hidden" id="string1" name="string1" value="${key}">
<input type="hidden" id="pre" name="pre" value="${count}">
</c:if>
<input type="submit" id="previous" value="Previous" style="margin-left: 70%" >
</form>
<form method="post" id="form5" action="<%=path%>/hello">
<c:if test="${key!=null}">
<input type="hidden" id="string2" name="string2" value="${key}">
<input type="hidden" id="nex" name="nex" value="${count}">
</c:if>
<input type="submit" id="next" value="Next" style="margin-left: 1%" >
</form>
共 ${page}頁
當前第 ${count+1}頁
5、實現刪除功能,通過DeleteServlet調用文章類的接口，實現論文刪除功能
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
req.setCharacterEncoding("utf-8");
String title = req.getParameter("string1");
String string = req.getParameter("string2");
userDAO.delete(title);
this.getServletContext().setAttribute("key",string);
req.getRequestDispatcher("/hello").forward(req,resp);
}
二、論文分析
1、三大平台熱度趨勢，通過echarts使用動態柱狀圖實現不同年份的熱詞變化趨勢。下面只出示ICCV平台關鍵代碼，另外兩個平台以此類推。
資料參考：https://www.bilibili.com/video/BV177411h781?t=372&p=2
<script type="text/javascript">
xAxis: [
{
type:'category',
data: countryList,
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
return '{value|' + value + '}';
},
margin: 20,
rich: {
`
`
`
}
}
},
],
yAxis:[
{
name:'熱度',
type:'value',
nameTextStyle:{
fontSize:18
},
axisLabel:{
fontSize:18
}
},
],
},
options:[]
};
}
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
2、TOP10個熱門領域，KeyWordServlet通過調用數據庫獲取十個熱門關鍵詞，並將關鍵詞和各自對應頻率返回到jsp中通過Echarts詞雲圖形式展現出來，通過隨機數生成方式使每次刷新詞雲圖的位置和顏色皆可發生變化。
資料參考：https://github.com/ecomfe/echarts-wordcloud
<script>
var chart = echarts.init(document.getElementById('cloud'));
var option = {
series: [ {
textStyle: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
0.8
].join(',') + ')';
}
},
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [
{
name: '${keyWordList[0]}',
value: ${valueList[0]}
}
`
`
`
]
} ]
};
chart.setOption(option);
chart.on('click',function(params){
var name = params.data.name;
window.location.href="hello?string="+name;
//alert(name);
console.log(name);
});
window.onresize = chart.resize;
</script>
心路歷程和收獲
221801109池毓地：這次結對加深了我對web開發的理解，幫助我更好的掌握了前端的設計與美化，同時初步了解了前后端交互的實現方法，是一次很有意義的作業。本次開發過程中，我的表現並不是太好，很多時候我都表現的像個什么都不會的小白，但是我明白了一個道理，只要願意學習，並沒有什么事是無法解決的，因此不斷的學習才是進步的來源。
221801130梁揚新：本次結對作業，讓我學習到了很多的技術，包括但不限於前后端的交互、服務器的搭建等，對我的編程水平有很大的提升。通過這次的編程，我對團隊項目的開發有了更好的掌握，包括團隊開發的總體進度，團隊的任務分配等，對我的項目管理能力也有很大的提升。總體而言，本次結對是一次十分有意義的開發。
評價結對隊友
221801109池毓地：我的隊友揚新是一個做事十分認真負責，條理清晰的人，對整個項目的進度有較好的把控。同時他十分有耐心，面對拖后腿的我，沒有嫌棄，而是十分認真的教會了我各種開發技能，是一個十分難得的好隊友。很多時候我對他說的技術一頭霧水，而揚新看到我的窘迫，總是一臉淡定的和我說：“沒關系的，交給我吧”，然后將解決的方法傳授給我，讓我在完成任務的同時獲得了能力的提升。
221801130梁揚新：我的隊友毓地總是能夠熱情的對待討論分配的任務，每次當遇到困難時都會他非常認真去學習。其實實踐就是一個互相促進的過程。我對前端的設計美化並不是太在行，而毓地較好的彌補了我這方面的弱點，對前端進行了較好的設計美化；在這次結對過程中，再一次體驗到合作的好處，總而言之，這次結對收獲頗豐！