你不得不了解的前后端分离原理!使用帮助_接口基础知识入门

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

你不得不了解的前后端分离原理!使用帮助

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

你不得不了解的前后端分离原理!使用帮助_接口基础知识入门

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

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

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

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

一般都是只有web服务器才能被外网访问,应用服务器只能内网访问。

一、开发人员分离

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

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

大中型公司需要专业人才,小公司需要全才,但是对于个人职业发展来说,小编建议是分开。

1.对于后端Java工程师:

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

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

2.对于前端工程师:

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

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

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

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

二、原始人时代(各种耦合)

几曾何时,我们的JavaWeb项目都是使用了若干后台框架,springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。

大多数项目在Java后端都是分了三层,控制层,业务层,持久层。控制层负责接收参数,调用相关业务层,封装数据,以及路由&渲染到jsp页面。然后jsp页面上使用各种标签或者手写java表达式将后台的数据展现出来,玩的是MVC那套思路。

我们先看这种情况:需求定完了,代码写完了,测试测完了,然后呢?要发布了吧?你需要用maven或者eclipse等工具把你的代码打成一个war包,然后把这个war包发布到你的生产环境下的web容器里,对吧?

发布完了之后,你要启动你的Web容器,开始提供服务,这时候你通过配置域名,dns等等相关,你的网站就可以访问了(假设你是个网站)。那我们来看,你的前后端代码是不是全都在那个war包里?包括你的js,css,图片,各种第三方的库,对吧?

好,下面在浏览器中输入你的网站域名(www.xxx.com),之后发生了什么?

浏览器在通过域名通过dns服务器找到服务器外网ip,将http请求发送到服务器,在tcp3次握手之后(http下面是tcp/ip),通过tcp协议开始传输数据,服务器得到请求后,开始提供服务,接收参数,之后返回应答给浏览器,浏览器再通过content-type来解析返回的内容,呈现给用户。

那么我们来看,我们先假设你的首页中有100张图片,此时,用户的看似一次http请求,其实并不是一次,用户在第一次访问的时候,浏览器中不会有缓存,100张图片,浏览器要连着请求100次http请求,服务器接收这些请求,都需要耗费内存去创建socket来玩tcp传输。

重点来了,这样的话,服务器的压力会非常大,因为页面中的所有请求都是只请求到这台服务器上,如果1个人还好,如果10000个人并发访问呢,那服务器能扛住多少个tcp连接?带宽有多大?服务器的内存有多大?硬盘是高性能的吗?能抗住多少IO?web服务器分的内存有多大?会不会宕机?

这就是为什么,越是大中型的web应用,他们越是要解耦。理论上可以把数据库+应用服务+消息队列+缓存+用户上传的文件+日志+等等都扔在一台服务器上,这也不用玩什么服务治理,也不用做什么性能监控,什么报警机制等等,就乱成一锅粥好了。但是这样就好像是把鸡蛋都放在一个篮子里,隐患非常大。如果因为一个子应用的内存不稳定导致整个服务器内存溢出而hung住,那整个网站就挂掉了。

如果出意外挂掉,而恰好这时你们的业务又处于井喷式发展高峰期,业务成功被技术卡住,很可能会流失大量用户,后果不堪设想。

此外,应用全部都耦合在一起,相当于一个巨石,当服务端负载能力不足时,一般会使用负载均衡的方式,将服务器做成集群,这样其实你是在水平扩展一块块巨石,性能加速度会越来越低,要知道,本身负载就低的功能or模块是没有必要水平扩展的,在本文中的例子就是性能瓶颈不在前端,那干嘛要水平扩展前端呢?还有发版部署上线的时候,明明只改了后端的代码,为什么要前端也跟着发布呢?

正常的互联网架构,是都要拆开的,web服务器集群,应用服务器集群+文件服务器集群+数据库服务器集群+消息队列集群+缓存集群等等。

三、JSP的痛点

以前的javaWeb项目大多数使用jsp作为页面层展示数据给用户,因为流量不高,因此也没有那么苛刻的性能要求,但现在是大数据时代,对于互联网项目的性能要求是越来越高,因此原始的前后端耦合在一起的架构模式已经逐渐不能满足我们,因此我们需要需找一种解耦的方式,来大幅度提升我们的负载能力。

  1. 动态资源和静态资源全部耦合在一起,服务器压力大,因为服务器会收到各种http请求,例如css的http请求,js的,图片的等等。一旦服务器出现状况,前后台一起玩完,用户体验极差。
  2. UI出好设计图后,前端工程师只负责将设计图切成html,需要由java工程师来将html套成jsp页面,出错率较高(因为页面中经常会出现大量的js代码),修改问题时需要双方协同开发,效率低下。
  3. jsp必须要在支持java的web服务器里运行(例如tomcat,jetty,resin等),无法使用nginx等(nginx据说单实例http并发高达5w,这个优势要用上),性能提不上来。
  4. 第一次请求jsp,必须要在web服务器中编译成servlet,第一次运行会较慢。
  5. 每次请求jsp都是访问servlet再用输出流输出的html页面,效率没有直接使用html高(是每次哟,亲~)。
  6. jsp内有较多标签和表达式,前端工程师在修改页面时会捉襟见肘,遇到很多痛点。
  7. 如果jsp中的内容很多,页面响应会很慢,因为是同步加载。
  8. 需要前端工程师使用java的ide(例如eclipse),以及需要配置各种后端的开发环境,你们有考虑过前端工程师的感受吗。

