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