結對作業二

目錄

• • • 1.作業資訊
    • 2.github倉庫位址和代碼規範
    • 3.PSP表格
    • 4.雲伺服器連結
    • 5.作品展示
      • 登入界面->請輸入正确的使用者名和密碼哦
      • 論文頁面
      • 論文平台支援模糊查找
      • 新增一篇論文資訊
      • 編輯一篇論文資訊，并進行檢視
      • 删除一篇論文資訊
      • 關鍵詞圖譜->移到關鍵詞條上可以看到部分資料，點選也有跳轉喲
      • 熱詞走勢
      • 點選關鍵詞，熱詞跳轉->你想跳的，這裡都有
      • 表格分頁->10條太多看不過來，那就換成5條吧
      • 平台資訊->我編的，你别信
    • 6.結對過程讨論
      • 折線圖和柱狀圖的制作讨論
      • 學習使用springboot過程中的讨論
      • 實作編輯文章的功能
      • ui界面設計的讨論
    • 7.設計實作過程
      • 資料庫表
      • 項目架構
      • 前端
      • 後端
      • 功能子產品
    • 8.關鍵代碼描述
      • 1.熱詞統計
        • 從資料庫中提取資料,擷取每篇文章出現的關鍵詞并進行統計
        • 将HashMap中的包含映射關系的視圖entrySet轉換為List,然後重寫比較器
        • 如果目前字元詞頻與下一個不一樣，則對目前所有同詞頻單詞排序
      • 2.mybatis的sql語句
        • 分頁查詢,根據前端傳入每頁條數進行sql語句的通路
        • 按條件查詢并分頁,使用辨別符綁定傳遞的參數，在通過sql語句進行查找，這段代碼也是實作模糊查詢功能的sql部分代碼
      • 3.餅圖的動态設定
        • 通過綁定後端的dataTobin方法，獲得前10關鍵詞的排行資料，并進行動态初始化
        • 餅圖的點選跳轉事件
    • 9.心路曆程與收獲
    • 10.隊友評價

這個作業屬于哪個課程	2021春軟體工程實踐|W班 (福州大學)
這個作業要求在哪裡	結對作業二
結對學号	221801307 & 221801327
這個作業的目标	1.fork倉庫，和夥伴商讨如何通過github協作/代碼規範等  2.使用Web知識實作原型設計的部分功能  3.将項目部署到雲伺服器上，并釋出release版本  4.根據作業要求撰寫第一個部落格  5.在deadline之前送出部落格
其他參考文獻	CSDN、簡書部落格、github

github倉庫位址

代碼規範

PSP2.1	Personal Software Process Stages	預估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃	15
·Estimate	估計這個任務需要多少時間
Development	開發	1480	1922
·Analysis	·需求分析（包括學習新技術）	90	120
·Design Spec	·生成設計文檔	30	40
·Design Review	·設計複審	10	20
·Coding Standard	·代碼規範（為目前的開發指定合适的規範）
·Design	·具體設計
·Coding	·具體編碼	1200	1564
·Code Review	·代碼複審		24
·Test	·測試（自我測試，修改代碼，送出修改）	60	74
Reporting	報告	115	100
·Test Repor	·測試報告
·Size Measurement	·計算工作量	45
·Postmortem & Process Improvement Plan	·事後總結，并提出過程改進計劃
合計	1610	2037

爬論文雲伺服器連結

• 入口采用輪播圖播放，不要被迷住了!!!(user:cs1 pwd:123456)

• 論文展示->使用表格的形式向使用者展示資料，簡潔明了

 剛開始拿到題目的時候，我們還是很慶幸助教們降低了難度，暫時不需要我們通過學習爬蟲技術進行資料收集。但是，處理資料，将資料整理成我們可以使用的資料庫表也是一個鍛煉我們分析的過程

 随後，我們大緻配置設定了一下兩個人學習的方向，互相學習，查找資料，通過運作一些小項目和觀看視訊，逐漸幫助我們熟悉springboot架構，layui，mybatis，druid，maven這些新朋友

 以下是我們讨論過程中的一些具體截圖，希望我們以後能和"新技術"hxd們相處的其樂融融

 第一次使用這樣的"新"架構，不得不說依賴的配置也是一門"藝術"活,在這個過程中我們查閱了很多架構上的資料，然後才将項目過程中的依賴一點點的導入進去，然後成功的運作了小小的項目。另外我們也學習了通過配置maven來幫助我們協調沖突

 一些資料在調用的過程中出現問題，不顯現。最終還是在"反複調試"後出來了成品

 這是在一次測試過程中，發現有部分資料沒有顯示，盡管"艱難"的debug，經過和隊友的讨論，我們發現問題出在我們增加了一個新的類型，卻忘記了對部分方法進行修改

 我們讨論設計了一個輪播圖界面跳轉登入界面，最後再進入論文平台的界面，雖然可能比較複雜。因為想學習用一下輪播圖框，然後把界面弄得好看一點

 資料庫中有四張表，分别是authors, admin, academics, keyword。 我們将論文資料整理成四張表，主要依賴academics這張包含論文資訊的表，在這張主表上面進行增删改查功能的實作。

 本次項目開發過程采用了springboot架構 + mybatis + druid + layui的技術，項目的架構結構如下

