我的编程空间,编程开发者的网络收藏夹
学习永远不晚

web前后端分离的必要性是什么

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

web前后端分离的必要性是什么

这篇文章主要介绍“web前后端分离的必要性是什么”,在日常操作中,相信很多人在web前后端分离的必要性是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”web前后端分离的必要性是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

  未分离时期

  MVC,博主就不多做解释了,在早期JSP+SERVLET中的结构图如下

web前后端分离的必要性是什么

  大致就是所有的请求都被发送给作为控制器的Servlet,它接受请求,并根据请求信息将它们分发给适当的JSP来响应。同时,Servlet还根据JSP的需求生成JavaBeans的实例并输出给JSP环境。JSP可以通过直接调用方法或使用UseBean的自定义标签得到JAVABeans中的数据。需要说明的是,这个View还可以采用 Velocity、Freemaker 等模板引擎。使用了这些模板引擎,可以使得开发过程中的人员分工更加明确,还能提高开发效率。那么,在这个时期,开发方式有如下两种方式一:

web前后端分离的必要性是什么

  方式二:

web前后端分离的必要性是什么

  先说明一下,方式二已经逐渐淘汰。主要原因有两点:

  (1)前端在开发过程中严重依赖后端,在后端没有完成的情况下,前端根本无法干活。

  (2)由于趋势问题,会JSP,懂velocity,freemarker的前端越来越少。

  因此,方式二逐渐不被采用。然而,不得不说一点,方式一,其实很多小型传统软件公司至今还在使用。那么,方式一和方式二具有哪些共同的缺点呢?

  I、前端无法单独调试

  在项目上线后,遇到一些问题。比如样式出问题了,由于前端不具备项目开发环境,那么就有可能出现如下对话

  前端:"我这里没问题啊。后端,你那里正常么?"后端:"我这里不正常啊。要不你过来看一下吧?"前端:"一时我也看不出问题,我也没环境,怎么办?"后端:"你没环境,坐我这边调吧。"然后,前端就满脸不爽的在你那调代码了。更有些情商低的后端就直接在旁边开摁手机,实在是。。。。。

  总结,因为前端无法单独调试。一方面开发效率降低。另一方面,还有可能引发公司内部人员上的矛盾。

  II、前端不可避免会遇到后台代码

  比如前端可能碰到如下结构的代码

  <body>

  <%

  request.setCharacterEncoding("utf-8")

  String name=request.getParameter("username");out.print(name);

  %>

  </body>

  身为前端,在页面里看到了后台代码,必然内心是十分不快的,这种方式耦合性太强。那么,就算你用了freemarker等模板引擎,不能写JAVA代码。那前端也不可避免的要去重新学习该模板引擎的模板语法,无谓增加了前端的学习成本。正如我们后端开发不想写前端一样,你想想如果你的后台代码里嵌入前端代码,你是什么感受?因此,这种方式十分不妥。

  III、JSP本身所导致的一些其他问题

  比如,JSP第一次运行的时候比较缓慢,因为里头包含一个翻译为Servlet的步骤。再比如因为同步加载的原因,在jsp中有很多内容的情况下,页面响应会很慢。

  半分离时期

  前后端半分离,前端负责开发页面,通过接口(Ajax)获取数据,采用dom操作对页面进行数据绑定,最终是由前端把页面渲染出来。这也就是其他博客里说的,Ajax与SPA应用(单页应用)结合的方式。其结构图如下

web前后端分离的必要性是什么

  步骤如下:

  (1)浏览器请求,cdn返回html页面

  (2)html中的js代码以ajax方式请求后台的restful接口

  (3)接口返回json数据,页面解析json数据,通过dom操作渲染页面

  ps:博主早期就是用jquery的ajax请求,然后这么做的。

  为什么说是半分离的?

  因为不是所有页面都是单页面应用,在多页面应用的情况下,前端因为没有掌握controller层,前端需要跟后端讨论,我们这个页面是要同步输出呢,还是异步json渲染呢?因此,在这一阶段,只能算半分离。

  这种方式的优缺点有哪些呢?

