关于大型网站技术演进的思考(十四)--网站静态化处理—前后端分离—上(6)...

news/2024/5/16 22:14:00/文章来源:https://blog.csdn.net/weixin_34404393/article/details/92105079

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

  前文讲到了CSI技术,这就说明网站静态化技术的讲述已经推进到了浏览器端了即真正到了web前端的范畴了,而时下web前端技术的前沿之一就是前后端分离技术了,那么在这里网站静态化技术和前后端分离技术产生了交集,所以今天我将讨论下前后端分离技术,前后端分离技术讨论完后,下一篇文章我将会以网站静态化技术的角度回过头来重新审视下前后端分离技术,希望通过这种审视来加深我们对两套技术的理解。

  前后端分离技术我个人认为是web前端被专业化以后的必由之路,而nodejs的出现是前后端分离技术的一个强兴的催化剂,原因是nodejs的出现削平了前端技术和服务端技术之间的鸿沟,使得前后端两套不同技术体系进行真正意义的解耦提供了无限的可能性。但是如果我们把nodejs技术的使用认为就是实现了前后端分离,这种理解又实在太肤浅了,下面我将讲讲我研究过的前后端分离技术方案,以及这些技术方案隐藏在背后思考,希望这些思考能给大家以一个新的思路来理解前后端分离技术。

  我们要深刻理解前后端分离技术有一个重要的前提,那就是要把前后端分离技术认为是传统的web应用里的MVC设计模式的进一步演进。那么我们首先来看看MVC的定义,下面的内容摘录于维基百科的解释,具体如下:

复制代码
MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。MVC模式最早由Trygve Reenskaug在1978年提出[1] ,是施乐帕罗奥多研究中心(Xerox PARC)在20世纪80年代为程序语言Smalltalk发明的一种软件设计模式。MVC模式的目的是实现一种动态的程式设计,使后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能。除此之外,此模式通过对复杂度的简化,使程序结构更加直观。软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。专业人员可以通过自身的专长分组:(控制器 Controller)- 负责转发请求,对请求进行处理。(视图 View) - 界面设计人员进行图形界面设计。(模型 Model) - 程序员编写程序应有的功能(实现算法等等)、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。
复制代码

  各类用于Web应用开发的语言里都有属于自己的MVC框架,例如本人最熟悉的服务端语言java里就有大名鼎鼎的struts2,springMVC的MVC应用框架,我早期从事java的web开发时候认为这些MVC框架都是非常的博大精深,用途广泛,但是当我逐渐转向了web前端技术开发以后又觉得这些框架的很多功能显得那么的多余和累赘,因此我曾写过一篇文章专门讨论过这些问题,该文章的名字叫做《为什么做java的web开发我们会使用struts2,springMVC和spring这样的框架?》。

  其实这篇文章被写的源头就是在于我认为像struts2和springMVC这样的框架做了太多浏览器本身就可以完成的工作,例如:页面的渲染操作,因为服务端抢了浏览器端的部分工作,这其实也就等于限制了web前端技术的深入运用,像很多前端的优化技术以及很多提升用户体验的技术就很难派上用场,之所以产生这些问题,我认为传统的MVC框架本质其实是一个服务端的MVC框架,虽然MVC设计模式里的V即View视图层是想把界面开发工作专业化,让界面设计人员能专心于界面开发,但是传统的MVC框架下的View层的本质却是一个不折不扣的服务端技术。

  我们以java的web开发里jsp为例,JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是java里动态网页的技术标准,这就说明jsp虽然看起来像html,其实它并不是真正的html,它需要被java的web容器进行解析转化为浏览器可以解析的html页面,然后通过网络传输到浏览器后,浏览器才能正确的展示这个jsp页面,其他web开发语言里都有类似的动态网页技术标准,但是不管什么语言的动态网页技术标准,我们使用它时候就是让web前端技术被服务端技术所绑架,这也就是为什么每个招聘web前端工程师的岗位都要问你是否会java,php语言的源头。但是随着互联网的大发展,对web前端的要求是越来越专业化,web前端本身所包含的技术难度已经不亚于任何一个服务端语言开发难度,因此我们需要web前端更高的专业化,而不希望web前端工程师被服务端技术束缚的更多而限制了自身能力的发展,这就导致前后端分离技术的出现。

  不过前后端分离技术的第一阶段倒不是从改变view层即视图层开始的,而是从连接客户端和服务端的C层即控制层开始的,控制层既要作用于客户端又要作用于服务端,如果一个功能页面是一个程序员从浏览器端一直写到模型层,控制层也就不是什么问题了,但是如果当我们想按MVC的设计思想,让界面开发人员专注于页面开发,服务端开发人员专注于服务端开发,那么这个时候控制层的归属问题就显的非常重要了。在传统的MVC框架里,因为M层和C层是使用同样的语言体系,因此我们很自然会把M层和C层的开发工作都交由服务端开发人员完成,这个决定无可厚非,但是传统的MVC框架里V层和C层其本质也是同一个技术体系下的(例如java的web开发里的jsp本质就是个servlet),因此V层和C层也是紧耦合的,因此界面开发人员开发页面时候如何没有C层支撑,那么这个页面其实是根本跑不起来的,如果前端开发人员这时候跑去写写C层即控制层的代码,这就打破了原有的横向分工,这个时候控制层的编码工作就会变得混乱而难以控制,看到这里有人一定会说既然控制层是属于服务端的,那么前端技术人员就等等服务端的开发进度,再不行就自己写个mock模拟下服务端的控制层,听到这种建议,我相信不管是前端的还是服务端的技术人员都会头脑发麻,第一反应就是这不是自找麻烦啊,还不如一个人全部搞定算了。由此第一阶段的前后端分离技术方案出现了,这个方案需要解决的问题就是如何能让web前端技术人员和web服务端技术人员协同起来工作,合理的分工,换句话说就是按web前端和web服务端角度如何能横向的分解web的开发工作。

       前后端分离的第一阶段需要解决问题的核心就是控制层的归属问题,从技术角度而言就是控制层到底是应该和视图层解耦比较合理还是跟模型层解耦比较合理的问题。那么我们这里先回顾下MVC设计模式里对控制层的定义,维基百科里的定义是:

