先后端分离实践一

 

---

在开始讨论这个话题以前咱们先来认识一下传统的开发模式。

1、传统开发模式

相信不少作过Web开发童鞋应该都会经历这样一种开发模式，利用后端语言提供的模版引擎编写HTML／XML页面，好比：

• PHP 开发有 Smarty模板引擎
• Java web工程有jsp页面
• Python 各个Web框架都有各自的模板引擎
• NodeJS 的express你懂得

都有一个共同的特色，服务器端后台语言生成解析后的HTML/XML格式返回给客户端，例如浏览器端访问直接返回解析好的HTML，浏览器直接就解释执行。

2、Ajax过渡

Ajax是把先后端分离部署的推动者，当时网页局部更新就是将来先后端分离的开端。那什么是先后端分离开发呢？

简单来讲就是前端开发不须要部署后台语言那堆垃圾环境，后端开发也不须要前端写好的任何程序，后台只管暴露各类API接口提供前端进行数据的增删改查，不负责生成HTML页面

前端请求到数据后再动态声称dom节点。

3、前端构建

相对于后台来讲，前端构建是重点，由于先后端分离开发后侧重点在于前端，后端就是一个数据提供，权限控制api。

后端项目一般都带本身的Server，除了PHP之外，因此后端作PHP开发的还须要一个WebServer，Apache就是经典配合，最近被抛弃换作Nginx了，因此后台环境原本就是伪生产环境。

前端项目仍是要搭建一个Server，而后把项目丢里边才能跑起来调试开发，最笨的直接整一个Apache或者Nginx也能够，但这样开发仍是很痛苦。能够利用Node工具集便可，Node工具集很是多，好比我很是喜欢用的BrowserSync。

4、解决请求问题

先后端分离后，咱们只须要Server端告诉咱们Api URL便可，那么这会产生一个问题：Ajax跨域。这里就不能使用通常的跨域解决方法去解决，好比jsonp,iframe信使等等，由于咱们还有POST请求。

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

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

5、静态资源路径问题

若是你的项目有上传资源功能，那天然就会产生用户资源，那先后端分离后，如何来处理这个问题呢？得先看模式。

资源与后台项目放一块儿，后台处理完后须要返回前台一个相对路径，若是资源时一台单独的服务器，那就须要返回资源的绝对URL便可。

6、会话

Web项目最头疼的就是无状态致使会话问题，传统的Web项目都使用Session/Cookie，但在先后端分离，集群部署模式下这Session明显缺陷太多。token方式已是当前Web端解决会话的主流，而且有不少开源好用的token生成管理程序，基本上拿来就能用。 
最后

先后端分离的弱点，无非有两点

一、前端负载增多，如请求到列表后，前端须要本身遍历数据集声称DOM节点 （目前绝大多数用户的电脑配置都不差，并且浏览器内核已经不在是满身缺陷的IE浏览器了）

二、不利于蜘蛛（其实如今的部分蜘蛛已经很厉害了，可以支持H5 C3效果）

强点，

一、Web端就像手机端的App同样，不须要Cookie/Session，与Server彻底分离，易于维护、扩展。一个Server API能够随意服务多个Web App

二、AngularJS用过了之后，你应该会感受将来的Web开发模式，AngularJS在几乎是先后端分离的领航者

三、前端静态资源与后台API分流，互不影响，甚至不会存在IO问题

四、开发上与后台几乎同步，互相不影响，特别是基于RESTFul API风格，更是减小了沟通的成本

五、方便各自debug，Java开发人员不须要跑到前端开发人员机器上看tomcat控制台的报错，前端开发人员也不须要跑到后端开发人员的机器上看浏览器报错调试