首页 博客正文

何为前后端分离?

IT小白闯天下 博客 2020-08-05 20:00:55 1684 0
前言

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

微信图片_20200805200222.gif

    为什么聊到这个前后端分离呢,其实在我17年大学毕业(ps:不小心暴露了年纪)的时候,其实就已经用到了前后端分离技术,当时后端的框架使用的是SpringMVC+iBatis,做了基于Maven多模块+Dubbo的SOA架构,前端采用的是基于Vue的element UI,前后端接口使用Swagger作为前后端开发API。开发方式甚爽,虽然我也写前端,但是前后端分离后的开发方式,会大大增加开发效率,今天我就给大家讲讲什么是前后端分离,和前后端分离的演进流程吧。(ps:内容示例用Java应用作为示例。)
前后端分离
演进过程
主要分为三个阶段:
1
前后端不分离阶段
2
半分离阶段
3
分离阶段
前后端不分离阶段
1
Java的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
前后端使用Ajax交互的半分离时代
【百度百科】
Ajax是什么呢?Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
Ajax的出现,解决了网站每次提交参数都要转到后台,再跳回前台的方式,可以异步的动态刷新网页局部的数据,Ajax与后台交互只做数据传输,后台只负责后台的工作,前台请求后台接口,将响应的数据在在前端进行渲染即可,下面用登录功能来描述。
微信图片_20200805200252.jpg
前端工程要做的事情就是将前端界面布局做好,与后端交互,然后将请求的数据进行渲染或者跳转页面,后端则只需要做好数据交互即可,这样就将前后端的工作进行拆分,每个人做专职的事情。但是为什么称为是半拆分呢?因为此时前端工程需要依赖后端工程的服务器才能启动起来(一般Java程序需要放到webapp下,前端无法单独启动),后端出现问题时,前端无法进行单独开发,需要等待后端接口处理完成问题后才能继续。
【优缺点】
优点:
  1. 前后端技术分开,可专人做专事情

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

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

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

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

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