(控制器 Controller)- 负责转发请求,对请求进行处理。

 

  不过这个解释我认为并不全面,以java的web开发里的控制层设计为例,我们发现控制层以沟通视图层和模型层的角度而言,控制层其实主要完成三项具体的工作,它们分别是:

  工作一:控制层起到一个路由的作用。客户端请求到达控制层后,控制层根据请求内容将请求路由到服务端某个模型层进行处理,模型层将请求处理完毕后,会把响应结果返回给控制层,控制层在根据响应信息路由到特定的页面。

  工作二:控制层起到一个报文信息格式转化的作用。这里以java的web开发为例,浏览器的数据都是以http报文形式发送给服务端,而控制层就是将http报文信息解析成java的对象,当然也可以是java的基本数据类型,然后控制层把解析好的信息传递给模型层进行处理。

  工作三:传统的MVC框架里,控制层其实深入参入到了页面渲染的操作。在java的web开发里的控制层不管如何被包装,其本质就是一个servlet,而jsp页面本质也是个serlvet,因此我们可以这么理解jsp,jsp就是以页面开发的方式写java,而servlet就是以java的方式写页面,所以我们可以在servlet里以文件流的方式输出页面,也可以让servlet跳转到jsp页面。

  由上面的论述里我们发现,其实传统MVC框架里控制层和模型层的联系方式相对很简单的,它们的联系主要是路由和报文格式的转化上,而控制层与视图层的联系除此之外还多了一个页面渲染,而页面渲染本身应该是属于浏览器的技术范畴,是浏览器技术不可分割的一部分,也是我上面内容里诟病传统MVC框架问题所在,如果控制层承担了页面渲染工作,那么控制层和视图层的耦合度就变得非常高,要想将其解耦是十分困难,一般只有我们打破了现有MVC框架的技术体系才能完成,相比之下,控制层与模型层的解耦就显得容易多了。那么控制层与模型层如何解耦呢?具体如下:

  首先我们来解决下报文格式转化的问题,这个技术方案很简单就是借鉴http统一报文格式的特点,我们为控制层和模型层定义一套统一的报文格式,例如我们定义控制层和模型层都以map的数据类型进行数据传递,这个map里有个专门的字段用来定义被路由到的模型接口信息,有个字段专门存储需要传递的数据,具体的设计方案可以根据实际的业务需要来设计。

  接下来就是路由的问题了,在解决报文格式转化问题的论述里我讲到要在统一报文格式里专门定义一个字段用来存储该数据到底路由到哪个模型进行处理,不过这个字段并不能完全解决路由问题,因此我们需要模型层对控制层提供一个统一的接口,任何控制层与模型层的沟通都通过这个统一接口来完成,只不过不同请求报文组装的内容不一样而已,而这个接口还有个重要职责就是解析报文里的路由信息,让请求能被正确的路由到对应的模型接口所处理。当然这个接口的返回值最好也是一个统一的报文格式,这样控制层解析模型层的返回数据也会便利的多了。

  由上所述,我们发现第一阶段的前后端分离工作控制层应该归属于web前端,这么做更加合理,也更加容易实现,其实之后进化版的前后端分离方案,控制层也都是属于web前端,只不过形式不同而已,这个我在下一篇文章里继续讨论。

  第一阶段前后端分离方案解决的核心就是让控制层和模型层解耦,这个方案进一步演化一下,我们可以把控制层和视图层独立成一个web应用,模型层也独立成一个web应用,两个web应用之间通过远程调用方式进行沟通,这个方案我在以前文章里写过,这篇文章的名字叫做《我设计的网站的分布式架构》。

  这个进化版的方案增加了系统开发的难度,因为我们需要增加网络通信的编程以及远程调用的实现,更麻烦的是我们还需要进行复杂的多线程编程,既然增加了开发的难度为什么我还要这么做呢?首先我们通过应用分层,可以动态的调节web前端和web服务端的负载压力,还可以在模型层之前提供一道安全屏障,不过被服务端绑架的web前端在提升整个web应用负载能力这块还是很有限的,其实这种做法的最大好处就是利于SOA框架的设计,也就是说这种架构我们可以为服务端的SOA化提供有力的保障,因为控制层和模型层的解耦,可以让模型层真正做到专注于业务,而不会再发生那种把业务逻辑写到控制层的问题了从而降低代码的健壮性。

  好了,今天就写到这里,最好祝大家新年快乐,晚安了。

