目录
suibi

前后端分离什么意思(超详细解释前后端分离用什么技术)


还搞不明白前后端分离?看完这篇文章,小白也能马上学会

毫无疑问,前后端分离开发是当前非常热门的技术方向,可以说是互联网项目开发的标配,如果你还不懂前后端分离,那肯定就 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 = this
axios.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 应用的数据交互流程如下图所示。

还搞不明白前后端分离?看完这篇文章,小白也能马上学会

以上内容就是前后端分离的基本流程,你学会了吗?


写笔记

咨询

您的电子邮箱地址不会被公开。