前后端分离的意义

前后端分离的意义

前后端分离

• 前后端分离就是将前端代码与后端代码分开来写，为什么要这样做？
• 如果不使用前后端分离会有哪些问题？

传统的Java Web开发中，前端使用JSP开发，JSP不是由后端开发独立完成的。

即前端工程师完成一个HTML的静态页面，然后将其交给后端开发工程师，后端工程师再继续完成这个给JSP页面的逻辑部分。这种开发方式的效率极低，后来为解决传统web开发中耦合度较高、串行开发效率低的问题，出现了SSM框架来实现前后端分离，从而解决人力不足,分工不明确和前后端耦合度高等问题。

前后端分离就是将一个单体应用拆分成两个独立的应用，前端应用通过Ajax和后端应用以JSON格式进行数据交互，最后完成前后端集成即可，真正实现了前后端应用的解耦合。

我们将基于B/S架构的WEB开发分为三层：表现层、业务层、持久层。那么前后端分离其实就是将表现层单独工程化的实践方法。

而单独工程化主要表现在以下几个方面：

• 开发阶段：在node或其他平台开发独立工程，进行调试以及打包；
• 部署阶段：以静态页面的形式部署在静态文件服务器（Nginx、Apache）或tomcat等web容器
• 运行阶段：客户端（浏览器）独自完成画面渲染，所需的数据则通过REST与后台交互

此时，前端工程师的HTML页面通过Ajax调用基于RESTfut的数据接口，然后完成数据的渲染和展示。

实现前后端分离的意义何在呢？

软件系统架构的前后端分离出于三方面考虑，其一是提升系统的业务处理能力，比如并发处理能力；其二是提升系统的可用性；其三是提升系统的扩展能力和可维护性。另外，采用前后端分离的架构也会方便开发团队的分工合作，提高开发效率。

职责分离

后端：

1. 提供数据和服务
2. 处理复杂的业务
3. 关注服务层
4. 开发和充分利用服务器的性能

前端：

1. 接收数据和服务
2. 简单处理一些小业务,数据，model, view.
3. 关注客户端页面渲染，性能，交互
4. 优化SEO,性能，加载等

实现技术
当前随着技术的蓬勃发展，可供前后端分离的技术选择可以说是多种多样，前端也不只是用一把“锋利的JQuery”走遍天下了，前端三大MVVM框架Vue、React、Angular可谓风生水起，前端主流技术栈从风靡一时的JQuery逐步演变为后起之秀的MVVM框架的过程，其实就是一种思想的转变，将原有的直接操作dom的思想转变到操作数据上去。我认为这种改变的好处主要有四：

1. 前端工程化让代码更易于开发和维护，而不仅仅是简单的HTML、CSS和JS的代码以及效果的叠加，解耦合的同时也使页面不再杂乱难搞。
2. 传统的JSP、PHP或模板渲染都是服务器端喧染，而如今的前后端分离技术使得客户端从服务器端请求之后得到的不再是一整个页面，而是通过API进行传输的json数据。这样不仅减轻了服务器的压力而且速度更快、渲染更加优雅。
3. JQuery是通过DOM控制数据的，这样不仅显得笨重而且特别麻烦。而VUE等MVVM框架可以通过数据控制状态、通过数据控制渲染，变量可以直接写在HTML中，使渲染更加优雅。
4. 项目工程化。MVVM框架让前端实现工程化，可以通过npm直接安装一个前端项目需要的第三方库，使项目开发更加高效和方便。是Node和npm让MVVM蓬勃发展，也让前端工程化以及前后端分离的技术架构有了无限可能。

而后台的技术选型其实不需要特别苦恼，因为可供选择的技术方案不多。主流语言中少不了的就是Java和python，java基本上首选spring系，Python的话，基本上就是Flask和Djongo。而具体哪种配方更甜蜜呢，还得要针对不同体量以及复杂程度的项目业务分开讨论，在能满足业务需求和安全性的同时不至于小题大作，“杀鸡焉用宰牛刀”，你说呢？

SpringBoot + Vue
目前作为一个刚刚入职的小白，我们项目组在当前采用的技术架构是Spring Cloud + Vue，而Spring Cloud得以实现的关键部分就是SpringBoot，所以使用springBoot进行后端应用开发，使用vue进行前端应用开发。(其实只要懂javaWeb和html、css、js以及ajax就可以完成一个前后端分离的应用，但是开发量很大，非常麻烦。所以，目前来讲，SpringBoot+vue是最为简单和好用的前后端分离的开发方式)。后续将继续记录SpringBoot的学习心得。