前后端分离实践一

一、传统开发模式

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

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

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

二、Ajax过渡

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

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

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

三、前端构建

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

后端项目通常都带自己的Server，除了PHP以外，所以后端做PHP开发的还需要一个WebServer，Apache就是经典配合，最近被抛弃换做Nginx了，所以后台环境本来就是伪生产环境。

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

四、解决请求问题

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

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

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

五、静态资源路径问题

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

资源与后台项目放一起，后台处理完后需要返回前台一个相对路径，如果资源时一台单独的服务器，那就需要返回资源的绝对URL即可。

六、会话

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

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

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

2、不利于蜘蛛（其实现在的部分蜘蛛已经很厉害了，能够支持H5 C3效果）

强点，

1、Web端就像手机端的App一样，不需要Cookie/Session，与Server完全分离，易于维护、扩展。一个Server API可以随意服务多个Web App

2、AngularJS用过了以后，你应该会感觉未来的Web开发模式，AngularJS在几乎是前后端分离的领航者

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

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

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