关于前后端分离

Posted 2021-04-30 马小琥

最近参与了一个前后端分离的项目，感觉做的非常失败，把好端端的一个项目做的很烂，最大的一个因素就是我们团队缺乏前后端分离的经验，做出来的东西，也不是真正意义上的前后端分离的项目，内心还是很惭愧的。当然，通过这个失败的案例，也加深了前后端分离的理解，至少知道真正前后端分离应该怎么去玩，总结了几点自己的理解。

一，传统web项目的弊端？

   1，学习成本高导致1后端开发人员能力有限，写的代码很low很乱，版本迭代维护成本大。

   2，动态资源与静态资源强耦合，服务器压力大。

   3，传统流程需要前端完成静态html的制作，交给后端人员嵌入项目中，后台开发需要依赖前端开发人员完成后才能进行开发。

   4，定位问题不清晰，遇到bug前后端相互甩锅，解决问题时也需要前后端开发人员协同处理。

二，前后端分离的几种模式？

传统的web项目都是后端开发一条龙，由后端开发处理业务逻辑，请求路由，数据渲染等工作。在很多公司其实没有做到真正意义上的前后端分离，

比如，很多公司的做法在controller中控制跳转，路由控制还是放在后端处理的，只是提供了api。

我们主要使用的技术方案有四种：前端模板（Ajax + 字符串模板）、MVVM（Vue、React）、Node模板（Express + ejs）、SSR（Node + Vue SSR）。这其中最古老的方案就是Ajax + 字符串模板，它本质上是拼接字符串。

三，解决的请求方式？

前后端分离后，我们只需要Server端告诉我们Api URL即可，那么这会产生一个问题：Ajax跨域。这里就不能使用一般的跨域解决方法去解决，比如jsonp,iframe信使等等，因为我们还有POST请求。

于是Http Proxy类工具就有用了，比如我就会在BrowserSync加入中间件判断每一个请求，如果是/api前缀就会代理到API Server端，API Server端收到数据后再返回给BrowserSync，BrowserSync再返回给浏览器端。这样就解决跨域请求的问题。

生产环境有两种部署，一种是放到后台项目里，这就没啥说的，另外一种就是前后端分开部署，那就在前端WebServer处理端写点转发规则就好，如nginx，Apache都支持。

四，会话处理

前后端分离，通过rest api的方式最大的缺点就是导致会话问题，传统模式下，都是通过session/cookie方式处理会话信息，在集群环境下，session的问题更多。

当前比较优雅也比较主流的解决方式当然是通过token的方式处理。

五，静态资源问题处理？

建议采用静态资源单独部署的方式，这个不用多说，解决io压力，如果把所有鸡蛋放到一个篮子，一损俱损。