軟工實踐結對編程第二次作業

這個作業屬於哪個課程	2021春軟件工程實踐|W班(福州大學)
這個作業要求在哪里	作業要求
結對學號	221801433
	221801407
這個作業的目標	用web技術來實現原型中的功能
其他參考文獻	無

github倉庫地址和代碼規范鏈接

github地址
代碼規范鏈接

PSP表格

PSP2.1	Personal Software Process Stages	預估耗時（分鍾）	實際耗時（分鍾）
--	--	--	--
Planning	計划	15	10
• Estimate	• 估計這個任務需要多少時間	15	10
Development	開發	3060	3630
• Analysis	• 需求分析（包括學習新技術）	300	250
• Design Spec	• 生成設計文檔	30	20
• Design Review	• 設計復審	90	90
• Coding Standard	• 代碼規范 (為目前的開發制定合適的規范)	60	90
• Design	• 具體設計	30	40
• Coding	• 具體編碼	2400	2810
• Code Review	• 代碼復審	90	120
• Test	• 測試（自我測試，修改代碼，提交修改）	60	210
Reporting	報告	55	50
• Test Report	• 測試報告	30	25
• Size Measurement	• 計算工作量	15	10
• Postmortem & Process Improvement Plan	• 事后總結, 並提出過程改進計划	10	15
	合計	3130	3690

訪問鏈接

這里是個鏈接

成品展示

首頁查詢

首頁換頁

對論文列表進行刪除

對論文列表進行查詢詳細信息

熱門領域、熱門研究方向動圖呈現

對論文進行進行編輯

結隊討論過程描述

剛拿到題目后，對如何實現這個作業感覺到一些迷茫，對於如何實現之前的設計的原型我們進行了討論，並對框架的選擇進行了斟酌，我們都是第一次接觸框架，為了加深對新技術的學習，我們閱讀文檔和閱讀其他博客，看教學視頻等。

在開發的過程中，也是邊寫代碼邊學習新的知識，在開發過程中，我們經常約在一起寫代碼，在出現問題的時候溝通也比較方便，當兩人空閑時間交錯的時候，我們也會通過QQ進行交流，每次fetch代碼的時候可以從新代碼中學習到新的知識，互相交流，改進彼此的代碼和鞏固知識。

代碼實現過程

描述設計實現過程、給出功能結構圖

1. 框架使用:使用的是thinkphp5框架來實現構建，
2. 前端：采用HTML、CSS、JS的形式來編寫代碼，並且用Vue渲染Element，也用Ajax來進行POST對url發送請求，通過COOKIE來實現傳值
3. 后端：采用think php5框架，通過PHP語言來進行數據庫操作。（TP5框架采用了MVC結構，按着TP5框架實現網頁功能思路清晰）
4. 數據庫用的是phpyadmin數據庫結構如下

> 功能結構圖

代碼說明

首頁搜索欄

搜索攔HTML部分，可以通過el-select下拉框來選擇所要搜索的部分來查詢

<div class="search">
            <el-row>
              <el-col :span="20">
                <el-input placeholder="請輸入小寫字母" icon="search" v-model="devfilter" class="search-input" clearable>
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-select v-model="value" placeholder="請選擇">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>

</div>

搜索欄Vue部分，根據搜索欄的值來判斷對哪一部分進行搜索來縮小論文的范圍，更容易的找到需要的論文

