結對作業二

🎵提示：點選頁面左下角播放背景音樂配合閱讀更佳🎵

0. 作業基本資訊

這個作業屬于哪個課程	2021春軟體工程實踐\|W班 (福州大學)
這個作業要求在哪裡	結對第二次作業——頂會熱詞統計的實作
結對學号	221801412 & 221801405
這個作業的目标	程式設計實作頂會熱詞統計+撰寫部落格+github協作
其他參考文獻	CSDN GitHub

1. PSP表格

2. 相關連結

3. 成品展示

3.1 首頁

3.2 論文清單

3.3 收藏清單

3.4 熱門領域

3.5 注冊/登入

3.6 關于我們

4. 結對讨論過程描述

5. 設計實踐過程

6. 代碼說明

7 心路曆程和收獲

8 評價結對隊友

PSP2.1	Personal Software Process stages	預估耗時(min)	實際耗時(min)
Planning	計劃	60	180
·Estimate	·估計這個任務需要多少時間
Development	開發	1950	2455
· Analysis	· 需求分析 (包括學習新技術)	2160	2880
· Design Spec	· 生成設計文檔		75
· Design Review	· 設計複審
· Coding Standard	· 代碼規範 (為目前的開發制定合适的規範)	30	40
· Design	· 具體設計	120
· Coding	· 具體編碼	1200	1440
· Code Review	· 代碼複審
· Test	· 測試（自我測試，修改代碼，送出修改）
Reporting	報告	55
· Test Repor	· 測試報告	15
· Size Measurement	· 計算工作量	10
· Postmortem & Process Improvement Plan	· 事後總結, 并提出過程改進計劃		20
合計	3925	5095

GitHub倉庫連結

代碼規範連結

3.1 首頁

首頁有我們的網站的logo和搜尋框，簡約大氣。可以在文本框内輸入您想要搜尋的論文，點選“爬一下”即可查閱。

結對作業二

3.2 論文清單

在首頁搜尋之後跳轉到此頁面，預設為标題搜尋。同時該頁面也支援關鍵詞搜尋和摘要搜尋。

結對作業二
搜尋後提示搜尋的記錄數量，自動分頁，每頁六個論文。在論文下方有一個收藏按鈕，點選之後可以把你想要的論文收藏，并提示資訊。右側浮動欄有三峰會連結和今年以來熱詞的推薦。

3.3 收藏清單

在論文清單頁面所收藏的論文會在這裡顯示，與搜尋界面布局大同小異。同樣有分頁和側邊欄。側邊欄為三峰會連結和最近收藏的論文連結。同時有删除按鈕，可以删除收藏的論文。

結對作業二
點選收藏或者删除之後，會在網頁形成一個提示資訊。

結對作業二

3.4 熱門領域

熱門領域子產品包括論文數目年度走勢圖，關鍵詞top10榜，以及關鍵詞一覽。采用了折線圖，柱狀圖和餅狀圖，使用者可以點選圖表進行互動。其中以餅狀圖中的旭日圖為最，其中分析了大量資料，讓使用者清楚的明白各年間的熱詞如何。

結對作業二

結對作業二

結對作業二

3.6 注冊/登入

在這個頁面，為登入點選之後進入登入界面，其中可以跳轉到注冊頁面。該頁面的輸入框中帶有輸入驗證。在使用者已經登入之後該頁面會轉變為使用者界面，較為簡單的顯示使用者的一些資訊。其中也可以登出。

結對作業二

結對作業二

3.7 關于我們

這是我們結對的人員介紹

結對作業二

剛拿到題目後，對如何實作這次作業我倆進行了一些讨論，原本打算采用bootstrap架構進行前端部分的開發，但由于時間不足，改成使用html原生架構進行開發；後端綜合考慮了實作難度和學習時間成本的問題，則采用了python+flask進行編寫。在結對過程中我們主要線上交流為主，同時也進行了不少線下交流。例如，關于設計論文清單部分頁面的交流。

結對作業二
以221801405同學為主，221801412同學為輔，由于這次時間不足，是以我們劍走偏鋒采用了前後端不分離的做法。221801405同學主要進行後端語句的編寫，而221801412同學則進行前方html的設計，同時也有json資料的提取，以及三個圖表的資料提取。以工作量來衡量，幾乎不比主要編寫邏輯的221801405少。

