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

前后端分离是指将一个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

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

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

相关文章

深入浅出解析SSL:保障网络安全的加密技术

在数字信息时代,网络安全已成为人们关注的重点。为了在网络传输过程中保护数据的完整性和机密性,我们需要一种强大的安全协议——SSL(安全套接层)。今天德迅云安全就带大家来简单了解下SSL是什么,它的工作原理以及为何…

Java中常见延时队列的实现方案总结

🏷️个人主页:牵着猫散步的鼠鼠 🏷️系列专栏:Java全栈-专栏 🏷️个人学习笔记,若有缺误,欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默&…

Intel RealSense D435环境搭建之安装pyrealsense2

ERROR: Could not find a version that satisfies the requirement pyrealsense2 (from versions: none) pip install pyrealsense2 -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com 方法一:升级pip python -m pip install --upgrade pip 方…

Redis第6讲——主从复制模式详解

Redis的读写性能很高,但在面对大规模数据和高发访问的挑战时,单节点的Redis可能无法满足需求,这就引出了Redis集群的概念。本节先介绍一下Redis高可用方案之一的主从复制模式,虽说现在基本不会用这种模式,但是无论是哨…

【VTKExamples::PolyData】第四十九期 Silhouette

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 前言 本文分享VTK样例Silhouette,并解析接口vtkPolyDataSilhouette,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO 1. Silhouett…

C语言数组全面解析:从初学到精通

数组 1. 前言2. 一维数组的创建和初始化3. 一维数组的使用4. 一维数组在内存中的存储5. 二维数组的创建和初始化6. 二维数组的使用7. 二维数组在内存中的存储8. 数组越界9. 数组作为函数参数10. 综合练习10.1 用函数初始化,逆置,打印整型数组10.2 交换两…

Python自动化测试ConfigParser模块读写配置文件

Python自动化测试ConfigParser模块读写配置文件 ConfigParser 是Python自带的模块, 用来读写配置文件, 用法及其简单。 直接上代码,不解释,不多说。 配置文件的格式是: []包含的叫section, section 下有optionval…

Mac Pro 突然不能双击打开文件夹

当Mac Pro 突然不能双击打开文件夹 不防右击看看这儿 有没有勾选 如果勾选就会在打开的瞬间 闪退关掉文件夹

安全SCDN详解

随着互联网发展,越来越多的人都会使用到网站,个人网站、企业网站,各类大大小小的网站影响到人们的生活方方面面。许多站长都有使用或是听起过CDN,而SCDN,全称为“Security Content Delivery Network”,即安…

【2024】vue-router和pinia的配置使用

目录 vue-routerpiniavue-routerpinia进阶用法---动态路由 有同学在项目初始化后没有下载vue-router和pinia,下面开始: vue-router npm install vue-router然后在src目录下创建文件夹router,以及下面的index.ts文件: 写进下面的…

如何选择阿里云服务器配置,过来人说说

阿里云服务器配置怎么选择?CPU内存、公网带宽和系统盘怎么选择?个人开发者或中小企业选择轻量应用服务器、ECS经济型e实例,企业用户选择ECS通用算力型u1云服务器、ECS计算型c7、通用型g7云服务器,阿里云服务器网aliyunfuwuqi.com整…

京津冀国际光伏展

京津冀国际光伏展是中国在京津冀地区举办的一项光伏展览活动。光伏,即太阳能光伏发电技术,是利用太阳能将光能转化为电能的一种可再生能源技术。光伏展旨在促进光伏产业的发展与合作,推动光伏技术在京津冀地区的应用和推广。 在京津冀国际光伏…

对VisionPro的认识,CogPMAlingTool模板匹配工具练习

什么是VisionPro? 在认识VisionPro之前我们需要先熟悉一下图片的各种格式 这里我们可以参考来自githubcurry博主的文章 图片各种格式的区别以及计算机如何存储图片 VisionPro 是由世界领先的机器视觉公司 Cognex 开发的一款专业机器视觉软件。它提供了强大的图像…

Vue3使用ckeditor5,加载mathtype组件,并将最终结果转化为latex格式输出

vue3项目直接用vite搭建就行。我用的是4.1.0版本的vite 接下来说一下要注意的几个点: 1、ckeritor的相关依赖安装必须版本相同,不然会报依赖重复的错误 主要有以下依赖: "ckeditor/ckeditor5-basic-styles": "^38.0.1"…

基于springboot实现的幼儿园管理系统

一、系统架构 前端:html | layui | jquery | css 后端:springboot | mybatis 环境:jdk1.8 | mysql | maven 二、代码及数据库 三、功能介绍 01. 登录页 02. 系统管理-用户管理 03. 系统管理-页面管理 04. 系统管理-角色管…

进制算法题(进制转换、Alice和Bob的爱恨情仇)

进制的本质 对于一个十进制数字,比如说153,其本质是每一个数位上的数字乘上这一位上的权重,即:153(1x)(5x)(3 x)而二进制,只不过是把10换成了2,任意一个非负整数都有唯一的一个二进制表示: 在计算机中,数字…

视频推拉流EasyDSS平台直播通道重连无法转推的原因排查与解决

视频推拉流EasyDSS视频直播点播平台,集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体,可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 用户使用EasyDSS平台对直播通道进行转推,发现只要关闭…

Codesys自定义库的帮助文档的美化

文章目录 1.前言2.美化的方式2.1.利用html标签2.2.利用reStructuredText 3.相关说明3.1.使用reStructuredText时,中文注释的问题3.2.将文档需要的图片包含到库中3.3.文档的作用区域 1.前言 当我们在codesys中写好自己的库,并且发布给别人使用时&#xf…

vue基本用法

文本插值 {{}} 用来绑定data方法返回的对象属性 v-bind:为标签的属性绑定data方法中返回的属性 事件绑定v-on:xxx 简写为xxx 双向绑定v-model 条件渲染 v-if v-else v-else-if 动态渲染页面元素

数字政府建设中的锐捷力量:五维构建坚实的数字政务基础设施

3月1日,中国信息协会部分地方信息机构负责人会议暨信息服务业助力高质量发展研讨会在深圳成功召开。来自民政部、农业农村部、国家统计局、人民日报社等部委单位,全国省市信息协会、信息中心、大数据局负责人,信息化领域专家学者在内的230多名代表参加了会议。2024年是立足“二…