黃師塔前江水東，春光懶困倚微風(fēng)。桃花一簇開無主，可愛深紅愛淺紅。

擴大

縮小

結(jié)對作業(yè)二

結(jié)對第二次作業(yè)

這個作業(yè)屬于哪個課程	2021春軟件工程實踐\|S班
這個作業(yè)要求在哪里	結(jié)對第二次作業(yè)——頂會熱詞統(tǒng)計的實現(xiàn)
結(jié)對學(xué)號	221801121、221801131
這個作業(yè)的目標	對已爬取的論文列表進行操作、分析已爬取到的論文信息
其他參考文獻	博客園，CSDN，菜鳥教程

結(jié)對第二次作業(yè)

Github地址

Github倉庫地址：https://github.com/hh-afk/PairProject

PSP表格

221801121的PSP2.1	Personal Software Process Stages	預(yù)估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃
?Estimate	估計這個任務(wù)需要多少時間	20	20
Development	開發(fā)
?Analysis	需求分析 (包括學(xué)習(xí)新技術(shù))	200	300
?Design Spec	生成設(shè)計文檔	20	20
?Design Review	設(shè)計復(fù)審	30	30
?Coding Standard	代碼規(guī)范 (為目前的開發(fā)制定合適的規(guī)范)	30	30
?Design	具體設(shè)計	60	100
?Coding	具體編碼	800	700
?Code Review	代碼復(fù)審	30	10
?Test	測試（自我測試，修改代碼，提交修改）	180	320
Report	報告
?Test Report	測試報告	0	0
?Size Measurement	計算工作量	10	10
?Postmortem & Process Improvement Plan	事后總結(jié), 并提出過程改進計劃	30	30
	合計	1410	1570

221801131的PSP2.1	Personal Software Process Stages	預(yù)估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃
?Estimate	估計這個任務(wù)需要多少時間	35	25
Development	開發(fā)
?Analysis	需求分析 (包括學(xué)習(xí)新技術(shù))	250	300
?Design Spec	生成設(shè)計文檔	20	20
?Design Review	設(shè)計復(fù)審	30	30
?Coding Standard	代碼規(guī)范 (為目前的開發(fā)制定合適的規(guī)范)	0	0
?Design	具體設(shè)計	150	200
?Coding	具體編碼	1000	1200
?Code Review	代碼復(fù)審	30	20
?Test	測試（自我測試，修改代碼，提交修改）	15	20
Report	報告
?Test Report	測試報告	0	0
?Size Measurement	計算工作量	10	10
?Postmortem & Process Improvement Plan	事后總結(jié), 并提出過程改進計劃	30	30
	合計	1345	1855

訪問鏈接

訪問鏈接：http://116.62.208.168:8080/demo_war

展示成品

1、主頁

2、點擊論文查詢，進入查詢界面

如果沒有輸入內(nèi)容就進行搜索，則輸出所有在數(shù)據(jù)庫內(nèi)的論文，有輸入則進行模糊搜索

點擊刪除可以刪除論文

點擊關(guān)鍵詞可以跳轉(zhuǎn)具體的某個關(guān)鍵詞的搜索結(jié)果

點擊摘要可以具體展示摘要內(nèi)容

論文分析提供了一個詞云圖，鼠標懸停可以顯示具體出現(xiàn)次數(shù)，可以通過點擊查看詳情

熱詞分析提供了3個頂會的動態(tài)條形圖

結(jié)對討論過程描述

最開始，拿到論文數(shù)據(jù)后我們不知道如何處理，我們希望處理json然后將數(shù)據(jù)提取進數(shù)據(jù)庫中，然后使用c++和python對數(shù)據(jù)進行了處理，提取到了服務(wù)器端的數(shù)據(jù)庫中，然后對論文分析、論文查詢、論文列表分別編程實現(xiàn)

設(shè)計實現(xiàn)過程

設(shè)計工具和技術(shù)

開發(fā)工具：IDEA、VSCODE、VS2019

使用技術(shù)：jsp、servlet、javabean、Echarts、Javascript、html+css

項目設(shè)計與實現(xiàn)

最開始我們使用c++和python處理提取了數(shù)據(jù)后，希望使用JavaEE的三件套—JSP+Servlet+JavaBean實現(xiàn)項目
爬蟲方面因為沒有思路所以沒有實現(xiàn)，數(shù)據(jù)存儲在了mysql中，通過服務(wù)器遠程訪問。
用到的圖表包括動態(tài)圖表和詞云圖都是使用Echarts制作的，代碼內(nèi)嵌進jsp中。

功能結(jié)構(gòu)圖

代碼說明

主頁

主頁到各個頁面的跳轉(zhuǎn)直接采用了a標簽跳轉(zhuǎn)，點擊將直接跳轉(zhuǎn)。

