前后端分离和组件化在实际开发中的问题

   公司用vue开发的第一个项目告一段落,在开发中存在很多问题,第一就是前后端分离的实际应用中遇到很多坑,前端和后端的依赖其实没完全分开,前端要依赖后端的提供的接口输出,接口有没有报错;后端要依赖前端页面的展示数据的需求来确定接口的输出字段.其实没完全分开,后面讨论是不是可以将数据的打包从java层分出来放到node层,java只要提供通用的查询表功能。这样后台就不用依赖前端页面的输出来规定自己接口的输出项了，而前端想要什么数据就可以在node层调用通用接口来自己组装数据返回给前端，而且前端也可以只发送一个ajax请求就可以得到全部想要数据，这样前端和后台的依赖度会更小。具体后台的接口是要主表查询和子表查询都分开，还是主表子表关联查询还是要具体根据项目详细讨论。

   第二个问题是在用组件化的思想去构建系统，很容易出现前端结构、思路很混乱的情况，造成这种混乱的原因有多方面：

• vue前端结构是和react项目类似，在一个react文章中描述到组件分为“容器组件”和“表现组件”,容器组件单独存放在一个文件夹中，表现组件也单独放在另一个文件夹中，这样导致表现组件被多个容器组件调用，而且还可能表现组件嵌套，导致组件间的调用很混乱，我的建议解决方案是ng2中的项目实例对组件的文件分配就很清晰，一个容器组件就是一个文件夹，这个文件夹下面子文件夹放这个表现组件,一般情况下只是调用自己同级的表现组件。当然这种导致组件的复用效率没那么高，事物本身就是矛盾体，我们在抉择的时候就尽量选择中间程度，比如100%利用组件的复用必然结构就会混乱，容器组件下的表现组件100%单独分开那组件的作用就没任何意义。这两种极端都会对系统造成一定的弊端，那何不取中间程度；表现组件可以跨容器组件复用，但在结构上尽量按容器组件划分文件夹；在调用其他容器组件的表现组件时候要加详细注释说明。
• 前后端分离会将很多数据处理和逻辑处理分给前端来做，也就是这种模式前端js的复杂度要比传统的复杂度高些，加上本身js没有框架分层的思想导致js的代码更加混乱，这里的解决方案是我之前写的博客文章用面向对象对js进行分层。在vue中的data看似是model层但其实就是个摆设。vue中可以将数据读取放到computed中作为数据读取层，在ready中在分两层，第一层是数据处理层，第二层是和v层的一些操作代码，事件处理统一放到了methods 这样js代码的业务逻辑就相对比较清晰了。
• vue的思维，双向数据绑定本身就是利用变量的判断来控制dom的，不知道用过vue的有没有这种感觉，在页面中除了{{}}和v-bind绑定用的最多以外，第二用的最多的就是v-if，因为他的本身思想就是用判断来操作dom，这样导致页面的if语句很多，而且基本都推到到v层。所以对js开发程序员的要求更高，能看懂区分这种判断。

这些只是我个人的理解，有很多理解不到位的地方欢迎指正。我会将上面的问题的解决方案应用到下一个项目中看看问题点是不是得到改善！

 

这里在补充一句:vue2.0开始推崇vuex,今天刚看了一篇文章,关于vuex的介绍,vuex其实是在应用到中大型项目中组件共用一个状态的情况,这样嵌套分支就更复杂了,组件之间的嵌套,嵌套完了在是共用同一个组件状态,没有个特别好的结构分层个人感觉混乱程度不只一点点啊