Project项目地址：https://github.com/k-water/Co...话不多说，先放代码。这也是学习vue项目的一个实践，网上基本都是用的东西说起，什么是vue全家桶？当然，这是第一次尝试，可能还有很多不完善的地方。请多多指教。喜欢的话请点Star，提个issue什么的（搞笑认真脸~）因为这个项目是个人项目。主要功能是实现一个网页版的通讯录。基本功能包括添加、删除、查看和修改联系人，导入和导出分组的联系人数据。...为什么会产生这个项目？其实我想实践一下，因为我没有经历过完整的项目实践，加上所学的东西，感觉光看不实践是学不到什么的，因为在实践中，我能踩到什么你在文档中阅读。基于以上还有很多坑我摸不着（当然，可能我有时候会短路写错，搞笑嘎嘎嘎），于是自己开始了这个项目的coding。蜗牛爬的项目做的挺久的，加上断断续续写的，大概用了两个月，不好意思说了。。。大概是从寒假开始的，刚开始学vue的时候，看了几天文档，开始手写，经历了一个从0到1的过程，当然现在做出来感觉还是蛮爽的。第一次commitpagelayout是基于做通讯录的，所以第一个pagelayoutdesignproblem，因为知道自己的审美和设计能力，所以在网上看了一下，最后模仿了Google的通讯录布局。这里有一个问题。我在写页面的时候，如果不知道怎么给版面上色，我会很头疼，所以第一步就是找仿品。然后，他大概是这个样子（我知道你们想吐槽）。一段苦涩的简史，然后，一开始，自己写的，没有后台支持，纯前端，然后自己mock数据测试。目前在写作的过程中遇到了很多坑，挣扎了很久。咨询了师兄，终于解决了。但是，我真的很想哭想笑，所以我留下了。寒假期间完成了前端页面的编写和业务逻辑的测试。开学后，我又想“闹”了。感觉不跟后端保持联系前端不是很爽，于是开始写后端接口。我选择了JAVA。由于我的前端是vue-cli搭建的项目，不想前后端一起写，所以选择了前后端分离（不知道如果是我做的，错了请指正），后端提供接口，前端负责数据。渲染。google了一下老师，决定用servlet来处理前端的请求，于是又开始学习servlet，（很蛋疼）。写了几个demo，觉得可行，就搬进了项目。懒猴，不对，在这之前，还有一个问题，数据存储，兄弟的话。所以要使用数据库，我选择了MySQL。哎，又开始学习sql语句了。然后是集成测试，各种测试，各种填坑……项目结构前端好像废话不少。让我们谈谈这个项目的结构。前端用到的技术主要是vue的全家桶vuevuexvue-clivue-routervue-resourceelement-ui中的页面切换是通过router实现的。关于router，官方文档也有说明。当然，有些方面可能不是很清楚，但是遇到的问题在网上的issues中都有提到，stackoverflow也有相应的问答，算不上问题，这里只是简单的应用一下。数据管理使用vuex。刚开始没学vuex的时候，数据是独立的。有时候父子组件的通信有点困难，但最终还是通过更复杂的方式实现了。如果你想检查它，你可以回滚。我在github上面的commit学习了vuex之后感觉还是很棒的。Vuex是一种单向数据流，所有数据都存储在store中。这里就不说了，解释不好，哈哈哈。然后数据请求就是vue-resource插件，主要用get和post。当然vue官方推荐的是axios。其中，在UI上还使用了饿了么的组件库，省去了很多工作。当然，学习它需要付出努力。毕竟咋咋对这个框架的理解还不够深入。目录结构如下，不知道说什么。如果您有任何问题，请随时与我交流。email:625592890@qq.com后端使用JAVAMySQLServletMySQL主要用于存储数据。这里有两张桌子。我设计的时候，一个是用来存联系方式的，一个是用来存分组的。使用Servlet进行主要的前端请求，并处理返回相关数据，使用tomcat作为后台服务。嗯，背景我就不多说了，我也是新手。项目结构如下：showhere放项目地址https://github.com/k-water/Co...在线展示：http://119.29.151.195/contacts/请自行体验，不再赘述图片在这里。好了，说说我的经历和修复bug的过程吧。喜欢的可以继续往下看。诚然，只有通过实践才能发现错误。一开始，刚接触vue的idea，觉得挺好的，双向数据绑定很方便，写法也很简洁，就爱上了.所以，第一个大坑是关于双向数据绑定的。下面是我的故事数据的双向绑定。在添加联系人的组件中，我写了一个form表单，使用v-model来绑定相关数据。所有的数据都放在一个对象中，就是this.form。那么这个表格就是全局的。暂且我在添加或修改的时候会使用这种形式的数据。一开始我比较天真，直接找到对应的数据，然后赋值给一个临时变量，类似下面的this.tempObj=this.form然后添加修改，结果出现问题。问题是什么？所有的数据都已经更新到上次修改的数据了，当时我就发呆了。这一点折腾了我好久，终于想通了。首先，这样赋值后，上面的代码只是对对象的引用。MDN有相关解释，所以还是和原来的this.form没有关系，也就是只是对象的浅拷贝，vue的数据是Two-waybinding，所以，你懂的。当你修改的时候，vue会检测到你数据的变化（vue使用了Object.defineProperty()），相应的数据就会更新。当时，我哇的一声哭了。（开个玩笑）其实上面也略微提到了解决方法。既然直接赋值是引用或者是浅拷贝，那我们就用深拷贝让她和原来的对象没有任何关系。是的，这也解决了数据更新的问题，如下：这个东西折腾了好久，快一周了，也意识到自己的JavaScript基础不扎实，很高兴终于解决了（噗）。===============================================================搞笑分割线过程中遇到的bug还是蛮多的，这里简单介绍一下印象比较深的，不细说了其他的。还有一个关于服务器折腾的故事，也很有意思。学到了很多，至少对服务器有了初步的了解。如果你有兴趣，你可以和我谈谈。综上所述，完成这个项目的过程是相当艰难的。毕竟都是边学边做，不过最后能够完成还是很开心的。终于有了一个从0到1的项目流程，虽然只是一个小练习项目，但是对于现在的我来说，感觉还是不错的。希望能继续努力，也希望大家能给个star。最后感谢这个过程中一直热心帮我解答问题，一直被我骚扰的师兄，哈哈，谢谢！这是哥的Github，一个很牛逼的人。
