天天看點
傳回

結對作業二

這個作業屬于哪個課程 2021春軟體工程實踐/S班
結對學号 221801109 、221801130
這個作業要求在哪裡 結對作業二
作業的目标 閱讀《建構之法》并展現成果、完成原型模型設計、撰寫部落格
其他參考文獻 CSDN、簡書、《建構之法》、GitHub
目錄
  • git倉庫連結和代碼規範連結
  • 項目伺服器連結
  • PSP表格
  • 成品展示
  • 結對讨論過程描述
  • 設計實作過程
  • 代碼說明
    • 一、論文操作
    • 二、論文分析
  • 心路曆程和收獲
  • 評價結對隊友

git倉庫連結
代碼規範連結

項目連結

PSP2.1 Personal Software Process Stages 預估耗時（分鐘） 實際耗時（分鐘）
Planning 計劃
• Estimate • 估計這個任務需要多少時間 60
Development 開發
• Analysis • 需求分析 (包括學習新技術) 600 550
• Design Spec • 生成設計文檔 120 100
• Design Review • 設計複審
• Coding Standard • 代碼規範 (為目前的開發制定合适的規範) 20
• Design • 具體設計 500
• Coding • 具體編碼 900 950
• Code Review • 代碼複審 240 180
• Test • 測試（自我測試，修改代碼，送出修改）
Reporting 報告 150 140
• Test Repor • 測試報告 70
• Size Measurement • 計算工作量 30
• Postmortem & Process Improvement Plan • 事後總結, 并提出過程改進計劃 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詞雲圖和三大平台熱度走勢。

最後對基本完成的平台進行了進一步美化，至此平台初步完成。

功能結構圖：

結對作業二

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>
                        共&nbsp;&nbsp;${page}頁&nbsp;&nbsp;
                        目前第&nbsp;${count+1}頁&nbsp;&nbsp;
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梁揚新：我的隊友毓地總是能夠熱情的對待讨論配置設定的任務，每次當遇到困難時都會他非常認真去學習。其實實踐就是一個互相促進的過程。我對前端的設計美化并不是太在行，而毓地較好的彌補了我這方面的弱點，對前端進行了較好的設計美化；在這次結對過程中，再一次體驗到合作的好處，總而言之，這次結對收獲頗豐！
上一篇: 結隊作業一
下一篇: vue架構（為什麼要是用Vue，好處是什麼）