Web项目开发为何要走前后端分离模式？

Posted 2023-04-04

参考技术A 把前端与后端独立起来去开发，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员，前后端工程师需要约定交互接口，实现同步开发，开发结束后需要进行独立部署，前端通过接口来调用调用后端的API，前端只需要关注页面的样式与动态数据的解析和渲染，而后端专注于具体业务逻辑。具体好处有以下几点：

1.彻底解放前端

前端不再需要向后台提供模板或是后台在前端html中嵌入后台代

2.提高工作效率，分工更加明确

前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。

3.局部性能提升

通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。

4.降低维护成本

通过目前主流的前端MVC框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。

5.实现高内聚低耦合，减少后端（应用）服务器的并发/负载压力。

6.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，但无法提供数据。

7.可以使后台能更好的追求高并发，高可用，高性能；使前端能更好的追求页面表现、速度流畅、兼容性、用户体验等。

我理解的前后端分离，前端是需要起服务器的，减少学习成本，可以用node，前端也要有域名的

如果是半分离， 那么前端提供js文件（css等）这个我也做过，前后端都用node就不说了，如果是两种语言，

如果一个工程文件下开发，webpack下直接打包进后台语言的静态目录下。

如果是两个工程，那么前端只提供生成的js（css）文件，git pull后台项目，扔进静态目录，这样又涉及到版本控制的问题，一般我会生成一个配置文件，直接读取的，内容是xxx.hash.js这种文件名，然后document.wirte动态写入js/css

前端起服务器就不需要动态引入了，直接html插件生成文件，更好的控制版本

半分离 还有一个问题，例如首页同构，如果更改xxx.blade.php文件，这就又动了php文件，甚至包括nginx反向代理啊，ssl这种缓存啊，都比较麻烦，你要是改了点啥，自己的ok了，后台的崩了，那就挺操蛋了，大公司有专门的运维还好，小公司真的是一团糟

后台我们采取全分离，nginx前端管理，至于升级nginx版本，http2，反向代理，https证书，都是前端自己弄，毕竟小公司，每个人水平都不一致，自己负责自己的比较好

但是这个跨域又要稍微处理一下，至今我这边后台还是*，我也没法说什么

阿里云这么便宜，如果把成本浪费在人力上，会变得很贵

一个人的精力有限，前后端分离有助于我们更专注我们所要注重的技术点，俗话说：“术业有专攻”。

比如我们后端，前后端分离有助于我们把注意力放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构（dubbo，dubbox，spring cloud），弹性计算架构，微服务架构（springboot+zookeeper+docker+jenkins），java性能优化，以及相关的项目管理等等。

而前端也可以集中精力在前端的展示上。

总的来说，前后端分离利大于弊。这也是越来越少用jsp的原因。

补充两点

1.每次请求的数据量变小，也意味着更少的响应时间。

2.也不是每个应用用前后端分离都是最合适的，要根据应用规模，工期综合判断。

web前后端分离开发部署模式

点击蓝色字免费订阅，每天收到这样的好信息

转自:http://www.qttc.net/201506464.html(点击阅读全文跳转自原页)

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

一、传统开发模式

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

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

1. 
   

都有一个共同的特点，服务器端后台语言生成解析后的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端解决会话的主流，并且有henduo开源好用的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控制台的报错，前端开发人员也不需要跑到后端开发人员的机器上看浏览器报错调试