深入浅出:了解前后端分离优势以及前后端接口联调

yunshangwuyou yunshangwuyou     2022-12-28     310

关键词:

目录:

1. 项目有前后端分离和前后端不分离;

2. 前后端接口联调;

3.前端性能优化 ;

一、项目有前后端分离和前后端不分离:

技术分享图片

  在前后端不分离架构中,所有的静态资源和业务代码统一部署在同一台服务器上。服务器接收到浏览器的请求后,进行处理得到数据,然后将数据填充到静态页面中,最终返回给浏览器。

 

技术分享图片

 

 实现前后端分离后,有了下面几点改变:

  1.服务器一分为二,前后端分别部署,静态资源放在前端服务器,业务代码放在后的服务器

  2.前端服务器需要接收Http请求(一般使用node.js)

  3.前端服务器需要进行视图解析(可以使用vue.js、angular.js)

  4.前端服务器需要处理路由(也就是页面之间的跳转逻辑)

  5.后端服务器只需要返回数据

 

一、前言

 

  前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。

 

  核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。

 

  在互联网架构中,名词解释:

 

  Web服务器:一般指像nginx,apache这类的服务器,他们一般只能解析静态资源。

 

  应用服务器:一般指像tomcat,jetty,resin这类的服务器可以解析动态资源也可以解析静态资源,但解析静态资源的能力没有web服务器好。

 

二、技术分工(开发人员分离)

 

以前的JavaWeb项目大多数都是java程序员又当爹又当妈,又搞前端,又搞后端。

 

随着时代的发展,渐渐的许多大中小公司开始把前后端的界限分的越来越明确,前端工程师只管前端的事情,后端工程师只管后端的事情。正所谓术业有专攻,一个人如果什么都会,那么他毕竟什么都不精。大中型公司需要专业人才,小公司需要全才,但是对于个人职业发展来说,我建议是分开。

 

