前后端分离技术有哪些(3分钟了解前后端分离技术)

前后端分离技术有哪些(3分钟了解前后端分离技术)

  随着微服务技术的盛行,前后端分离体系越来越受到各企业的青睐。如果你不懂前后端分离技术就出去面试,还真不敢投简历。之前的单体项目,一个工程师能把功能从页面撸到后台业务逻辑,甚至干到数据库层面,简直就是一个全栈工程师。在前后端分离时代,前端工程师无论从团队的人员配备上,还是技术框架层面都和后端工程师处在了同一个水平线上。

  前后端分离技术催生了前端工程师的需求量

  这种前后端分离体系的出现,既在开发模式上发生了改变,又对团队和项目管理产生了影响,更对系统的架构和技术处理提出了挑战。

  但对于用户而言,他们根本不明白也不关心系统的底层实现。不过用户在日常访问系统时,常常会遇到页面虽然可以展示和操作,但是会遇到返回请求失败、或者操作异常、或者无法连接到服务器的提示!更坏的情况会出现操作无响应,甚至页面直接报错误代码的问题。这其实就是前后端分离系统中没能很好处理好一些关键的基本技术点,导致系统不够健壮,从而造成用户体验很不友好。

  所以作为前后端分离系统的开发人员,我们需要注意和做好哪些最基本的问题才能避免这些常见问题的出现呢?基本的框架平台又要做好哪几点才能保证系统的基本运行呢?下面我们一一来介绍下。

  前后端分离系统中最核心的问题是什么?我想前后端的通信交互就是首要问题了。不仅后端间的微服务间涉及到通信,前后端的系统交互更是频繁。常用的通信协议有RPC、SOCKET、WEBSOCKET、RMI、HTTP、WEBSERVICE等通信协议。其中RPC、WEBSERVICE又是基于HTTP协议的,前后端的交互一般基于应用层,所以HTTP协议成为其交互的一大选择。

  HTTP协议是前后端交互的首选

  如今,基于HTTP协议的一些工具类和程序包已经帮我们封装好了请求实现,我们可以基于其API来操作前后端的请求和响应。这时系统间交互的状态和结果就成为我们重点关心的问题,如果处理不好,则无法实现前后端系统的正常交互,那么系统自然也就无法正确地执行了。

  因此,想要做好系统的前后端分离,HTTP的状态码就成为必须掌握的知识点!下面我们就来总结下HTTP的几大状态码及其意义,这有助于我们处理系统的响应和排查问题的定位。

  常见的状态码有:

  200,这是请求成功的响应,代表了本次请求得到了服务器的成功响应301,这是url重定向,代表你请求的网址被永久的重定向到另一个网址401,这是未授权的响应,一般在有权限控制的系统中需要获得权限才能访问403,这是禁止访问,直接告诉请求者访问被拒绝,最终还是权限的问题404,这是用户最常见的一种状态码,代表了你所访问的内容找不到500,这是最头疼的状态码,代表了服务器端的错误,服务器端错了,该功能基本就不能执行了

  404错误状态码

  其实,HTTP的状态码上面常见的几种,还有很多更详细的值代表了更具体的请求响应,但是总体可以概括在以下几类:

  1XX,信息类状态码,代表请求被接受,需要继续处理。2XX,成功类状态码,代表请求成功并被处理。3XX,重定向类状态码,代表需要进一步操作才能完成请求。4XX,请求错误类状态码,代表客户端不正确的参数或者请求导致的错误。5XX,服务端错误类状态码,代表了服务器端出现了异常或错误,导致请求无法正确响应。

  掌握以上HTTP状态码的知识点,在前后端分离的系统开发、调试和测试中才能更好更快地定位和处理问题,更重要的是在实际编程中根据状态码的返回,合理地处理问题才能保证程序的健壮,友好地提示,才能有更好的用户体验。

  用户鉴权是系统中必不可少的知识点

  在前后端分离的系统中,后端服务开放了API给消费者,消费者根据各种系统接口API完成请求调用,这里就涉及到后台API的安全性问题。由于HTTP协议是无状态的连接,什么意思呢?就是一次请求结束后断开连接,下一次服务端接受到新的请求,无法识别出该请求是哪个用户发过来的,即使该请求依然是同一个用户。

  所以服务端对于消费者的每次请求都要进行权限验证,只有合法的用户才能调用后台服务进行操作,否则一律拒绝响应。那么,问题就转化成了系统是如何记录用户的登录状态呢?也就是系统是如何进行用户鉴权操作的呢?

  传统的处理方式是基于cookie-session的方式,即在客户端浏览器中存储cookie值,在服务端存储session值。客户端在发送请求的时候加上cookie值,到服务端进行session验证。但是在微服务模式中,这种情况就出现了弊端。一来是因为需要处理后台session同步共享的问题,二来还要解决cookie不支持跨域请求的问题。

  所以现在基于OAuth Token的认证方式开始流行,因此JWT的token认证方式成为前后端分离模式下用户鉴权的一种常用方式。这样只要后端服务基于token来验证请求者的合法性,就可以避免安全问题的出现。关于Token和JWT的知识,大家可以自行搜集知识学习,或者后期我专门写一篇文章来详细介绍。

  前端异步请求ajax

  上面讲到,前端应用会频繁的请求后端服务,通常采用的都是异步ajax请求,相信大家并不陌生。但是在前后端分离中,前端应用和后端服务经常会单独部署,甚至在不同的服务器上,所用的端口也灵活可变,这就出现了所谓的跨域问题。

  跨域CORS全称Cross-Origin Resource Sharing,当程序去访问不同域名或者同域名下的不同端口时,就出现了跨域请求。如果不做跨域处理,则后端请求会拒绝请求访问,导致操作失败。

  此时可以通过以下方式解决跨域问题:

  JSONP技术,可以通过此方式实现数据的跨域获取Nginx代理方式,通过nginx的反向代理来解决ajax不支持跨域请求的问题CORS跨域配置,这种方式需要后台服务的支持,配置相关跨域参数才行

  跨域问题的根本在同源策略,我们解决了跨域访问,同时又会带来XSS、CSFR等攻击的安全问题,所以如何解决此类问题将又是一个课题。关于更多同源策略和跨域问题,大家还需要多了解啊。

  数据接口与数据封装

  解决了以上几点问题,前后端的通信基本就可以打通了,接下来就是数据交互的环节了。也就是基于ajax请求来操作前后端的交互访问。

  这里不仅涉及到前后端接口的定义问题,还有请求方式的问题。具体表现在接口名称、方法、参数、返回值等详细定义,还要区别HTTP请求中的GET、POST、HEAD、PUT、DETETE等请求方式,良好的数据接口定义是前后端分离系统的基础。

  此外,数据交互的格式也是一个重点,目前常用的有三种格式:

  json:轻量级的文本数据交换格式,一键值对的形式存在,组织灵活xml:可扩展的标记语言,具有一定的结构性,有规范的节点结构yaml:一种数据序列化格式,可读性高

  目前用的最多的还是json方式,基于此也有很多工具类出现,比如fastjson、gson、jackson等处理工具,极大的方便了数据转换和操作。良好的数据处理和封装是前后端分离系统,顺畅交互的保障。

  异常处理也是系统中重要一环

  前后端分离系统中最后一道关就是统一异常处理,在分布式的前后端分离框架下,由于网络、设备、服务、操作等各种因素较多,系统更容易出现异常,发生不可预知的情况,这个时候如果没有做好异常处理,那么糟糕的情况将直接反馈给用户,造成预想不到的结果。

  因此我们需要在后端服务做好异常的处理,统一好业务异常还是系统环境异常,此外前端程序也要定义好自己的异常接受和处理方式。不然即使后端处理得好,如果前端不能很好的规范,依然会造成很差的用户体验!

推荐阅读