摘要：用來主要前臺的請求，并處理返回相關(guān)的數(shù)據(jù)，做后臺服務(wù)。總結(jié)做完這個項目，其中的過程還是挺艱辛的，畢竟都是邊學(xué)邊做，不過最后能完成還是挺開心的，終于有了一個從到的項目過程。雖然只是一個小小的練手項目，不過對于目前的我，感覺還是不錯的。

項目地址：https://github.com/k-water/Co...
二話不說，先放代碼，這也是一個學(xué)習(xí)vue項目的實踐，其中基本用到了網(wǎng)上說到的東西，什么vue全家桶啊，當(dāng)然，這是第一次的嘗試，可能還有很多不完善，請多多指教，喜歡的請點(diǎn)個Star，提個issue什么的（滑稽正經(jīng)臉~）

這個項目屬于個人項目，主要的功能是實現(xiàn)一個通訊錄的web版，基礎(chǔ)功能有

聯(lián)系人的增刪查改

聯(lián)系人的分組

聯(lián)系人資料的導(dǎo)入導(dǎo)出

那么。。。。
為什么會有這個項目的生成呢？
其實，是自己想要練手，因為沒有經(jīng)歷過一個完整project的實踐，加上自己學(xué)的東西，感覺只看不練是學(xué)不到東西的，因為在實踐中可以踩到你在看文檔中看不到的很多坑（當(dāng)然，也許是自己有時候短路，寫錯了造成，滑稽呱呱呱）
基于以上，所以自己開始了這個項目的coding。

這個項目持續(xù)了挺久的，加上自己斷斷續(xù)續(xù)寫的，大概是兩個多月，我自己都不好意思說了...
大概是從寒假開始的，那時候剛開始學(xué)習(xí)vue，看了幾天文檔之后，就開始著手寫，體會一個從0到1的過程。
當(dāng)然，現(xiàn)在感覺做出來后還是蠻爽的。

第一次的commit

頁面布局
基于做一個通訊錄，那么首先開始的頁面布局設(shè)計的問題，由于本人深知自己的審美和設(shè)計能力，所以我上網(wǎng)看了，最后模仿google的通訊錄布局。
這里有一個問題，我在寫頁面的時候，如果不知道怎么配色布局的，我就很頭疼，所以第一步還是找了個模仿。
然后，他大概就是...長這個樣子（我知道你們想吐槽）

辛酸簡史
嗯，然后呢，一開始寫的是沒有后臺支持的，純前端，然后自己mock數(shù)據(jù)測試，當(dāng)前在寫的過程中遇到很多坑，也糾結(jié)了很久，請教了師兄，最后也解決了，不過當(dāng)中真是又想哭又想笑，留在后面說。
在寒假期間，我完成前端頁面的編寫和業(yè)務(wù)邏輯的測試，在開學(xué)之后，我又想“搞事”了，覺得一直接觸前端沒有后臺也不是很爽，所以開始著手編寫后臺接口，我選擇了JAVA。
由于我前端是vue-cli構(gòu)建的項目，那么我不想前后臺混在一起寫，所以選擇了前后端分離（我也不知道自己做的是不是，說錯請指正），后臺提供接口，前端負(fù)責(zé)數(shù)據(jù)渲染。
自己google和請教師兄后，決定用servlet來處理前端的請求，所以，這里又開始了servlet的學(xué)習(xí)，（簡直蛋疼）。寫了幾個demo之后，覺得可行，就運(yùn)動到project之中了。
懶猴，并不是，在此之前，還有一個問題，數(shù)據(jù)存儲啊word哥。所以要用到了數(shù)據(jù)庫，我選擇了MySQL。
哎，又開始了sql語句的學(xué)習(xí)。

接著就是整合測試，各種測試，各種填坑....

上面好像說了挺多廢話，說說這個項目的結(jié)構(gòu)，前端用到的技術(shù)主要是vue的全家桶

vue

vuex

vue-cli

vue-router

vue-resource

element-ui

