玩转OurBMC第八期:OpenBMC webui之通信交互

news2025/1/10 23:37:08

栏目介绍:“玩转OurBMC”是OurBMC社区开创的知识分享类栏目,主要聚焦于社区和BMC全栈技术相关基础知识的分享,全方位涵盖了从理论原理到实践操作的知识传递。OurBMC社区将通过“玩转OurBMC”栏目,帮助开发者们深入了解到社区文化、理念及特色,增进开发者对BMC全栈技术的理解。

欢迎各位关注“玩转OurBMC”栏目,共同探索OurBMC社区的精彩世界。同时,我们诚挚地邀请各位开发者向“玩转OurBMC”栏目投稿,共同学习进步,将栏目打造成为汇聚智慧、激发创意的知识园地。

在 OpenBMC 中,webui(用户界面)是用户与服务器硬件交互的重要桥梁,也是实现高效管理的关键纽带。随着数据中心和服务器管理需求的持续攀升,webui的重要性日益凸显,已然成为OpenBMC系统中不可或缺的重要组件。本期内容将深入探索OpenBMC的webui前后端交互的工作流程。通过对webui通信流程、OpenBMC前端API工具工作原理以及webui中Vuex工作原理的解析,帮助读者深入理解其通信交互的实现机制。

webui通信流程图

图片

webui通信流程如下:

· 步骤1:依据MVVM模型,用户输入数据到用户界面后,被封装成raw数据发给vuex。

· 步骤2:vuex处理后发送数据给Axios请求拦截器。

· 步骤3:Axios请求拦截器再次封装数据,发送http请求与后端接口进行数据交互。

· 步骤4:BMC后端接收前端发送的访问请求,使用D-bus通信与指定应用实现进程间通信,得到对应http请求的响应数据。

· 步骤5:后端服务器将响应数据封装成JSON格式的redfish协议报文,发送给Axios响应拦截器。

· 步骤6:响应拦截器接收到数据后进一步校验,将校验后数据返回给vuex,若数据非法,会依据状态响应码采取不同的措施。

· 步骤7:若数据校验无误,vuex把数据返回给用户页面。

OpenBMC前端API工具工作原理

1. 跨域资源共享(CORS)

在开发过程中,访问远端资源或发送请求时会出现跨域问题,通过配置CORS可以解决跨域问题。在CORS配置时,网站开发者通过代理转发的方式来处理CORS请求,确保跨域通信进行。

在vue.config.js中添加如下配置,可实现代理配置的功能。

配置后的请求结果如下。IP地址后自动添加了/api开头。

图片

2. API工具实现原理

图片

API工具为生成的Axios实例所构建,并在其中设置了请求拦截器与响应拦截器。

(1)Axios实例的构建过程

· 步骤一:配置BaseURL,默认Axios请求以/api开头。

· 步骤二:配置信任http请求,withCredentials: true,接收后端返回的响应头cookie。

(2)Axios请求拦截器配置

依据不同模式判断是否重写请求url。在production模式中,删除/api开头的请求,其他模式不需要修正。因为web文件是一个具体的实体,运行在服务器资源中,因此实际访问是在服务器内部发生。但是在开发环境中,为了区分是 “前端独立发送的请求”,还是 “访问服务器内部资源”,需要在配置文件中设置代理,修改请求路径予以区分。

(3)Axios响应拦截器的配置

· 当后端状态响应码返回401时,立即注销登录状态,并返回到登录页面。

· 当后端状态响应码返回403时,前端需要标记此用户权限不足,不予以访问对应信息。

(4)响应拦截器工作示例

· 返回401或403错误响应码的情况:

以Session页面为例,若发出请求后获得401状态响应码,Api拦截器检测后跳转至Login页面。若发出请求后获得403状态响应码,Api拦截器检测后跳转至无访问权限界面。

· 正常情况:

发出请求后如果获得正常状态响应,api拦截器检测后把数据返回给目标视图。

图片

OpenBMC webui Vuex工作原理

图片

Vue实例(App)通过vue-router对所有视图进行路由绑定,视图使用Vuex给定的dispatch方法访问Vuex的actions方法,actions方法通过OpenBMC前端的API工具对后端服务器发送请求,接收到后端服务器的响应后进一步对数据进行处理加工。其中与显示相关的逻辑推断操作由view(视图)完成,与后端交互有关的数据处理操作由Vuex完成。

通过以上对OpenBMC的webui 前后端交互工作流程、前端API工具工作原理以及Vuex工作原理的解析,我们可以更加深入地理解OpenBMC的webui 通信交互的实现机制。这些技术和工具共同构建了一个高效、可靠、安全的服务器管理平台,为数据中心和服务器管理提供了强大的支持。

欢迎大家关注OurBMC社区,了解更多BMC技术干货。

OurBMC社区官方网站:

https://www.ourbmc.cn/

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

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

相关文章

shell学习记录

shell简介 参考博文1 参考博文2——shell语法及应用 参考博文3——vi的使用 在linux中有很多类型的shell,不同的shell具备不同的功能,shell还决定了脚本中函数的语法,Linux中默认的shell是 / b in/ b a s h ,流行的shell有as…

分布式锁demo

分布式锁 在应用开发中,特别是web工程开发,通常都是并发编程,不是多进程就是多线程。这种场景下极易出现线程并发性安全问题,此时不得不使用锁来解决问题。在多线程高并发场景下,为了保证资源的线程安全问题&#xff…

论文解读《Revisiting Neural Retrieval on Accelerators》

论文链接:https://arxiv.org/pdf/2306.04039 一、摘要 信息检索和推荐应用中,检索任务是从大规模的语料库中找到一小部分相关的候选项。检索的关键组成部分是建模(用户,物品)的相似度,通常表示为两个学习…

