vue for contacts項目總結

Project

項目地址：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經歷

實踐才能出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，很牛逼的人哦。