其中的頁面切換用到了router來實現(xiàn)，關(guān)于router，官方文檔也有說明，當(dāng)然可能某些方面說的不是很清楚，但遇到的問題網(wǎng)上的issue都有提到，stackoverflow也有相應(yīng)的提問和回答，不成問題，這里只是簡單的應(yīng)用。
數(shù)據(jù)管理用到了vuex，一開始沒學(xué)習(xí)vuex的時候數(shù)據(jù)是獨(dú)立的，有時候想要給父子組件通信有點(diǎn)困難，但最終也通過較復(fù)雜的方式實現(xiàn)，想要查看的話，可以回滾我在github上面的commit，學(xué)了vuex之后感覺還是棒棒噠。vuex是單向數(shù)據(jù)流，所有的數(shù)據(jù)都存在store里，這里不多講，我也講不好，哈哈哈。
然后數(shù)據(jù)請求是vue-resource插件，主要是用到了get和post，當(dāng)然現(xiàn)在vue官方推薦的是axios。
其中UI方面也應(yīng)用了餓了么的組件庫，省了不少事，當(dāng)然學(xué)習(xí)它也是要花費(fèi)精力的，畢竟渣渣對于這個框架的理解還不夠深入。

目錄結(jié)構(gòu)就是下面醬紫了

然后我也不知道要講什么了，有什么問題都?xì)g迎與我交流探討 。email：625592890@qq.com

后臺方面用的有

JAVA

MySQL

Servlet

MySQL主要用來存儲數(shù)據(jù)，這里有兩個表，我設(shè)計的時候一個用來存儲聯(lián)系人的資料，另一個是存儲分組。
用Servlet來主要前臺的請求，并處理返回相關(guān)的數(shù)據(jù)，tomcat做后臺服務(wù)。
嗯，后臺就不講太多了，自己也是剛接觸，項目結(jié)構(gòu)如下：

這里再放上項目地址
https://github.com/k-water/Co...
在線展示：http://119.29.151.195/contacts/
請自己體驗啦，這里不再放圖了。

好了，下面講講我的經(jīng)歷以及修補(bǔ)bug的過程。
喜歡的可以接著往下看。

實踐才能出bug，這句話是沒錯的。
一開始的時候，剛接觸vue的思想，覺得蠻不錯，雙向數(shù)據(jù)綁定很方便，寫法也很簡潔，就喜歡上了他。
所以，第一個大坑就是關(guān)于雙向數(shù)據(jù)綁定的。下面是我故事

數(shù)據(jù)雙向綁定

在添加聯(lián)系人這個組件里，我寫了一個form表單，并且用v-model綁定相關(guān)數(shù)據(jù)，所有數(shù)據(jù)都放在一個對象 也就是this.form里面。

那么這個form就是全局的，暫且這么說，我在添加，修改的時候都要用到這個form里面的數(shù)據(jù)。
一開始，我很天真，就直接找到對應(yīng)的數(shù)據(jù)，然后把他賦值給一個臨時變量，類似下面

this.tempObj = this.form

然后添加，修改的時候，就出現(xiàn)了問題，什么問題？
所有數(shù)據(jù)都被更新成為最后一次修改的數(shù)據(jù)，當(dāng)時就一臉懵逼了。
這個點(diǎn)折騰了我好久是吧，最后也弄清楚了。
首先，這樣賦值過去，上面那句代碼，只是對 對象的引用，MDN有相關(guān)解釋，所以還是跟原來的this.form脫不了干系，也就是這里只是對象的淺拷貝，再加上vue的數(shù)據(jù)是雙向綁定的，所以，你懂的了吧。
你修改的時候，vue檢測到你數(shù)據(jù)的變化（vue用的是Object.defineProperty()），對應(yīng)的數(shù)據(jù)也就被更新了。
當(dāng)時，我wa的一聲就哭了，（開玩笑的）
其實解決方法上面也略微提到了，既然直接賦值是引用也就是淺拷貝，那么我們就用個深拷貝讓她跟原來的那個對象沒有關(guān)系就行了，這樣也就解決了數(shù)據(jù)更新的毛病，如下：

這個東西折騰了好久，差不多一個多星期，也意識到了自己JavaScript基礎(chǔ)的不扎實，最后解決了還是蠻開心的（噗嗤）。

==============================================================
滑稽的分割線
過程中遇到的bug還是蠻多的，這里就簡述了自己印象比較深刻的，其他不一一細(xì)說。

其中還有一段折騰服務(wù)器的故事，也是蠻有趣，學(xué)到了不少東西，至少對服務(wù)器又了一個初步的了解，有興趣的可以找我聊聊。

做完這個項目，其中的過程還是挺艱辛的，畢竟都是邊學(xué)邊做，不過最后能完成還是挺開心的，終于有了一個從0到1的項目過程。雖然只是一個小小的練手項目，不過對于目前的我，感覺還是不錯的。
希望自己能繼續(xù)加油，也希望你們能給個star。
最后，感謝在這個過程中一直熱心幫我解答的師兄，一直被我騷擾啊，哈哈，感謝！
這是師兄的Github，很牛逼的人哦。