毫无疑问，前后端分离开拓是当前非常热门的技能方向，可以说是互联网项目开拓的标配，如果你还不懂前后端分离，那肯定就 out 了。一贯以来很多读者都在问我同一个问题：到底什么是前后端分离啊？有这种迷惑的读者不在少数，以是本日就写一篇文章来给大家说说什么是前后端分离。
顾名思义，前后端分离便是把一个运用的前端代码和后端代码分开来写，为什么要这样做呢？先说说不分开会有什么问题，在传统的 Java Web 开拓模式中，前端页面利用 JSP，而 JSP 代码的开拓每每不是完备由后端程序猿来完成的。
JSP 页面的开拓步骤是首先须要前端程序猿完成 HTML 代码，然后交给后端程序猿转为 JSP 再进行开拓，后端如果碰着页面问题，就须要找前端来办理，但是此时前端看到的代码已经不是他之前写的 HTML 了，是稠浊了一大堆标签的 JSP 代码，而前端又不懂 JSP，场面就非常尴尬。
后端：你写的页面有问题啊，不显示数据。
前端：不可能，我这边都是好的。
后端：你自己来看啊。
前端：你写的这是什么玩意？我给你的代码不是这样的。
后端：我得把你的代码加到 JSP 里啊。
前端：我又不懂 JSP 啊，你再把代码摘出来吧，我帮你看看问题。
后端：......
这样就导致开拓效率极低，后端须要等待前真个 HTML 代码完成之后，再整合成 JSP，而且出错率较高，碰着 Bug 办理起来也很麻烦，须要双方协同处理，这就给开拓带来了很大的问题，怎么办理呢？
可以采取前后端分离的开拓模式，前后端程序猿只须要提前约定好接口文档（参数、数据类型），然后并行开拓即可，末了完成前后端集成，碰着问题同步修正即可，真正实现了前后端运用的解耦合，可以极大地提升开拓效率。
说直白点前后端分离便是把原来的一个运用，拆分成两个运用，一个纯前端运用，专门卖力数据展示和用户交互，一个纯后端运用，专门卖力供应数据处理接口，前端 HTML 页面通过 Ajax 调用后端 RESTful API 接口进行数据交互。
这么说不形象，通过下面这两张图带你理解前后端分离和传统单体运用的差异，单体运用的构造是这样的。
前后端分离的构造是这样的。
如图所示，前后端分离便是将一个运用拆成两个，前端运用和后端运用以 JSON 格式进行数据交互，这便是前后端分离的基本观点，目前最主流的实现方案是 Spring Boot + Vue，即后端利用 Spring Boot 框架进行开拓，前端利用 Vue 框架进行开拓。
Spring Boot 简述
Spring 作为一个软件设计层面的框架，在 Java 企业级开拓中运用非常广泛，但是 Spring 框架的配置非常繁琐，且大多是重复性的事情，Spring Boot 的出身就办理了这一问题，通过 Spring Boot 可以快速搭建一个基于 Spring 的 Java 运用程序。同时 Spring Boot 对常用的第三方库供应了配置方案，可以很好地与 Spring 进行整合，如 MyBatis、Spring Data JPA 等，可以一键式搭建功能完备的 Java 企业级运用程序。
Vue 简述
Vue.js 是一套相应式的前端开拓库，其他前端开拓库也有很多，如 jQuery、ExtJS、Angular 等，Vue 自问世以来关注度不断提高，当前市场中，Vue 是非常盛行的 JavaScript 技能开拓框架之一，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Spring Boot 和 Vue 都是各自领域最热门的技能栈，把二者整合起来进行前后端分离的开拓是很好的选择，非常方便，这也是 Spring Boot + Vue 如此火爆的缘故原由。
项目案例
下面来看一个实际案例，分别创建 Spring Boot 工程和 Vue 工程。
Spring Boot
Vue
分别启动两个运用，用命令 npm run serve 启动 Vue 运用，成功之后如下图所示。
通过 http://localhost:8080/ 即可访问 Vue 运用，启动 Spring Boot 运用，成功之后如下图所示。
通过 http://localhost:8181/ 即可访问 Spring Boot 运用，比如用 Postman 访问它的数据接口。
后端做事接口调通，成功返回 JSON 数据，现在只须要让 Vue 运用调用后端接口即可，这里我们利用 axios 来要求后端接口，代码如下所示。
const _this = thisaxios.get('http://localhost:8181/book/findByPage/1').then(function (resp) { _this.pageSize = resp.data.pageSize _this.total = resp.data.total _this.tableData = resp.data.data})
要求成功后将数据动态加载到页面，即可看到结果，如下图所示。
Vue 运用和 Spring Boot 运用的数据交互流程如下图所示。
以上内容便是前后端分离的基本流程，你学会了吗？
关注微信"大众号「Java大同盟」，关注即可获取海量学习干货，同时还有不定期送书，键盘，鼠标等粉丝福利。
赶紧来关注一波，海量资源拿得手软。
