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，很牛逼的人哦。