AICon议程上新60%,阿里国际、360智脑、科大讯飞、蔚来汽车分享大模型探索与实践 了解详情
写点什么

前后端分离技术体系

  • 2020-03-22
  • 本文字数:1908 字

    阅读完需:约 6 分钟

前后端分离技术体系

前后端分离架构演进过程

1、前后端未分离架构模式

前后端未分离时代,页面逻辑处理以及页面渲染全部由后端完成。如最具代表性的 MVC 三层框架。用户发起请求至服务端控制层(Controller),控制层通过调用模型处理器(Model)以及渲染视图(View)并最终将页面返回给客户端。



图 1-MVC 架构(前后端未分离模式)


如图-1 MVC 架构所示,视图与模型均放在后端处理,致使前端代码无法独立上线运行。前端工程师完成 HTML 等静态代码开发之后,将页面代码传递给后端工程师。后端工程师来完成上线发布操作。整个开发流程如图-2 所示,前后端工程师开发流程相互牵制,整体开发效率较低。



图 2-前后端未分离模式下系统开发流程


此种架构,要求后端研发关注前端 HTML、CSS 代码等。前端无法单独调试,前后端无法并行开发,后期维护成本较高,前后端未分离架构存在的弊端如图-3 所示。



图 3-前后端未分离模式存在的缺点

2、前后端未完全分离架构模式

在此以 RESTful 架构为切入点,探讨前后端未完全分离的架构模式,目前仍有大部分前后端架构属于前后端未完全分离的模式。后端提供 RESTful 风格的 API 接口(通俗讲,即传输 JSON 数据的 Http API 接口)。前端通过 AJAX 请求调用后端 Http API 接口,并完成页面数据的绑定,最终由客户端浏览器完成页面的渲染。此种架构看似已经做到了前后端完全分离。其实不然,后端接口依然需要关注前端的 UI 展示,后端为前端接口定制化严重。对于多终端场景,后端需要实现多套 API 接口。前后端数据以及业务耦合较紧密,因此定义为此种架构为“前后端未完全分离架构模式”。



图 4-前后端未完全分离模式


RESTful 架构使得前后端代码分离开来,前后端可以独立上线,开发效率相比未分离架构有所提升,整个系统开发流程也有所优化,前后端未完全分离模式下系统开发流程如图-5 所示。



图 5-前后端未完全分离模式下系统开发流程


此种架构的缺点是,前端并没有掌握数据的控制逻辑(无控制层),数据的控制逻辑依然需要在后端代码中实现,致使后端代码过多的关注前端的业务逻辑。客户端需要根据接口的数据返回进行大量的 JS 处理,由于动态数据是通过 AJAX 请求获得的,此种方式也不利于页面的搜索引擎优化。

3、前后端分离架构模式

引入 NodeJS 层作为服务桥接层,NodeJS 层由前端工程师负责搭建完成。通过 NodeJS 服务器在服务器端运行 JS 脚本,可以让前端人员快速入门搭建自己的服务器。引入 NodeJS,可以预先在服务端的内网环境完成大量的前端逻辑计算和页面渲染工作,提升前端的访问性能。如图 6 所示展示前后端完全分离架构模式的数据以及页面渲染流程。




图 6-前后端完全分离模式

前后端技术支撑

目前主流的客户端(前端)主要包含 PC 浏览器以及移动应用 APP。移动应用 APP 可以通过原生页面、或内置的 WebView 等插件渲染 H5 页面向用户展示 UI 信息。



图 7-客户端应用


客户端主要涉及网页浏览器以及原生 APP,这些客户端不但可以展示数据,并且还可以存储数据。尤其是对于移动端 APP,如可以使用强大的 SQLite 数据库对数据进行持久化存储。通过客户端的数据存储可以实现某些场景的离线访问,尤其是对于用户的重要数据且更新频次较低的数据,离线存储的意义非常明显。



图 8-前端技术方案


服务器端(后端)的服务器种类主要分为 WEB 服务器以及应用服务器,WEB 服务器主要用来发布静态资源(html、css 等静态资源文件),如 Nginx 服务器、Apache 以及 CDN 服务器等。WEB 服务器对于静态资源发布以及静态文件缓存有极大的优势。应用服务器主要用来发布应用程序代码(ASP.NET、PHP、JAVA 等),如 Tomcat、IIS 服务器等。WEB 服务器一般通过公网 VIP 或者 SLB 等方式对外提供外网服务。应用服务器一般只运行在内网环境,无法通过外网方式直接访问应用服务器资源,这样也是对应用服务器的一种网络安全保护。



图 9-后端服务器


后端技术体系包括 JAVA、C#等程序开发语言。MySQL、MongoDB 等数据库技术。Tomcat、IIS 等 web 服务器技术。JSF、JMQ 等处理分布式应用的中间件技术。



图 10-后端技术方案

前后端分离存在问题

1、高性能问题

综上所述,大家已了解前后端分离的架构设计模式以及前后端的相关技术体系,接下来探讨如何充分利用前后端技术提升前后端性能问题。



图 11-访问性能问题



图 12-提高前后端交互性能的解决方案

2、高稳定性


图 13-高稳定需求


如图-14 所示,若通过 APP 内置数据库存储部分接口数据(用户的重要数据,如资产数据,收益数据等),可以实现 APP 的离线数据访问。当后端接口服务出现问题,前端依然能够正常展示。本图示只是一个简单的架构示意图,本意是为了说明在设计整体前后端工程时,同时利用前后端技术优势能够设计出更为稳定的系统架构。