結對作業二
在開發的過程中，我們互相交流，邊寫代碼邊學習新的知識，最終撰寫文檔部分我們也做了簡單的分工，提高了效率。

結對作業二

5. 設計實作過程

功能結構圖：

結對作業二
前端：采用HTML、CSS、JS的形式來編寫代碼
後端：采用Flask架構，通過python語言來進行資料庫操作。
目錄結構：

結對作業二
經典的flask布局，templates放html頁面，static放靜态資料，包括css和js和圖檔

結對作業二

py檔案：init為配置檔案，models為資料庫類表，forms為背景生成的表單，main類主要處理頁面之間的路由，為視圖函數。

值得一提的是，為了解決每次使用者打開都要加載圖表資料，導緻打開時間過長，背景編寫了三個圖表資料生成的類，用于生成圖表資料。使用者打開時讀取生成的資料chart.txt速度快一大截。幾秒鐘加載完畢，而如果不這麼做的話，光是分析旭日圖的資料就要花費将近十分鐘的時間。

首頁搜尋欄部分

<div class="informs" style="border:0px;width:800px;margin:200px auto 0px auto;">
    <div class="margin:10px auto;width:auto;" align="center">
    <img src="{{url_for('static', filename='快爬.png') }}" alt="爬" />
    <span class="big">快爬！    </span>
    </div>
    <form method="POST" >
        <input type="text" value="" name="text" style="margin:0px 0px 0px 82px;border:3px solid #c0c0c0;width:500px; height:40px;border-radius: 5px;font-size:20px;">
        <input type="submit" name="search" style="border:3px solid #c0c0c0;width:120px; height:50px;border-radius: 5px;font-size:25px;" value="爬一下!">
    </form>
</div>

論文清單中單篇文章搜尋結果的實作，利用div将搜尋結果的各個部分進行分割，使得頁面更加簡潔大方美觀。

<div class="item">
    <div class="main">
        <div class="fengmian">
            <img src="{{url_for('static',filename='fengmian.jpg')}}" alt="fengmian" width="200px"/>
        </div>
        <h3>{{u[0].title}}</h3>
        <p>{{u[0].meeting}} {{u[0].date}}</p>
        <p>關鍵詞:
            <b>
                {%for k in u[1]%}
                    <span id="keyword">{{k.keyword}}</span>
                    <span>&nbsp;</span>
                {%endfor%}
            </b>
        </p>
        <p class="css-border" style="border-left:6px solid #2196F3;
background-color:#ddffff;">
            {{u[0].paper_abstract}}</p>
        <p>原文連結:<a href={{u[0].url}}>{{u[0].url}}</a></p>
    </div>
        <form method="post">
            <input type="text"
                   style="visibility: hidden;"
                   name="collect"
                   value={{u[0].id}}
            />
            <input type="submit" name="submit" value="收藏" class="form_float"
                   onmouseover="this.style.backgroundPosition='left -36px'"
                   onmouseout="this.style.backgroundPosition='left top'"
             onclick="display_alert()"/>
        </form>
</div>

通過圖檔展示三大頂會，點即可進入相關網頁

<div class="right1">
    <a href="http://iccv2021.thecvf.com/">
        ICCV:
        <img src={{url_for('static',filename='ICCV.png')}} alt="ICCV">
    </a>
    <a href="http://cvpr2020.thecvf.com/">
        CVPR:
        <img src={{url_for('static',filename='CVPR.png')}} alt="CVPR">
    </a>
    <a href="https://eccv2020.eu/">
        ECCV:
        <img src={{url_for('static',filename='ECCV.png')}} alt="ECCV">
    </a>
</div>

以2013-2020各峰會論文走勢圖為例，通過Highchart工具進行有關圖表的展示

var chart = Highcharts.chart('container', {
      title: {
            text: '2013 ~ 2020 各峰會論文釋出走勢圖'
      },
      subtitle: {
            text: '資料來源：三峰會:ICCV,ECCV,CVPR'
      },
      yAxis: {
            title: {
                  text: '論文數量'
            }
      },
      legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
      },
      plotOptions: {
            series: {
                  label: {
                        connectorAllowed: false
                  },
                  pointStart: 2013
            }
      },
      series: [{{data|safe}}],
      responsive: {
            rules: [{
                  condition: {
                        maxWidth: 500
                  },
                  chartOptions: {
                        legend: {
                              layout: 'horizontal',
                              align: 'center',
                              verticalAlign: 'bottom'
                        }
                  }
            }]
      }
});