首先,这种方式的优点是很明显的。前端不会嵌入任何后台代码,前端专注于html、css、js的开发,不依赖于后端。自己还能够模拟json数据来渲染页面。发现bug,也能迅速定位出是谁的问题,不会出现互相推脱的现象。

  然而,在这种架构下,还是存在明显的弊端的。最明显的有如下几点:

  (1)js存在大量冗余,在业务复杂的情况下,页面的渲染部分的代码,非常复杂。

  (2)在json返回的数据比较大的情况下,渲染的十分缓慢,会出现页面卡顿的情况

  (3)seo非常不方便,由于搜索引擎的爬虫无法爬下js异步渲染的数据,导致这样的页面,SEO会存在一定的问题。

  (4)资源消耗严重,在业务复杂的情况下,一个页面可能要发起多次http请求才能将页面渲染完毕。可能有人不服,觉得pc端建立多次http请求也没啥。那你考虑过移动端么,知道移动端建立一次http请求需要消耗多少资源么?

  正是因为如上缺点,真正的前后端分离架构诞生了

  分离时期

  在这一时期,扩展了前端的范围。认为controller层也属于前端的一部分。在这一时期

  前端:负责View和Controller层。

  后端:只负责Model层,业务处理/数据等。

  可是前端不懂后台代码呀?controller层如何实现呢?

  这就是node.js的妙用了,node.js适合运用在高并发、I/O密集、少量业务逻辑的场景。最重要的一点是,前端不用再学一门其他的语言了,对前端来说,上手度大大提高。

  于是,这一时期架构图如下

web前后端分离的必要性是什么

  增加node.js作为中间层,具体有哪些好处呢?

  (1)适配性提升

  我们其实在开发过程中,经常会给pc端、mobile、app端各自研发一套前端。其实对于这三端来说,大部分端业务逻辑是一样的。唯一区别就是交互展现逻辑不同。如果controller层在后端手里,后端为了这些不同端页面展示逻辑,自己维护这些controller,徒增和前端沟通端成本。

  如果增加了node.js层,此时架构图如下

web前后端分离的必要性是什么

  在该结构下,每种前端的界面展示逻辑由node层自己维护。如果产品经理中途想要改动界面什么的,可以由前端自己专职维护,后端无需操心。前后端各司其职,后端专注自己的业务逻辑开发,前端专注产品效果开发。

  (2)响应速度提升

  我们有时候,会遇到后端返回给前端的数据太简单了,前端需要对这些数据进行逻辑运算。那么在数据量比较小的时候,对其做运算分组等操作,并无影响。但是当数据量大的时候,会有明显的卡顿效果。这时候,node中间层其实可以将很多这样的代码放入node层处理、也可以替后端分担一些简单的逻辑、又可以用模板引擎自己掌握前台的输出。这样做灵活度、响应度都大大提升。

  (3)性能得到提升

  大家应该都知道单一职责原则。从该角度来看,我们请求一个页面,可能要响应很多看后端接口,请求变多了,自然速度就变慢了,这种现象在mobile端更加严重。采用node作为中间层,将页面所需要的多个后端数据,直接在内网阶段就拼装好,再统一返回给前端,会得到更好的性能。

  分离所带来的缺点

  在分析缺点之前,容博主先自责一下。博主拿着底层程序员的工资,想着架构师,甚至是部门leader该考虑的问题了。博主有罪!ok,说重点。

  先上结论,中小型软件公司,慎用前后端分离架构!慎用!

  (1)人员问题

  大家自己留意一下宣传这种架构的是什么级别的公司,中小型公司一般没有这样的前端资源来支撑这样的架构。如果强推这样的分离架构会导致一个后果,后端被硬逼着去学vue.js,node.js这些,白白增加后端的负担。最后处理不好,会出现一个后端纷纷离职的场面,

  (2) 产品迭代周期问题

  中小型软件公司,一般需要一个比较快的软件迭代周期。采用分离架构,增加了一个接口制定流程和前后端联调流程。从本质上来说,放慢了迭代周期。

  (3) 前端需要学习业务

  本来前端只需要掌管视觉交互的部分。现在因为controller层也归前端管了,前端必须对公司的业务流程有深入的了解,才能准确的写出显示逻辑。不过这样会让后端觉得,前端夺权,前端在混KPI。前端也必须要去学无聊的业务,不过正所谓有得必有失,前端因此也能够站稳脚跟。或许正是因为前后端分离架构的出现,前端可以朝着架构师进军吧。

