一、前言

各位小伙伴大家好，又跟大家见面了，我就是那个白天晚上都在写代码的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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录界面</title>
</head>
<body>
<jsp:useBean id="user1" class="cn.crabshell.pojo.user"></jsp:useBean>
<jsp:setProperty property="username" name="user1"/>
<jsp:setProperty property="password" name="user1"/><%=user1.getUsername() + " : " +user1.getPassword() %>
<%-- <jsp:getProperty property="username" name="user1"/> --%><%if(user1.checkLogin()){out.println("登录成功");}else{out.println("登录失败");}
%>
</body>
</html>

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

【优缺点分析】

优点：

前端可以编写Java程序，后端人员可直接在页面上写后台逻辑。
技术单一，容易掌握，代码好排查问题
一个技术人员即可完成前后端的功能开发，适合小型企业使用

缺点：

影响整体开发进度，前后端无法单独分工
后端编译代码时，需要把前端代码编译（JSP其实也是Java的Servlet编写的，需要后台编译）
运行时前后端跳转不断（来回转发，界面不能局部刷新），影响用户体验。

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

Ajax概念(百度百科)：

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

Ajax的功能

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

å¾ç

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

【优缺点】

优点：

前后端技术分开，可专人做专事情
界面可以局部刷新，前后端联调变得方便
前端可以多种技术选择，更好的完成项目业务建设

缺点：

当前端选择复杂的业务时，对前端技术要求较高，后端只能参与简单的业务开发。
前后端依赖严重，当后端接口出现问题时，前端无法继续调试项目。
前后端联调需要双方完全开发完毕才能联调功能，联调时间变长。

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的地址即可访问前端工程，将前端工程的请求代理到后端的请求地址上即可完成。后端记得处理下跨域问题哈。

开发流程及部署图

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

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

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

å¾ç