結對第二次作業
| 這個作業屬於哪個課程 | <2021春軟件工程實踐S班 (福州大學)> |
|---|---|
| 這個作業要求在哪里 | <結對第二次作業> |
| 結對學號 | <221801410、041801406> |
| 這個作業的目標 | <編程實現定會熱詞統計、撰寫博客> |
| 其他參考文獻 | 無 |
作業描述：編程實現頂會熱詞統計，基礎功能的實現，部署在雲服務器上。撰寫博客。
項目訪問連接
git倉庫鏈接和代碼規范鏈接
PSP表格
| PSP2.1 | Personal Software Process Stages | 預估耗時（分鍾） | 實際耗時（分鍾） |
|---|---|---|---|
| Planning | 計划 | 30 | 15 |
| • Estimate | • 估計這個任務需要多少時間 | 30 | 15 |
| Development | 開發 | 1930 | 2240 |
| • Analysis | • 需求分析 (包括學習新技術) | 150 | 200 |
| • Design Spec | • 生成設計文檔 | 20 | 0 |
| • Design Review | • 設計復審 | 10 | 10 |
| • Coding Standard | • 代碼規范 (為目前的開發制定合適的規范) | 40 | 60 |
| • Design | • 具體設計 | 30 | 40 |
| • Coding | • 具體編碼 | 1500 | 1800 |
| • Code Review | • 代碼復審 | 60 | 30 |
| • Test | • 測試（自我測試，修改代碼，提交修改 | 120 | 100 |
| Reporting | 報告 | 70 | 55 |
| • Test Repor | • 測試報告 | 30 | 30 |
| • Size Measurement | • 計算工作量 | 20 | 10 |
| • Postmortem & Process Improvement Plan | • 事后總結, 並提出過程改進計划 | 20 | 15 |
| 合計 | 2030 | 2310 |
成品展示
（由於博客園相冊無法上傳大於2MB的照片，所以以下動圖只能展示功能沒法整個界面展示。）
-
搜索界面
-
走馬燈背景展示
-
查詢跳轉至論文列表
-
查詢界面完整展示
-
分頁及刪除功能
-
排序及對列表模糊搜索
-
瀏覽查看論文詳細信息
-
熱詞分析界面
-
關鍵詞圖譜點擊跳轉到相關論文列表
-
其中一個頂會的熱詞走勢
結對討論過程描述
結對討論過程：
- 剛接到要編碼實現這次作業時，我們兩個人是處於比較懵的狀態的，一時間不知道如何下手，所以我們決定先約出來開個小會。因為語言和框架的不限制，我們最迫切需要決定的准備事項便是選定用什么技術來實現我們的這次作業。由於兩人之前都未學習過框架的使用，都只在web實踐上使用過YII框架，所以我們決定使用同種語言的ThinkPHP框架來學習應該會比較快速。前端界面直接不借用框架進行編寫。
- 由於之前已經設計過網站的原型，所以我們的討論如何實現時，決定按照我們的原型，先把網頁的大體布局做出來，所以接下去最需要考慮的是我們的功能如何實現。
- 在剛開始動手實現時，我們兩個人一起學習前后端的編寫，但是后來發現，我們總是在重復解決相同的困難：如怎么解析url傳來的值，如何調用后端接口來獲得值。在兩個人坐在一起編程看到對方電腦上搜索到了跟自己相同的資料界面，才意識到我們這樣合作的效率是非常低的。所以在這之后我們才決定，先把功能實現分成界面實現和值的獲取這兩部分來分工，這樣就不會把時間花在同樣的困難上。從這以后我們的效率開始加速了。
截圖展示
- 而在這一次的結對過程中，我們使用線上討論也僅在如下圖二那樣突然想到一個什么之前沒考慮到的地方，才會臨時通過聊天軟件來討論。這里也要特別感謝結對隊友041801406同學，照顧到我是台式機不方便移動，雖然沒有住在同一棟樓，但是在空余或者沒課的時候還是帶着電腦，來我的宿舍，兩個人坐在一起互相監督互相學習，這樣才有結對編程的感覺。
設計實現過程
-
根據本次作業要求以及之前的原型設計，構建了如下功能結構圖：
-
實現的過程是，我們先構建了四個主界面的大概布局，以及網站背景。這些都是根據我們原型的設計來的。在接下去的實現中，我們發現自己寫的table表格樣式不夠好看，功能也不夠智能，所以技術上引用了Element UI的一些組件，如我們的論文展示列表。在實現讀取數據之前，學習了關於ajax的用法，利用 ajax訪問接口的url從后端數據庫讀取的轉換成json數據。我們的數據是利用助教提供的數據，篩選后存入我們的數據庫中。在關鍵詞雲的實現使用了css和html直接寫出標簽雲的效果，點擊可以跳轉到論文查詢列表，利用關鍵詞從數據庫中查詢。熱詞走勢的技術實現我們使用了Echarts的動態柱狀圖排序，從數據庫中動態讀取熱詞數，通過setTimeout()方法，延遲地加給柱狀圖，從而實現，根據不同年份，數據會區分地增加上去，並根據累計出現次數排序。
代碼說明
1.根據不同頁面傳過來的url的不同的后綴來確定根據關鍵詞查找還是根據題目查找
if (wordlist[1] == "1") {
if (wordlist[0] != '') {
$.ajax({
url: '../index.php/index/Serchfunctionrchdata?words=' + wordlist[0],
type: 'get',
data: {},
dataType: 'json'
}).then(function(res) {
for (var i in res) {
td.push(res[i]); //把從json獲取的數據賦值給數組
}
}).fail(function() {
console.log('失敗');
})
}
} else if (wordlist[1] == "2") {
if (wordlist[0] != '') {
wordlist[0]=wordlist[0].replaceAll("%20"," ");
console.log(wordlist[0]);
$.ajax({
url: '../index.php/index/Serchfunctionrchbykeyword?words=' + wordlist[0],
type: 'get',
data: {},
dataType: 'json'
}).then(function(res) {
for (var i in res) {
td.push(res[i]) //把從json獲取的數據賦值給數組
}
}).fail(function() {
console.log('失敗');
})
}
}
- 論文列表對title的模糊搜索
devfilter: function(val, oldval) {
this.tableData = this.sourceData.filter(item => (~item.title.indexOf(val)));
},
- 動態根據查詢數據的數目對論文列表進行分頁。
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currpage"
:page-sizes="[5,10,15,20]"
:page-size="pagesize"
layout="total,sizes,prev,pager,next,jumper"
:total="tableData.length"
></el-pagination>
handleSizeChange(val) {
this.pagesize = val;
},
handleCurrentChange(val) {
this.currpage = val;
},
- 列表排序和刪除瀏覽，從一查詢的論文列表中查找是否與點擊事件相同的值，刪除相同值的那一條數據便實現了刪除功能。
viewClick(row){
var s=row.title;
window.location="../index/Paperscan?data="+s;
},
handleClick(row) {
this.tableData.splice(this.tableData.findIndex(e => e.title == row.title), 1);
this.sourceData=this.tableData;
},
changeTableSort(column) {
//獲取字段名稱和排序類型
var fieldName = column.prop;
var sortingType = column.order;
//按照降序排序
if (sortingType == "descending") {
this.tableData = this.tableData.sort(function(a, b) {
a = a[fieldName];
b = b[fieldName];
if (a.length == b.length) {
return b.localeCompare(a);
} else {
return b.length - a.length;
}
});
}
//按照升序排序
else {
this.tableData = this.tableData.sort(function(a, b) {
a = a[fieldName];
b = b[fieldName];
if (a.length == b.length) {
return a.localeCompare(b);
} else {
return a.length - b.length;
}
});
}
}
- 走馬燈效果，使得首頁背景可以切換
<template>
<div class="block">
<el-carousel trigger="click" height="100%" :autoplay="false" arrow="always">
<el-carousel-item v-for="item in 7" :key="item">
<el-breadcrumb separator="/">
<el-breadcrumb-item><a href="../public">論文搜索</a></el-breadcrumb-item>
<el-breadcrumb-item><a href="../public/index/Paperanalysis" id="paperanalysis">論文分析</a></el-breadcrumb-item>
</el-breadcrumb>
</el-carousel-item>
</el-carousel>
</div>
</template>
- 接口中使用原生數據庫語句進行模糊搜索，並且解決跨域問題。根據get獲得地值，利用%在select語句中的用法來實現模糊搜索。
header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:GET');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
public function serchdata($words = " Information")
{
$words = $_GET["words"]; //獲取前端傳來的值
$data = Db::query("select title,keyword,releasetime from paper where title like '%".$words."%'");
return json($data);
}
- 對echarts動態柱狀圖動態地賦值，並利用setTimeout來控制運行的時間。通過時間的控制表達著逐年往上加數據的走勢效果。每年數據的增加都同理。
run()
{
$.ajax(
{
url: '../index.php/index/Serchfunction/get2020CVPRkey',
type: 'get',
data: {},
dataType: 'json'
}).then(function (res)
{
var data = option.series[0].data;
for (var i in res)
{
data[i]+=res[i].time;
}
myChart.setOption(option);
}).fail(function ()
{
console.log('失敗');
})
}
setTimeout(function() {
run();
}, 0);
- 動態地根據圈中以及位置對關鍵詞圖譜中的詞賦予不同的樣式效果
ul.cloud a[data-weight="1"] { --size: 0.5; font-style: italic;}
ul.cloud a[data-weight="2"] { --size: 1.5; }
ul.cloud a[data-weight="3"] { --size: 2.5;font-style: italic; }
ul.cloud a[data-weight="4"] { --size: 3.5; }
ul.cloud a[data-weight="5"] { --size: 4.5;font-style: italic; }
ul.cloud a[data-weight="6"] { --size: 5.5; }
ul.cloud a[data-weight="7"] { --size: 6.5; font-style: italic;}
ul.cloud a[data-weight="8"] { --size: 7.5; }
ul.cloud a[data-weight="9"] { --size: 8.5;font-style: italic; }
ul.cloud li:nth-child(2n+1) a { color: rgb(9, 190, 9); }
ul.cloud li:nth-child(3n+1) a { color: rgb(53, 147, 224); }
ul.cloud li:nth-child(4n+1) a { color: rgb(211, 51, 139); }
ul.cloud li:nth-child(5n+1) a { color: rgb(115, 4, 219); }
心路歷程和收獲
- 221801410的心路歷程和收獲：
在這次結對中，從對框架的一無所知到初步了解使用，學到了挺多東西，一味地怕、覺得很難做是永遠不會有結果的，感悟還是那一句話萬事開頭難。開始動手之后才會迎來各種不同的問題，項目也才會被推進。學好基礎真的很重要，在這次結對中最困難的不是對新技術的理解，而是在使用時總是冒出一些小BUG，改起來對心態和體力都是一種考驗。在使用ajax的時候是遇到麻煩最多的時候，從忘記應用jQuery到無法跨域訪問后端接口，再到得到json數據以后由於基礎不扎實，想直接把數據賦值給數組，最終發現要對得到的數據利用循環解析成數組后才能賦值。看起來都是一些基礎到不行的問題，卻困擾了我一整個下午的時間。不過努力查找問題解決之后，收獲還是非常大的，剛學會ajax的使用就在團隊作業二中使用到了，如果當時沒有花時間學習和使用ajax，在團隊編程時可能會更吃癟。雖然過程很累，但是回報卻來得非常快，總算是努力之后得到了一些成功。心路歷程從懼怕->接受->全身心投入，一步步收獲都很大，感覺自己的能力確實有一些提升。最大的便是理解前后端分離及傳值的原理，學會了Echarts的使用，並且根據自己的需要能進行改動。
- 041801406的心路歷程和收獲：
1.應該打好扎實的js基礎，才不會在開發時到處碰壁卻不找不到錯誤的原因。
2.element ui真好用，下次我還用
3.設計原型時就應該考慮好網頁的布局，要仔細的想。不然在后面覺得不合適想改都改不了
4.github一定要先拉取在push
5.說實話結對作業和團隊作業交替在一起進行，雖然都是web開發，但是真的很難及時轉換。而且疲勞感也會累加上去
6.資源定位最好使用相對定位。
7.結對時1+1也不一定大於二，但總體來說有個人跟着吐槽不會枯燥
8.實踐也確實大大的提升了web開發的水平
評價結對隊友
- 041801406對221801410的評價：
221801410同學比較勤奮認真，他對於作業的態度是比較嚴謹仔細的，這點恰恰是我所不具備的，我對於作業是比較隨緣進行的。也能默默扛起比較吃力的任務。（比如他其實本身也是想做前端開發，但是因為我不想學后端他就自願去學習后端框架）。我認為一次結對里能有這樣區別較大的兩個人，是比較有趣的
- 221801410對041801406的評價：
041801406同學學習能力很強，對於沒有接觸過的組件以及代碼也能很快地學會並運用。性格也比我穩重的多，我在遇到bug一直改不出來時就會顯得很急躁，但是隊友總是能很冷靜地對代碼進行不斷地查錯修改，在這點上擬補了我的不足。對合作也十分積極，在合作上也十分替我着想，辛苦他對我們隊伍的付出，才能進行到從結對作業一那樣網上交流，到真正坐在一起互相監督實現結對編程。
數據庫表設計