转载于:https://my.oschina.net/u/1427708/blog/710638

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_770262.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用 vue koa 和mongo 撸了个人博客和博客管理网站

作为一个前端菜鸡在校生,跟风玩了一波vue之后感觉很爽,又跟风玩了一波koa、co之后更是爽的不行不行的,于是决定搭一个个人博客,再跟风学了学mongo、mongoose之后就开始上手干了,搭好了之后又搭了个博客管理后台&#x…

网站运营中5个源于眼动追踪的启发

如果网站的用户体验不佳,你很有可能因此丢掉很多转化的机会在帮助网站运营人员和设计师们了解用户如何浏览网站方面,眼动追踪的应用非常有效。许多权威的专家和机构已经在这一领域研究了数十年。下面是关于眼动追踪应用的五个结论,可能会对你…

asp.net怎么写上传图片到mysql的页面_小白怎么搭建自己的个人博客网站?云服务+WordPress教程...

【这是Python知识圈的第91篇原创】阅读文本大概需要 8 分钟。前言2 个月前 pk 哥自己动手搭建个人技术网站,一来为了让自己坚持总结,二来可以等访问量上来了赚点广告费(其实这才是主要目的,哈哈)。为什么要自己买服务器搭建网站呢&#xff1f…

自然语言0.0_情感分析权威网站_政治经济地理

sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId1005269003&utm_campaigncommission&utm_sourcecp-400000000398149&utm_mediumshare http://sentdex.com/1m-global-sentiment-analysis/ 可加入…

精品课程网站html,《网页设计与制作》—精品课程

项目7 使用DIVCSS布局网页利用DIVCSS技术,自行规划设计如图7-1所示的网页。网页使用了DIV的多层嵌套,文本及图片的布局中使用了多种CSS样式。练习素材在文件夹exercise中的blog文件夹中的images子文件夹中。图7-1 利用DIVCSS技术制作网页页操作提示&am…

seo模拟点击软件_网站优化(SEO)过程中的72个常见问题(二)

昨天我们总共是总结了6个常见问题,今天接着为大家总结。没有看《网站优化(SEO)过程中的72个常见问题(一)》的可以先看看。然后接着过来看这几个就可以了。网站优化(SEO)过程中的72个常见问题下面,我们接着总结:问题7、百度有没有权威一点的算…

网页在线编程php,十个在线编程网站,你必须收藏

最近糖糖发现很多小伙伴在学习编程的时候,学到一些地方的时候是需要上机做题之类的。这样就需要找一些比较好的在线编程测试网站了。但是对于大家来说如果真的想学好编程还是建议大家最好不要用在线编程网站,在本地搭建环境也是很快的而且很容易促进大家…

url是网站的服务器名,URL是什么

原标题:URL是什么URL就是网页的链接地址,用户和搜索引擎需要通过URL才能访问相应的页面。URL优化是指对其适当的调整,提高URL对搜索引擎的友好性。URL优化是网站seo基础优化的重要环节之一,影响搜索引擎收录的效果,再决…

搜索引擎提交软件_SEO程序员一个会关键词优化的半个程序玩家搜索引擎优化

好客站(www.hao-blog.com)好久没更新微信公众号了,反而人越来越多,感谢各位的关注!!!由于部分时间都放在学习和SEO优化上,没太多时间为大家分享!后续将会抽出部分时间为大家分享SEO干货&#xf…

