BI 数据可视化平台建设（1）—交叉表组件演变实战

作者：vivo 互联网大数据团队 - Zhu Jianchen

本文是vivo互联网大数据团队《BI数据可视化平台建设》系列文章第1篇 - 交叉表组件。

交叉表在数据分析里应用广泛，通过本文，你将了解到：

  • 交叉表的基本概念，以及BI可视化平台常见术语。

  • 我们的表格类组件的演化过程，以及如何通过技术调研和优化实现大数据量下渲染性能，一步一步从原先的~10s降低到3~4s。

  • 交叉表的一些特定场景，提供了一些技术实现简易描述，对这些场景有一些宏观认识。

  • Worker，虚拟滚动，微应用等关键技术的实现细节。

一、背景

表格和表单在前端里面是最复杂的两类需求，在BI工具平台上，这2类组件需求更多，并且需要实现一些特有的交互展示。目前在敏捷BI平台上进行报表配置，表格类组件的使用占比达到了1/3，在可视化组件库里使用范围很广。为了满足不同的数据分析场景，表格组件主要分为分组表、交叉表、明细表三种类型，其中又以交叉表功能最为丰富强大。随着敏捷BI的业务的发展，交叉表组件也经历了多次设计改版以支持高性能的数据渲染和个性化的展示配置。本文主要通过交叉表组件的升级实践给大家讲解一下如何设计开发高性能的表格组件。 

术语注解

  • 【敏捷BI】

专为 vivo 生态用户量身打造的 自助式 BI 平台，提供从数据接入、数据准备、到数据分析、可视化应用、数据管理的一站式数据解决方案，同Quick BI，FineBI。

  • 【图表类型】

图表是数据视觉化表示的特殊方式。表示数据的方法有很多，如使用不同的符号、形状和排列，我们把这些称之为图表的类型。一些图表类型你比较熟悉，如条形图、饼图、折线图，但其他类型你可能就很少见了，如桑基图、树图、等值线图的地图。

  • 【交互方式】

交互式可视化允许您修改，操作和探索计算机显示的数据。绝大多数交互式可视化系统在计算机网络上，但越来越多出现在平板电脑和智能手机上。相比之下，静态可视化只显示单一的、非交互数据，它通常是为了打印和在屏幕上显示。

  • 【度量值】

表示数值的规模和范围。度量通常以间隔表示(10、20、30等等)，代表度数字的单位，如价格、距离、年，或百分比。

  • 【指标】

同度量，表示具体某项值，单个值本身没有任何业务意义，一般需要对应的指标口径解释，才会具有业务价值。

二、交叉表介绍

交叉表（Cross Tabulations）是一种常用的由 行、列、汇总字段 三个元素组成分类汇总表格。利用交叉表查询数据非常直观明了，在进行数据分析中也被广泛应用。这里牵涉到另外一个概念即分组报表，分组报表是所有报表当中最普通，最常见的报表类型，也是所有报表工具都支持的一种报表格式。从一般概念上来讲，分组报表就是只有纵向的分组，传统的分组报表制作方式是把报表划分为条带状，用户根据一个数据绑定向导指定分组，汇总字段，生成标准的分组报表。交叉表有多列查询能力、分类汇总、多角度排序、交互式分析等特性。

图片

三、架构演变历程

为了提高交叉表的数据渲染性能和功能扩展能力，敏捷BI的表格组件经历了三次的设计升级。最开始用的jQuery拼接表格方式实现，随着组件化方案的推行，采用了组件化的方式实现升级，随着业务的发展，用多维度、多指标交叉分析场景越来越多了，尤其是通过交叉表进行分析时，大数据量出现了渲染崩溃等问题，所以我们最后通过微前端方式实现。  下面我们从开发难度，性能，功能扩展性，学习成本等方面的调研来讲解对底层表格的升级实践。

图片

3.1 V1版表格

敏捷BI平台第一版表格，技术栈是基于jQuery+DIV的方式实现的。表格拼接属于jQuery时代的常见开发风格，这种方式，代码可维护性会非常差，很容易会出现标签不匹配的情况，不带缩进，调试起来也比较费劲。这个版本的表格组件支持的业务场景主要是数据的基本展现，无法满足用户对表格的数据分析的需求。

  • 架构设计

图片

