实现先后端分离的心得

实现先后端分离的心得

对目前的web来讲，先后端分离已经变得愈来愈流行了，愈来愈多的企业/网站都开始往这个方向靠拢。那么，为何要选择先后端分离呢？先后端分离对实际开发有什么好处呢?

为何选择先后端分离

• 在之前传统的网站开发中，前端通常扮演的只是切图的工做，只是简单地将UI设计师提供的原型图实现成静态的HTML页面，而具体的页面交互逻辑，好比与后台的数据交互工做等，可能都是由后台的开发人员来实现的，或者是前端是牢牢的耦合后台。好比，之前淘宝的Web基本上都是基于MVC框架webx，架构决定了前端只能依赖后端。因此他们的开发模式依然是，前端写好静态demo，后端翻译成VM模版，这种模式的问题就不说了，被吐槽了好久。
• 并且更有可能后台人员直接兼顾前端的工做，一边实现API接口，一边开发页面，二者互相切换着作，并且根据不一样的url动态拼接页面，这也致使后台的开发压力大大增长。先后端工做分配不均。不只仅开发效率慢，并且代码难以维护。而先后端分离的话，则能够很好的解决先后端分工不均的问题，将更多的交互逻辑分配给前端来处理，然后端则能够专一于其本职工做，好比提供API接口，进行权限控制以及进行运算工做。而前端开发人员则能够利用nodejs来搭建本身的本地服务器，直接在本地开发，而后经过一些插件来将api请求转发到后台，这样就能够彻底模拟线上的场景，而且与后台解耦。前端能够独立完成与用户交互的整一个过程，二者均可以同时开工，不互相依赖，开发效率更快，并且分工比较均衡。

如何作到先后端分离

(如下的内容都是基于咱们的电影购票网站来讨论的)
前端的技术框架是: vue全家桶+nodejs+express(实现的是单页面(SPA)应用)
首先，先分清楚先后端的工做

• 前端的工做：实现整一个前端页面以及交互逻辑，以及利用ajax与nodejs服务器（中间层)交互
• 后端的工做：提供API接口，利用redis来管理session,与数据库交互

咱们项目的整一个架构以下:

接下来进入正题，如何实现先后端分离

1. 通常来讲，要实现先后端分离，前端就须要开启一个本地的服务器来运行本身的前端代码，以此来模拟真实的线上环境，而且，也是为了更好的开发。由于你在实际开发中，你不可能要求每个前端都去搭建一个java(php)环境，而且在java环境下开发，这对于前端来讲，学习成本过高了。但若是本地没有开启服务器的话，不只没法模拟线上的环境，并且还面临到了跨域的问题，由于你若是写静态的html页面，直接在文件目录下打开的话，你是没法发出ajax请求的(浏览器跨域的限制),所以，你须要在本地运行一个服务器，但是又不想搭建陌生而庞大的java环境，怎么办法呢？nodejs正好解决了这个问题。在咱们项目中，咱们利用nodejs的express框架来开启一个本地的服务器，而后利用nodejs的一个http-proxy-middleware插件将客户端发往nodejs的请求转发给真正的服务器，让nodejs做为一个中间层。这样，前端就能够无忧无虑的开发了

2. 因为先后端分离后，前端和后台同时开发时，就可能遇到前端已经开发好一个页面了，但是却等待后台API接口的状况。好比说A是负责前端，B是负责后台，A可能用了一周作好了基本的结构，而且须要API接口联调后，才能继续开发，而此时B却尚未实现好所须要的接口，这种状况，怎么办呢？在咱们这个项目里，咱们是经过了mock来提供一些假数据，咱们先规定好了API接口，设计出了一套API文档，而后咱们就能够经过API文档，利用mock(http://mockjs.com)来返回一些假数据，这样就能够模拟发送API到接受响应的整一个过程，所以前端也不须要依赖于后端开发了，能够独立开发，等到后台的API所有设计完以后，就能够比较快速的联调。

为何要引入nodejs做为中间层

前面的我发的项目结构图中，已经代表，在这个项目里，咱们将nodejs做为中间层，那么，为何咱们要特意引入nodejs呢？直接用java作不就好了吗？

• 我以为引入nodejs主要是为了分层开发，职责划分，nodejs做为前端服务器，由前端开发人员负责，前端开发人员不须要知道java后台是如何实现的，也不须要知道API接口是如何实现的，咱们只须要关心咱们前端的开发工做，而且管理好nodejs前端服务器，然后台开发人员也不须要考虑如何前端是如何部署的，他只须要作好本身擅长的部分，提供好API接口就能够；
• nodejs自己有着独特的异步、非阻塞I/O的特色，这也就意味着他特别适合I/O密集型操做，在处理并发量比较大的请求上能力比较强，所以，利用它来充当前端服务器，向客户端提供静态文件以及响应客户端的请求，我以为这是一个很不错的选择。

前端服务器如何部署

nodejs前端服务器的职责

1. 做为静态文件服务器，当用户访问网站的时候，将index.html以及其引入的js、css、fonts以及图片返回给用户
2. 负责将客户端发来的ajax请求转发给后台服务器

其实前端服务器的部署工做是算比较简单的，具体有如下两个点:

1. 将开发完的前端代码，利用webpack打包成静态压缩文件
2. 在服务器上，利用pm2负载均衡器来执行如下的代码来开启服务器:

评论区有人提到有一个不错的文章，我看了下以为写得确实很详细，你们也可能看一下:https://segmentfault.com/a/1190000009329474?_ea=2038402 (感受这就是业务与专业的区别哈哈)
(PS:其实也有一个作法，就是用nginx来作反向代理，负责转发请求，根据客户端访问的url把这个请求转发到不一样的服务，好比访问/api/*的请求，就转发到后台服务，访问其它的请求，就转发到nodejs服务)
以上，就是我对于先后端分离的一些见解，以及一些实践，若是你们有什么好的想法，欢迎交流。本次项目代码的地址为:https://github.com/chenjigeng/filmshopping

本文地址在->本人博客地址, 欢迎给个 start 或 follow