前面说什么是前后端分类,那到底是怎么个分类法呢?

前后端分离是指将一个web 系统的动态内容和静态内容进行分离,包括其开发、部署等。
比如传统的 MVC 架构,HTML、JS、CSS… 等前端代码和 Java、spring、mybatis… 等后端代码是在同一个项目中进行开发、部署的。那前后端分离后,就可以分多个项目进行开发、部署、多个前端、多个后端,通过 http restful api 接口的形式进行交互。

那么为什么要进行前后端分离,怎么个分离法呢,分离后怎么进行数据交互呢?

一、前后端为什么要分离?

在当今互联网时代,移动应用和网页应用的发展极大地推动了前后端分离开发模式的兴起。传统的后端渲染方式已经不能满足用户对高性能和优质用户体验的需求,于是前后端分离逐渐成为了一种主流的开发模式。

1、传统MVC开发模式的痛点

  • 运行存在效率问题:JSP必须在Servlet容器中运行(如Tomcat)。在请求JSP时也需要进行一次编译过程,最后被编译成Java类和class文件,这些都会占用JVM的内存空间。JSP和Java语言关联,在解耦上无法与HTML页面相媲美。
  • 开发人员分工不明确:MVC开发模式工作流程通常是前端工程师编写HTML页面,后端工程师再将HTML页面转换为JSP页面进行逻辑处理和数据展示。在某些紧急情况下,会出现前端工程师调试后端代码,后端工程师调试前端代码现象,分工不明确且沟通成本大,需要前后端一起协调工作。这一点一线工程师应该都深有体会。
  • 不利于项目推进:前后端代码耦合度高,模块优化空间小,修改任何前端或后端代码都需要重新发布。前后端开发工程师只能串行工作,无法并行推进项目,项目开发效率低。
  • 无法满足业务需求:前端仅限于浏览器的web应用,无法满足公司业务发展的需要(如Android原生APP、iOS原生APP、微信小程序等)。

2、什么是视图渲染?

这里面提到了传统的后端渲染方式已经不能满足用户对高性能和优质用户体验的需求,那么什么是传统的后端渲染方式呢?

现在有很多人都把“渲染”说成“呈现”,其实这种说法是不正确的,Web页面从服务器到浏览器的整个呈现过程实际上分为三步:
第一步:通过视图引擎对视图文件进行解释,将视图文件中的代码转换成HTML标记,这一步叫做渲染
第二步:将渲染后的HTML标记传递给客户端浏览器,这一步是页面的传递
第三步:浏览器接收到HTML后对其进行处理并呈现为Web页面,这一步才叫做呈现。

由此可见,渲染是把页面的非HTML代码(控件、页面代码等)转换成HTML标记,这一步工作是由服务器完成的。而呈现是将HTML显示成Web页面,这一步工作是由浏览器完成的。渲染和呈现是整个页面处理过程的两个不同阶段,更不能把这两步工作混谈为只有“呈现”这一步。

3、什么又是渲染引擎?

视图引擎是为浏览器实际生成HTML输出的组件,视图引擎负责为每个请求返回HTML,并且它通过将视图模板和由控制器传递进来的数据进行融合来准备其输出。

也可以这样理解:从客户端(Client)输入数据,数据存储在数据库中(DB),视图(View)结合数据库中的文档集合(Document)生成列表,如下图(我觉得这张图理解起来容易):

还有就是上面提到的视图模板,个人觉得视图模板,就是上图中的view框里面的内容,当然不是这么简单的几列,现在很多公司提供各种视图模板,其实就是提供一种写好的多列、带有一些上一页、下一页按钮的页面,这些页面只是有了呈现数据的框架,如果用了或者买了这些模板,按照提供的页面填充数据就好了,其中的一些css或者其他东西都已经在模板里面写好了。

二、前后端怎么个分离法呢?

前后端分离就是说开发分离、部署分离。可以理解成多个开发项目,然后通过http rest api接口进行数据传递。

前后端分离开发模式是一种软件开发方法,其中前端和后端的开发是相互独立的,各自负责不同的功能和逻辑。在这种模式下,前端和后端的代码分别处于不同的项目或代码库中,并通过网络接口进行通信。