基于上述的一些痛点,我们应该把整个项目的开发权重往前移,实现前后端真正的解耦!

四、开发模式

以前老的方式是:

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

新的方式是:

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

五、请求方式

以前老的方式是:

  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. 前端需要有机制应对后端请求超时以及后端服务宕机的情况,友好的展示给用户。

八、扩展阅读

  1. 其实对于js,css,图片这类的静态资源可以考虑放到类似于阿里云的oss这类文件服务器上(如果是普通的服务器&操作系统,存储在到达pb级的文件后,或者单个文件夹内的文件数量达到3-5万,io会有很严重的性能问题),再在oss上配cdn(全国子节点加速),这样你页面打开的速度像飞一样, 无论你在全国的哪个地方,并且你的nginx的负载会进一步降低。
  2. 如果你要玩轻量级微服务架构,要使用nodejs做网关,用nodejs的好处还有利于seo优化,因为nginx只是向浏览器返回页面静态资源,而国内的搜索引擎爬虫只会抓取静态数据,不会解析页面中的js,这使得应用得不到良好的搜索引擎支持。同时因为nginx不会进行页面的组装渲染,需要把静态页面返回到浏览器,然后完成渲染工作,这加重了浏览器的渲染负担。浏览器发起的请求经过nginx进行分发,URL请求统一分发到nodejs,在nodejs中进行页面组装渲染;API请求则直接发送到后端服务器,完成响应。
  3. 如果遇到跨域问题,spring4的CORS可以完美解决,但一般使用nginx反向代理都不会有跨域问题,除非你把前端服务和后端服务分成两个域名。JSONP的方式也被淘汰掉了。
  4. 如果想玩多端应用,注意要去掉tomcat原生的session机制,要使用token机制,使用缓存(因为是分布式系统),做单点,对于token机制的安全性问题,可以搜一下jwt。
  5. 前端项目中可以加入mock测试(构造虚拟测试对象来模拟后端,可以独立开发和测试),后端需要有详细的测试用例,保证服务的可用性与稳定性。

九、总结

前后端分离并非仅仅只是一种开发模式,而是一种架构模式(前后端分离架构)。千万不要以为只有在撸代码的时候把前端和后端分开就是前后端分离了,需要区分前后端项目。前端项目与后端项目是两个项目,放在两个不同的服务器,需要独立部署,两个不同的工程,两个不同的代码库,不同的开发人员。前后端工程师需要约定交互接口,实现并行开发,开发结束后需要进行独立部署,前端通过ajax来调用http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染,而后端专注于具体业务逻辑。

海计划公众号
(0)
上一篇 2020/03/29 01:45
下一篇 2020/03/29 01:45