• 采用layui架構，使用layui元件進行布局，js動态生成資料，和連接配接頁面的跳轉
• 登入界面采用輪播圖播放一些圖檔
• 在使用者輸入使用者名，密碼，驗證碼時，會對輸入是否為空，驗證碼是否正确進行判斷
• 主界面采用layui架構的側邊欄 + 分頁面形式
• 論文的資料通過表格進行展示，實作增删改查的按鈕與事件響應綁定，并彈出對應的對話框與使用者進行響應互動
• 關鍵詞圖譜和熱詞趨勢采用echarts插件對資料庫中檢索到的資料進行展示，并在點選時實作響應和部分資料顯示
• 平台詳情顯示一些關于平台的具體資訊，供使用者和平台進行聯系

• 采用springboot架構，資料庫使用mybatis進行連接配接和關閉
• pojo : 封裝了Academics, Admin, Keywords, author, ResultBean類，前四個對應資料庫建立的四張表，最後一個類封裝前後端互動的資料
• dao : 定義了AdminDao, KeywordDao, MyDao實作了資料庫各種類型增删該查的Mapper資料接口
• security : 定義了網站的權限通路，禁止使用者在未登入的情況下進入該系統
• service : 實作了每種接口的具體類Service和ServiceImpI
• config : 協同security管理權限
• controller : 通過調用service層來負責具體業務,供前端進行調用，并将結果傳回給前端

 該代碼實作在熱詞趨勢過程中，統計ICCV論文中前10關鍵詞的功能，并将關鍵詞的資料以Map的形式進行傳回

List<Keywords> list = keywordsService.findAllKeywordsICCV();
        Map<String, List> map = new HashMap<>();
        Map<String, Integer> ma = new HashMap<>();
        int num = 10;//輸出前十的關鍵詞

        for (int i = 0; i < list.size(); i++) {
            Keywords keywords = list.get(i);
            if (ma.get(keywords.getKeyword()) != null) {
                int value = ma.get(keywords.getKeyword());
                value++;  //該關鍵詞如果出現過就+1存入ma
                ma.put(keywords.getKeyword(), value);
            } else {
                ma.put(keywords.getKeyword(), 1);
            }

        }
           

List<Map.Entry<String, Integer>> list3 = new ArrayList<>(ma.entrySet());
        List<Integer> list4 = new ArrayList<>();
        List<String> list5 = new ArrayList<>();
        //idea自動轉化成lambda表達式
        list3.sort((o1, o2) -> o2.getValue().compareTo(o1.getValue()));
        //輸出
        //同詞頻單詞表
        List<String> sameFrequency = new ArrayList<>();
        //輸出統計
        int outputCount = 0;
        if (list3.size() < num) {
            num = list3.size();
        }
        if (list3.size() == 1) {//如果隻有一個關鍵詞，直接存入map，傳回給前端
            list4.add(list3.get(0).getValue());
            list5.add(list3.get(0).getKey());
            map.put("x", list5);
            map.put("y", list4);
            return map;
        }
           

for (int i = 0; i < list.size() && outputCount < num; i++) {
            if ((i == list.size() - 1) || !list3.get(i).getValue().equals(list3.get(i + 1).getValue())) {
                //将目前單詞加入同詞頻單詞表
                sameFrequency.add(list3.get(i).getKey());
                //對同詞頻單詞表排序
                sameFrequency.sort(String::compareTo);
                //按字典順序記錄同詞頻單詞
                for (String s : sameFrequency) {
                    list4.add(list3.get(i).getValue());
                    list5.add(s);
                    outputCount++;
                }
                sameFrequency.clear();
            } else sameFrequency.add(list3.get(i).getKey());
        }
           

 下面貼出完整代碼