在前后端分离开发模式中,前端通常是指用户界面和用户交互相关的部分,如网页或移动应用的界面和用户输入验证。前端开发使用的技术栈通常包括HTML、CSS、JavaScript等。而后端则负责处理数据逻辑、业务逻辑和数据库操作等功能。后端开发使用的技术栈通常包括编程语言(如Java、Python、Node.js等)、框架(如Spring Boot、Django、Express等)以及数据库(如MySQL、MongoDB等)。

通过前后端分离开发模式,可以实现前后端开发的并行进行,提高开发效率。而且,前后端分离也有利于团队协作,不同团队可以专注于各自的开发领域,减少开发的耦合性。此外,通过接口的方式进行通信,可以使前端和后端灵活独立地进行部署和扩展。前后端分离开发模式提供了一种灵活、高效、可扩展的方式来构建现代化的Web应用程序。

三、前后端分离的注意事项

前后端分离后,开发、部署分成了不同的项目,双方经过接口传递数据,那就存在沟通的问题了,后端改了要及时跟前端沟通。因此存在以下注意事项:

  • 前端开发资源是否充足:传统MVC是以后端为主的开发模式,前端人员仅提供静态HTML页面,但采用前后端分离开发模式则会减轻后端开发人员压力,而增加前端开发人员的工作量。
  • 软件迭代周期需要慎重估算:对于中小型团队,采用前后端分离开发模式,增加了接口制定流程和前后端联调流程,可能会延长迭代周期。
  • 并不是所有项目开发都需要前后端分离开发模式:如果项目比较简单或一个项目需要快速开发上线,就可以采用传统的MVC开发模式进行快速迭代。
  • 前后端开发人员的沟通成本:前后端分离后,无论是 API接口的对接还是测试工作,都涉及前后端人员的沟通和协作

参考资料:

https://www.cnblogs.com/one-xiaoqiang/p/17743078.html

https://zhuanlan.zhihu.com/p/572184941

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

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

相关文章

学习vue3使用在线官方开发环境play.vuejs.org进行测试

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址: http://122.227.135.243:9666 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbach…

C++ STL自定义排序

更具体的看【速记】C STL自定义排序 - 知乎 (zhihu.com) sort sort第三个位置放的greater<int>和less<int>萌新可能会弄错&#xff0c;这两个单词不是更大和更小的意思&#xff0c;而是大于和小于&#xff0c;并且比较就是自定义排序中的前者和后者。 如果是less…

如何使用DS file+cpolar内网穿透实现远程访问本地群晖NAS传输文件

文章目录 1. 群晖安装Cpolar2. 创建TCP公网地址3. 远程访问群晖文件4. 固定TCP公网地址5. 固定TCP地址连接 DS file 是一个由群晖公司开发的文件管理应用程序&#xff0c;主要用于浏览、访问和管理存储在群晖NAS&#xff08;网络附加存储&#xff09;中的文件。这个应用程序具有…

【BUG】Windows状态栏总卡死解决办法

屋漏偏逢连夜雨&#xff0c;正在赶deadline呢&#xff0c;Windows状态老卡死&#xff0c;一时间崩溃。 解决办法&#xff1a; 右键状态栏新闻和咨询关掉 这个烧笔新闻与资讯我真服了

java算法第十五天 | ● 层序遍历 ● 226.翻转二叉树 ● 101.对称二叉树

层序遍历 思路&#xff1a; 需要借用一个辅助数据结构即队列来实现&#xff0c;队列先进先出&#xff0c;符合一层一层遍历的逻辑&#xff0c;而用栈先进后出适合模拟深度优先遍历也就是递归的逻辑。 而这种层序遍历方式就是图论中的广度优先遍历&#xff0c;只不过我们应用在…

在nginx 服务器部署vue项目

以人人快速开发的开源项目&#xff1a;renren-fast-vue 为例 注&#xff1a;这里开始认为各位都会使用nginx 打包vue项目 npm run build 测试打包的项目是否可以运行 serve dist 可以正常运行 编译报错请移步到&#xff1a;renren-fast-vue1.2.2 项目编译报错: build g…

2024三掌柜赠书活动第十三期:API安全技术与实战

目录 前言 API安全威胁与漏洞 API安全技术与实践 API安全实战案例 关于《API安全技术与实战》 编辑推荐 内容简介 作者简介 图书目录 书中前言/序言 《API安全技术与实战》全书速览 结束语 前言 随着互联网的快速发展和应用程序的广泛使用&#xff0c;API&#xff…

