作者：vivo 互联网大数据团队 - Zhu Jianchen
本文是vivo互联网大数据团队《BI数据可视化平台建设》系列文章第1篇 - 交叉表组件。
交叉表在数据分析里应用广泛，通过本文，你将了解到：
交叉表的基本概念，以及BI可视化平台常见术语。
我们的表格类组件的演化过程，以及如何通过技术调研和优化实现大数据量下渲染性能，一步一步从原先的~10s降低到3~4s。
交叉表的一些特定场景，提供了一些技术实现简易描述，对这些场景有一些宏观认识。
Worker，虚拟滚动，微应用等关键技术的实现细节。
一、背景
表格和表单在前端里面是最复杂的两类需求，在BI工具平台上，这2类组件需求更多，并且需要实现一些特有的交互展示。目前在敏捷BI平台上进行报表配置，表格类组件的使用占比达到了1/3，在可视化组件库里使用范围很广。为了满足不同的数据分析场景，表格组件主要分为分组表、交叉表、明细表三种类型，其中又以交叉表功能最为丰富强大。随着敏捷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('');
for (var i = 0; i < 2000; i++) {
data.push('');
for (var j = 0; j < 5; j++) {
data.push('' + i + ',' + j + ' ');
}
data.push(' ');
}
data.push(' ');
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，在这种情况下，性能，复杂交互，分组都存在瓶颈，这一点和我们类似，新老版本的表格同时在线上应用
虚拟滚动支持横向，纵向滚动
③ 优劣势
④ 备注
数据结构明确行维、列维、指标列数据；
数据汇总和小计是存放在后端
2. 敏捷BI
① 架构设计
② 技术实现
使用table布局
使用position:sticky实现固定列；固定表头使用独立的单表头表格模拟，这里需要强制table设置列宽，保证列对齐
支持横向，纵向虚拟滚动，在10w列下依然可以正常渲染
在ali-react-table基础上扩展了按维度合并，表头筛选等feature
③ 优劣势
④ 备注
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列
4.5 总结
网易有数表格组件较为简单，只有简单的数据展示和排序筛选，适用于明细数据展示场景。
Quick BI表格和敏捷BI在交互，可视化能力，业务场景上都保持着同样的功能，底层实现 Quick BI采用原生DIV+Flex布局模拟表格实现，在渲染上比表格会有渲染的优势，这点是浏览器自身渲染机制决定，我们内部实现需要满足极端数据量下数据展示，所以特定做了横向的虚拟列表优化，这种场景看业务需求，否则表格会过于复杂，得不偿失。
表格渲染性能基本与Quick BI性能相当，极端情况下，敏捷BI依旧可以正常渲染，这点优于Quick BI。
五、规划
参考资料：
ali-react-table 站在巨人肩上，可惜不维护了
ant-design table组件源码实现
你可能感兴趣的:(BI可视化,表格组件,交叉表,架构演进)
UI学习——cell的复用和自定义cell
Magnetic_h
ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
element实现动态路由+面包屑
软件技术NINI
vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
消息中间件有哪些常见类型
xmh-sxh-1314
java
消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
《大清方方案》| 第二话
谁佐清欢
和珅究竟说了些什么？竟能令堂堂九五之尊龙颜失色！此处暂且按下不表；单说这位乾隆皇帝，果真不愧是康熙从小带过的，一旦决定了要做的事，便杀伐决断毫不含糊。他当即亲自拟旨，着令和珅为钦差大臣，全权负责处理方方事件，并钦赐尚方宝剑，遇急则三品以下官员可先斩后奏。和珅身负皇上重托，岂敢有半点怠慢，当夜即率领相关人等，马不停蹄杀奔江汉。这一路上，和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀
Python数据分析与可视化实战指南
William数据分析
python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
WPF中的ComboBox控件几种数据绑定的方式
互联网打工人no1
wpf c#
一、用字典给ItemsSource赋值（此绑定用的地方很多，建议熟练掌握）在XMAL中：在CS文件中privatevoidBindData(){DictionarydicItem=newDictionary();dicItem.add(1,"北京");dicItem.add(2,"上海");dicItem.add(3,"广州");cmb_list.ItemsSource=dicItem;cmb_l
Pyecharts数据可视化大屏：打造沉浸式数据分析体验
我的运维人生
信息可视化 数据分析 数据挖掘 运维开发 技术共享
Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
Google earth studio 简介
陟彼高冈yu
旅游
GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
python os.environ_python os.environ 读取和设置环境变量
weixin_39605414
python os.environ
>>>importos>>>os.environ.keys()['LC_NUMERIC','GOPATH','GOROOT','GOBIN','LESSOPEN','SSH_CLIENT','LOGNAME','USER','HOME','LC_PAPER','PATH','DISPLAY','LANG','TERM','SHELL','J2REDIR','LC_MONETARY','QT_QPA
LLM 词汇表
落难Coder
LLMs NLP 大语言模型 大模型 llama 人工智能
Contextwindow“上下文窗口”是指语言模型在生成新文本时能够回溯和参考的文本量。这不同于语言模型训练时所使用的大量数据集，而是代表了模型的“工作记忆”。较大的上下文窗口可以让模型理解和响应更复杂和更长的提示，而较小的上下文窗口可能会限制模型处理较长提示或在长时间对话中保持连贯性的能力。Fine-tuning微调是使用额外的数据进一步训练预训练语言模型的过程。这使得模型开始表示和模仿微调数
郎朗大婚娶公主：所有光环的背后，都是十年如一日的自律
简小尘
近日，关于郎朗大婚的新闻上了热搜，看了新娘的照片，既有天使般的面容，更有魔鬼般的身材，关键是人家还身世好，又有才华，这真的是让所有男人羡慕嫉妒恨哪。有些人不禁会想，“凭什么郎朗的人生就象开挂了一样，可我却每天都活得这么狼狈！”其实，每个开挂的人生背后，都是苦行僧般的自律。01欲戴王冠，必承其重。练琴不能只靠兴趣，更需要自律！我们先来看一下朗朗在小时候的作息时间表：早晨5:45起床，练琴1小时。中午
SQL Server_查询某一数据库中的所有表的内容
qq_42772833
SQL Server 数据库 sqlserver
1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM
利用LangChain的StackExchange组件实现智能问答系统
nseejrukjhad
langchain microsoft 数据库 python
利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
在一台Ubuntu计算机上构建Hyperledger Fabric网络
落叶无声9
区块链 超级账本 Hyperledger fabric 区块链 ubuntu 构建 hyperledger fabric
在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
MYSQL面试系列-04
king01299
面试 mysql 面试
MYSQL面试系列-0417.关于redolog和binlog的刷盘机制、redolog、undolog作用、GTID是做什么的？innodb_flush_log_at_trx_commit及sync_binlog参数意义双117.1innodb_flush_log_at_trx_commit该变量定义了InnoDB在每次事务提交时，如何处理未刷入（flush）的重做日志信息（redolog）。它
pyecharts——绘制柱形图折线图
2224070247
信息可视化 python java 数据可视化
一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据
CX8903：Ebike自行车仪表电源方案开发,Ebike智能仪表电源芯片
诚芯微科技
社交电子
CX8903：电动Ebike自行车仪表电源方案开发,Ebike智能仪表电源芯片推荐。电动助力自行车EBIKE凭借其环保、健康、低噪、和便捷等特点，成为了越来越受欢迎的骑行便利交通工具。提供电动Ebike自行车仪表电源方案开发、E-BIKE电动助力自行车仪表供电电源解决方案。CX8903采用100V高压制造工艺（芯片最高耐压可到100V以上），SOP-8L贴片封装，CX8903内置100V/90mΩ
数据仓库——维度表一致性
墨染丶eye
背诵 数据仓库
数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
高级 ECharts 技巧：自定义图表主题与样式
SnowMan1993
echarts 信息可视化 数据分析
ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
Redis系列：Geo 类型赋能亿级地图位置计算
Ly768768
redis bootstrap 数据库
1前言我们在篇深刻理解高性能Redis的本质的时候就介绍过Redis的几种基本数据结构，它是基于不同业务场景而设计的：动态字符串(REDIS_STRING)：整数(REDIS_ENCODING_INT)、字符串(REDIS_ENCODING_RAW)双端列表(REDIS_ENCODING_LINKEDLIST)压缩列表(REDIS_ENCODING_ZIPLIST)跳跃表(REDIS_ENCODI
ARM驱动学习之基础小知识
JT灬新一
ARM 嵌入式 arm开发 学习
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
【PG】常见数据库、表属性设置
江无羡
数据库
PG的常见属性配置方法数据库复制、备份相关表的复制标识单表操作批量表操作链接数据库复制、备份相关表的复制标识单表操作通过ALTER语句单独更改一张表的复制标识。ALTERTABLE[tablename]REPLICAIDENTITYFULL;批量表操作通过代码块的方式，对某个schema中的所有表一起更新其复制标识。SELECTtablename,CASErelreplidentWHEN'd'TH
docker
igotyback
eureka 云原生
Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
nosql数据库技术与应用知识点
皆过客，揽星河
NoSQL nosql 数据库 大数据 数据分析 数据结构 非关系型数据库
Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)
SpringBlade dict-biz/list 接口 SQL 注入漏洞
文章永久免费只为良心
oracle 数据库
SpringBladedict-biz/list接口SQL注入漏洞POC:构造请求包查看返回包你的网址/api/blade-system/dict-biz/list?updatexml(1,concat(0x7e,md5(1),0x7e),1)=1漏洞概述在SpringBlade框架中，如果dict-biz/list接口的后台处理逻辑没有正确地对用户输入进行过滤或参数化查询（PreparedSta
数据结构之哈希表
X同学的开始
数据结构 数据结构 散列表
哈希表(散列表)出现的原因在顺序表中查找时，需要从表头开始，依次遍历比较a[i]与key的值是否相等，直到相等才返回索引i；在有序表中查找时，我们经常使用的是二分查找，通过比较key与a[i]的大小来折半查找，直到相等时才返回索引i。最终通过索引找到我们要找的元素。但是，这两种方法的效率都依赖于查找中比较的次数。我们有一种想法，能不能不经过比较，而是直接通过关键字key一次得到所要的结果呢？这时，
一比一复刻手表哪里可以买到？推荐三个可靠渠道
腕表世界
在我国，提及一比一复刻手表，人们总是充满好奇与争议。这种高度仿真的复刻手表，凭借其精湛的工艺、时尚的设计，以及与正品相差无几的质感，深受一部分消费者的喜爱。但与此同时，其背后的侵权争议也一直不断。那么，究竟哪里可以买到这些令人心动的一比一复刻手表呢？腕表咨询微信：10428850一、何为一比一复刻手表？一比一复刻手表，指的是严格按照正版手表的设计、尺寸和工艺制作的仿制品。这些手表在材质、外观、功能
Xinference如何注册自定义模型
玩人工智能的辣条哥
人工智能 AI 大模型 Xinference
环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
insert into select 主键自增_mybatis拦截器实现主键自动生成
weixin_39521651
insert into select 主键自增 mybatis delete返回值 mybatis insert返回主键 mybatis insert返回对象 mybatis plus insert返回主键 mybatis plus 插入生成id
前言前阵子和朋友聊天，他说他们项目有个需求，要实现主键自动生成，不想每次新增的时候，都手动设置主键。于是我就问他，那你们数据库表设置主键自动递增不就得了。他的回答是他们项目目前的id都是采用雪花算法来生成，因此为了项目稳定性，不会切换id的生成方式。朋友问我有没有什么实现思路，他们公司的orm框架是mybatis，我就建议他说，不然让你老大把mybatis切换成mybatis-plus。mybat
ES聚合分析原理与代码实例讲解
光剑书架上的书
大厂Offer收割机 面试题 简历 程序员读书 硅基计算 碳基计算 认知计算 生物计算 深度学习 神经网络 大数据 AIGC AGI LLM Java Python 架构设计 Agent 程序员实现财富自由
ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
集合框架
天子之骄
java 数据结构 集合框架
集合框架
集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。
从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。
简单介绍：
Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
Table Driven（表驱动）方法实例
bijian1013
java enum Table Driven 表驱动
实例一：
/**
* 驾驶人年龄段
* 保险行业，会对驾驶人的年龄做年龄段的区分判断
* 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞)
*/
public class AgePeriodTest {
//if...el
Jquery 总结
cuishikuan
java jquery Ajax Web jquery方法
1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim(' Hello ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
面向对象概念的提出
麦田的设计者
java 面向对象 面向过程
面向对象中，一切都是由对象展开的，组织代码，封装数据。
在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。
下面就结合编程语言的发展史，聊一聊面向过程和面向对象。
c语言由贝尔实
linux网口绑定
被触发
linux
刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。
一、环境描述
我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。
二、双网卡绑定步骤：
2.1 修改/etc/sysconfig/network
XML基础语法
肆无忌惮_
xml
一、什么是XML？
XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。
二、为什么学习XML？
用来解决程序间数据传输的格式问题
做配置文件
充当小型数据库
三、XML与HTM
为网页添加自己喜欢的字体
知了ing
字体 秒表 css
@font-face {
font-family: miaobiao;//定义字体名字
font-style: normal;
font-weight: 400;
src: url('font/DS-DIGI-e.eot');//字体文件
}
使用：
<label style="font-size:18px;font-famil
redis范围查询应用-查找IP所在城市
矮蛋蛋
redis
原文地址：
http://www.tuicool.com/articles/BrURbqV
需求
根据IP找到对应的城市
原来的解决方案
oracle表（ip_country）：
查询IP对应的城市：
1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994
2. select city from ip_
输入两个整数， 计算百分比
alleni123
java
public static String getPercent(int x, int total){
double result=(x*1.0)/(total*1.0);
System.out.println(result);
DecimalFormat df1=new DecimalFormat("0.0000%");
百合——————>怎么学习计算机语言
百合不是茶
java 移动开发
对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
linux下tomcat开机自启动
bijian1013
tomcat
方法一：
修改Tomcat/bin/startup.sh 为:
export JAVA_HOME=/home/java1.6.0_27
export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export PATH=$JAVA_HOME/bin:$PATH
export CATALINA_H
spring aop实例
bijian1013
java spring AOP
1.AdviceMethods.java
package com.bijian.study.spring.aop.schema;
public class AdviceMethods {
public void preGreeting() {
System.out.println("--how are you!--");
}
}
2.beans.x
[Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization
bit1129
serialization
enableComplexMapKeySerialization配置项的含义
Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。
GsonBuilder用于
【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题
bit1129
Stream
包括Spark Streaming在内的实时计算数据可靠性指的是三种级别：
1. At most once，数据最多只能接受一次，有可能接收不到
2. At least once, 数据至少接受一次，有可能重复接收
3. Exactly once 数据保证被处理并且只被处理一次，
具体的多读几遍http://spark.apache.org/docs/lates
shell脚本批量检测端口是否被占用脚本
ronin47
#!/bin/bash
cat ports |while read line
do#nc -z -w 10 $line
nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then
echo $line:ok
else
echo $line:fail
fi
done
这里的ports 既可以是文件
java-2.设计包含min函数的栈
bylijinnan
java
具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/
import java.util.ArrayList;
import java.util.List;
public class MinStack {
//maybe we can use origin array rathe
Netty源码学习-ChannelHandler
bylijinnan
java netty
一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享”
例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是
因为每一次调用decode方法时，可能数据未接收完全（incomplete），
它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的
p
java生成随机数
cngolon
java
方法一：
/**
* 生成随机数
* @author
[email protected]
* @return
*/
public synchronized static String getChargeSequenceNum(String pre){
StringBuffer sequenceNum = new StringBuffer();
Date dateTime = new D
POI读写海量数据
ctrain
海量数据
import java.io.FileOutputStream;
import java.io.OutputStream;
import org.apache.poi.xssf.streaming.SXSSFRow;
import org.apache.poi.xssf.streaming.SXSSFSheet;
import org.apache.poi.xssf.streaming
mysql 日期格式化date_format详细使用
daizj
mysql date_format 日期格式转换 日期格式化
日期转换函数的详细使用说明
DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
一个程序员分享8年的开发经验
dcj3sjt126com
程序员
在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。
明确入行的目的
很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
android欢迎界面淡入淡出效果
dcj3sjt126com
android
很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。
主要代码如下：
package com.myaibang.activity;
import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
linux 复习笔记之常见压缩命令
eksliang
tar解压 linux系统常见压缩命令 linux压缩命令 tar压缩
转载请出自出处:http://eksliang.iteye.com/blog/2109693
linux中常见压缩文件的拓展名
*.gz gzip程序压缩的文件
*.bz2 bzip程序压缩的文件
*.tar tar程序打包的数据，没有经过压缩
*.tar.gz tar程序打包后，并经过gzip程序压缩
*.tar.bz2 tar程序打包后，并经过bzip程序压缩
*.zi
Android 应用程序发送shell命令
gqdy365
android
项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！
发就发吧！
一、关于shell指令：
我们知道，shell指令是Linux里面带的
java 无损读取文本文件
hw1287789687
读取文件 无损读取 读取文本文件 charset
java 如何无损读取文本文件呢？
以下是有损的
@Deprecated
public static String getFullContent(File file, String charset) {
BufferedReader reader = null;
if (!file.exists()) {
System.out.println("getFull
Firebase 相关文章索引
justjavac
firebase
Awesome Firebase
最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。
Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。
开发者只需引用一个 API 库文件就可以使用标准 RE
C++学习重点
lx.asymmetric
C++ 笔记
1.c++面向对象的三个特性：封装性，继承性以及多态性。
2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。
3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。
4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。
&n
java bean和xml相互转换
q821424508
java bean xml xml和bean转换 java bean和xml转换
这几天在做微信公众号
做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题，
然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ，
还是贴出来记录一下
顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。
packag
C 语言初级 位运算
1140566087
位运算 c
第十章 位运算 1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节 2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低； 3、位运算符的运算功能： a、按位取反： ~01001101 = 101
14点睛Spring4.1-脚本编程
wiselyman
spring4
14.1 Scripting脚本编程
脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行;
如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦;
如果我们的应用不允许重启,这在现实的情况中也是很常见的;
在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean;
spring支持脚本
