【AICon】 如何构建高效的 RAG 系统?RAG 技术在实际应用中遇到的挑战及应对策略?>>> 了解详情
写点什么

前后端分离技术体系

  • 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:058770

评论 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
回复
没有更多了
发现更多内容

企业内容管理升级 3.0:构建生态协同,助力合规成长

风来兮

软件 电子档案 OCR 合规 #人工智能

如何优化Flutter的性能?

没有用户名丶

IT运维的福音!WeOps综合服务让运维更简单

嘉为蓝鲸

运维 IT weops

知识图谱之《海贼王-ONEPICE》领域图谱项目实战(含码源):数据采集、知识存储、知识抽取、知识计算、知识应用、图谱可视化、问答系统(KBQA)等

汀丶人工智能

自然语言处理 知识图谱 信息抽取

手把手教学构建证券知识图谱/知识库(含码源):网页获取信息、设计图谱、Cypher查询、Neo4j关系可视化展示

汀丶人工智能

人工智能 自然语言处理 nlp 知识图谱

谈谈我这两年的前端开发经验

树上有只程序猿

手把手教学构建农业知识图谱:农业领域的信息检索+智能问答,命名实体识别,关系抽取,实体关系查询

汀丶人工智能

人工智能 深度学习 nlp 知识图谱 智能问答

基于知识图谱的《红楼梦》人物关系可视化及问答系统(含码源):命名实体识别、关系识别、LTP简单教学

汀丶人工智能

人工智能 深度学习 nlp 知识图谱 智能问答

中国大模型的落地DNA,写在这个双螺旋结构里

脑极体

AI

PoseiSwap 更新第二期空投,持有 Zepoch 节点数量将决定空投回报

鳄鱼视界

几天不写React,已经看不懂语法了

伤感汤姆布利柏

科兴未来|第二届T-MAX“科创太仓”国际创新创业--先进材料专场赛

科兴未来News

PoseiSwap 更新第二期空投,持有 Zepoch 节点数量将决定空投回报

威廉META

Kurator v0.4.0版本更新4大内容,满足多云环境的复杂需求

华为云开发者联盟

云原生 后端 华为云 华为云开发者联盟 企业号 7 月 PK 榜

Rainbond开源

EquatorCoco

开源 rainbond

智能电视APP鲜时光,如何应用AB测试打造极致的用户观看体验?

字节跳动数据平台

王海峰最新发声!

飞桨PaddlePaddle

人工智能 百度 paddle 飞桨 百度飞桨

飞桨和硬件伙伴们在WAIC 2023!

飞桨PaddlePaddle

人工智能 百度 paddle 飞桨 百度飞桨

新兴技术与禅坐 | 聊聊经验 | 社区征文

写程序的小王叔叔

经验分享 年中技术盘点

区块链生态架构 | 社区征文

TiAmo

区块链 Baas 年中技术盘点

深入解析Redis的LRU与LFU算法实现

vivo互联网技术

redis LRU LFU

Git操作不规范,战友提刀来相见!

树上有只程序猿

深度剖析之由浅入深揭秘JavaScript类型转换(最全总结篇)

控心つcrazy

JavaScript 类型转换 隐式转换 类型 强制类型转换

用友iuap亮相全球数字经济大会助力企业升级数智化底座

用友BIP

数智底座

Pytorch: 数据读取机制Dataloader与Dataset

timerring

人工智能

万字血书React—走近React

不在线第一只蜗牛

React 教程分享

业务创新的利器:探索Flutter与小程序容器的融合应用

FinClip

PoseiSwap 更新第二期空投,持有 Zepoch 节点数量将决定空投回报

西柚子

INFINI Labs 产品更新 | Easysearch 新增 kNN 搜索功能、Console 支持 LDAP 认证登录等

极限实验室

console Gateway 产品更新 easysearch 极限科技

源码解读之FutureTask如何实现最大等待时间

EquatorCoco

源码 前端 前端工具

户外led显示屏常见规格有哪些

Dylan

广告 屏幕亮度 像素 LED显示屏 户外LED显示屏

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