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

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

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

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

聯(lián)系人的分組

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

那么。。。。
為什么會(huì)有這個(gè)項(xiàng)目的生成呢？
其實(shí)，是自己想要練手，因?yàn)闆](méi)有經(jīng)歷過(guò)一個(gè)完整project的實(shí)踐，加上自己學(xué)的東西，感覺(jué)只看不練是學(xué)不到東西的，因?yàn)樵趯?shí)踐中可以踩到你在看文檔中看不到的很多坑（當(dāng)然，也許是自己有時(shí)候短路，寫錯(cuò)了造成，滑稽呱呱呱）
基于以上，所以自己開(kāi)始了這個(gè)項(xiàng)目的coding。

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

第一次的commit

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

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

接著就是整合測(cè)試，各種測(cè)試，各種填坑....

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

vue

vuex

vue-cli

vue-router

vue-resource

element-ui

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

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

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

后臺(tái)方面用的有

JAVA

MySQL

Servlet

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

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

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

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

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

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

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

this.tempObj = this.form

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

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

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

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

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