贪心刷题3-合并果子

题目来源&#xff1a;[NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G - 洛谷 参考书目&#xff1a;《深入浅出程序设计竞赛&#xff08;基础篇&#xff09;》 解题思路&#xff1a;这道题的关键在于每次选择合并时都要选择最小的两堆果子来合并&#xff0c;从而保…

MySQL 元数据锁及问题排查(Metadata Locks MDL)

"元数据"是用来描述数据对象定义的&#xff0c;而元数据锁&#xff08;Metadata Lock MDL&#xff09;即是加在这些定义上。通常我们认为非锁定一致性读&#xff08;简单select&#xff09;是不加锁的&#xff0c;这个是基于表内数据层面&#xff0c;其依然会对表的元…

Python之Web开发初学者教程—ubuntu下vi的使用

Python之Web开发初学者教程—ubuntu下vi的使用 vi\vim 文本编辑器 i 切换到输入模式&#xff0c;以输入字符。 x 删除当前光标所在处的字符。 : 切换到底线命令模式&#xff0c;以在最底一行输入命令。 vi 保存并退出&#xff1a;esc键退出编辑-…

Python爬虫——Selenium

简介 Selenium是一个自动化测试框架&#xff0c;可以通过编程语言控制浏览器进行各种操作。在Python中&#xff0c;可以使用Selenium实现爬虫。 首先&#xff0c;我们需要需要安装Selenium库。可以使用pip命令安装&#xff1a; pip install selenium要使用的话我们还需…

用于生成环境噪声的Noisedash

本文中关于音频的专业描述&#xff0c;来自于互联网和 ChatGPT&#xff1b; 什么是白噪声 &#xff1f; 白噪声&#xff08;White Noise&#xff09;是具有平均功率的随机信号&#xff0c;其功率在整个频谱范围内均匀分布。它的能量在所有频率上都是相等的&#xff0c;没有频率…

【Linux C | 网络编程】广播概念、UDP实现广播的C语言例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

伟大音乐家的伟大不朽作品,贝多芬一生的音乐作品全集

一、音乐描述 贝多芬一生创作题材广泛&#xff0c;重要作品包括9部交响曲、1部歌剧、32首钢琴奏鸣曲、5首钢琴协奏曲、多首管弦乐序曲及小提琴、大提琴奏鸣曲等。因为其对古典音乐的重大贡献&#xff0c;以及对奏鸣曲式和交响曲套曲结构的发展和创新&#xff0c;而被后世尊称为…

【比较mybatis、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp操作数据】操作批量新增、分页查询(四)

orm框架使用性能比较 比较mybatis、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp操作数据 环境&#xff1a; idea jdk17 spring boot 3.0.7 mysql 8.0测试条件常规对象 orm 框架是否支持xml是否支持 Lambda对比版本编码方式mybatis☑️☑️3.5.4lambda xml 优化sq…

Python乱码恢复

比如说网页是ISO-8859-1编码&#xff0c;然后requests得到的是乱码&#xff0c; 那么这样操作就可以还原数据&#xff1a;res.text.encode(‘ISO-8859-1’).decode(‘utf-8’) 乱码恢复网站&#xff0c;可以知道是什么编码http://www.mytju.com/classCode/tools/messyCodeReco…

Stable Diffusion——Animate Diff一键AI图像转视频

前言 AnimateDiff 是一个实用框架&#xff0c;可以对文本生成图像模型进行动画处理&#xff0c;无需进行特定模型调整&#xff0c;即可为大多数现有的个性化文本转图像模型提供动画化能力。而Animatediff 已更新至 2.0 版本和3.0两个版本&#xff0c;相较于 1.0 版本&#xff…

C#高级:Winform桌面开发中DataGridView的详解

一、每条数据增加一个按钮&#xff0c;点击输出对应实体 请先确保正确添加实体的名称和文本&#xff1a; private void button6_Click(object sender, EventArgs e) {//SQL查询到数据&#xff0c;存于list中List<InforMessage> list bll.QueryInforMessage();//含有字段…

tomcat安装及jdk安装

Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试JSP 程序的首选。对于一个初学者来说&#xff0c;可以这样认为&#xff0c;当在一台机器上配…

C++ Qt开发:运用QThread多线程组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍如何运用QThread组件实现多线程功能。 多线程…