結對信息、具體分工
Github地址：https://github.com/MokouTyan/131700101-031702425
| 學號 | 昵稱 | 主要負責內容 | 博客地址 |
|---|---|---|---|
| 131700101 | 莫多 | 代碼編輯、文字內容 | https://www.cnblogs.com/mokou/p/11695109.html |
| 031702425 | 永銘 | UI設計、歸納總結 | https://www.cnblogs.com/yumesinyo/p/11701527.html |
PSP表格
| Personal Software Process Stages | 預估耗時 | 實際耗時 | |
|---|---|---|---|
| Planning | 計划 | 0 | 0 |
| Development | 開發 | 60 | 500 |
| Analysis | 需求分析 （學習新技術） | 600 | 1200 |
| Design Spec | 生成設計文檔 | 0 | 0 |
| Design Review | 設計復審 | 60 | 60 |
| Coding Standard | 代碼規范 | 60 | 60 |
| Design | 具體設計 | 60 | 60 |
| Coding | 具體編碼 | 180 | 600 |
| Code Review | 代碼復審 | 180 | 180 |
| Test | 測試 | 180 | 180 |
| Reporting | 報告 | 60 | 120 |
| Test Repor | 測試報告 | 60 | 120 |
| Size Measurement | 計算工作量 | 0 | 0 |
| Postmortem | 事后總結 | 180 | 180 |
| Process Improvement Plan | 提出過程改進計划 | 60 | 60 |
| Estimate | 這個任務需要多少時間 | 1740 | 3320 |
其實我覺得這個表格歧義挺多的，“開發”，“具體編碼”，“代碼復審”、“具體設計”、“代碼規范”這三個感覺就是同義詞
這個表格我覺得可以壓縮一下的，對填寫者感覺非常不友好
解題思路、設計實現
主頁面展示：
難點分析：
通過分析題目總結出以下幾個難點
- 如何得到文本輸入框的內容
- 如何處理輸入的文本數據
- 如何將數據生成學術家族樹
- 如何將樹形結構轉化為動態
- 如何生成多棵樹在同一頁面展示
組員基礎能力：
莫多：會HTML5與CSS的基礎語法，但對JS完全沒有接觸過
永銘：會HTML5的基礎語法。對於CSS和JS完全沒有接觸過
“生成學術家族樹”：
關於第四五難點，在大量進行搜索引擎的查找后，
最后確定使用D3.JS——數據可視化的JSON來解決本次的問題。
在經過周末一天的學習后，才認識到想要在這么短的時間去掌握這個插件太過消耗時間，
想要零基礎在這十天完成這個項目絕非易事！
最后只好百度去查找是否有前人有思考過這個問題，
經過大量的查找與篩選，最后找到一例是可以讓我們滿意的。
生成樹的動態效果是讓我們滿意的，但是生成這棵樹的數據並非是我們想要的並且是固定的，
不是根據輸入要求而進行改變的，我們還要學着如何將其修改數據
在閱讀前人的代碼后，不僅對D3.JS有了更深刻的認識，
並且對JS的語法以及JSON的組成有了新的了解，花的時間雖長但收獲良多~
“得到文本輸入”：
關於第一點難題，“如何獲取在文本框輸入的文本內容”
這一點挺好解決的，我們使用了jquery.js來解決這個問題
將輸入的文本都保存在一個變量中
“處理輸入的文本”：
我們在搜索問題的解決方案的時候，前期容易大量的漫無目的搜索，
因為這部分JS的只是對我們來說完全就是新的知識，困難的是要用什么關鍵詞去搜索問題，
並且還要參考很多別人的代碼，去完善自己的代碼，這個過程是非常痛苦的！
所以我們在完成第二個問題的時候就吃了很多的苦頭，
因為生成樹的過程是用到它本地自帶的數據格式的，
因為我們只能從樣式上更改樹，所以在數據上無法按照我們所想的數據格式去導入這棵樹
數據的結構類似於JSON，但是我們都並不知道這是JSON的格式，
於是就用{}、[]、數組這樣的關鍵詞查找，能得知這是JSON格式也是純屬偶然。
最后在找到的資料中找到最適合我們的方法是JS函數中的spilt()來解決這個問題，
還有如何將獲得到的數據放入到我們的數據中，最后使用的是push()的方法將得到的對方逐一放入數組中
這就產生了新的問題了，那就是遇到同名的數據，如何將同名的數據合並，
那就首先要遍歷所有數據中的對象，對象中的數組，數組中的對象，
這部分的知識是我一直找不到的，因為不知道用什么關鍵詞去查找
所以我們先將數據中先抽離出第一層的數據，
那就是“本科生”、“碩士生”、“博士生”，即“導師——學位——年級——姓名”，
這樣的樹形結構會比“導師——年級——學位——姓名”這樣的結構清晰得多
所以我們將三個學位的名字標為sign1、2、3，因為JS中沒有布爾值，
同時我們也不會如何遍歷數據得到數據是否已經在數據中有同名的存在，
所以在if中我們用三個標志位來代表三個學位是否已經存在
如果標志位為真，那么就建立一個大的學位數組放入導師對象中，再將年級以及學生對象逐一放入學位數組中，
如果標志位為假，就將年級以及學生對象放入已經存在的學位數組中，解決了產生多個學位數組的冗余數據。
“多棵樹同頁展示”：
最后思考的是“如何生成多棵樹在同一頁面展示”，這個讓我們思考了很久，
即要先對數據進行處理后得到另一棵樹的內容，在頁面中產生新的DIV部分來展示
起初是想用jquery.js來產生新的塊，塊中產生新的樹，
但是因為找不到相關的資料只能草草作罷，這便是我們十天來所盡的最大努力了
JS以及很多的前端知識我們還只是初入茅廬，這次的結對訓練讓我們熟悉了很多JS的語法，
以及讓我們掌握了F12控制台的使用，雖然過程很辛苦，但是學到這么多的內容還是挺開心的
設計與展示
主頁面內容：
參考學習的代碼會放在下面的鏈接中，這里展示的是我們自己寫的代碼內容
首先就是在body上加入
<div id="textbody" style="position: fixed;top: 10px;right: 10px;z-index: 9999;padding:5px;">
<textarea placeholder="在這里寫入如下內容：
導師：張三
2016級博士生：天一、王二、吳五
2015級碩士生：李四、王五、許六
2016級碩士生：劉一、李二、李三
2017級本科生：劉六、琪七、司四
...
然后點擊“生成學術家族樹”按鈕
可通過鼠標拖動、滾輪進行縮放展示
↓快按下這個按鈕試試吧(`・ω・´)！！↓" required></textarea>
<div><button id='begin' style="width:500px;">生成學術家族樹</button></div>
</div>
<div style="position: fixed;right: 10px;bottom:10px;z-index: 9999;padding:5px;text-shadow:2px 2px 0px #fff;font-size: 24pt;">Made by     莫多、 永銘<br>Last upload 2019.10.18</div>
定義要調用的函數，以Begin為標志
數據處理：
在下方script中加入，運用了一點兒的jquery
$("#begin").click(function() {
let text = document.getElementsByTagName('textarea')[0].value
let line1 = text.split(/[(\r\n)\r\n]+/) // 根據回車分割
if (line1.length == 1) {
line1 = ['導師：張三', '2016級博士生：天一、王二、吳五', '2015級碩士生：李四、王五、許六', '2016級碩士生：劉一、李二、李三', '2017級本科生：劉六、琪七、司四']
}
let teacher = line1[0].split('：')
let sign1 = 1
let sign2 = 1
let sign3 = 1
let teacherObj = {
name: '',
children: []
} // {老師:{本科生:{2017:學生}}}
let studentObjList = [] // {2017:學生}
let gradeObjList = [] // {本科生:{2017:學生}}
let boshishengObjList = []
let benkeshengObjList = []
let shuoshishengObjList = []
//////
for (let i = 1; i < line1.length; i++) {
let student = line1[i].split('：') //得到學生的名單
let degree = student[0].split('級')[1]
let grade = student[0].split('級')[0]
let students = student[1].split('、')
// 封裝，將學生包含到年級里
studentObjList = []
////
for (let i = 0; i < students.length; i++) {
let obj = {}
obj.name = students[i]
studentObjList.push(obj)
}
////
gradeObjList = []
gradeObjList.name = grade + '級'
gradeObjList.children = studentObjList
//teacherObj.children.push(gradeObjList) // 插入其他年級及屆數
if (degree === '博士生') {
if (sign1) {
boshishengObjList = []
boshishengObjList.name = '博士生'
boshishengObjList.children = gradeObjList
boshishengObjList.children.push(gradeObjList)
teacherObj.children.push(boshishengObjList)
sign1 = 0
} else {
boshishengObjList.children.push(gradeObjList)
}
} else if (degree === '本科生') {
if (sign2) {
benkeshengObjList = []
benkeshengObjList.name = '本科生'
benkeshengObjList.children = gradeObjList
benkeshengObjList.children.push(gradeObjList)
teacherObj.children.push(benkeshengObjList)
sign2 = 0
} else {
benkeshengObjList.children.push(gradeObjList)
}
} else if (degree === '碩士生') {
if (sign3) {
shuoshishengObjList = []
shuoshishengObjList.name = '碩士生'
shuoshishengObjList.children = gradeObjList
shuoshishengObjList.children.push(gradeObjList)
teacherObj.children.push(shuoshishengObjList)
sign3 = 0;
} else {
shuoshishengObjList.children.push(gradeObjList)
}
}
}
//////
teacherObj.name = teacher[1]
console.log(line1)
treeData = [] //把數據置為空
treeData.push(teacherObj) //放入數據
root = treeData[0]
update(root) //調用D3.JS
});
這部分內容是用來處理數據用的
console.log()語法是方便在控制台查看的
樣式調整：
<style>
.node {
cursor: pointer
}
.node circle {
fill: #357cae;
stroke: #4682b4;
stroke-width: 3px
}
.node circle:hover {
transform: scale(1.1)
}
.node rect {
transition: all .5s;
fill: #2990ca;
stroke: #4682b4;
stroke-width: 1.5px
}
.node rect:hover {
transform: scale(1.1)
}
.node text {
font: 20px sans-serif
}
.node text:hover {
font-weight: 700;
transform: scale(1.05)
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 4px
}
.link:hover {
transition: all .5s;
stroke: #4d4d4d
}
body {
display: block;
margin: 8px;
background-image: url(src/background.jpg);
background-position: bottom 0;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover
}
html {
overflow-x: hidden;
overflow-y: hidden
}
</style>
目錄組織、使用說明
目錄說明：
我們在js、css、fonts、src的文件夾中放入了所有資源
使用說明：
下載資源后，打開index.html文件即可使用
要保證其他文件夾也在其中，都是引用本地相對路徑的文件
單元測試
測試工具：
我們使用的是Chrome瀏覽器的F12工具台進行測試
在這里推薦看一下教程：https://www.cnblogs.com/xiaowenshu/p/10450848.html
測試代碼：
在代碼中使用console.log()的命令檢查數據分割的正確性
因為在測試的前期我們無法得知到底指令對不對
有了這個工具后我們確實加速了很多的進度
這是本次實驗最大收獲的一部分，掌握了Chrome控制台的使用
測試思路：
我們的最大缺點就是無法生成多棵樹，因為我們能力實在有限
其次就是同名問題的存在，無法得到最高學歷
我們的語法還有一個致命的缺陷就是分兩次輸入相同年級的人無法合並在一起
測試的數據太多的話會導致每個地方很擠
所以我們用了zoom的函數進行縮放方便於查看
這是我們的缺點，正常的輸入測試是沒什么問題
異常或結對困難及解決方法
問題描述：
這部分內容請看本頁面的“解題思路、設計實現”
做過哪些嘗試：
嘗試過vue.js與d3.js的結合，以及嘗試jquery的結合
產生新的塊，在新的塊中生成新的學術家族樹
是否解決：
vue.js與d3.js的結合，但最后以失敗告終
與jquery的結合，但是結合並不是很緊密，jquery只起到了調用作用
有何收獲：
了解了非常多的關於js的內容，使我們的知識層面不再僅限於html5與CSS
Chrome控制台的具體操作
結對感受、隊友評價
莫多的體驗：
以前我總是會比較輕視前端的工作，認為那是設計感比較強的人、代碼能力較弱的人去完成的
因為我之前接觸的前端語言比較多的是HTML5和CSS，用的都是標記語言而不是一些富有邏輯性的代碼
但是經過本次結對作業后，我對前端的學習有了新的認識，前端的學習同樣需要大量的學習！
永銘的體驗：
從這一次的結對作業中，我感受到了自學方法、途徑以及效率的重要性
自己以往沒有遇到過需要我們在這么短的時間內自學這么多的東西的情況
所以在這一次的自學過程中，很多方面是不及格的，是絕對不達標的
對於我來說，這一次的作業絕對是不成功的，自己沒有在這次作業中幫上太多的忙
需要改進的地方：
莫多比較不擅長表達自己的想法，要思考很久，不擅長溝通，但都能試着提出解決方案和意見
永銘在各方面的基礎都比較弱，在自學階段需要付出的努力和時間要比別人更多，雖然能夠堅持下去，但是效率不高，往往會把任務壓到最后時刻再進行
參考鏈接