watch: {
      devfilter: function (val, oldVal) {
        console.log(this.value);
        if (this.value == 'title') {
          this.tableData = this.sourceData.filter(dataNews => {
            return Object.keys(dataNews).some(key => {
              return String(dataNews['title']).toLowerCase().indexOf(val) > -1
            })
          });
        } else if (this.value == 'abstract') {
          this.tableData = this.sourceData.filter(dataNews => {
            return Object.keys(dataNews).some(key => {
              return String(dataNews['abstract']).toLowerCase().indexOf(val) > -1
            })
          });
        } else if (this.value == 'keyword') {
          this.tableData = this.sourceData.filter(dataNews => {
            return Object.keys(dataNews).some(key => {
              return String(dataNews['keyword']).toLowerCase().indexOf(val) > -1
            })
          });
        }

      }

列表部分提供了標題、摘要、關鍵字、發布日期四項屬性來顯示論文信息

<el-table :data="tableData.slice((currpage-1)*4,currpage*4)" stripe style="width: 100%"
            @cell-click="handleMainCellClick">
            <el-table-column prop="title" label="標題·" width="180">
            </el-table-column>
            <el-table-column prop="abstract" label="摘要">
            </el-table-column>
            <el-table-column prop="keyword" label="關鍵字" width="180">
            </el-table-column>
            <el-table-column prop="releasetime" label="發布日期" width="180">
            </el-table-column>
</el-table>

概況頁面

HTML部分
通過動圖形式來呈現Top10和歷年峰會的關鍵詞趨勢

el-tab-pane label="概況" name="third">
        <div id="top" style="width: 280px;height: 800px; float:right;">
          <el-table :data="wordTableData" stripe @cell-click="handleCellClick" style="width: 100%">
            <el-table-column prop="hot" label="TOP 10" align="center">
            </el-table-column>
          </el-table>
        </div>
        <div id="CVPR" style="height: 400px;width: 900px;"></div>
        <div id="ECCV" style="height: 400px;width: 900px;"></div>
        <div id="ICCV" style="height: 400px;width: 900px;"></div>

      </el-tab-pane>

JS部分用echarst的時間軸與柱狀圖實現歷年來不同峰會的關鍵詞趨勢。如CVPR峰會：

var chartDom = document.getElementById('CVPR');
  var myChart = echarts.init(chartDom,'roma');
  var option = {
    //timeline基本配置都寫在baseoption 中
    baseOption: {
      timeline: {
        //loop: false,        
        axisType: 'category',
        show: true,
        autoPlay: true,
        playInterval: 3000,
        data: ['CVPR2020','CVPR2019','CVPR2018' ]
      },
      grid: { containLabel: true },
      xAxis: [{
        type: 'category',
        name: 'KeyWord',
      },],
      yAxis: { type: 'value', name: '頻率' },
      series: [
        {
          type: 'bar',
        },
      ],
      tooltip: {}
    },

編輯頁面

編輯頁面論文列表部分，列表顯示論文題目、摘要、關鍵詞可以通過按鈕來對論文進行編輯和刪除，通過分頁器來讓列表更加直觀

<div id = "table" style = "margin-top:20px">`
        <template>
            <el-table :data="tableData.slice((currPage-1)*limitCount,currPage*limitCount)" border style = "width:100%;" >
                <el-table-column fixed prop = "title" label="論文題目" align="center" min-width="20%"></el-table-column>
                <el-table-column fixed prop = "abstract" label="論文摘要"  align="center" min-width="30%">
                    <template slot-scope="scope" >
                        <span>{{scope.row.abstract|ellipsis}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed prop = "keyword" label="論文關鍵詞" align="center" min-width="30%">
                    <template slot-scope="scope" >
                        <span>{{scope.row.keyword|ellipsis}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed prop = "url" label="論文鏈接" align="center" min-width="10%">
                    <template slot-scope="scope">
                        <span class="span-text" v-if="scope.row.link!== undefined && scope.row.link.length >=1">
                            <a link :href="scope.row.link" target="_blank">原文鏈接</a>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column fixed prop = "operation" label="操作" align="center" min-width="15%">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="primary" size="small">編輯</el-button>
                        <el-button @click="handleDelete(scope.row)" type="danger" size="small">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>

    <div id = "page" style = "margin-top: 20px;">
        <el-pagination
            @current-change="currentChange"
            :current-page= "currPage"
            layout = "prev, pager, next"
            :total="{$count}"
            :page-size = "limitCount"
            style="text-align: center"
        >
        </el-pagination>
    </div>

script部分，列表部分添加過濾器，當題目摘要等文字長度過長的時候進行省略。當點擊刪除，通過ajax發送POST請求給PHP文件來進行數據庫操作，當點擊操作按鈕，通過cookie來傳遞所需要的值，跳轉到編輯表單部分，解析cookie給表單賦值。

<script type = "text/javascript">
        var aa = {$tableData|raw};
        var Main = {
            methods:{
                handleClick:function(row){
                    var list = {
                        "abstract":row.abstract,
                        "title":row.title,
                        "link":row.link,
                        "keyword":row.keyword
                    }
                    $.cookie("list",JSON.stringify(list));
                    $.cookie("page",this.currPage);
                    // document.getElementById("app").innerHTML = 
                    window.location.href = "editdetail";
                },
                currentChange:function(val){
                    console.log(val);
                    this.currPage = val;
                },
                handleDelete:function(row){
                    var list = {
                        "abstract":row.abstract,
                        "title":row.title,
                        "link":row.link,
                        "keyword":row.keyword
                    }
                    $.cookie("deleteList",JSON.stringify(list));
                    $.cookie("page",this.currPage);

                    $.ajax({
                        type:"POST",
                        contentType: "application/x-www-form-urlencoded",
                        url:'editdetail/deletePaper',
                        data:{},
                        success:function(result){
                        location.href = "edit" 
                            console.log("修改成功");
                            alert("刪除成功")
                        },
                        error:function(msg){
                            console.log("傳輸失敗");
                            alert("刪除失敗")
                        }
                    });
                    
                }
            },
            data(){
                return {
                    tableData:aa,
                    limitCount:4,
                    currPage : parseInt($.cookie("page")??1),
                    input:'',
                }
            },
            filters: {
                ellipsis(value) {
                if (!value) return "";
                if (value.length > 150) {
                    return value.slice(0, 150) + "...";
                }
            return value;
            }
        },
        }  
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app') 
    </script>

編輯詳情頁面

表單部分HTML 表單輸入框可以通過內容只適應高度

<el-form ref="form" label-width="100px">
            <el-form-item label="論文名稱">
                <el-input v-model="form.title" type="textarea" :autosize="{minRows:1,maxRows:3}">
                </el-input>
            </el-form-item>
            <el-form-item label="論文鏈接">
                <el-input v-model="form.link" type="textarea" :autosize="{minRows:1,maxRows:3}">
                </el-input>
            </el-form-item>
            <el-form-item label="論文關鍵詞">
                <el-input v-model="form.keyword" type="textarea" :autosize="{minRows:2,maxRows:10}">
                </el-input>
            </el-form-item>
            <el-form-item label="論文摘要">
                <el-input v-model="form.abstract" type="textarea" :autosize="{minRows:2,maxRows:10}">
                </el-input>
            </el-form-item>
            <el-form-item type= "width:100%" align="center">
                <el-button  @click="commit()" type="success" size="small">完成修改</el-button>
                <el-button  @click="recover()" type="primary" size="small">重置</el-button>
            </el-form-item>
        </el-form>

JS部分 當需要重置的時候調用未修改的數據來對表單進行復制，需要進行修改時通過ajax發送請求給php文件，成功跳轉回原頁面，失敗提示修改失敗。

var formJSON = $.cookie("list");
        $.cookie("list",null);
        var editPaper = JSON.parse(formJSON);
        
        console.log(editPaper);
        var oldPaperString = JSON.stringify(editPaper);
        var oldPaper = JSON.parse(oldPaperString);
        var Main = {
            methods: {
                commit:function(){
                    var list = {
                        "oldTitle":oldPaper.title,
                        "title":editPaper.title,
                        "oldLink":oldPaper.link,
                        "link":editPaper.link,
                        "oldAbstract":oldPaper.abstract,
                        "abstract":editPaper.abstract,
                        "oldKeyword":oldPaper.keyword,
                        "keyword":editPaper.keyword
                    }
                    $.cookie("updateList",JSON.stringify(list));
                    
                    $.ajax({
                        type:"POST",
                        contentType: "application/x-www-form-urlencoded",
                        url:'editdetail/updatePaper',
                        data:{},
                        success:function(result){
                            window.location.href = "edit";
                            console.log("修改成功");
                        },
                        error:function(msg){
                            console.log("傳輸失敗");
                        }
                    });
                },
                recover:function(){
                    this.form=JSON.parse(oldPaperString);
                    console.log(oldPaperString);
                }
            },
            data() {
                return {
                    form: editPaper
                }
            },
        }

        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    </script>

PHP部分

php獲取數據庫中數據項的個數和數據，將數據項轉化成json數據給頁面賦值

<?php
namespace app\index\controller;

use think\Controller;
use think\Db;
use think\Request;

class Edit extends Controller
{
    protected $request;
    public function index()
    {
        $count = Db::table('paper')->count();
        $data = Db::table('paper')->select();
        $this->assign('tableData',json_encode($data));
        $this->assign('count',$count);
        return $this->fetch();
    }
    
}

對所要進行修改的論文數據進行數據庫操作，修改和刪除。

<?php
namespace app\index\controller;
use think\Controller;
use think\Db;

class Editdetail extends Controller{
    
    public function index(){
        return $this->fetch();
    }
    public function updatePaper(){
        $listString = $_COOKIE["updateList"];
        
        $list = json_decode($listString,true);

        
        $oldTitle =  $list["oldTitle"];
        $title = $list["title"];
        $oldLink = $list["oldLink"];
        $link = $list["link"];
        $oldAbstract = $list["oldAbstract"];
        $abstract = $list["abstract"];
        $oldKeyword = $list["oldKeyword"];
        $keyword = $list["keyword"];
        // $form = json_encode($_POST);
        $result = Db::table('paper')
            ->where("title",$oldTitle)
            ->where("link",$oldLink)
            ->where("abstract",$oldAbstract)
            ->where("keyword",$oldKeyword)
            ->update([
                "title"=>$title,
                "link"=>$link,
                "abstract"=>$abstract,
                "keyword"=>$keyword
        ]);
        if($result!==false){
            return $this->success("編輯成功");
        }
        else {
            return $this->error("編輯失敗");
        }
    }
    public function deletePaper(){
        $listString = $_COOKIE["deleteList"];
        $list = json_decode($listString,true);
        
        $title = $list["title"];
      
        $link = $list["link"];
        
        $abstract = $list["abstract"];
        
        $keyword = $list["keyword"];

        $result = Db::table('paper')
            ->where("title",$title)
            ->where("link",$link)
            ->where("abstract",$abstract)
            ->where("keyword",$keyword)
            ->delete();
        if($result!==false){
            return $this->success("刪除成功");
        }
        else {
            return $this->error("刪除失敗");
        }
    }
}

熱詞top10排行

通過table來展示排行情況

<div id="top" style="width: 280px;height: 800px; float:right;">
          <el-table :data="wordTableData" stripe @cell-click="handleCellClick" style="width: 100%">
            <el-table-column prop="hot" label="TOP 10" align="center">
            </el-table-column>
          </el-table>
        </div>

部署cell—click方法來實現點擊列表進行轉跳，轉跳到首頁搜索相關關鍵詞的論文：

handleCellClick(row, event, column,cell) {

        console.log(row['hot']);
        this.activeName='first';
        this.value='keyword';
        this.devfilter=row['hot'];
      },

心路歷程和收獲

心路歷程

結合在構建之法，分別撰寫結對開發的心路歷程與收獲

221801433的感想:
在一開始看到雲服務器的時候整個人都蒙了，還好是個結對作業，兩個人互相激勵互相討論才找到了方法。因為是全新的知識，都沒有做過，我和隊友先是開始一起學習，到有一定基礎之后便進行了分工。在這過程中遇到了很多困難（相對路徑一生之敵），也收獲了很多，相比起結對作業前，得到了很大鍛煉。

221801407的感想:
這次結對過程中，對作業的要求不是很理解，不知道要怎么開始，對於Web基礎知識也沒有掌握的很好，雖然遇到了許多困難，遇到了不少困難，但是有了隊友的幫助，感覺解決困難的效率高了一倍，結對編程的過程中具體分工，除了完成自己的部分以外，互相幫助，通過溝通交流，做到了1+1>2。

評價結對隊友

221801433對221801407的評價:
很慶幸能有這樣的隊友，在一開始迷茫的時候兩個人一起堅持了下來。隊友很耐心而且很可靠。雖然兩個人一開始基礎都不好，但是兩個人都是行動派，互相督促相互交流學習，能力得到了迅速提升。在遇到相對路徑問題時，我人都快奔潰了，他過來耐心地和我一起debug，最終解決了問題。從他身上我學到了很多，很感謝他。

221801407對221801433的評價:
結對的隊友是一個認真負責，有耐心的同學，在結對的過程中，對於Web知識並不完全了解的自己遇到不少迷茫的地方，選擇框架的時候，隊友推薦可以用tp框架比較簡單易學，並提供給我學習的資料；當Vue渲染遇到問題的時候,會給我一些建議和參考，幫我修bug(感動QAQ)，同時他對自己的部分認真負責，對css樣式非常仔細，感覺到能跟他組隊真是太好了，從他的身上我學會了很多新的知識，也意識到了自己還有很多不足需要改進。