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

目录

一、前言        

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

        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"%>
<!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时代的诟病。

【优缺点分析】

优点:

  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. 前后端技术完全隔离,学习成本较高。

三、结语

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

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

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

å¾ç

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>