当前位置:自动化网>智慧工厂门户>应用案例>前后端分离的Web架构解决方案

前后端分离的Web架构解决方案

发布时间:2019-11-19 14:59   类型:解决方案   人浏览
摘要 本文首先分析了Web应用开发架构之经典的MVC模式在服务端资源占用和用户访问网页的体验两方面的不足,提出了前后端分离的架构设计,从前后端分离架构风格的交互协议和特点、前端进一步分离并接管控制路由、前后端开发前的接口约定等几个方面进行了阐述,最后对该架构风格的应用场景做了总结。 Web之MVC架构 传统Web应用开发架构经历了从视图和业务逻辑完全混在一起的单体应用发展到视图和业务逻辑分离的MVC结构。最大的优点就是层与层之间实现了解耦,业务逻辑、跳转控制、视图展示各司其职。 1 MVC模式缺点 在MVC模式中控制器非常重要,是模型和视图进行沟通的桥梁,简单来说模型其实就是一个实体类对象,视图就是诸如JSP、HTML等页面模板,而请求首先到达控制器,控制器请求项目核心业务获取数据封装到模型对象,最后将模型传递到视图中进行展现。 这个模式有两个缺点: 1、用户每次想要看到最终页面必须要经过控制器、模型、视图三层 2、视图到达浏览器之前的所有渲染工作都在后端服务器进行,占用了服务器运算资源,同时页面性能无法得到很好的优化。 为了提高用户的流畅上网体验,同时防止高并发对服务器造成资源占用,应将页面渲染工作从后端服务器转移到前端进行,后台只负责提供数据,前端负责解析数据和页面渲染,这种架构就是前后端分离架构。 2 MVC模式中引入Ajax 将视图页面中的动态数据全部交给ajax发送请求到服务器,服务器返回json格式的数据,视图页面进行数据解析和界面渲染,这样就会让view负责数据展现和渲染,减轻了服务端压力和资源占用,提供更好的用户体验。改造后结构如下图所示:       这其实就是前后端分离的初步构想,简化后就是前后端分离模式。 前后端分离架构 假如把浏览器页面作为前端,其他提供数据的都作为后端的话,可以简化为如下所示前后端分离模式:   图2 前后端分离架构示意图 前后端之间通过RESTFUL风格的url发出ajax请求。REST (Representational State Transfer) 即表述性状态传递[1],它的核心思想是将互联网资源对应到一个url[2]上,对资源的相关操作分别用HTTP协议里的GET,POST,DELETE,PUT表示[3]。RESTFUL[4]既简单又直观,通过HTTP[5]的方法对资源进行操作,简化了客户端和服务器之间交流的表达。 RESTFUL风格的请求样例如下所示:   跨域解决方案 前后端通过ajax访问还有一个问题就是跨域,因为ajax的xhr对象是不允许跨域访问的,要解决跨域问题可以采用以下解决方案: 1、JSONP 基本原理就是通过动态创建script标签,然后利用src属性进行跨域,但是要注意JSONP只支持GET请求,不支持POST请求。 2、CORS(跨域资源共享) 利用nginx或者php、java等后端语言设置允许跨域请求 header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Co

成为会员,继续阅读。
       

本文地址:http://www.ca800.com/apply/d_1o1aj18naak93_1.html

拷贝地址

版权声明:版权归中国自动化网所有,转载请注明出处!

留言反馈
  • 评价:

  • 关于:

  • 联系人:

  • 联系电话:

  • 联系邮箱:

  • 需求意向:

  • 验证码:

    看不清楚?

  • 在线咨询