智慧校园Vue项目总结

总体概述

自从开始写这个项目,应该是从7月左右开始做的,当然，期间由于假期以及家里的事情耽误。加上没有UI这种设计的存在,导致初期的进度很慢。具体的开发应该是到了8月底到9月底这一段时间。这一段时间的开发效率其实是很高的，尤其是每天的产出,其实个人对于这个项目进度的把握还是有点欠缺的。可能个人能力也是一方面的原因。加上整个项目组五个人，前端完全由我一个人担任，压力可能也是一方面的原因。在当时组队进行选人的时候，对于这个人员分配方面我提出了自己的意见，但组长没有采纳。依旧采用4+1这种搭配进行开发。所以现在的感想就是: 一个人做前端，真累！

技术栈方面其实对于当时的我们都可以说是刚学完。这可以说是我们的第一个前后端完全分离的项目。对于个人而言，当然也是第一次使用Vue完成一个完整的项目。报这个比赛其实为了拿奖的愿望并不是很大，主要还是想通过比赛来让自己做点东西，做点实战。在实战中的学习效率是最高的，这也就是为什么大多数学生从学校走出去实习之后，哪怕短短的时间也可以学的比在学校里多很多倍的东西。当然，以我现在的水平和条件，依然还是在学习这个阶段，前端学到了现在，基本很多主流的需要用到的知识可以说都接触过一点了。

踩过的坑

在这次开发项目的过程中，由于没有小伙伴一起帮忙解决问题，期间还是踩了很多坑。

在webpack的配置方面，涉及到了webpack的版本,webpack-dev-server的版本的匹配的问题。由于我闲的没事干升级了插件的版本，导致配置文件package.json出现了问题，而且当时在卸载插件的时候也干了坏事。其实在学长去年做的一个项目中，我就看到了类似的问题。学长强调了在开发中不要随意的升级新版本，除非对新版本的特性十分了解。当时没当做一回事来看，现在想想，真是不听老人言，吃亏在眼前。回到正题，当时遇到了这个问题后怎么解决呢？主要肯定还是去搜索引擎找答案，但关于这个问题，我搜到了很多种解决方式，我另一篇博客也写了关于这个问题的解决方法。最后其实缺少了一个步骤，就是要在package.json里面也要更改相应依赖的版本，否则在重新生成npm包的时候依旧会出错。

再就是关于mint-ui这个组件库的使用问题，官方文档稍有不完善，但搜索引擎一搜基本都可以找到用法，但框架毕竟是框架，还是有bug存在的，在完成故障报备数据展示页面使用mint-ui的cell-swipe,想实现右划出现按钮的功能.但页面渲染完成后就出现的按钮，最后发现原因是mint-ui的CellSwipe与tab-container的滑动冲突,二者暂时不能同时使用。对于这个问题，我的解决方法是合法的避开这个问题，那就是不一起用它，需要用到这个组件的功能那就自己写一个，这样的话就不会和框架起冲突。

关于使用这个组件库，还遇到个问题。项目开发环境布局样式正常,打包完成后Mint-ui的样式没有被重写的自定义样式覆盖,依旧为mint-ui默认样式.最后发现是打包的时候有顺序的问题，要在main.js中将根组件及路由引入时放在mint-ui前面即可解决这个问题。

关于使用Vuex踩的一个坑，在使用Vuex保存用户信息,完成账号信息的获取和修改功能时，直接将数据与Vuex中的数据进行双向绑定，导致的结果当然是功能没实现，反而报错。我的解决方法是在页面挂载完成后，把Vuex中的数据取出保存在一个数组中，将数组的对象与数据进行绑定。在用户点击提交修改后，将数据发送到后端后再更新Vuex的数据。

做到有图片上传这个需求时，也是让我倍感难受。完成报备功能提交页面时，我以为利用input file标签，能够进行数据绑定，但是提交到后端后出现图片上传到后端为空的问题.查到原因:V-Model无法与input 进行双向数据绑定,无法直接获取到文件.文件需要在input标签上单独写事件来获取这个文件。关键是默认的input file实在是没法看。于是在网上找到了一个图片上传的组件。原理是将图片和要上传的接口单独传到图片上传组件内。上传图片使用的构造FormData，将数据发送过去。自己对这个组件进行了一下改造，将需要传的数据也同时传到这个组件当中，跟着图片一起提交到后端。完美的解决了这个问题。

在上传头像时遇到了个问题，将数据发送到后端后，后端只返回了结果。并没有告诉我新的图片URL。因为只有在登录时我才能获取到图片的URL地址。这样导致了我的图片没办法实时更新。只有重新登录才能将数据取到，并渲染到页面中。仔细查看图片上传的组件的源码，发现它将图片转化成了BASE64编码。我只要将这个编码保存在本地，更新到Vuex中，于是就解决这个问题。

在进行登录功能时，出现了一个bug，在首次开启自动登录登陆失败后第二次登录时会默认使用第一次的错误密码导致登陆失败.问题原因是之前的判断逻辑在点击自动登录按钮提交数据成功后就保留了用户名和密码,再次提交并不会更新本地密码.解决方法:将保存密码的逻辑判断放在服务器返回登录成功后,输入错误信息提交不会保存错误数据。

关于鉴权的问题，我个人是采用了比较简单的方式解决的。由于项目最后打包成了app，所以为了省事，所有的路由组件都是父路由。理论上讲应该按照用户权限不同来分配不同的路由。但是我的管理员和维修人员的入口是单独出来了。只在个人中心页面控制了权限不同的入口显示。这如果在网页端会成为很大的问题。后期应该会更改这一块。

在完成登录注册联调时，第一次使用axios.一开始请求发生500.采用QS库处理后提交完美解决。关于跨域问题，一开始是在本地配置了代理进行提交，但是打包后这个就无效了，关键最后还是靠后端解决了这个问题。

总结

总的来讲，这次这个项目其实还是有很多的问题的，尤其各种接口写得也是乱七八糟。虽然项目已经提交了。但是这个项目我会继续的改下去。尤其是由于时间原因导致的很多细节不完善。包括UI的设计也很有问题。但是这也确实是个人这方面确实有所欠缺。而且自己做项目也没有UI帮忙设计，所以自己慢慢完善咯。