何为前后端分离？一文搞懂前后端分离发展史

何为前后端分离？一文搞懂前后端分离发展史

目录

一、前言        

二、前后端分离的演进过程

        2.1 发展的三个阶段

        2.2 前后端不分离阶段（Java的JSP作为前端视图时代）

        2.3 前后端半分离阶段（前后端使用Ajax交互的半分离时代）

        2.4  前后端完全分离阶段（前后端使用代理服务器的完全分离时代（MVVM））

三、结语

---

一、前言        

        各位小伙伴大家好，又跟大家见面了，我就是那个白天晚上都在写代码的IT小白，白天忙于工作，晚上忙于整理公众号，你说小弟我容易吗。谁让我的心里只有学习呢！！！

        为什么聊到这个前后端分离呢，其实在我17年大学毕业（ps:不小心暴露了年纪）的时候，其实就已经用到了前后端分离技术，当时后端的框架使用的是SpringMVC+iBatis，做了基于Maven多模块+Dubbo的SOA架构，前端采用的是基于Vue的element UI，前后端接口使用Swagger作为前后端开发API。开发方式甚爽，虽然我也写前端，但是前后端分离后的开发方式，会大大增加开发效率，今天我就给大家讲讲什么是前后端分离，和前后端分离的演进流程吧。（ps:内容示例用Java应用作为示例。）

二、前后端分离的演进过程         2.1 发展的三个阶段

• 1. 前后端不分离阶段
• 2. 半分离阶段
• 3. 分离阶段

        2.2 前后端不分离阶段（Java的JSP作为前端视图时代）

        JSP的概念(百度百科)：

        JSP（全称JavaServer Pages）是由Sun Microsystems公司主导创建的一种动态网页技术标准。JSP部署于网络服务器上，可以响应客户端发送的请求，并根据请求内容动态地生成HTML、XML或其他格式文档的Web网页，然后返回给请求者。JSP技术以Java语言作为脚本语言，为用户的HTTP请求提供服务，并能与服务器上的其它Java程序共同处理复杂的业务需求。

JSP的强大功能：

        简单来讲JSP算是对Java影响巨大的一个技术，奠定了Java走向B/S架构的基础，JSP的出现让Java从只能做C/S客户端扩展到了B/S架构。JSP可以实现与HTML、Javascript、Java代码结合，完成页面的展示，做数据的处理，与Java服务器结合完成更复杂的业务。

 开发过程中的诟病：

        JSP目前已经淘汰，更加流行的技术：Vue、React迅速占领软件市场，那为什么JSP会被淘汰呢，思考下，你在开发的过程中，有没有遇到过这样的情况，大家请看下面的代码。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>











<%=user1.getUsername() + " : " +user1.getPassword() %>
<%--  --%>

<%
    if(user1.checkLogin()){
        out.println("登录成功");
    }else{
        out.println("登录失败");
    }
%>

        从上面的代码可以看到，JSP融合了html标签、JSTL标签、Java代码，在进行开发的时候，前端的同事在进行界面布局之后，后端同事需要在前端的界面上写Java代码才能完成前端界面的完整业务。这样高强度耦合的方式，直接导致开发、联调时间增加，这也就是JSP时代的诟病。

【优缺点分析】

优点：

1. 前端可以编写Java程序，后端人员可直接在页面上写后台逻辑。

2. 技术单一，容易掌握，代码好排查问题

3. 一个技术人员即可完成前后端的功能开发，适合小型企业使用

缺点：

1. 影响整体开发进度，前后端无法单独分工

2. 后端编译代码时，需要把前端代码编译（JSP其实也是Java的Servlet编写的，需要后台编译）

3. 运行时前后端跳转不断（来回转发，界面不能局部刷新），影响用户体验。

        2.3 前后端半分离阶段（前后端使用Ajax交互的半分离时代）