public Map<String, List> dataToPic32() {
        List<Keywords> list = keywordsService.findAllKeywordsICCV();
        Map<String, List> map = new HashMap<>();
        Map<String, Integer> ma = new HashMap<>();
        int num = 10;//輸出前十的關鍵詞

        for (int i = 0; i < list.size(); i++) {
            Keywords keywords = list.get(i);
            if (ma.get(keywords.getKeyword()) != null) {
                int value = ma.get(keywords.getKeyword());
                value++;  //該關鍵詞如果出現過就+1存入ma
                ma.put(keywords.getKeyword(), value);
            } else {
                ma.put(keywords.getKeyword(), 1);
            }

        }

        List<Map.Entry<String, Integer>> list3 = new ArrayList<>(ma.entrySet());
        List<Integer> list4 = new ArrayList<>();
        List<String> list5 = new ArrayList<>();
        //idea自動轉化成lambda表達式
        list3.sort((o1, o2) -> o2.getValue().compareTo(o1.getValue()));
        //輸出
        //同詞頻單詞表
        List<String> sameFrequency = new ArrayList<>();
        //輸出統計
        int outputCount = 0;
        if (list3.size() < num) {
            num = list3.size();
        }
        if (list3.size() == 1) {//如果隻有一個關鍵詞，直接存入map，傳回給前端
            list4.add(list3.get(0).getValue());
            list5.add(list3.get(0).getKey());
            map.put("x", list5);
            map.put("y", list4);
            return map;
        }

        for (int i = 0; i < list.size() && outputCount < num; i++) {
            if ((i == list.size() - 1) || !list3.get(i).getValue().equals(list3.get(i + 1).getValue())) {
                //将目前單詞加入同詞頻單詞表
                sameFrequency.add(list3.get(i).getKey());
                //對同詞頻單詞表排序
                sameFrequency.sort(String::compareTo);
                //按字典順序記錄同詞頻單詞
                for (String s : sameFrequency) {
                    list4.add(list3.get(i).getValue());
                    list5.add(s);
                    outputCount++;
                }
                sameFrequency.clear();
            } else sameFrequency.add(list3.get(i).getKey());
        }
        map.put("x", list5);
        map.put("y", list4);
        return map;
    }
           

 使用mybatis定義執行的sql語句，并在dao内進行引用

<select id="getPage" resultType="Academics">
        select * from academics order by academicNum asc
            limit ${(start-1)*size}, ${size};
    </select>
           