搜索頁面

我們采用了get方法來傳遞參數(shù)

    <form action="postList" method="get">
        <img src="./img/chalunwen.png" id="imgsearch"><br>
        <input type="text" name="search" id="search"/>
        <input type="submit" id="buttonsub"/><br>
    </form>

在servlet接受參數(shù)，首先檢查當前是翻頁還是搜索，如果是翻頁則posts中存在數(shù)據(jù)直接讀出；如果是搜索則posts為null，進入if語句。
為了減少代碼冗余，我們將搜索結(jié)果和論文管理設(shè)在同一個jsp中，如果搜索內(nèi)容為空則展示論文管理界面，顯示所有內(nèi)容，否則展示搜索結(jié)果。

    List<Post> posts = (List<Post>) req.getAttribute("posts");// 取得共享里面的數(shù)據(jù)
    if (posts == null){
        String search = req.getParameter("search");
        req.setAttribute("search",search);
        postDAO = new PostDAOimpl();
        if(search.equals(""))posts = postDAO.list();
        else posts = postDAO.listSearch(search);
    }

搜索結(jié)果&論文管理

關(guān)于分頁：采用了從網(wǎng)上查找的一種比較簡單的方式，即設(shè)置參數(shù)，連接跳轉(zhuǎn)。我們最后將每一頁的內(nèi)容調(diào)整為30篇。

	// 接收分頁頁面?zhèn)鬟f過來的頁面數(shù)
    String strNum = req.getParameter("pageNum");
    int pageNum = 0;// 表示當前要顯示的頁面數(shù)
    int maxPage = 0;// 最大頁
    int pageCount = posts.size();// 得到查詢出來的所有數(shù)據(jù)的數(shù)目
    // 如果是第一次執(zhí)行,就會接收不到數(shù)據(jù)
    // 計算出要分多少頁
    if (pageCount % 31 == 0) {
        maxPage = pageCount / 31;
    } else {
        maxPage = pageCount / 31 + 1;
    }
    if ((strNum == null)||(strNum.equals(""))) {
        strNum = "0";
    } else {// 接收到了用戶點擊的第幾(pageNum)頁
        pageNum = Integer.parseInt(strNum);
        if (pageNum < 0 || pageNum > maxPage)pageNum = 0;
    }
    req.setAttribute("maxPage", maxPage);// 存儲最大頁數(shù)
    req.setAttribute("pageNum", pageNum);// 將當前頁面存儲起來,給分頁頁面使用

標題：檢查搜索參數(shù)，若為空顯示論文管理，不為空則顯示***的搜索結(jié)果

<%
String flag = request.getParameter("search");
if (flag.equals("")){
%>
<img src="./img/lunwenguanli.png" width="25%">
<%
}
else {
%>
<h1><%=flag%>的搜索結(jié)果</h1>
<%
	}
%>

搜索結(jié)果循環(huán)打印，展示為表格形式：按頁碼參數(shù)獲取應(yīng)該展示的內(nèi)容
給關(guān)鍵詞加上了跳轉(zhuǎn)，點擊則以該關(guān)鍵詞為參數(shù)搜索。
原文鏈接點擊則會按原文鏈接跳轉(zhuǎn)。
刪除數(shù)據(jù)則則利用onclick執(zhí)行，點擊會有提示。

