? 内容标题19: 前后端内容标题19离的Web架构解决方案-应u案例-天亿达Ρ息技术有限̅?中国自动化网(ca800.com)

内容标题19

  • <tr id='GFxVhr'><strong id='GFxVhr'></strong><small id='GFxVhr'></small><button id='GFxVhr'></button><li id='GFxVhr'><noscript id='GFxVhr'><big id='GFxVhr'></big><dt id='GFxVhr'></dt></noscript></li></tr><ol id='GFxVhr'><option id='GFxVhr'><table id='GFxVhr'><blockquote id='GFxVhr'><tbody id='GFxVhr'></tbody></blockquote></table></option></ol><u id='GFxVhr'></u><kbd id='GFxVhr'><kbd id='GFxVhr'></kbd></kbd>

    <code id='GFxVhr'><strong id='GFxVhr'></strong></code>

    <fieldset id='GFxVhr'></fieldset>
          <span id='GFxVhr'></span>

              <ins id='GFxVhr'></ins>
              <acronym id='GFxVhr'><em id='GFxVhr'></em><td id='GFxVhr'><div id='GFxVhr'></div></td></acronym><address id='GFxVhr'><big id='GFxVhr'><big id='GFxVhr'></big><legend id='GFxVhr'></legend></big></address>

              <i id='GFxVhr'><div id='GFxVhr'><ins id='GFxVhr'></ins></div></i>
              <i id='GFxVhr'></i>
            1. <dl id='GFxVhr'></dl>
              1. <blockquote id='GFxVhr'><q id='GFxVhr'><noscript id='GFxVhr'></noscript><dt id='GFxVhr'></dt></q></blockquote><noframes id='GFxVhr'><i id='GFxVhr'></i>
                当前位置?a href="/">自动化网>天亿达信息技术有限公 ξtĘ@ϲ֮ɫӿ参门?/a>>应用案例 {˅sĿɿڴ>前后端分离的Web架构解决方案

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

                发匦@DZoɸ时间?019-11-19 14:59   类型?a href='/apply/l_solutions_0_0_1.html'>解决方案   人浏?/div>

                摘要

                本文馲Ԗ先分析?/span>Web应用开发架?/span>?/span>经典?/span>MVC模式在服务端资源占用和用户访问网页的体验ゃ߀ֵ̎两方面的不足,提出了前后端分离的架构计计,从前后ÿһǹֲ端分离ƄӲ˞构风格的交互协议咡特点、前端进一步分ղػ并接管控制路由fᦁ前后端开发前的接口约宎Ў׳ɚ等几个方面进行了阐述,最后对该架构风格⚄应用场景做了总结?/span>


                Web?/span>MVC架构

                传统Web应用开发架构经厡了从视图和业务逻辑完全混在一起的单体应用发һȺ֮到视图和业务逻޾分离?/span>MVC结构。最大的优点尦 是层与层之间实现了触Ρ耦,业务逻辑、跳转控制、视图展礨各司其职?/span>


                1 MVC模式缺点

                ?/span>MVC模式中控制器Ęɫһ׃非常重要,是模型和视图进行沟通的桥梁,简单来诡模型其实就是一个实体类对象,视图就是诸?/span>JSP?/span>HTML等页面模板JһӳҼ而请求首Ŀ到达控制器,控制器请求项目核心両њ务获取数封装到模型对象,最后将模型传递到 cc^图中进行展现?/span>


                这个模式有两 ǎpһ个缺点:

                1、用@gL户每次想要看到最终页面必须要经过控制器、模型、视图三?/span>

                2、视ͬwھ@͌һ}˾到达浏览器之前的所有渲染工作都在后端服务器进行,占用了服婖器运算资源,同时页面性能无法得到很好的优化?/span>

                为了握ɐ高用户的流畅上网体验,同时防止ゃfֵゃǧ并发ǯ服务器造成资պқ_ɺ占用,应将页面渲染工作从后端服务器转移到前端进行,后台只负责提供数据,前端负责解析数据和页面渲染,这种架构就是前后端分离架构?/span>


                2 MVC模式中引入Ajax

                将视图页面中的动怡数据全部交?/span>ajax发送请求到服ܼҊ器,朡务器返?/span>json格式的数据,视图页面进行数据解析和界面渲染޼这样就会?/span>view负责数据展现和渲染,Z减轻了服务端压力和资ڃ源占用,提供更好的用户体验。改造后结构?/span>?/span>?/span>所?/span>?/span>

                 

                 

                 

                这其实就是前后端分离的初步构惡,简化␎就是前后端分离模式?/span>

                前后端分离架?/span>

                假如把浏览器页❢作为前端,其他供数据的都作为后端的话,可以简化为?/span>?/span>所?/span>前后端分离模式:

                 

                ?/span>2 前后端分离架构示意图

                前后端之间通过RESTFUL风格?/span>url发出ajax请求?/span>REST (Representational State Transfer) 即表述性状态䡿?/span>[1],的核心思想是将互联网资源对应到一?/span>url[2]上,对资源的相关操作分别?/span>HTTP协议里的GET,POST,DELETE,PUT表示[3]?/span>RESTFUL[4]既简卡又直观,通过HTTP[5]的方法对赩I源进行操作,简ֱӳͤ[化了客户端和服҂Dz܊器之间交流的表达?/span> RESTFUL风浶âݺˏsɄ֮Ϡ的请求样?/span>如下所?/span>?/span>

                 

                跨域解决方案

                前后端通过ajax访问还有一个问fȼ就是跨域,因为ajax?/span>xhr对象是不允许跨域访Žٗ的,要解决跨域问题폯以采用以下解决方案xλpĘ

                1?/span>JSONP

                基本原理就是通过动态创?/span>script标签,然后利用src属性进行跨?/span>,但是要注ʮɴ•f?/span>JSONP只支?/span>GET请求,不支持POST请求?/span>

                2?/span>CORS(跨域源共享)

                利用nginx或?/span>php?/span>java等后端语言设ǰӸæ允许跨域请求

                header('Access-Control-Allow-Origin:*');//允许所木来源访?/span>

                header('Access-Control-Allow-Method:POST,GET');//允许访问的方?/span>

                3、直接使?/span>nginx服务器来部署前端项目,前端页?/span>ajax请求?/span>url直桼指向nginx服务器的地址,由nginx反向代理指向后端服务器即可,这种方式是相对来说最佳解决跨fԩDr˺ҧħ的方案?/span>


                前端进一步分?/b>

                从项目部署的角度来看,前吡端彻底S󵭵Ц离,需要为前端静态资源(html?/span>css、图片等)߀]Y֪҅置一ֻԺ󶼟oͻ񾳽台服务器,负责页面跳转路由稐,后端配置一台服务器,衻责数据提供,前端异步调用吡端握供的接口,并获得樐据,这样加快整体响应速度?/span>

                伡统前后端分离架构,后端还是有控制层负责轡̬发请求,获取业务逻辑处理结果。而请求跳转本应该属于前端的操作行所以目前比较流行DrںMƷ֮К前端框架比如React?/span>Vue?/span>Angular等均支持控制路由跳转的功能,这样后端就不需要控制器进行跳转,纯粹执行业务逻辑即可,@Լޟ样的前后端分离是最Ƕ@ʾ彻底的?/span>

                前端框架?/span>VUE等框架技术采用的架构准确来讲?/span>MVVM模式,该模式是工程娋在解?/span>WPF应用程序开发复杂Ӌһ时提出的解决方案,它实现?/span>View?/span>Model的自动同步,开发者不需要再手动的绑СΨĘɫһ定输入监听和手动的将ˮԪ@ôһͨyR数据结果展示?/span>View上,ҳɽ这就是双吡数据绑定的优势ɋ֮r这是其丩I传?/span>MVC模式最大的丿ֲxһֱ[同。其架构模式?/span>?/span>?/span>所?/span>?/span>

                 

                ViewModel解决?/span>View?/span>Model之间转换ϴޟͻ֮ɰŪ的开发效率问题。但?/span>ViewModel内部的复杂度叢و变成了新的问题,其中一个问题就是双向数捨LΡ绑定劣势。在双向数据绑定中,Model(可以理解为状态的С集合?中可以修改自己或其他Model的状态,ɢlֲ户的操作(妨在输入框中输入׹LֱӶ砵֮内容)也可以修改状态。这使的改变一个状态有可能会触发一连串的状态的变化,最后很难预测Ӝ终的状态是什么样的ưɀ使得代码变得很难调试?/span>

                为了解决这个问题便有ˮͻȻð了后来的Vue单向数据流的解决方案-Vuex。在夦΍杂度较高的业犡上使用单M数据流来解?/span>View?/span>Model的关系?/span>


                前后端的分工和交?/b>

                前后端分离之后,后端工程师专注与両ǚ务逻辑代码和数据库访问代码A不需要了解前端框架和技术,同样,前端开发人员也不需要学习后台编程,专注于前端框架和页面开发即可,这样分工可以让软件开发分ݥ明确,团队成员做自己擅长的事情。在某功能模块һ现问题的时候,可以准确定位是谁的问题,避免出现代码堆在一起时互相指责的问题?/span>

                当稈,前后端肯定是需要交互的,即 ϧ端工程师如何通过url调用 u˓u^端开发人员提供Xsϻ数据。项目开发初期黢Ҳ˜要前后端工程师协商形成一套标凡的接口,即调用?/span>API,其中的接口方法쵰的访问路径、参数、类垡等需达成一致。套接口后续可以修改,但尽量不要做过多改动。形?/span>API文档可以在项目中集成swagger2来构?/span>RESTFUL API文档,通过在访问接口上直接添加o҂ff注释就能实现?/span>


                方案评估


                任何软件架构风格都可能适所有场景,前ôؐ端分离也不例外。如果我们项目符合以下情景,可以考虑采用前后端分离ƞ构:

                1、队成员不是全ˮԪ•Ժ工程师,大部分都擅长Ɖ端或者后台之一?

                       2、对网页性能和用户体验要求较高,尤其是展e示类网站和移?/span>APP?/span>

                       3、高并发访问造成服务器压ơ力过大,适徹ȻzWLǰԺ前端资源和后台逻辑部署到不վ同服务器上,减少对服务器直接访问量?/span>

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

                拷贝地嵭

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

                留言反馈
                • 评价?/span>

                • 关于?/span>

                • 联系人:

                • 联系电貨?/span>

                • 联系邮箱?/span>

                • 需求意向:

                • 骡证码:

                  看不渡楚?/a>

                • 在线咨询