<select id="queryByParamPage" resultType="Academics">
        select * from academics
        <where>
            <if test="author!=null and author!=''">
                author like concat('%',#{author},'%')
            </if>
            <if test="academicNum!=0">
                and academicNum = #{academicNum}
            </if>
            <if test="title!=null and title!=''">
                and title like concat('%',#{title},'%')
            </if>
            <if test="keyword!=null and keyword!=''">
                and keyword like concat('%',#{keyword},'%')
            </if>
        </where>
        order by academicNum asc
        limit ${(page-1)*limit},${limit};
    </select>
           

 其餘的查詢語句也一同展示在下面

<select id="findAllArticleList" resultType="Academics">
        select * from academics
    </select>

    <select id="findAllArticles" resultType="int">
        select count(*) from academics
    </select>

    <select id="getPage" resultType="Academics">
        select * from academics order by academicNum asc
            limit ${(start-1)*size}, ${size};
    </select>

    <insert id="addAcademic" parameterType="Academics">
        insert into academics(title, link, abstra, magazine, author, keyword, academicNum)
        values (#{title}, #{link}, #{abstra}, #{magazine}, #{author}, #{keyword}, #{academicNum})
    </insert>
    <!--更新文章-->
    <update id="updateAcademic" parameterType="Academics">
        update academics
        set title    = #{title},
            link     = #{link},
            abstra   = #{abstra},
            magazine = #{magazine},
            author   = #{author},
            keyword  = #{keyword}
        where title = #{title}
    </update>

    <select id="findOneAcademic" parameterType="Academics" resultType="Academics">
        select *
        from academics
        where title = #{title}
    </select>

    <delete id="delAcademic" parameterType="int">
        delete
        from academics
        where academicNum = #{academicNum}
    </delete>
    <!--批量删除文章-->
    <delete id="delAcademics" parameterType="int">
        delete
        from academics
        where academicNum = #{academicNum}
    </delete>

    <!--按條件查詢并分頁-->
    <select id="queryByParamPage" resultType="Academics">
        select * from academics
        <where>
            <if test="author!=null and author!=''">
                author like concat('%',#{author},'%')
            </if>
            <if test="academicNum!=0">
                and academicNum = #{academicNum}
            </if>
            <if test="title!=null and title!=''">
                and title like concat('%',#{title},'%')
            </if>
            <if test="keyword!=null and keyword!=''">
                and keyword like concat('%',#{keyword},'%')
            </if>
        </where>
        order by academicNum asc
        limit ${(page-1)*limit},${limit};
    </select>

    <!--按條件查詢-->
    <select id="queryByParam" resultType="Academics">
        select * from academics
        <where>
            <if test="author!=null and author!=''">
                author like concat('%',#{author},'%')
            </if>
            <if test="academicNum!=0">
                and academicNum = #{academicNum}
            </if>
            <if test="title!=null and title!=''">
                and title like concat('%',#{title},'%')
            </if>
            <if test="keyword!=null and keyword!=''">
                and keyword like concat('%',#{keyword},'%')
            </if>
        </where>
    </select>
           

 設定backgroundColor, title, tooltip, serious屬性

 這些屬性的設定分别展現在餅圖的背景顔色，餅圖的标題，餅圖的每個部分的彈窗，以及動态的餅圖占比,餅圖類型為data_pie

 異步加載的過程中還有其他的屬性值得 大家學習

// 異步加載資料
    $.get('/keywords/dataTobin', function (data) {
        myChart3.setOption({
            backgroundColor: '#e6ffff',
            title: {
                textStyle: {
                    color: 'rgba(0,0,0,0.8)'
                },
                text: '關鍵詞百分比餅圖1',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },

            series: [
                {
                    name: '資料',
                    type: 'pie',    // 設定圖表類型為餅圖
                    radius: '55%',  // 餅圖的半徑
                    data: data.data_pie,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0,0,0,0.5)'
                        }
                    }

                }
            ]
        });
           

 如果你想實作點選餅圖的部分區域進行跳轉，不妨試試這個代碼

myChart3.on('click', function (param) {
        window.open("demo1.html?keyname="+param.name+"")//該處為定義你想要打開的網頁的url
        //喜歡在本頁面跳轉的朋友可以試試, window.location.href = "admin.html?" + $("#username").val() + "";
    })
           

 221801327黃明亮：

 本次的結對作業二讓我受益匪淺。加強了自己在github上的使用，也在遇到bug的時候意識到了版本複原的重要性,(這次真是在上面栽了個大跟頭),以後一定按時commit；這次結對作業自己主要是負責前端的部分，學習了使用layui的元件搭建了這樣一個平台，不得不說，有一個元件庫，确實友善自己的開發，不需要自己寫太多的樣式表，但我覺得如果自己寫也能達到那樣的元件樣式，那也是很強的。合作過程中自己也曾參加過後端代碼的開發，不過bug頻出，好在隊友力挽狂瀾，在隊友的幫助下，成功的完成了前後端的互動。通過這一次的結對過程，我認為自己在技術上還要繼續學習，編碼過程中要更加細心，希望下一次的實踐還可以有更多的收獲!!!

 221801307蔡瑞金

 結對作業二的開發過程可謂是一波三折。前期對github的使用，中期學習架構，編寫程式，後期搭載伺服器，雖然流程在一步一步走着，但在過程中遇到了許多問題。例如github pull request錯誤，需要回退；編寫程式出現bug又不知道改了哪裡，導緻要回退過于多的版本進行重新編寫，體驗到了備份的重要性，同時要及時測試程式的穩定性和可靠性。後期搭載伺服器算是比較順風順水的一次，但是在linux上安裝mysql的時候把密碼更新錯誤也重新設定了許久。當然，負責後端也不能隻會後端，前端也需要看懂，這在編寫文檔時具有重大作用。

 To 221801307蔡瑞金

 瑞金hxd在這次的結對過程中可謂是技術擔當，學習能力一流，很快就能夠學習并應用新學習的技術，這個學習能力真是讓我非常佩服。在遇到bug的時候，他也不會慌亂，會更願意投入時間去攻克難題，大膽嘗試網上的方法，雖然過程非常煎熬，但可以看出他非常的努力。總之，想對這位hxd說，你是真滴強！

 To 221801327黃明亮

 明亮在這次結對過程中，能夠努力學習新的技能，交代的任務也能努力完成。就是在實作新功能的時候還一直想着其他功能，導緻原本能按部就班地完成卻要拖到後面才能完成，這個在開發過程中需要改一下。其他時候，他都不失為一個好隊友。