// 简单的拼接代码demo
function createTable() {
  var data = new Array();
     
 data.push('<table border=1><tbody>');
   for (var i = 0; i < 2000; i++) {
     data.push('<tr>');
     for (var j = 0; j < 5; j++) {
       data.push('<td>' + i + ',' + j + '</td>');
     }
     data.push('</tr>');
   }
   data.push('</tbody><table>');
      
   document.getElementById('table1').innerHTML = data.join('');
 }

3.2 V2版表格

随着系统整体架构升级，前后端分离的推进，我们从原生的table组件迁移到Vue组件化上，开发了V2版表格组件。  平台的整体架构全面迁移到vue+ant-design-vue上面。

1. 功能拓展

鉴于ant-design-vue上正好有table组件，对此我们对比了antd的table组件和element的table组件。2 种表格对比来看，ant-design-vue参照ant.design的React版开发出来，配置相对element更丰富，考虑到本身复杂场景支持性，更适合深度定制，最终选择了ant.design的vue版本。

图片

V2版的表格主要支持这几类场景配置（条件格式，合计行/列，单元格/行样式/内容定制等）：

业务场景&具体实现

（1）数据展示

整体就是根据不同情况设置不同的column的字段，另外为了达到点击交互下，能够获取业务的数据，需要在column上挂一些冗余数据，这样会让column的数据信息很庞大。

columns是一个tree结构，这里采用的是dfs遍历，depth标识层级，item， itemType就是冗余的数据信息，在处理业务的时候会用到。

图片

图片

（2）数据排序

图片

（3）数据过滤

（4）单元格自定义渲染

图片

（5）多级表头定制

这个实现难点主要在于把已有的列如何放到新增的表头里，保持树形children结构具体实现代码也比较复杂，总共80行。

图片

图片