图 14-高稳定性解决方案


2020-03-22 21:059005

评论 4 条评论

发布
用户头像
“2、前后端未完全分离架构模式”,这里仍然定义为 未完全分离,有点怪异。
实际上 新增NodeJS前后,从人员职责划分角度看,并没有改变什么,只是 后端兼容前端多一些,还是 前端兼容后端多一些 的差别。
如果是 因为后端的接口需要考虑前端UI展示,所以不是 前后端完全分离,
那么,新增了NodeJS后,前端需要理解后端通用接口,那不一样是 未完全分离么?

前后端分离是否分离,应该是看代码是否分离,更合理一些,个人看法哈。
2021-06-26 17:00
回复
用户头像
NodeJS 层的存在,仅仅是把之前模式中的在浏览器中处理的前端逻辑,挪动到了 NodeJS 层,这是为了减少客户端的负担而增加服务器端的工作?但多了一层,便新增了一轮交互(NodeJS层和后端),复杂度上升了。是因为有足够人力资源可以分开写浏览器(App)端,和NodeJS层么?
2020-06-01 05:40
回复
不是把客户端的逻辑移到NodeJS层,而是把后端的大量业务逻辑移到NodeJS层,这样后端人力得以释放。
2020-06-27 13:56
回复
dva回复炜炜
为什么把业务逻辑挪到 nodejs 层? nodejs 更适合做业务逻辑?并不是这样的吧。参考微服务中的 BFF,nodejs 层只做接口聚合、适配、裁剪。这些是简化前端逻辑的处理,这一层也是前端来开发的。
2020-11-18 11:19
回复
没有更多了
发现更多内容

多维评测指标解读第17届MSU世界编码器大赛全高清10bit赛道结果

阿里云视频云

云计算 视频云

PS Raw增效工具Camera Raw 16 for Mac中文版

彩云

ps插件 Camera Raw 16

计算机科学系举办“火焰杯”软件测试开发选拔赛颁奖仪式

霍格沃兹测试开发学社

如何利用谷歌SEO服务帮助企业获客

九凌网络

做好谷歌Seo的技巧

九凌网络

当年很流行,现在已经淘汰的前端技术有哪些?

互联网工科生

前端 vite Bun Astro

Experience Design Mac中文破解版下载

iMac小白

adobe xd XD2024下载

10个基于.Net开发的Windows开源软件项目

树上有只程序猿

.net windows 开源软件

浅谈基于敏捷开发交付应对突发项目

鲸品堂

敏捷 敏捷交付 交付 企业号10月PK榜

第6期|GPTSecurity周报

云起无垠

DR8072|IPQ8072 WIFI6E 4X4 2X2 2.4G 5G 6G Bluetooth GPS Industrial Customization Solution

wallyslilly

IPQ8072 IPQ8074

Unity中国、Cocos为OpenHarmony游戏生态插上腾飞的翅膀

OpenHarmony开发者

OpenHarmony

谷歌SEO是什么,它对外贸企业有什么好处?

九凌网络

打造次世代分析型数据库(七):向量化计算层缓存

腾讯云大数据

数据库

KubeEdge v1.15.0 发布!新增 Windows 边缘节点支持,基于物模型的设备管理,DMI数据面支持等功能

华为云原生团队

云计算 容器 云原生 边缘计算

Balsamiq Wireframes for mac(线框图工具) v4.7.4永久激活版

mac

苹果mac Windows软件 Balsamiq Wireframes 线框图软件

Java基于API接口爬取商品数据

Noah

网站如何做好谷歌优化

九凌网络

外贸网站seo优化教程!

九凌网络

CVPR2023优秀论文 | AIGC伪造图像鉴别算法泛化性缺失问题分析

百度Geek说

算法 AIGC 企业号10月PK榜

Codigger:提高软件安全性的静态分析工具

知者如C

EtreCheckpro for mac(硬件信息查看工具) v6.8.2注册激活版

mac

苹果mac Windows软件 etrecheckpro 硬件信息查看工具

我院学子在第三届“火焰杯”软件测试开发选拔赛中 取得佳绩

霍格沃兹测试开发学社

演讲回顾 | 龙智专家分享“支撑、共享与安全:芯片开发中的数字资产管理”

龙智—DevSecOps解决方案

芯片 芯片设计 芯片行业

人工智能学院学生在“火焰杯”软件测试开发选拔赛总决赛获奖

霍格沃兹测试开发学社

Linux 爱好者线下沙龙:LLUG 2023·相聚成都 | 第四站

OpenAnolis小助手

Linux 开源 演讲 龙蜥社区 LLUG

双十一激光投影选购全解,总有适合你的心头好物

Geek_2d6073

1024程序员节献礼,火山引擎ByteHouse带来三重产品福利

字节跳动数据平台

数据库 大数据 云原生 数仓 clickhosue

NFT聚合平台开发:综合指南NFT开发 DAPP开发

区块链软件开发推广运营

交易所开发 dapp开发 区块链开发 链游开发 NFT开发

重磅|博睿数据 Bonree ONE 2023秋季版焕新发布!

博睿数据

可观测性

前后端分离技术体系_文化 & 方法_京东数字科技产业AI中心_InfoQ精选文章