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

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

這個項目屬于個人項目，主要的功能是實現一個通訊錄的web版，基礎功能有

聯系人的增刪查改

聯系人的分組

聯系人資料的導入導出

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

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

第一次的commit

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

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

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

上面好像說了挺多廢話，說說這個項目的結構，前端用到的技術主要是vue的全家桶

vue

vuex

vue-cli

vue-router

vue-resource

element-ui

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

目錄結構就是下面醬紫了

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

后臺方面用的有

JAVA

MySQL

Servlet

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

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

好了，下面講講我的經歷以及修補bug的過程。
喜歡的可以接著往下看。

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

數據雙向綁定

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

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

this.tempObj = this.form

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

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

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

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

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