为什么要前后端分离？如何实现？

检验之星

为什么要前后端分离？如何实现？
原文地址：https://www.zhihu.com/question/650801383

卡卡

因为以前前端就一个网页，很少有做桌面客户端的。现在前端不但有网页，又分手机版和电脑版，安卓，苹果，各家的小程序又不一样，还有快应用。大多数公司小程序公众号，h5的电脑端和手机端各一套，后台还是那个后台，不分咋整。再加上现在滋生出了各种前端框架，提升了开发效率，就更要分了

检验医师

为什么要前后端分离呢？这样可以使得开发流程更清晰、分工更明确，前端专注于界面展示和用户体验，后端则专注于业务逻辑和数据存储，大大提高开发效率呢！同时，前后端分离也使得项目更加模块化，易于维护和扩展。
至于如何实现前后端分离，其实主要就是要明确前后端的职责和接口规范。前端通过API接口与后端进行通信，获取数据和发送请求。而后端则负责处理业务逻辑和数据存储，提供API接口供前端调用。
在实现过程中，我们可以使用一些前端框架（比如React、Vue等）来构建前端界面，同时使用一些后端框架（比如Node.js、Spring Boot等）来搭建后端服务。前后端之间通过HTTP协议进行通信，可以使用RESTful API或GraphQL等接口规范来定义接口。

清风寡欲

先回答为什么要前后端分离。
这个其实和社会大分工是一个道理。
前端偏向用户视觉和体验，后端偏向数据和逻辑。一个人做前后全栈时，也是需要分别梳理这两种不同的编码方向。比如写一个模块的后端接口，在对应写一个前端的对接。
如果你让他写一半后端打断他的思路在去写一半前端。估计他会找你拼命。
所以是分工细化导致前后分离。
再说如何实现。
前端开发html,js,css是基础
vue,react,angular,等框架是方便的实用工具
后端开发就是用各种语言提供的网络编程功能实现http服务。当然也有现成的框架。
java的spring
python的fastapi
php的laravel
ruby的ROR
等等

卡卡

前后端分离是技术细分的必然产物，也是有利于软件工程化的必然选择。
Web技术的发展， 从最初的纯静态页面开始，那时候就是一个纯的文本+图片的展示，没有什么交互功能， 用户只能浏览页面，所以这时候的架构就是一个浏览器+提供文本、图片服务的服务器。
随着技术的发展， 用户有了交互的需求，比如提交建议、反馈问题，甚至有了娱乐的需求。所以出现了Java applet，Java script等前端技术， 也出现了ASP，JSP等这种动态产生页面，在服务器端能处理来自浏览器请求并组织成页面的技术。
但是这种技术存在一些问题， 如前端无法单独调试、开发效率低以及耦合性强等，往往一个项目的开发人员要两端兼顾，既需要懂得后端开发，也需要懂前端开发，而且因为各种基于动态代码的占位符，前端无法立即查看到页面效果，需要启动后端服务才能够看到效果，十分不方便。



JSP技术

随着ajax技术的出现，前后端开始实现半分离。在这一阶段，前端负责开发页面，通过接口（Ajax）获取数据，采用Dom操作对页面进行数据绑定，最终由前端把页面渲染出来。
这样的技术得前端界面不再需要关心后端是如何实现数据修改的，前端只需要关心从哪个URL（后端路由），通过哪种方式（GET/POST等）能够拿到数据或者提示相关数据的变更并返回相应结果。而后端也不再需要关心用户通过URL需要展示哪张由原本动态渲染出来的界面，只需要编写接口，提供与相关URL对应的http请求的数据，进行相关的操作，将数据转换为JSON并发送对应http请求。
有了Ajax技术以后，为了更近一步解耦，体现术有专攻，所以交互方式转变成了前后端只双向传送数据，就是所谓的前后端分离技术。



一个典型前后端分离的架构示意

前后端分离后，前端开发人员、后端开发人员各司其职，并行开发，前端终于能够独立进行进行调试了，甚至后端接口尚未开发完成之前， 通过mock的方式进行开发，完全不会影响到开发进度。 同时部署、升级等维护工作，也都可以分别进行，互不影响。
前后端分离也促使了前端各种框架的出现，react，vue等等开发框架，专注于前端开发的便利及性能，对于推进前后端分离技术也起到了促进的作用。



Vue的logo

所以，前后端分离是现代软件工程的必然过程，其要点就是前后端的交互，只来回传输数据，不涉及页面上的元素。

清风寡欲

因为业务越来越复杂以及技术越来越进步吧。以前，客户端配置也不好，浏览器也没那么强大，只能前后端在一起。前端切图做效果，后端把内容替换成模板渲染。
后面客户端变好了，浏览器功能也强大了，能做的事情越来越多了。而且随着业务变得复杂，也不能再放一起了。所以就专人干专门的活，切图设计给到了UI，客户端逻辑就变成了现在的前端，主要负责用户交互了。后端就专注业务和数据了。
如何实现，参考Vue，react官方文档搭个项目就能理解了。简单划分就是后端负责业务逻辑，给到页面需要的数据;前端把这些数据按合适的方式渲染。