（6）条件格式渲染(条形图，热力图）

根据设定的条件，定制表格内单元格内容的样式

图片

（7）合计行/列配置

添加合计列和行，内置min，max，avg，sum表达式，支持自定义简易字段表达式运算这个功能难点在于合计列与行交叉的场景，也就是如何计算合计列的合计行。

图片

2. 架构设计

图片

3. 渲染优化

这个阶段的交叉表，在功能上已经能够满足绝大多数分析场景，但是一些数据量大的表格反馈渲染白屏时间过长，经常会出现浏览器崩溃，表格的性能面临新的挑战。另外表格在渲染时，CPU会占满，导致其他图表也会卡住等待，形成假死的现象。我们通过分析大数据表格渲染流程，发现有30%的时间会花销在数据适配，因此我们思考能不能把数据计算部分隔离出来，计算的时候，不阻塞渲染主进程，这样的话，浏览器渲染就可以处理其他的渲染任务。在做性能优化调研时，我们引入了service worker，worker在处理cpu密集型任务有独特的优势，所以我们把数据预处理的过程交给了Worker。之前没有使用worker时，我们前端逻辑会处理很多数据初始化和计算的操作，对于一个数据量很大的表格，会导致渲染卡顿2~3s，有些个别情况会导致浏览器崩溃的现象。

Worker原理和定义：

W3C 组织早在 2014 年 5 月就提出过 Service Worker 这样的一个 HTML5 API ，主要用来做持久的离线缓存。service worker是浏览器的一个高级特性，本质是一个web worker，是独立于网页运行的脚本。

web worker这个api被造出来时，就是为了解放主线程。因为，浏览器中的JavaScript都是运行在单一个线程上，随着web业务变得越来越复杂，js中耗时间、耗资源的运算过程则会导致各种程度的性能问题。

而web worker由于独立于主线程，则可以将一些复杂的逻辑交由它来去做，完成后再通过postMessage的方法告诉主线程。service worker则是web worker的升级版本，相较于后者，前者拥有了持久离线缓存的能力。

3.3 V3版表格

在开发V2表格时，我们意识到数据处理部分不应该交给前端，列拼接上掺杂了太多的业务场景处理，另外渲染性能和崩溃问题急需解决，对此我们进行了V3版本迭代，提前对表格版本进行了技术升级，为之后的新一批列汇总行汇总，分组小计等高级交叉分析需求做好技术储备。

1. 技术选型

我们对比了react，vue及canvas生态有代表性的表格组件。综合三者优劣势最终确定了基于react的table组件。

图片

S2：https://github.com/antvis/S2

ali-react-table：https://github.com/alibaba/ali-react-table

vxe-table：https://github.com/x-extends/vxe-table/tree/v2

vxe-table设计初衷是解决单元格编辑的问题，主要用于大量增删改查的场景，性能不是它唯一的目标；S2是建立在电子表格需求上的，对筛选、排序、搜索、复制、框选、聚合分析都有诉求。

同时需要在大数据量下保持高性能，解决之前商业软件版本实现的性能问题和拓展性问题，所以它覆盖的场景更全更复杂，但是它的缺点就是定制型不强，不太适合我们自身的业务。

所以最终我们选择了ali-react-table，它本身体积小，在基础能力都满足的情况下，扩展新功能也很容易，而且在大数据量渲染下有高性能的优势。

2. 架构设计

后端接口返回数据和配置部分，基于渲染模型：左树 + 上树 => 表格，根据配置生成左树leftTree和上树topTree，构造数据源，参照了ant-design的Table组件数据源构造的流程，与自身的pipeline插件机制结合，实现了表格的交互操作（排序，筛选，分页）。

由于本项目里接入了微前端架构，采用了loadApp的方式实现了异构应用混合开发：

图片

运作流程图如下：

图片

3. 升级实践

（1）架构升级：

图片

（2）底层渲染：

虚拟滚动：长列表渲染受制于浏览器本身限制，在大量DOM下，会达到浏览器本身的渲染瓶颈，在这种情况下，虚拟滚动可以解决这种渲染问题，它是一种按需渲染的理念的体现。所以虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。

大致原理如下图：

图片

我们发现长列表在展示时，用户只会关注可视区域，其他非可视区域部分，我们可以把已经渲染的DOM销毁，不需要立即渲染的DOM延后。所以优化策略就是只渲染可见区域的内容。

在滚动事件触发后，根据滚动 Offset 调整相应渲染的内容即可。在用户看来，还是一个完整的长列表。这种懒加载的方式，和早期页面图片资源懒加载和非必须资源异步加载属于同一种思路。

在新版版本里，ali-react-table自带了虚拟滚动的特性，在大列表下，框架会自动开启，可以明显提升表格渲染性能和滚动的性能。

四、同类产品对比

4.1 技术架构对比

1. Quick BI

① 架构设计

图片

② 技术实现

  • 使用原生div和flex布局，不使用原生table表格

  • 列宽，固定列，固定表头等表格不好实现的问题，都易实现，渲染性能也较好

  • 有2个版本的表格，旧版表格使用table，在这种情况下，性能，复杂交互，分组都存在瓶颈，这一点和我们类似，新老版本的表格同时在线上应用

  • 虚拟滚动支持横向，纵向滚动

③ 优劣势

  • ali-react-table不维护了，源码不太复杂，可以二次迭代开发；基本满足交叉表所有功能；大数据量下渲染高性能

  • 接口数据略冗余

④ 备注

  • 数据结构明确行维、列维、指标列数据；

  • 数据汇总和小计是存放在后端

2. 敏捷BI

① 架构设计

图片

② 技术实现

  • 使用table布局

  • 使用position:sticky实现固定列；固定表头使用独立的单表头表格模拟，这里需要强制table设置列宽，保证列对齐

  • 支持横向，纵向虚拟滚动，在10w列下依然可以正常渲染

  • 在ali-react-table基础上扩展了按维度合并，表头筛选等feature

③ 优劣势

  • flex布局灵活，不受表格本身布局限制，易实现固定列和表头，列宽；canvas开发成本较高，bug不好调试

  • 接口数据更精简

④ 备注

  • 数据结构不明确，需要对二维数组转换，存在一定的预处理逻辑；

  • 数据结构存在冗余现象

4.2 应用场景对比

以实际测试为准

1. Quick BI

业务场景

（1）字段配置

  • 行：数据集的维度字段拖拽到行选择区

  • 列：数据集里的维度或者度量字段拖拽到列选择区

  • 过滤器：数据集字段拖拽到过滤器选择区，对字段进行筛选

（2）样式配置

  • 标题与卡片：设置标题样式

  • 备注和尾注：设置图表备注和尾注内容

  • 组件容器：设置内边距和背景色，圆角

  • 展示型配置：设置主题，表头样式，内容样式，冻结列，序号等配置

  • 功能型配置：条件格式配置，针对字段满足特定条件下突出显示配置的样式

  • 总计配置：支持列汇总和行汇总，行总计和行小计，列总计和列小计

（3）高级配置

  • 联动：图表里的字段与其他图标关联

  • 跳转：图表字段跳转传值

 技术实现

  • 实现使用原生，未使用第三方库

  • 自定义主题使用主色编辑

  • 拖拽方式交互

2. 网易有数

业务场景

  • 没有复杂的交叉表场景，只支持普通明细表

  • 配置方式主要包括主题，表头，内容的字体样式，背景，对齐等样式

  • 支持下钻，字段跳转

  • 数据集字段支持维度层级和组的概念

  • 没有虚拟滚动

 技术实现

  • 内部使用table表格实现

  • 主题配置支持上传主题json文件

3. 敏捷BI

（1）字段配置

  • 行维：数据集维度字段放置区

  • 列维：数据集维度字段放置区

  • 指标：数据集指标字段

（2）图表属性和图表样式配置

  • 支持条件格式，自定义代码样式嵌入，主题配置

（3）字段过滤

  • 使用字段过滤数据

 技术实现

  • 最开始使用smooth-dnd库，来实现从数据集字段拖拽到行列、指标区

  • 因为smooth-dnd有性能问题，不再维护等问题，就废弃掉了，使用原生的拖拽实现

  • 主题使用在线代码编辑主题，基于codemirror在线代码，接入css variables，实时应用，不需要刷新

4.3 部分核心代码实现

应用场景① ：表头筛选

代码实现：

图片

应用场景②：按维度合并

代码实现：

图片

4.4 渲染性能对比

1. Quick BI

（1）数据量级 <50列

  • 接口耗时300ms 接口大小<5kb

  • 渲染耗时 < 1s

注：数据量不是很大的情况下，数据加载忽略不计，合入到数据渲染时间，差别不大

（2）数据量级 ≥ 200列

  • 接口耗时1.88s 接口大小<10kb

  • 表格渲染 < 3s

注：数据量很大的情况下，数据加载需要单独计入时间

（3）数据量级 > 1W列

极端情况下，表格渲染崩溃

图片

2. 敏捷BI

（1）数据量级 <50列

  • 接口耗时250ms 接口大小~100kb

  • 渲染耗时 < 1s

（2）数据量级 ≥ 200列

  • 接口耗时300ms 接口大小~300kb

  • 渲染耗时 <3s

（3）数据量级 > 1W列

  • 接口耗时2s 数据大小2M

  • 渲染耗时~10s

4.5 总结

网易有数表格组件较为简单，只有简单的数据展示和排序筛选，适用于明细数据展示场景。

Quick BI表格和敏捷BI在交互，可视化能力，业务场景上都保持着同样的功能，底层实现 Quick BI采用原生DIV+Flex布局模拟表格实现，在渲染上比表格会有渲染的优势，这点是浏览器自身渲染机制决定，我们内部实现需要满足极端数据量下数据展示，所以特定做了横向的虚拟列表优化，这种场景看业务需求，否则表格会过于复杂，得不偿失。

表格渲染性能基本与Quick BI性能相当，极端情况下，敏捷BI依旧可以正常渲染，这点优于Quick BI。

五、规划

  • 数据预处理部分不由前端处理，交给后端，和后端协调好返回的数据结构，直接返回；

  • 表格扩展的功能与表格耦合严重，表格渲染不够纯净；

  • 开发一个Headless UI，不依赖渲染框架，提供一个数据适配层，同时支持在Vue3生态上使用。

参考资料：

  1. ali-react-table 站在巨人肩上，可惜不维护了

  2. ant-design table组件源码实现

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

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

相关文章

Delphi TCP服务端监听端口获取客户端RFID网络读卡器上传的刷卡数据

Delphi TCP服务端监听端口获取客户端RFID网络读卡器上传的刷卡数据

本示例使用设备介绍&#xff1a;液显WIFI无线网络HTTP协议RFID云读卡器可编程实时可控开关TTS语-淘宝网 (taobao.com) unit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,Dialogs, ComCtrls, ScktComp, StdCtrls, ScktCom…
阅读更多...
机器学习——实践

机器学习——实践

目录 一、数据集划分 1、交叉验证 2、不平衡数据的处理 代价敏感学习 二、评价指标 三、正则化、偏差和方差 为什么要标准化/归一化&#xff1f; 过拟合的处理——Dropout 过拟合的处理——Early stopping 过拟合的处理——数据增强 偏差和方差 ​编辑 一、数据集划分…
阅读更多...
【Android】画面卡顿优化列表流畅度三之RecyclerView刷新机制notifyItemRangeInserted

【Android】画面卡顿优化列表流畅度三之RecyclerView刷新机制notifyItemRangeInserted

经过长达一个多星期的反复渲染耗时记录&#xff0c;大致上有以下几个方面的地方可以优化&#xff1a; 列表组件RecyclerView刷新机制由notifyDataSetChanged()优化为notifyItemRangeInserted&#xff08;&#xff09;&#xff0c;后期有必要也会使用notifyItemRangeRemoved、n…
阅读更多...
Qt 自定义全局悬浮置顶按钮

Qt 自定义全局悬浮置顶按钮

Qt 自定义全局悬浮置顶按钮 效果 使用示例 ResetButton* resetBtn; resetBtn new ResetButton(); resetBtn->show(); resetBtn->move(QPoint(1000, 800)); connect(resetBtn, &ResetButton::clicked, this, &MainWindow::Reset);自行加入图片&#xff0c;透明…
阅读更多...
Python---练习：把8名讲师随机分配到3个教室

Python---练习：把8名讲师随机分配到3个教室

案例&#xff1a;把8名讲师随机分配到3个教室 列表嵌套&#xff1a;有3个教室[[],[],[]]&#xff0c;8名讲师[A,B,C,D,E,F,G,H]&#xff0c;将8名讲师随机分配到3个教室中。 分析&#xff1a; 思考1&#xff1a;我们第一间教室、第二间教室、第三间教室&#xff0c;怎么表示…
阅读更多...
【系统救援】 Ubuntu重启失败，报错：UNEXPECTED INCONSISTENCY； RUN fsck MANUALLY

【系统救援】 Ubuntu重启失败，报错：UNEXPECTED INCONSISTENCY； RUN fsck MANUALLY

问题定位及处理 查看错误信息&#xff1a;/dev/sda3 contains a file system with errors, check forced. /dev/sda3: Inodes that were part of a corrupted orphan linked list found. /dev/sda3: UNEXPECTED INCONSISTENCY; RUN fsck MANUALLY. (i.e., without -a or -p o…
阅读更多...
Javaweb之javascript的BOM对象的详细解析

Javaweb之javascript的BOM对象的详细解析

1.5.2 BOM对象 接下来我们学习BOM对象&#xff0c;BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能&#xff0c;可以通过操作BOM对象的相关属性或者函数来完成。例如&#xff1a…
阅读更多...
无线充，大功率小家电，智能家居，无人机快速充电等产品供电 LDR6328S芯片TYUPE-C PD诱骗电压 USB-C解决PD电源取电问题

无线充，大功率小家电，智能家居，无人机快速充电等产品供电 LDR6328S芯片TYUPE-C PD诱骗电压 USB-C解决PD电源取电问题

LDR6328S 是乐得瑞科技有限公司开发的一款兼容 USB PD、QC 和 AFC 协议的 Sink 控制器。 LDR6328S 从支持 USB PD、QC 和 AFC 协议的适配器取电&#xff0c;然后供电给设备。比如可以配置适配器输 出需要的功率&#xff0c;给无线充电器设备供电。LDR6328S 也兼容传统 USB 电源…
阅读更多...
Windows上基于Tesseract OCR5.0官方语言库的LSTM字库训练

Windows上基于Tesseract OCR5.0官方语言库的LSTM字库训练

系列文章目录 Tesseract OCR引擎 文章目录 系列文章目录前言一、LSTM字库训练是什么&#xff1f;二、使用步骤1. 环境准备1.1下载Tesseract 程序并安装1.2下载Tesseract 训练字库1.3下载工具jTessBoxEditor 2. LSTM训练2.1 将要训练的图片(jpg/tif)合并成一个文件2.2 生成box文…
阅读更多...
【Python】AppUI自动化—appium自动化元素定位、元素事件操作（17）下

【Python】AppUI自动化—appium自动化元素定位、元素事件操作（17）下

文章目录 前言一.Appium 元素定位1.定位方式种类2.如何定位2.1 id定位2.2 className定位2.3 content-desc 定位2.4 Android Uiautomator定位4.1 text定位4.2 text模糊定位4.3 text正则匹配定位4.4 resourceId定位4.5 resourceId正则匹配定位4.6 className定位4.7 className正则…
阅读更多...
QT项目|时间服务器架构

QT项目|时间服务器架构

目录 一、 创建新UI界面的标题 二、 创建服务器运行图标 2.1 查找图标&#xff0c;并截图 2.2 加入QT资源库 三、编辑UI界面 3.1 根据要求&#xff0c;绘制UI界面 3.2 对控件进行命名 3.3 加入Group Box进行美化 四、 按钮操作设置 4.1 QT加入网络 4.2 转到槽&…
阅读更多...
NetCore独立发布部署到Linux服务器

NetCore独立发布部署到Linux服务器

1、准备一台服务器 2核2G服务器足够 系统环境&#xff1a;Alibaba Cloud 3 或者其他版本的Linux操作系统都行 2、安装宝塔 yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec 安装后…
阅读更多...
高德地图添加信息弹窗，信息弹窗是单独的组件

高德地图添加信息弹窗，信息弹窗是单独的组件

//弹窗组件 <template><el-card class"box-card" ref"boxCard" v-if"showCard"><div slot"header" class"clearfix"><div class"title">{{ model.pointName }}</div><div class…
阅读更多...
Nacos使用指南

Nacos使用指南

Nacos使用指南 1.认识Nacos Nacos是SpringCloudAlibaba的一个组件&#xff0c;遵循SpringCloud规范 2.Nacos的优势 1.支持服务端主动检测服务提供者状态。临时实例采用心跳检测&#xff0c;非临时实例采用主动检测 2.Nacos支持服务列表变更消息推送&#xff0c;消息更加及…
阅读更多...
CCLink转Modbus TCP网关_CCLINK参数配置

CCLink转Modbus TCP网关_CCLINK参数配置

CCLink转Modbus TCP网关&#xff08;XD-ETHCL20&#xff09;&#xff0c;具有CCLINK主从站功能。主要用途是将各种MODBUS-TCP设备接入到CCLINK总线中。它可以作为从站连接到CCLINK总线上&#xff0c;也可以作为主站或从站连接到MODBUS-MTP总线上。 1、 配置网关的CCLINK参数&am…
阅读更多...
Docker 安装与优化

Docker 安装与优化

一、安装Docker 1、关闭防火墙 systemctl stop firewalld systemctl disable firewalld setenforce 02、安装依赖包 yum -y install yum-utils device-mapper-persistent-data lvm2#解释 yum-utils #提供了yum-config-manager工具 device mapper #是linux内核中支持逻辑卷…
阅读更多...
阿里巴巴将开源720亿参数大模型；开源语言大模型演进史

阿里巴巴将开源720亿参数大模型；开源语言大模型演进史

&#x1f989; AI新闻 &#x1f680; 阿里巴巴将开源720亿参数大模型 摘要&#xff1a;在2023世界互联网大会乌镇峰会上&#xff0c;阿里巴巴集团CEO吴泳铭透露&#xff0c;阿里巴巴即将开源720亿参数大模型&#xff0c;这将是国内参数规模最大的开源大模型。目前&#xff0c…
阅读更多...
华为eNSP实验-QinQ基本实验

华为eNSP实验-QinQ基本实验

1.拓扑图如下 PC1的设置如下&#xff1a; 在未配置VLAN之前&#xff0c;PC1可以ping通PC3&#xff0c;PC2可以ping通PC4&#xff08;因为同一网段&#xff09; 2.SW1和SW4配置VLAN <Huawei>system-view [Huawei]undo info-center enable //关闭提示信息 [Huawei]sysn…
阅读更多...
基于springboot实现协同过滤算法商品推荐系统项目【项目源码】计算机毕业设计

基于springboot实现协同过滤算法商品推荐系统项目【项目源码】计算机毕业设计

基于springboot实现协同过滤算法商品推荐系统演示 Java语言简介 Java是由SUN公司推出&#xff0c;该公司于2010年被oracle公司收购。Java本是印度尼西亚的一个叫做爪洼岛的英文名称&#xff0c;也因此得来java是一杯正冒着热气咖啡的标识。Java语言在移动互联网的大背景下具备…
阅读更多...
Pydantic：数据类型确认和解析神器

Pydantic：数据类型确认和解析神器

大家好&#xff0c;数据验证和解析是软件开发中的重要任务&#xff0c;特别是在处理用户输入或外部数据源时尤为重要&#xff0c;Python凭借其简洁性和多功能性&#xff0c;在这些任务中提供了各种库的帮助。在本文中将探讨Pydantic&#xff0c;介绍其特点&#xff0c;并提供一…
阅读更多...
最新文章

Copyright @ 2022~2023