<%
    if (flag != null){
    int pageNum = (int) request.getAttribute("pageNum");
    int maxPage = (int) request.getAttribute("maxPage");
    int end = (pageNum + 1) * 31 - 1;
    int begin = pageNum * 31;
    List<Post> posts = (List<Post>) request.getAttribute("posts");

    for(int i = begin;i < end && i < posts.size();i++)
    {
        Post post = (Post)posts.get(i);
%>
<tr >
    <td><%=post.getTitle() %></td>
    <td class="td1"><%=post.getAbs() %></td>
    <td>
        <%
            List<String> kwd = post.getKwds();
            for (int j = 0;j<kwd.size();j++){
        %>
            <a href="postList?search=<%=kwd.get(j)%>"><%= kwd.get(j)%>
            </a>
        <%
            }
        %>
    </td>
    <td><a href="<%=post.getLink()%>"><%=post.getLink() %></a></td>
    <td><%=post.getYear() %></td>
    <td><%=post.getType() %></td>
    <td><input type="button" style="" value="刪除數(shù)據(jù)" onclick="if(confirm('確認？')==false)return false;location.href='DeleteServlet?id=<%=post.getId()%>&search=<%=flag%>'" /></td>
</tr>
<%
    }
%>

由于簡介過長，我們將其多余部分隱藏，點擊之后利用layer展示

$(function () {
    $("td").on("click",function() {
        if (this.offsetWidth < this.scrollWidth) {
            var that = this;
            var text = $(this).text();
            //layer.alert(text);
            layer.open({
                title: '內(nèi)容簡介',
                offset: '25%',
                content: text
            });
        }
    });
})

分析界面

分析界面主要利用了echarts的動圖展示和詞云，進行了更改和加入wordcount統(tǒng)計的熱詞數(shù)據(jù)，代碼這里就不多放了。

關(guān)于熱詞走勢：

本來是想將3個頂會的熱詞走勢放在一個界面之中，但是失敗了，就放在了3個界面，利用下拉菜單跳轉(zhuǎn)。

詞云的跳轉(zhuǎn)也是利用單詞作為參數(shù)跳轉(zhuǎn)搜索：

chart.on('click',function(params){
    var name = params.data.name;
    window.location.href="postList?search="+name;
    //alert(name);
    console.log(name);
});

關(guān)于詞云的顏色：隨機生成，有時可能不太好看...

color: function () {
    return 'rgb(' + [
        Math.round(Math.random() * 255),
        Math.round(Math.random() * 255),
        Math.round(Math.random() * 255),
        0.8
    ].join(',') + ')';
}

關(guān)于數(shù)據(jù)存儲

我們將助教爬取的json文件利用python解析后存入數(shù)據(jù)庫中
（剛開始部分使用c++提取，結(jié)果關(guān)于json解析的庫配置出問題用不了，然后用了一堆if強行讀取。后來又出了不知道的錯，就改用python了）

部分python代碼：

利用這個函數(shù)讀取目錄下所有文件名：

def readname():
filePath = 'E:\\ECCV'
name = os.listdir(filePath)
return name

然后存為一系列insert語句：

if __name__ == "__main__":
name = readname()
for i in name:
    with open('E:\\ECCV'+i, 'r', encoding='utf-8') as f:
        data = json.load(f)

    value_ca = ((data['論文名稱'],data['摘要'],data['關(guān)鍵詞'], data['原文鏈接']))

    fo = open("2018.txt", "a" ,encoding='utf-8')
    fo.write("insert into post values (\""+data['論文名稱']+"\""+","+"\""+data['摘要']+"\""+","+"\""+
          ",".join(str(i) for i in data['關(guān)鍵詞'])+"\""+","+"\""+data['原文鏈接']+"\""+","+"\"2018\""+","+"\"ECCV\");\n")

不過由于這與本次作業(yè)相關(guān)不大，也就沒有保存，上面這是最后讀取的ECCV2018年的代碼。

下面是我們的數(shù)據(jù)表結(jié)構(gòu)：由一個自增的字段作為主鍵

關(guān)于數(shù)據(jù)讀取與操作

我們操作在PostDAOIml之中。

關(guān)于查詢：我們利用了sql的%對論文名稱和關(guān)鍵詞進行模糊查詢，并且按論文年份和頂會降序排列，最近也就是2020年的論文會排在最前面。
關(guān)鍵詞：數(shù)據(jù)庫中存的是以逗號分隔的字符串，到這里則分為一個list

public List<Post> listSearch(String search) {
    List<Post> postList = new ArrayList<>();
    try (Connection c = DBUtil.getConnection(); Statement s = c.createStatement()) {
        String sql = "select * from post where title like \'%%" + search +"%%\'" + "or keywords like \'%%" + search +"%%\'order by year desc,type";
        ResultSet rs = s.executeQuery(sql);
        while (rs.next()){
            int id = rs.getInt("id");
            String title = rs.getString("title");
            String keywords = rs.getString("keywords");
            String abs = rs.getString("abstract");
            String link = rs.getString("link");
            String year = rs.getString("year");
            String type = rs.getString("type");
            List<String> kwds= Arrays.asList(keywords.split(","));
            postList.add(new Post(id,title,kwds,abs,link,year,type));
        }
    }catch (SQLException e) {
        e.printStackTrace();
    }
    return postList;
}

還有一個獲取全部論文的List無參函數(shù)：

    public List<Post> list() {
    List<Post> postList = new ArrayList<>();
    try (Connection c = DBUtil.getConnection(); Statement s = c.createStatement()) {
        String sql = "select * from post order by year desc,type";
        ResultSet rs = s.executeQuery(sql);
        while (rs.next()){
            int id = rs.getInt("id");
            String title = rs.getString("title");
            String keywords = rs.getString("keywords");
            String abs = rs.getString("abstract");
            String link = rs.getString("link");
            String year = rs.getString("year");
            String type = rs.getString("type");
            List<String> kwds= Arrays.asList(keywords.split(","));
            postList.add(new Post(id,title,kwds,abs,link,year,type));
        }
    }catch (SQLException e) {
        e.printStackTrace();
    }
    return postList;
}

關(guān)于刪除：利用主鍵id進行刪除

public void delete(int id) {
    try (Connection c = DBUtil.getConnection(); Statement s = c.createStatement()) {
        String sql = "delete from post where id = '" + id + "'";
        s.executeUpdate(sql);
    } catch (SQLException e) {
        e.printStackTrace();
    }
}

刪除的參數(shù)id由上個頁面?zhèn)鬟f，刪除成功后則會以先前的搜索參數(shù)，回到搜索結(jié)果的列表。（如果是管理列表也同樣回到管理列表）：

    int id = Integer.parseInt(req.getParameter("id"));
    String search = req.getParameter("search");
    postDAO.delete(id);
    req.getRequestDispatcher("/postList?search="+search).forward(req, resp);