到此,关于“web前后端分离的必要性是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

web前后端分离的必要性是什么

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

web前后端分离的必要性是什么

这篇文章主要介绍“web前后端分离的必要性是什么”,在日常操作中,相信很多人在web前后端分离的必要性是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”web前后端分离的必要性是什么”的疑惑有所帮助!接下来
2023-06-05

Web前后端分离开发的方法是什么

本篇内容主要讲解“Web前后端分离开发的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Web前后端分离开发的方法是什么”吧!在传统的Web应用开发中,大多数的程序员会将浏览器作为前后端
2023-06-01

web前端主要做的是什么

Web前端主要做的是什么随着互联网的不断发展,Web前端开发在技术领域中也变得越来越重要。Web前端是指通过HTML,CSS和JavaScript等技术构建和维护网站的任务。那么,Web前端主要做的是什么呢?在这篇文章中,我们将详细讨论Web前端的职责和工作内容。Web前端的职责1.网站设计在一个前端开发团队中,网站设计是Web前端的一个基本职责。这些职责包括制定网站页面元素的
2023-05-14

web前后端交互方式是什么

这篇文章主要讲解了“web前后端交互方式是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“web前后端交互方式是什么”吧!  正如我们所知,一个完整的IT项目是由多个不同岗位共同完成的,包
2023-06-27

互联网系统架构为什么要做前后端分离呢?

在现在的互联网架构中,前后端分离已经是一个非常常见的系统架构方式了,但是我们将前后端分离以后,感觉项目的架构比传统的分层架构更复杂了,需要的人力资源也更多了,甚至项目周期也变得更长了,既然看上去好处不大,为什么还要做前后端分离呢?

thinkphp怎么实现前后端分离的开发

这篇文章主要讲解了“thinkphp怎么实现前后端分离的开发”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“thinkphp怎么实现前后端分离的开发”吧!跨域访问在前后端分离的开发中,前端通常
2023-07-05

web前端的概念是什么

这篇“web前端的概念是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“web前端的概念是什么”文章吧。Web前端是给用户
2023-07-05

web前端是做什么的?优势是什么?

Web前端是指开发Web页面的技术和工具,也称作前端工程师。随着互联网的迅速发展,Web前端在互联网领域中变得越来越重要。这篇文章将讨论Web前端是做什么的,以及为什么Web前端在今天的互联网领域中如此重要。
2023-05-14

web前端架构指的是什么

这篇文章主要讲解了“web前端架构指的是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“web前端架构指的是什么”吧!web前端架构是一系列工具和流程的集合,旨在提升前端代码的质量,并实现
2023-07-05

web前端是做什么的知识

随着互联网的发展,Web前端开发成为一个越来越重要的职业。Web前端开发是指通过编写HTML、CSS、JavaScript等代码,实现页面的设计和交互效果,最终呈现出给用户的网页界面。从某种意义上来说,Web前端开发就是将网页设计师所绘制出的高保真原型转化成能够在网页上运行的代码脚本。虽然前端开发看似只是做界面设计和编写,但是实际上涉及到很多方面的知识,需要掌握各种技能和工具才
2023-05-20

web前端和网页指的是什么

本篇内容介绍了“web前端和网页指的是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Web前端是给用户展示的网页页面,即网站的前台部分,
2023-07-05

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录