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