Ajax概念(百度百科)：

        Ajax是什么呢？Ajax 即“Asynchronous Javascript And XML”（异步 Javascript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax的功能

         Ajax的出现，解决了网站每次提交参数都要转到后台，再跳回前台的方式，可以异步的动态刷新网页局部的数据，Ajax与后台交互只做数据传输，后台只负责后台的工作，前台请求后台接口，将响应的数据在在前端进行渲染即可，下面用登录功能来描述。

         前端工程要做的事情就是将前端界面布局做好，与后端交互，然后将请求的数据进行渲染或者跳转页面，后端则只需要做好数据交互即可，这样就将前后端的工作进行拆分，每个人做专职的事情。但是为什么称为是半拆分呢？因为此时前端工程需要依赖后端工程的服务器才能启动起来（一般Java程序需要放到webapp下，前端无法单独启动），后端出现问题时，前端无法进行单独开发，需要等待后端接口处理完成问题后才能继续。

【优缺点】

优点：

1. 前后端技术分开，可专人做专事情

2. 界面可以局部刷新，前后端联调变得方便

3. 前端可以多种技术选择，更好的完成项目业务建设

缺点：

1. 当前端选择复杂的业务时，对前端技术要求较高，后端只能参与简单的业务开发。

2. 前后端依赖严重，当后端接口出现问题时，前端无法继续调试项目。

3. 前后端联调需要双方完全开发完毕才能联调功能，联调时间变长。

        2.4  前后端完全分离阶段（前后端使用代理服务器的完全分离时代（MVVM））

MVVM概念（百度百科）：

        MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

个人理解：

        其实MVVM是在MVC的基础上进行完善，目前使用MVVM的架构的象征代表为Vue，将数据和模型进行双向绑定，当程序改变了数据时，及时将界面的渲染数据进行修改。推翻了之前的jquery渲染dom的方式，开发全新的渲染方式，简便了开发人员的开发方式。

 名词解释：

• 模型层 (Model)：

  负责从各种数据源中获取数据；

• 视图层 (View)：

  用于展示给用户和处理用户交互，会驱动 ViewModel 从 Model 中获取数据；

• ViewModel 层：

  用于将 Model 和 View 进行关联，我们可以在 View 中通过 ViewModel 从 Model 中获取数据；

  当获取到了数据之后，会通过自动绑定，比如 DataBinding，来将结果自动刷新到界面上。

如何前后端分开开发

        可能有的朋友会思考，前后端如何分开开发呢，前端不还是要依赖后端接口才可以正常渲染数据吗，推荐几个常用工具即可解决这个问题。

技术名称描述及用处mock.js一款数据模拟组件，可结合vue，完成数据中英文、数字各种格式的数据，拦截前端的请求，完成数据返回，解决前端依赖后端数据接口的问题。Swagger后端接口API文档，Java工程可集成swagger组件，在接口上增加简单的注解，即可生产后端接口文档，包含接口地址、接口请求方式，出入参格式，也可输入模拟数据进行测试，前端只需要访问后端工程的这个界面，即可找到接口地址和出入参接口规范。nginx反向代理服务器、文件负载服务器，可将前端使用nginx承载（这也是目前市场上流行的前端部署方式），访问nginx的地址即可访问前端工程，将前端工程的请求代理到后端的请求地址上即可完成。后端记得处理下跨域问题哈。

开发流程及部署图

1. 前端开发的过程中使用webpack命令，使用webpack-dev-server配合node.js程序来运行服务，使用模拟数据进行功能开发即可。当需要连接后端接口时，关闭mock，连接后端开发的服务即可，不需要单独启动后端工程。

2. 后端正常开发restful风格的接口，使用swagger进行接口注释，联调时，将服务暴露给前端调试即可。

3. 部署时，前后端分开部署，前端使用webpck打包后，将打包后的文件放到nginx服务器下，后端打包成jar/war，使用指定的方式启动即可。

 优缺点

优点：

1. 前后端技术分开，工程分开，互不影响开发。

2. 前端组件化，有更多的扩展空间。

3. 前端也可部署集群，且不依赖后端工程，生产环境功能服务主机互不影响。

缺点：

1. 对技术要求较高，需要掌握最新的技术

2. 部署流程复杂，不适合小型企业使用

3. 前后端分离后，查问题过程更长。

4. 前后端技术完全隔离，学习成本较高。

三、结语

        前后端分离技术，是目前主流的大型企业都在使用的技术，前后端分开开发，分开部署的方式，既提高了开发效率（专人专职），又提高了项目的承载能力，是一个值得使用的技术。

今天就到这里了，有问题请指出，欢迎各位来踩，多多交流技术。

 觉得不错的关注下公众号吧