類結(jié)構(gòu)

Post類：

public class Post {
	private int id;
	private String title;
	private List<String> kwds;
	private String abs;
	private String link;
	private String year;
	private String type;

以及構(gòu)造函數(shù)和各個get和set函數(shù)。

其他

關(guān)于熱詞的統(tǒng)計：我們將數(shù)據(jù)中的熱詞讀出，存成txt，再利用經(jīng)過修改的wordcount統(tǒng)計：

public static void kwd(){
	List<String> kwd = new ArrayList<String>();
	try (Connection c = getConnection(); Statement s = c.createStatement()) {
		String sql = "select keywords from post where type = 'ECCV'";
		ResultSet rs = s.executeQuery(sql);
		while (rs.next()){
			String keywords = rs.getString("keywords");
			kwd.add(keywords);
		}
	}catch (SQLException e) {
		e.printStackTrace();
	}
	try {
		BufferedWriter out = new BufferedWriter(new FileWriter("ECCV.txt"));
		for (int i=0;i<kwd.size();i++){
			out.write(kwd.get(i));
			out.write(',');
		}
		out.close();
		System.out.println("文件創(chuàng)建成功！");
	} catch (IOException e) {
	}
}

我們在熱詞之間利用逗號隔開，稍微修改了下上次作業(yè)的wordcount，得到了熱詞的頻數(shù)數(shù)據(jù)。

心路歷程和收獲&評價結(jié)對隊友

221801121

心路歷程和收獲

看到這個題目的時候,感覺特別復(fù)雜，完全不知道如何實現(xiàn)，好在我的隊友f哥十分優(yōu)秀，把整個比較大的項目分成了提取數(shù)據(jù)、前后端分別實現(xiàn)圖表和后臺的數(shù)據(jù)處理，一步一步實現(xiàn)就簡單了許多。

總的來說項目還是要腳踏實地的分模塊一個一個做的，要是看到需求就被嚇到了然后草草做個界面交差就不會獲得能力的提高，通過這次作業(yè)學(xué)到了很多前端的知識，并且上手了echarts這么一個挺厲害的圖表庫，還進行了第一次服務(wù)器配置和部署。

評價隊友

隊友是個非常努力的人，結(jié)對中的后端部分全是他完成的。態(tài)度十分積極，要求發(fā)布的當天就開始討論實現(xiàn)一些功能了，隊友愿意學(xué)習(xí)新技術(shù)、在結(jié)對中編程能力也有所提升，是一個非常棒的隊友！他的開發(fā)進度很快，給了我很多的幫助。

221801131

心路歷程和收獲

初見題目的時候是感覺頭很大，但是靜下心來想一想，基礎(chǔ)功能也不是非常難以實現(xiàn)，將json文件讀取分析插入數(shù)據(jù)庫后，實現(xiàn)的思路就簡單清晰很多了。
在進行json讀取分析的時候發(fā)現(xiàn)python和c++簡直不是一個難度的。。。。python解析處理json數(shù)據(jù)非常輕松+愉快，后悔沒有早上手python。

在處理數(shù)據(jù)的時候還碰到的一個比較頭疼的問題是文件中有一些的特殊字符，一堆除了復(fù)制打都打不出來的字符，一插入數(shù)據(jù)庫就報錯，花了好久才完成數(shù)據(jù)的處理操作。

最后想來還是有點可惜，我們兩個人的項目經(jīng)驗都不足，一開始因為JvavaEE的配置都處理一大堆問題，像是lib，tomcat版本，數(shù)據(jù)庫版本等等問題，浪費了一堆時間。
還有因為團隊git實訓(xùn)，也給我們帶來了提升，對這個項目有積極影響。
評價隊友　　

隊友是個干勁十足的人，學(xué)習(xí)新技術(shù)上手很快，在結(jié)對作業(yè)中對我還是有很多幫助的，像是動態(tài)圖表和詞云那一塊的工作都是他搞定的，部署服務(wù)器也是他教會我的。

posted @ 2021-03-31 18:13 fujiangfer 閱讀(122) 評論(7) 收藏舉報

刷新頁面返回頂部

fujiangfer