TypeScript写好了,怎么运行啊!!!

环境搭建 Vs code Ctrlshiftp打开首选项—》打开工作区设置—》搜索Typescript 推荐开启的配置项主要是这几个: Function Like Return Types,显示推导得到的函数返回值类型;Parameter Names,显示函数入参的名称;Par…

搭建PHP开发环境:Linux篇

目录 一、引言 二、环境准备 三、安装Web服务器(Apache) Ubuntu/Debian系统: CentOS/Red Hat系统: 四、安装PHP解释器 Ubuntu/Debian系统: CentOS/Red Hat系统: 五、配置Apache以支持PHP Ubuntu/…

我在高职教STM32——LCD液晶显示(1)

大家好,我是老耿,高职青椒一枚,一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次,同行应该都懂的,老师在课堂上教学几乎是没什么成就感的。正因如此,才有了借助 CSDN 平台寻求认同感和成就…

基于CNN的掩码自编码器微调用于分类任务

开源仓库 JJLi0427/CNN_Masked_Autoencoder: Design a patches masked autoencoder by CNN (github.com)https://github.com/JJLi0427/CNN_Masked_Autoencoder CNN自编码器 前面的文章中我们模仿MAE的思路用CNN做了一个掩码自编码器 动手小实验,用CNN来构建Mase…

C++语法01 基本框架

目录 什么是 C ? 新建源程序 保存源程序 程序基本框架 #include using namespace std; int main() return 0; 编译 运行 什么是 C ? C语言,是基本的程序设计语言之一【程序设计语言,简单的来说就是编写代码来操控计…

【漏洞复现】Jenkins文件读取漏洞(CVE-2024-23897)

简介 jenkins是啥? 简单理解就是:一个开源的、用于方便代码管理、部署的基于web的平台,用于提高团队开发效率(生产力)。 Jenkins CLI 任意文件读取漏洞 CVE-2024-23897 是怎么回事? Jenkins提供了一个命令…

哈喽GPT-4o——对GPT-4o 文本创作的思考与看法

目录 用法1:创作小说用法2:创作散文用法3:创作诗歌1、古诗2、现代诗 用法4:创作儿童故事用法5:创作剧本 大家好,我是哪吒。 都说ChatGPT4o是目前文本创作的最强大模型,它都可以用于哪些方面的文…

Mac 安装HomeBrew(亲测成功)

1、终端安装命令: /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"执行后,没有安装git,会先安装,安装后再执行一下命令。 2、根据中文选择源安装 3、相关命令 查看版本号&a…

Maven下载安装、环境配置(超详细)(包括Windows、IDEA)

目录 一、引言 二、下载和安装 Maven (1)首先保证 Java 的环境是正常的。 1、电脑桌面上右击 " 此电脑 ",点击属性。 2、点击高级系统设置。 3、点击环境变量。 4、找到系统变量中的 Path。 5、点击新建,然后把…

win10重装系统如何操作,附上详细系统重装图文教程(2024年新)

win10重装系统如何操作呢?电脑使用时间长了,会出现各种各样的问题,如重要的系统文件被删除导致电脑无法正常运行,电脑运行内存空间不足,电脑卡顿等。Win10重装系统很简单,这里分享超详细的重装系统方法&…

20240611-WWDC2024-visionOS 2/Apple Intelligence/ARKit

目录 1 visionOS 2 1)从2D图像提取左右眼的视角,生成空间照片——利用机器学习 2)提供丰富的API和框架 2 Apple Intelligence 1)自动对通知优先级排序、缩略通知、专注模式 2)Siri可以根据屏幕内容执行相关操作 …

AI赋能——六月转折点的高效赋能策略

致所有内容创作者的2024财富密钥:六月转折点的高效赋能策略 随着六月的脚步渐近,我们正站在一个前所未有的时代转折点上——一个由人工智能引领的变革时代。在这个关键时期,我们诚挚地向您推荐一套专为自媒体量身定制的效率提升方案&#xf…

用python克隆了前男友的声音

声音克隆开源项目推荐:MockingBird 项目简介 MockingBird 是一个由开源社区开发的声音克隆项目,托管在 GitHub 上。该项目旨在通过深度学习技术实现高质量的声音克隆,使用户能够合成任意人的声音,并生成自然、流畅的语音输出。M…

温湿度采集与OLED显示

目录 一、什么是软件I2C 二、什么是硬件I2C 三、STM32CubeMX配置 1、RCC配置 2、SYS配置 3、I2C1配置 3、I2C2配置 4、USART1配置 5、TIM1配置 6、时钟树配置 7、工程配置 四、设备链接 1、OLED连接 2、串口连接 3、温湿度传感器连接 五、每隔2秒钟采集一次温湿…

这个开源软件,送给爱读书的你!!【送源码】

对于喜欢阅读的人来说,一定经历过从一本厚厚的修仙书籍到MP3、MP4的阅读时代,再到现今的手机软件。 但是现在的阅读软件经常会遇见以下问题:比如广告弹窗太多,排版乱,甚至很多的APP都进入会员时代,再加上一…

Python爬虫实战案例之——MySql数据入库

Hello大家好,我是你们的南枫学长,咱们今天来学——爬虫之MySql数据入库。 话不多说,导入咱们的老朋友: Pymysql就是我们Python里面的mysql库,主要功能就是用来连接MySql数据库,那么下载还是一样的操作去进…

报表开发工具DevExpress Reporting v23.2 - 增强PDF导出、多平台打印等

DevExpress Reporting是.NET Framework下功能完善的报表平台,它附带了易于使用的Visual Studio报表设计器和丰富的报表控件集,包括数据透视表、图表,因此您可以构建无与伦比、信息清晰的报表。 DevExpress Reporting控件日前正式发布了v23.2…