沙发家具网站源码_实木沙发,自己喜欢才是最好的!

沙发是我们每个家庭不可缺少的家具,其样式多变,风格各异,不同风格的沙发给我们的家居感受也不同,沙发选的对,就会让整个房间的价值感增强,同时彰显主人高雅、舒适的品质生活。 实木沙发稳重厚实&#xff0c…

jq 直接调用php文件_在wordpress网站模板中,怎样添加和调用公共头部模板?

在wordpress网站模板主题开发中,我们可能会碰到这样一个问题:wordpress网站前台页面的头部、侧边栏、底部的数据基本上是差不多的,有的甚至是一模一样的,这时,我们还有必要在每一个页面的头部、侧边栏、底部重复添加或…

mysql数据库乱码原因linux_乱码产生原因 - MySQL乱码问题深层分析_数据库技术_Linux公社-Linux系统门户网站...

二、乱码产生原因MySQL 字符编码是版本4.1引入的,支持多国语言,而且一些特性已经超过了其它大多数数据库管理系统。正因为这一特性才导致 MySQL 的乱码问题。字符集是一套符号和编码。校对规则是在字符集内用于比较字符的一套规则。让我们使用一个假想字…

让网站添加人性化的声音提示

有时候&#xff0c;网页和客户是互动的&#xff0c;需要某些声音来提示客户&#xff0c;在这里贴段代码&#xff1a;客户端声音提示function notifyClientForMessage(){ var s "<object classid\"clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95\" id\"…

如何用 Flexbox 构建一个新闻网站布局

本文讲的是如何用 Flexbox 构建一个新闻网站布局&#xff0c;你将要创建的东西 在你刚接触 Flexbox 的时候没有必要理解关于 Flexbox 的 所有 方面。在这篇教程中&#xff0c;我们将介绍 Flexbox 的一些新特性。同时设计一种新的、像 The Guardian 一样的布局方式。 我们使用 F…

浏览器字体大小设置_外贸建站的 常用CSS设置

今天我们来说说外贸建站的 常用CSS设置 。CSS设置这方面的内容比较侧重于代码技术类&#xff0c;有些同学会觉得去研究这方面的东西太费事费力&#xff0c;投入产出比不高。事实上&#xff0c;当你掌握了这方面的相关技术&#xff0c;你对网站的前端构建会有全新的认识。一般情…

VS2019 配色_设计师必看|这10个网站可以帮你更快做好配色

本文共1189字&#xff0c;阅读大约3分钟对于一个设计师来说&#xff0c;颜色太重要了&#xff0c;但是配色是比较难的一门学问&#xff0c;不是说看几篇文章就能学会的。对于大多数人来说&#xff0c;使用网上的工具进行配色是最简单高效的方式&#xff0c;这篇文章就来介绍10个…

html网站开发与php网站开发_网站开发的三个时代:网页制作、前端开发、后端开发...

网站开发共经历了三个时代分别是“网页制作”、“前端开发”、“后端开发”。下边谈一谈这三个时代分别是怎样的&#xff0c;和千锋广州小编一起来看看吧。网页制作网页制作是Web 1.0时代的产物&#xff0c;产生在2005年左右。那个时候的网页主要是静态页面。静态页面就是能使用…

asp还有人用吗_使用Asp.net Core3amp;Blazor 的全栈式网站开发体验

编者注&#xff1a;这是一篇写于2019年8月份的文章&#xff0c;文中有些内容需要根据最新状态进行调整。以下是重要步骤截图配注解&#xff1a;一、全栈的解决方案架构.Net Core3的全栈解决方案示意图。此图的第一部分Client 是可以灵活替换的&#xff0c;哪怕它是Vue,Angular …

网站访问量怎么刷_怎样提高网站的访问量?

如今互联网发达的时代&#xff0c;建立一个网站并不难&#xff0c;难的是怎么能够让网站提现价值&#xff0c;带来更加多用户和效益的转化&#xff0c;但是网站建设完成之后开始运行&#xff0c;却发现网站访问量非常少&#xff0c;那么如何提高网站访问量呢&#xff1f;一、明…

各大网站网页代码_无需任何软件,轻松下载网页上的视频

大家好&#xff0c;我是专注营销策划和PPT技巧的JS策划人&#xff5e;我们通常会碰到这样一个难题&#xff1a;需要下载网页上的视频的时候&#xff0c;不知道怎么下载&#xff0c;去各大视频网站上搜索&#xff0c;发现都先要安装客户端&#xff0c;并且下载下来的视频文件要么…