1、对于后端java工程师:(负责Model层,业务处理/数据等

 

把精力放在java基础,设计模式,jvm原理,spring+springmvc原理及源码,linux,mysql事务隔离与锁机制,mongodb,http/tcp,多线程,分布式架构,弹性计算架构,微服务架构,java性能优化,以及相关的项目管理等等。

 

后端追求的是:三高(高并发,高可用,高性能),安全,存储,业务等等。

 

2、对于前端工程师:(负责View和Controller层。

 

把精力放在html5,css3,jquery,angularjs,bootstrap,reactjs,vuejs,webpack,less/sass,gulp,nodejs,Google V8引擎,javascript多线程,模块化,面向切面编程,设计模式,浏览器兼容性,性能优化等等。

 

前端追求的是:页面表现,速度流畅,兼容性,用户体验等等。

 

术业有专攻,这样你的核心竞争力才会越来越高,正所谓你往生活中投入什么,生活就会反馈给你什么。并且两端的发展都越来越高深,你想什么都会,那你毕竟什么都不精。

通过将team分成前后端team,让两边的工程师更加专注各自的领域,独立治理,然后构建出一个全栈式的精益求精的team。

 

三、开发模式

以前老的方式是:

 

  产品经历/领导/客户提出需求===》UI做出设计图 ===》前端工程师做html页面===》后端工程师将html页面套成jsp页面(前后端强依赖,后端必须要等前端的html做好才能套jsp。如果html发生变更,就更痛了,开发效率低)===》集成出现问题 ===》前端返工 ===》后端返工===》二次集成 ===》集成成功 ==》交付

 

新的方式是:

 

  产品经历/领导/客户提出需===》UI做出设计图 ===》前后端约定接口&数据&参数 ===》前后端并行开发(无强依赖,可前后端并行开发,如果需求变更,只要接口&参数不变,就不用两边都修改代码,开发效率高)===》前后端集成 ===》前端页面调整 ===》集成成功 ===》交付

 

四、请求方式

 

以前老的方式是:

 

1、客户端请求

 

2、服务端的servlet或controller接收请求(后端控制路由与渲染页面,整个项目开发的权重大部分在后端)

 

3、调用service,dao代码完成业务逻辑

 

4、返回jsp

 

5、jsp展现一些动态的代码

 

新的方式是:

 

1、浏览器发送请求

 

2、直接到达html页面(前端控制路由与渲染页面,整个项目开发的权重前移)

 

3、html页面负责调用服务端接口产生数据(通过ajax等等,后台返回json格式数据,json数据格式因为简洁高效而取代xml)

 

4、填充html,展现动态效果,在页面上进行解析并操作DOM。

 

总结一下新的方式的请求步骤:

 

大量并发浏览器请求--->web服务器集群(nginx)--->应用服务器集群(tomcat)--->文件/数据库/缓存/消息队列服务器集群同时又可以玩分模块,还可以按业务拆成一个个的小集群,为后面的架构升级做准备。

 

五、前后分离的优势

 

1、可以实现真正的前后端解耦,前端服务器使用nginx。前端/WEB服务器放的是css,js,图片等等一系列静态资源(甚至你还可以css,js,图片等资源放到特定的文件服务器,例如阿里云的oss,并使用cdn加速),前端服务器负责控制页面引用&跳转&路由,前端页面异步调用后端的接口,后端/应用服务器使用tomcat(把tomcat想象成一个数据提供者),加快整体响应速度。(这里需要使用一些前端工程化的框架比如nodejs,react,router,react,redux,webpack)

 

2、发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工程师来负责。接口数据出错,数据没有提交成功,应答超时等问题,全部由后端工程师来解决。双方互不干扰,前端与后端是相亲相爱的一家人。

 

3、在大并发情况下,我可以同时水平扩展前后端服务器,比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。(去参加阿里的技术峰会,听他们说他们的web容器都是自己写的,就算他单实例抗10万http并发,2000台是2亿http并发,并且他们还可以根据预知洪峰来无限拓展,很恐怖,就一个首页。。。)

 

4、减少后端服务器的并发/负载压力。除了接口以外的其他所有http请求全部转移到前端nginx上,接口的请求调用tomcat,参考nginx反向代理tomcat。且除了第一次页面请求外,浏览器会大量调用本地缓存。

 

5、即使后端服务暂时超时或者宕机了,前端页面也会正常访问,只不过数据刷不出来而已。

 

6、也许你也需要有微信相关的轻应用,那样你的接口完全可以共用,如果也有app相关的服务,那么只要通过一些代码重构,也可以大量复用接口,提升效率。(多端应用)
7、页面显示的东西再多也不怕,因为是异步加载。

 

8、nginx支持页面热部署,不用重启服务器,前端升级更无缝。

 

9、增加代码的维护性&易读性(前后端耦在一起的代码读起来相当费劲)。

 

10、提升开发效率,因为可以前后端并行开发,而不是像以前的强依赖。

 

11、在nginx中部署证书,外网使用https访问,并且只开放443和80端口,其他端口一律关闭(防止黑客端口扫描),内网使用http,性能和安全都有保障。

 

12、前端大量的组件代码得以复用,组件化,提升开发效率,抽出来!

 

六、注意事项

 

1、在开需求会议的时候,前后端工程师必须全部参加,并且需要制定好接口文档,后端工程师要写好测试用例(2个维度),不要让前端工程师充当你的专职测试,推荐使用chrome的插件postman或soapui或jmeter,service层的测试用例拿junit写。ps:前端也可以玩单元测试吗?

 

2、上述的接口并不是java里的interface,说白了调用接口就是调用你controler里的方法。

 

3、加重了前端团队的工作量,减轻了后端团队的工作量,提高了性能和可扩展性。

 

4、我们需要一些前端的框架来解决类似于页面嵌套,分页,页面跳转控制等功能。(上面提到的那些前端框架)。

 

5、如果你的项目很小,或者是一个单纯的内网项目,那你大可放心,不用任何架构而言,但是如果你的项目是外网项目,呵呵哒。

 

6、 以前还有人在使用类似于velocity/freemarker等模板框架来生成静态页面,仁者见仁智者见智。

 

7、这篇文章主要的目的是说jsp在大型外网java web项目中被淘汰掉,可没说jsp可以完全不学,对于一些学生朋友来说,jsp/servlet等相关的java web基础还是要掌握牢的,不然你以为springmvc这种框架是基于什么来写的?

 

8、如果页面上有一些权限等等相关的校验,那么这些相关的数据也可以通过ajax从接口里拿。

 

9、对于既可以前端做也可以后端做的逻辑,我建议是放到前端,为什么?因为你的逻辑需要计算资源进行计算,如果放到后端去run逻辑,则会消耗带宽&内存&cpu等等计算资源,你要记住一点就是服务端的计算资源是有限的,而如果放到前端,使用的是客户端的计算资源,这样你的服务端负载就会下降(高并发场景)。类似于数据校验这种,前后端都需要做!

 

10、前端需要有机制应对后端请求超时以及后端服务宕机的情况,友好的展示给用户


原文:https://blog.csdn.net/bntX2jSQfEHy7/article/details/80589580 

 

二、前后端接口联调: 

前言:

以JC同事为例,他公司为前后端分离架构,前端vue全家桶;前后端人员开会协商数据接口后(主要是定义传输的数据和API接口),前后端并行开发;因为后台此时无法提供后端数据,所以前端需要用mock模拟假数据,管理API接口,获取数据,到时接口联调时连接后端服务器,访问后端数据即可。

但是JC同事的ajax的借口写的是与后端叔叔商量好的绝对路径(域名+请求路径+请求参数,跨域问题已解决),因为这是以后真正的请求路径,所以JC同事又不像先写本地相对路径,后期再来修改(万一后台叔叔开发的慢了,鬼知道有多少接口要修改呀)。于是他就迷茫了。。。
仔细看看这其实就是前后端分离中的mock数据和联调的问题,就现在来说能解决的方式有很多种。先说mock数据,gulp,webpack, fekit (去哪儿网的一款前端自动化构建工具,据说历史比webpack和gulp都要久远)等等自动化构建工具都有mock数据的功能,这不是问题;再说绝对路径的问题,其实只需要做一个host的映射就行了。
一、什么是前后端接口联调
之前开发写代码的时候,所有的ajax数据都不是后端返回的真实数据,而是我们自己通过接口mock模拟的假数据,当前端的代码编写完毕,后端的接口也已经写好之后,我们就需要把mock数据干掉,尝试使用后端提供的数据,进行前后端的一个调试,这个过程我们就把它称之为前后端的接口联调。

为什么要联调 本地的mock数据是JC同事自己写的,肯定符合前端需求,但是后端接口首先需要测试通不通,还需要测试数据格式对不对,还有后端有没有填写足够的数据,比如写列表页,前端想分页,如果后端就写了两条测试数据,你咋整? 所以,Jack需要根据后端对接口的调整,不断地来回切换url,这样岂不是还在受后端的影响,还谈什么毛线的前后端分离,名存实亡嘛!

二、如何实现前后端接口联调

 

首先,我们已经知道,目前的前后端分离的架构应用分为两种情况:

 

前后端完全分离,前后端分别拥有自己的域名和服务器。

 

前后端开发分离,但是部署时是一个域名和一台服务器。

 

虽然架构可以采用前后端分离,但是部署有可能就不一样了,这和项目的大小,公司的情况等等都有关系了,一个百八十人用的小系统,还得两台服务器两个域名,你不觉着浪费吗?两种不同的部署情况直接导致了前期在设计联调方案的时候就不同了。

 

如果你们公司的项目在部署时是两台服务器对应两个域名,恭喜你,这是最nice的方案,也是联调最舒服的方式。第二种情况,也就是开发时前后端分离,部署时是一个域名和一台服务器。知道这个之后,他就明白接下来该怎么操作了。JC同事之前在项目根目录static文件夹下新建了一个mock文件夹,里面写了一些json文件,当我们做联调的时候,这些mock数据就没用了,我们要把mock数据切换成后端提供给我们的真实的数据。
 

当我的朋友Jack把static文件夹下的mock数据删除之后,在运行项目,发现报错了,浏览器告诉他,你访问的mock下面的index.json文件找不到404。

 

我们平时本地前端开发环境dev地址大多是 localhost:8080,而后台服务器的访问地址就有很多种情况了,比如 后端程序猿本地IP(127.0.0.1:8889),或者外网域名,当前端与后台进行数据交互时,自然就出现跨域问题(后台服务没做处理情况下)。axios不支持jsonp, 所以我们就要使用http-proxy-middleware中间件做代理。

现在通过在前端修改 vue-cli 的配置可解决: vue-cli中的 config/index.js 下配置 dev选项的 proxyTable:
proxyTable:
‘/api‘:
target: ‘127.0.0.1:8889‘, // 真实请求的地址
changeOrigin: true, // 是否跨域
如果你想在公司的vue项目中实现前后端联调,不需要再使用类似于fiddler charles的抓包代理工具了,你只需要使用proxyTable这个配置项,把你需要请求的后端的服务器地址写在target值里就OK了。

 

解决完跨域问题后,接下来Jack该想想怎么在一台服务器一个域名下进行联调的问题了。比较常见的做法是前端在本地修改,本地查看,测试好了以后上传到服务器,看看线上环境可不可以,OK的话一切都好;不行就本地接着改,然后在上传。

 

联调完之后,如何将前端打包的项目文件发给后端,这里也需要注意两点:

 

(1)css、js和图片等静态文件

 

这时候的静态文件在开发阶段不需要任何考虑,按照你喜欢的相对路径或者相对于项目的根路径的形式写就行了,因为早晚还得交给后端。但是,需要注意:

 

如果你采用 相对项目根路径的书写方式来写你的静态文件路径 时,一定要先和后端商量好,将来项目部署的时候他会把你的前端整个项目放在哪里?如果不是根目录下,你就挂了。比如:你的reset.css的路径是 /exports/styles/common/reset.css ,后端把你前端项目放在了根目录下的 frontEnd 文件夹下, reset.css 文件就报404了。

 

如果后端采用的java,你需要特别注意的是, tomcat的根目录 并不是 webapps 文件,而后端项目默认是部署在 webapps/ROOT 文件下的,所以你如果使用了相对项目根路径的书写方式来写你的静态文件路径时,对不起又是404了。

 

(2)ajax后端数据

 

因为现在唯一的一台服务器还是在后端程序猿那里,所以此时你还是可以写绝对路径(域名+请求路径),利用hosts文件来改变域名映射实现联调。

https://www.douban.com/note/686499733/?type=rec#sep

vue框架前后端联调流程(代码片段)

什么是前后端联调定义在我们开发的过程中,发送请求的ajax数据都不是后端返回的真数据,而是我们自己通过接口mock模拟的假数据,当前端的代码编写完成后,后端的接口也写好后,我们就需要把mock数据换... 查看详情

开发步骤

项目是基于前后端分离的架构进行开发,前后端分离架构总体上包括前端和服务端,通常是多人协作并行开发,开发步骤如下:1、需求分析梳理用户的需求,分析业务流程2、接口定义根据需求分析定义接口3、服务端和前端并行... 查看详情

工作---前后端联调

   一、前后端联调之前当页面的布局和逻辑开发都实现后,后端的的接口没有开发出来的时候,我们可以先进行Mock数据,在已有接口文档的情况下,我们可以直接按照接口文档来开发,通过mock语法来编写相对应的字段... 查看详情

前后端分离微服务架构如何设计

...道最多的。比如:一般前端工作包括六个部分:后端如果前后端职责划分很清楚的话,后端更多开发工作在于业务接口设计、业务逻辑处理以及数据的持久化存储,并提供详细的接口设计文档给前端开发人员使用。一般后端工作... 查看详情

一次极限项目管理,设计,开发,联调与测试

...sp;  最近项目着实忙碌,奋战在第一线,从一开始了解需求,整理需求,到系统设计,模块儿设计。随后前后端接口约定,后台管理模块儿与核心模块儿开发,前后端接口联调,与其他系统接口约定联调。再到全项目测试... 查看详情

微信小程序前后端分离怎么实现

微信小程序前后端分离的主要实现方式是将前端和后端的代码逻辑分开,前端负责展示和交互,后端负责数据处理和逻辑控制。下面简单介绍一下微信小程序前后端分离实现的一些关键步骤:1.前端代码开发:使用微信小程序开... 查看详情

vue+mockjs模拟数据,实现前后端分离开发

在项目中尝试了mockjs,mock数据,实现前后端分离开发。关于mockjs,官网描述的是1.前后端分离2.不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。3.数据类型丰富4.通过随机数据,模拟各种场景。等等优点。总结... 查看详情

drf入门规范(代码片段)

一web应用开发模式1.1前后的不分离#前后端混合开发(前后的不分离):返回的是html的内容,需要写模板1.2前后端分离#前后端分离:只专注于写后端接口,返回json/xml格式数据#xml格式数据<xml><name>hjj</name></xml>#js... 查看详情

七个开源的springboot前后端分离项目,一定要收藏!

前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年... 查看详情

drf0.前后端分离

前后端不分离的工作流程:提出需求前端页面开发翻译成模板前后端对接集成遇到问题前端返工后端返工二次集成集成成功交付上线前后端分离提出需求约定接口规范数据格式前后端并行开发前后端对接前端调试效果集成成功交... 查看详情

关于前后端分离与不分离

 什么是前后端分离?  在前后端分离的应用模式中,后端只需要返回前端所需的数据,不用渲染HTML页面与效果。页面的展示与效果所需的数据,数据的加载方式,主要由前端决定。  核心思想是前端html页面通过ajax调用... 查看详情

//……关于前后端分离与不分离

什么是前后端分离?  在前后端分离的应用模式中,后端只需要返回前端所需的数据,不用渲染HTML页面与效果。页面的展示与效果所需的数据,数据的加载方式,主要由前端决定。  核心思想是前端html页面通过ajax调用后端... 查看详情

前后端分离

一丶为什么要实现前后端分离:前后端分离有什么好处按照项目开发来说:1.实现前后端分离可以使项目更快的研发完成,2.加快了项目的时间传统开发形式: 前后端分离开发:在开发阶段,当有新的需求时,前后端工程师约定好接... 查看详情

前后端分离

开发模式在Web开发模式中,有两种开发模式前后端不分离前后端分离前后端分离优势在前后端不分离模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合... 查看详情

前后端分离接口规范

...用、高性能、高扩展等特性的要求也愈加苛刻,从而导致前后端研发各自专注于自己擅长的领域深耕细作。然而带来的另一个问题:前后端的对接界面双方却关注甚少,没有任何接口约定规范情况下各自干各自的,导致我们在产... 查看详情

[转]前后端分离开发模式的mock平台预研

.../接口,用一个虚拟的对象/接口来模拟,以便测试。背景前后端分离前后端仅仅通过异步接口(AJAX/JSONP)来编程前后端都各自有自己的开发流程,构建工具,测试集合关注点分离,前后端变得相对独立并松耦合开发流程后台编写和... 查看详情

测试人员需要了解一下开发人员一直在讲的前后端分离

最近做的一个前后端分离的项目,来了补充一下前后端分离的知识点,发现这篇文章特别好,收藏起来,这篇文章有点长,哈哈作者:偏头痛杨来源:https://blog.csdn.net/piantoutongyang一、前戏前后端分离已成为互联网项目开发的业界... 查看详情

前后端分离浅析

...来什么样的好处?下面我就带着这些问题,来简单谈谈我了解到的前后端分离情况。 在讲前后端分离之前,让我们先讲一讲什么是MVC?  MVC诞生于上世纪70年代,是一种经典的设计模式,全名为Model-View-Controller,即模型-视... 查看详情