Flask配置部分

class Config(object):
    
    SQLALCHEMY_DATABASE_URI = 
    SQLALCHEMY_TRACK_MODIFICATIONS = False
    app = Flask(__name__)
    app.config.from_object(Config)
    app.secret_key = '我是密碼'
    db = SQLAlchemy(app)

有關圖示資料的擷取，以熱詞top10為例（先前通過json進行資料庫内容的轉換）

key_list=PaperToKeyword.query.all()
dit=dict()
for k in key_list:
    dit[k.keyword] = dit.get(k.keyword,1)+1
if __name__ == '__main__':
    key_name = list(dit.keys())
    key_value = list(dit.values())
    for i in range(0,10):
        index = i
        max = key_value[i]
        for j in range(i+1,len(key_value)):
            if max<key_value[j]:
                max=key_value[j]
                index=j
        temp=key_value[i]
        key_value[i]=key_value[index]
        key_value[index]=temp
        temp2 = key_name[i]
        key_name[i] = key_name[index]
        key_name[index] = temp2
    f=open('chart2.txt','w')
    f.truncate()
    f.write(str(key_name[0:10])+'\n')
    f.write(str(key_value[0:10]))
    f.close()
    f1 = open('chart2.txt')
    data = f1.readline()
    data2 =f1.readline()
    print(data)
    print(data2)

注冊/登入的flask實作

class Login(FlaskForm):
    username = StringField('使用者名')
    password = PasswordField('密碼')
    submit = SubmitField('登入')


class Signup(FlaskForm):
    username = StringField('使用者名')
    password = PasswordField('密碼')
    password2 = PasswordField('确認密碼')
    submit = SubmitField('注冊')

資料庫類表設計

class User(db.Model):
    __tablename__ = 'user'
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50))
    password = db.Column(db.String(50))


class UserCollection(db.Model):
    __tablename__ = "usercolletion"
    id = db.Column(db.Integer, primary_key=True)
    user_id = db.Column(db.Integer)
    paper_id = db.Column(db.Integer)


class Paper(db.Model):
    __tablename__ = "paper"
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.Text)
    meeting = db.Column(db.String(10))
    url = db.Column(db.String(50))
    paper_abstract = db.Column(db.Text)
    date = db.Column(db.Date)


class PaperToKeyword(db.Model):
    __tablename__ = "papertokeyword"
    id = db.Column(db.Integer, primary_key=True)
    paper_id = db.Column(db.Integer, db.ForeignKey('User.id'))
    keyword = db.Column(db.Text)

7. 心路曆程和收獲

PZY：

怎麼說，這次作業讓我十分驚訝，覺得這次作業十分的不合理，但是也讓我體驗到了996的生活（實際上是7.5 2 7）全天幾乎不眠不休的工作，這讓我收獲的很多，不僅對html css js等基礎web知識有了巨大的深入了解，同時學習了python語言，flask架構，一堆資料處理所需要的步驟以及心得。對代碼規範更加嚴格。代價就是幾個晚上近乎暈厥。

LXJ：一開始看到這個作業的時候十分的害怕，雖然已經完成了原型的設計，但一開始對編碼實作中一些功能的實作了解的不是很到位。盡管我的Web基礎不是特别的紮實，并是以遇到不少困難，但是有了隊友的幫助，我們的大部分問題都迎刃而解。整個結對過程讓我受益頗多。

8. 評價結對隊友

PZY->LXJ

很慶幸能有這樣曉君這樣優秀的隊友。他不僅對任務态度認真，同時也十分的靠譜。當我在編碼過程中遇到難題，幾近崩潰的時候，他都會主動出來幫助我承擔任務。盡管都是從0開始，但我們在互相交流互相督促的過程中能力得到了迅速提升，和他結對可以說是一段非常難忘的經曆。

LXJ->PZY

在上次結對作業一原型設計的過程中，增滢同學那渴望求知、堅持不懈的态度就給我帶來了深深的感動。他不僅能夠主動學習，也很認真靠譜。盡管我的技術不夠熟練，但他都一直給予我最無私的幫助，在做作業做到快自閉的時候，我們也互相助力打氣，整個結對過程的氣氛可以說是十分的融洽，能找到這樣子的隊友可以說實在是十分十分的榮幸，在他身上我學到了很多。