共计 2394 个字符，预计需要花费 6 分钟才能阅读完成。

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

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

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

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

我们项目的整一个架构如下:

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

一般来说，要实现前后端分离，前端就需要开启一个本地的服务器来运行自己的前端代码，以此来模拟真实的线上环境，并且，也是为了更好的开发。因为你在实际开发中，你不可能要求每一个前端都去搭建一个 java(php)环境，并且在 java 环境下开发，这对于前端来说，学习成本太高了。但如果本地没有开启服务器的话，不仅无法模拟线上的环境，而且还面临到了跨域的问题，因为你如果写静态的 html 页面，直接在文件目录下打开的话，你是无法发出 ajax 请求的(浏览器跨域的限制), 因此，你需要在本地运行一个服务器，可是又不想搭建陌生而庞大的 java 环境，怎么办法呢？nodejs 正好解决了这个问题。在我们项目中，我们利用 nodejs 的 express 框架来开启一个本地的服务器，然后利用 nodejs 的一个 http-proxy-middleware 插件将客户端发往 nodejs 的请求转发给真正的服务器，让 nodejs 作为一个中间层。这样，前端就可以无忧无虑的开发了
由于前后端分离后，前端和后台同时开发时，就可能遇到前端已经开发好一个页面了，可是却等待后台 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 前端服务器的职责

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

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

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

(PS: 其实也有一个做法，就是用 nginx 来做反向代理，负责转发请求，根据客户端访问的 url 把这个请求转发到不同的服务，比如访问 /api/* 的请求，就转发到后台服务，访问其它的请求，就转发到 nodejs 服务)以上，就是我对于前后端分离的一些看法，以及一些实践，如果大家有什么好的想法，欢迎交流。本次项目代码的地址为:https://github.com/chenjigeng… 由于本项目的后台服务已经下线，此项目运行不起来。只供参考
本文地址在 -> 本人博客地址, 欢迎给个 start 或 follow

共计 2394 个字符，预计需要花费 6 分钟才能阅读完成。

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

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

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

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

我们项目的整一个架构如下:

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

一般来说，要实现前后端分离，前端就需要开启一个本地的服务器来运行自己的前端代码，以此来模拟真实的线上环境，并且，也是为了更好的开发。因为你在实际开发中，你不可能要求每一个前端都去搭建一个 java(php)环境，并且在 java 环境下开发，这对于前端来说，学习成本太高了。但如果本地没有开启服务器的话，不仅无法模拟线上的环境，而且还面临到了跨域的问题，因为你如果写静态的 html 页面，直接在文件目录下打开的话，你是无法发出 ajax 请求的(浏览器跨域的限制), 因此，你需要在本地运行一个服务器，可是又不想搭建陌生而庞大的 java 环境，怎么办法呢？nodejs 正好解决了这个问题。在我们项目中，我们利用 nodejs 的 express 框架来开启一个本地的服务器，然后利用 nodejs 的一个 http-proxy-middleware 插件将客户端发往 nodejs 的请求转发给真正的服务器，让 nodejs 作为一个中间层。这样，前端就可以无忧无虑的开发了
由于前后端分离后，前端和后台同时开发时，就可能遇到前端已经开发好一个页面了，可是却等待后台 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 前端服务器的职责

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

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

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

(PS: 其实也有一个做法，就是用 nginx 来做反向代理，负责转发请求，根据客户端访问的 url 把这个请求转发到不同的服务，比如访问 /api/* 的请求，就转发到后台服务，访问其它的请求，就转发到 nodejs 服务)以上，就是我对于前后端分离的一些看法，以及一些实践，如果大家有什么好的想法，欢迎交流。本次项目代码的地址为:https://github.com/chenjigeng… 由于本项目的后台服务已经下线，此项目运行不起来。只供参考
本文地址在 -> 本人博客地址, 欢迎给个 start 或 follow