您可能感兴趣的内容

  • js中的null和undefined使用教程_null基础入门

    1.概述null和undefined属于js中两种不同的基本数据类型,都可以表示“没有”,含义非常相似。将一个变量赋值为undefined或null,老实说,语法效果几乎没区别。并且在if语句的判断条件中,它们都会自动转为false,相等运算符(==)甚至直接报告两者相等var a = null;
    var b = undefined;
    if (!a) {co

    2020/03/24
  • Cookie防篡改机制入门攻略cookie怎么防止被篡改/伪造_存储菜鸟指南

    一、为什么Cookie需要防篡改为什么要做Cookie防篡改,一个重要原因是 Cookie中存储有判断当前登陆用户会话信息(Session)的会话票据-SessionID和一些用户信息。当发起一个HTTP请求,HTTP请求头会带上Cookie,Cookie里面就包含有SessionID。后端服务根据SessionID,去获取当前的会话信息。如果会话信息存在,

    2020/04/05
  • Simditor小白知识_一个基于浏览器所见即所得的文本编辑器

    Simditor小白知识 官方网址:https://simditor.tower.im/ GitHub:https://github.com/mycolorway/simditor…

    2020/03/06
  • 史上最全的CSS hack基础指南_兼容入门指南

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协

    2020/04/05
  • JS声明对象时属性名加引号与不加引号的问题使用说明_对象使用帮助

    一般情况下属性名加引号和不加引号是都可以的,效果是一样的。var obj = { name : ‘你好’, ‘age’ : 1,
    }; document.write( obj[‘name’] + ‘
    ‘ );
    document.write( obj.age);上面两行代码均可以正确执行。当且仅当你的属性名是非法怪异的名字时候

    2020/04/05
  • 前端需要了解的后端知识入门指南_前端小白知识

    一名有前端工程师,除了掌握自身知识体系外,在业余时间也应该了解下后端的知识时间,由于前端与后端工作是最最密切相关的,多学习些后端知识对自身也是大有好处的。1、后端语言后端语言用来写后台的三巨头:PHP、JAVA、ASP.NET三门语言各有特色,php轻量级开发,适合开发论坛和bbs的后台。java就不用说了,比较大型的项目的后台都是用java写的。工作的需求

    2020/04/03
  • jQuery动画的hover连续触发动画bug处理教程视频让hover事件只触发一次动画的实现_jquery基础教程

    一个简单的鼠标滑过的动画而已,但是当我测试的时候发现,当我发神经似的来回滑动时,事件就被触发了多次,动画也就重复了多次,怎么才能不重复出现,即动画过程中,鼠标滑过这个div,不会触发该事件。代码如下:$(“div”).hover(function() {$(this).animate({“margin-top”:”100px”},1000);}, funct

    2020/04/05
  • keep-alive的使用基础教程_缓存指南攻略

    props:include – 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude – 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max – 数字。最多可以缓存多少组件实例。用法 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:

    2020/03/20
  • node.js含有%百分号时,发送get请求时浏览器地址自动编码的问题基础知识教程_请求入门基础

    目前浏览器会对地址,进行编码,比如这个文件名:sales\报表.png在发到后台时,会自动编码成:/file/view/sales/%E6%8A%A5%E8%A1%A8.png在node.js会自动反编码成:sales\报表.png不过如果文件名中含有%百分号,编码过程则会出现问题,如sales\报%表.png发送到node.js接收到的自动编码数据:/fi

    Web前端 2020/03/24
  • seo优化:怎样才能把网站关键词排名做上来?基础入门_seo菜鸟知识

    如何把网站关键词seo排名做上去呢?表示很多人不断探求SEO排名方法、百度排名规则。在互联网上寻找各种各样秘籍宝典,当你耗费大量的时间做这些无用工时,我需要提醒你,你忽略了做关键词seo排名成功的本质:执行力。众所周知,关键词seo排名周期长工作量大,你需要不断建设网站的内容、发外链,没有内容和外链的支撑,你的SEO工作将会非常艰难。一、首先看内容建设内容建

    2020/03/23
  • js中减少使用不必要的if-else或switch基础知识入门利用数组/对象代替if-else,switch_js知识入门百科

    无论使用if-else,还是switch。当条件多的时候代码显得非常冗长,而且每次添加条件时需要修改主流程的代码,这样就破坏了类的开闭原则。为解决日后的维护可能存在问题,我们可以采用另一种比较优雅的实现方式来替换if-else,switch吗?数组替代场景下面以学生成绩为例,根据不同的分值返回对应的结果,使用if…else代码如下:function ge

    2020/04/05
  • 开发者常见的十种不良编程习惯小白入门_编程菜鸟教程

    常言道:嘴上说不要,习惯却很诚实。朋友,您是否扪心自问过:有过多少次违背了编程的基本规范?或许您根本就没有意识到自己会常犯的那些不良编程习惯。实际上,我们在交付已编译好的代码后,客户是不会在使用中马上发现到程序的缺陷。通常,编程规则只会规定程序员在编写代码时,需要遵守的准则、以及建议采用的风格,而不是那些细枝末节需要遵循的、一成不变的指令。因此,就算您偶有“

    2020/03/20
  • php操作mongodb:添删改查小白知识_mongodb小白教程

    1:插入数据例:向默认的test数据库的wj表中插入数据$manager = new MongoDB\Driver\Manager(“mongodb://localhost:27017”); // 插入数据
    $bulk = new MongoDB\Driver\BulkWrite;
    $bulk->insert([‘id’ => 1, ‘name’=>’测试

    2020/03/24
  • consolidate.js入门基础教程_一个Node.js 模板引擎的集合

    consolidate.js入门基础教程 GitHub:https://github.com/tj/consolidate.js 简介描述:一个Node.js 模板引擎的集合 co…

    2020/03/06
  • base64编码小白帮助_base64小白知识

    二进制的数据,每个字符的取值范围都是 [0, 255] ,作为ascii码解析时,只有部分可打印。比如,我用文本编辑器vim打开一张jpeg图片,会发现内容是乱码。以下是头两行数据:ÿØÿà^@^PJFIF^@^A^A^@^@^A^@^A^@^@ÿÛ^@C^@^F^D^E^F^E^D^F^F^E^F^G^G^F^H
    ^P
    我在vim下输入 :%!xxd ,可

    2020/03/20
  • bluebird小白常识一个第三方Promise规范实现库

    bluebird入门知识 官方网址:http://bluebirdjs.com GitHub:https://github.com/petkaantonov/bluebird/ 简…

    2020/03/06