前后端完全分离阶段
3
前后端使用代理服务器的完全分离时代(MVVM)
【百度百科】
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
【简单理解】
其实MVVM是在MVC的基础上进行完善,目前使用MVVM的架构的象征代表为Vue,将数据和模型进行双向绑定,当程序改变了数据时,及时将界面的渲染数据进行修改。推翻了之前的jquery渲染dom的方式,开发全新的渲染方式,简便了开发人员的开发方式。
微信图片_20200805200319.jpg
【名词解释】
  • 模型层 (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,使用指定的方式启动即可。

微信图片_20200805200405.jpg
【优缺点】
优点:
  1. 前后端技术分开,工程分开,互不影响开发。

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

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

缺点:
  1. 对技术要求较高,需要掌握最新的技术

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

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

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

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

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


文章来源:公众号:IT小白架构师之路


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,转载需标明出处。
如果您有更好的解答,欢迎留言评论。

本文链接:https://ruankaoti.com/post/123.html

评论

阅读更多

  • 速看!今天我才知道,UUID还分五个版本

    速看!今天我才知道,UUID还分五个版本

    通用唯一识别码(英语:Universally Unique Identifier,缩写:UUID)是用于计算机体系中以识别信息数目的一个128位标识符,还有相关的术语:全局唯一标识符(GUID)。根据标准方法生成,不依赖中央机构的注册和分配,UUID具有唯一性,这与其他大多数编号方案不同。重复UUID码概率接近零,可以忽略不计。UUID是由一组32位数的16进制数字所构成,故UUID理论上的总数为16^32=2^128,约等于3.4 x 10^38。也就是说若每纳秒(ns)产生1万亿个UUID,要花100亿年才会将...

    博客 2020-08-23 1073 0
  • SubList 分页

    SubList 分页

            分页在项目中经常使用,有时候会用查件进行分页,有时候进行第三方接口进行访问时,经常会有请求数量的限制,所以使用SubList就可以进行分页,代码如下:        int subSize = 1000;  //每页个数       ...

    博客 2020-08-19 704 1 JAVAMySQL
  • 最简单SpringBoot

    最简单SpringBoot

    最简单SpringBoot    本次最简单的SpringBoot项目主要有Application,Controller,properties,pom.xml组成,旨在用最简单的代码搭建一个简单易懂的SpringBoot项目,可以快速入门学习。DemoApplicationpackage com.example.demo; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfig...

  • 面对不计其数的技术栈,我们如何选择?

    面对不计其数的技术栈,我们如何选择?

    Hello,大家好,今天我们不分享技术文,来谈谈"一项技术是否值得长期投入"这一话题。笔者请两天在阿里巴巴中间件公众号看到一篇简锋老师的文章,感触颇深。首先我们要介绍一下文中的主人公:简锋章剑锋(简锋),开源界老兵,Github ID:@zjffdu,Apache Member,曾就职于 Hortonworks,目前在阿里巴巴计算平台事业部任高级技术专家,并同时担任 Apache Tez、Livy 、Zeppelin 三个开源项目的 PMC ,以及 Apache Pig 的 Committer。...

    博客 2020-08-17 644 0
  • linux查看端口被占用情况

    linux查看端口被占用情况

    Linux 查看端口占用情况可以使用 lsof 和 netstat 命令。 如果linux中没有这两个命令,则yum安装一下yum install -y lsofyum install -y net-toolslsof命令 lsof(list open files)是一个列出当前系统打开文件的工具。 一般格式为: lsof -i:端口号 例如查看8080端口的占用情况 可以看到端口8080已经被docker占用了 lsof命令输出详情 更多 lsof 的命令如下:lsof -i:8080:查看8080端口占用ls...

    博客 2020-08-14 611 0
  • java  File转成MultipartFile

    java File转成MultipartFile

    String strUrl = "C:\\Users\\Administrator\\Desktop\\json.xlsx"; File multipartFile = new File(strUrl); InputStream inputStreams = new FileInputStream(multipartFile); MultipartFile file = new MockMultipartFile(multipartFile.getName(), inputStreams);需要的依赖:<...

    博客 2020-08-12 579 0 JAVA文件管理
  • 什么是HTTP状态代码?

    什么是HTTP状态代码?

    HTTP状态代码是HTTP响应状态行的一部分。这些3位整数代码表示服务器对请求的处理结果状态码的第一位用于对响应进行分类:1xx:非正式2xx:成功,该请求已被理解并接受3xx:重定向,需要采取进一步的措施4xx:客户端错误,请求有问题5xx:服务器错误,请求已被接受,但由于服务器错误而导致处理失败常用的HTTP状态码这是Web应用程序和REST API中常用的状态代码列表。200 OK请求已成功,请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。201 Created请求已经被实现,而且有一个...

    博客 2020-08-11 649 0
  • git修改用户名和邮箱

    git修改用户名和邮箱

    运行之前,我们需要设置本地的环境(修改用户的命令也是如同下面),以确保云端和本地的git建立起联系,首先用git config命令来配置:git config --global user.name "yourgithubname" git config --global user.email "yourgithubemail"当想要查看自己的用户时,使用下面的命令:git config --global user.name git config --global user.email...

    博客 2020-08-06 643 0 JAVAIDEA
  • 如何将项目从码云clone到IntelliJ IDEA

    如何将项目从码云clone到IntelliJ IDEA

    前言开源项目现在受到越来越多人的关注,从而吸引众多优秀的程序员参与其中;这里我们来说说如何从码云clone自己喜欢的项目到本地.一.准备工作如果你是首次下载码云中的开源项目,需要安装Git;[Git-2.7.2-64-bit_for_windows在线下载,点击下载即可(* ̄︶ ̄)]http://dl.download.csdn.net/down11/20180422那么在这里,我们不在多叙软件的安装事宜,很简单!二.操作流程(1)我们需要复制地址,如图所示(2)在IDEA中配置Git。选择菜单“File-->...

    博客 2020-08-05 925 3 JAVAIDEA
  • SpringBoot2.0 - 集成JWT实现token验证

    一. 前言目前web开发前后端已经算非常的普及了。前后端分离要求我们对用户会话状态要进行一个无状态处理。我们都知道通常管理用户会话是session。用户每次从服务器认证成功后,服务器会发送一个sessionid给用户,session是保存在服务端 的,服务器通过session辨别用户,然后做权限认证等。那如何才知道用户的session是哪个?这时候cookie就出场了,浏览器第一次与服务器建立连接的时候,服务器会生成一个sessionid返回浏览器,浏览器把这个sessionid存储到cookie当中,以后每次发起...

    博客 2020-08-05 982 1 SpringBoot
  • 何为前后端分离?

    何为前后端分离?

    前言各位小伙伴大家好,又跟大家见面了,我就是那个白天晚上都在写代码的IT小白,白天忙于工作,晚上忙于整理公众号,你说小弟我容易吗。谁让我的心里只有学习呢!!!    为什么聊到这个前后端分离呢,其实在我17年大学毕业(ps:不小心暴露了年纪)的时候,其实就已经用到了前后端分离技术,当时后端的框架使用的是SpringMVC+iBatis,做了基于Maven多模块+Dubbo的SOA架构,前端采用的是基于Vue的element UI,前后端接口使用Swagger作为前后端开发API。开发方式甚爽,虽然我也写前端,但是前...

    博客 2020-08-05 1684 0
  • 简析数据库连接池

    简析数据库连接池

    连接池前言各位老友好,我是IT小白闯天下,今日我想带领大家学习的是,数据库连接池,每一位后台开发的朋友,后台作为前台的数据存储与支撑,对数据库操作是一个必不可少的开发过程,每次对数据库操作时都需要与数据库建立连接,那么使用数据库连接池可以高效率的完成数据库的数据连接对象管理,那么到底什么是数据库连接池呢?数据库连接池:数据库连接池负责分配、管理和释放数据库连接,它允许应用程序重复使用一个现有的数据库连接,而不是再重新建立一个;释放空闲时间超过最大空闲时间的数据库连接来避免因为没有释放数据库连接而引起的数据库连接遗漏...

    博客 2020-08-05 664 0 数据
  • 什么原因,导致你的企业还没有上云?

    什么原因,导致你的企业还没有上云?

    不论您经营任何类型的业务(大型企业,小型公司,甚至是个人品牌),目前尚未迁移到云中,那么这是您必须紧急纠正的错误。 本文研究了您应该采取行动的四个原因。我们都知道有理智的意图却没有及时采取行动是什么感觉。无论是一个急需的饮食调整,一个枯燥但重要的工作项目,还是一些日常的家务,你可以无限期地推迟一些事情,同时安慰自己,你最终会完成它。这是人类最令人沮丧的地方之一结果,你可能会拖延一些事情(甚至完全忘记它),继续你的日常生活——也就是说,直到一些事情把你从昏迷中摇醒,你意识到你真的应该已经采取行动了。更糟糕的是,罪魁祸...

    博客 2020-08-05 287 0
  • Istio 1.5:对开发人员有什么帮助?

    Istio 1.5:对开发人员有什么帮助?

    Istio是一个开源服务网格平台。 Idit Levine是Solo.io的创始人兼首席执行官,并与Istio广泛合作。 在本文中,她讲述了最新的Istio 1.5版本以及WebAssembly的新增功能为使用服务网格的开发人员带来的好处。在云原生技术生态系统中,首先出现的是容器和Kubernetes,然后是应用程序,开发人员和操作员如何与存储,网络和安全交互的挑战。 Service Mesh的出现尤其是为了解决分布式微服务的服务间通信挑战。 通过从业务逻辑中抽象网络代码,服务网格在每个服务旁边部署了sidecar...

    博客 2020-08-05 286 0
  • vue 改变data数据后,数据变化页面不刷新

    vue 改变data数据后,数据变化页面不刷新

    一  开发环境"vue": "^2.6.10""element-ui": "^2.11.1"二 翻车现场首先我们来看下要实现的需求,其实就是一个条件渲染但是当我改变data中的from.status的值时,页面并没有跟随刷新。对应form表单数据我是在mounted钩子函数中获取的    mounted() {     this.getDataList()    },...

    博客 2020-07-30 278 0
微信扫码,加入打卡学习群,分享学习资料

最近发表