网站内部链接优化方法/浙江seo
简介
React-grid-layout 是一个基于 React 的网格布局库,它可以帮助我们轻松地在网格中管理和排列组件。它提供了一个直观的 API,可以通过配置网格的大小、列数和组件的位置来实现复杂的布局,还支持对网格中组件的拖拽和重新排列。
实现
诉求
-
绘制:编排之后,可以根据配置对页面进行正确的绘制
-
拖拽:支持位置调整,拖拽之后,调整对应配置参数
-
缩放:支持大小调整,缩放之后,调整对应配置参数
-
自动调整:当配置有错误、拖拽时有碰撞时,进行自动调整;布局空间的自动优化
示例:
https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html
使用方式
const layout = [{ i: 'a', x: 0, y: 1, w: 1, h: 1, static: true },{ i: 'b', x: 1, y: 0, w: 3, h: 2 },{ i: 'c', x: 4, y: 0, w: 1, h: 2 },
];<GridLayoutlayouts={layout}margin={[10, 10]}containerPadding={[10,10]}cols=12rowHeight=150width=1200style={{}}
>{layout.map((item) => (<div key={item.i} className="item-style"><div>{item.i}</div><div>xy{item.x}/{item.y}</div><div>wh{item.w}/{item.h}</div></div>))}
</GridLayout>
绘制
容器
高度计算
const containerHeight = () => {// autoSize的情况下,不计算容器高度 if (!this.props.autoSize) { return; }// 底部坐标, 获取布局中y+h的最大值,即为容器的最大坐标h值 const nbRow = bottom(this.state.layout); const containerPaddingY = this.props.containerPadding ? this.props.containerPadding[1] : this.props.margin[1];// 计算包含margin/padding的真实高度 return ${nbRow * this.props.rowHeight + (nbRow - 1) * this.props.margin[1] + containerPaddingY * 2}px;
}
compact布局
如果直接安装上述的计算方式绘制,可能由于配置的问题,会带来页面的浪费。因此react-grid-layout会默认对纵向空间进行压缩,以避免空间的浪费,也支持设置为横向压缩,或者不压缩。在压缩过程中,很关键的一部分在于对模块间碰撞的处理。
function compact(layout, compactType, cols) {// 对静态模块不进行压缩const compareWith = getStatics(layout); // 排序 horizontal | verticalconst sorted = sortLayoutItems(layout, compactType); const out = Array(layout.length); for (let i = 0, len = sorted.length; i < len; i++) {let l = cloneLayoutItem(sorted[i]);if (!l.static) {l = compactItem(compareWith, l, compactType, cols, sorted);compareWith.push(l);}// 放回正确的位置out[layout.indexOf(sorted[i])] = l;// 在处理冲突的时候设置flagl.moved = false;}return out;
}// 压缩方法
function compactItem(compareWith: Layout,l: LayoutItem,compactType: CompactType,cols: number,fullLayout: Layout
): LayoutItem {const compactV = compactType === "vertical";const compactH = compactType === "horizontal";if (compactV) {// 垂直方向压缩,静态元素所需容器的高度 与 当前元素的纵向起始位置l.y = Math.min(bottom(compareWith), l.y);while (l.y > 0 && !getFirstCollision(compareWith, l)) {l.y--;}} else if (compactH) {while (l.x > 0 && !getFirstCollision(compareWith, l)) {l.x--;}}// 处理碰撞let collides;while ((collides = getFirstCollision(compareWith, l))) {if (compactH) {resolveCompactionCollision(fullLayout, l, collides.x + collides.w, "x");} else {resolveCompactionCollision(fullLayout, l, collides.y + collides.h, "y");}// 水平方向不超过最大值if (compactH && l.x + l.w > cols) {l.x = cols - l.w;l.y++;}}// 对上述的y--,x--做容错处理,确保没有负值l.y = Math.max(l.y, 0);l.x = Math.max(l.x, 0);return l;
}function getFirstCollision(layout: Layout,layoutItem: LayoutItem
): ?LayoutItem {for (let i = 0, len = layout.length; i < len; i++) {// collides方法: // 当前节点 或者节点出现在另一个节点的上方(下边界 > 其他节点的起始位置)/下方/右侧/左侧if (collides(layout[i], layoutItem)) return layout[i];}
}function resolveCompactionCollision(layout: Layout,item: LayoutItem,moveToCoord: number,axis: "x" | "y"
) {const sizeProp = heightWidth[axis]; // x: w, y: hitem[axis] += 1;const itemIndex = layout.map(layoutItem => {return layoutItem.i;}).indexOf(item.i);// 至少要加1个位置的情况下,其下一个元素开始判断,是否与元素碰撞for (let i = itemIndex + 1; i < layout.length; i++) {const otherItem = layout[i];// 静态元素不能动if (otherItem.static) continue;// 如果在当前元素的下方的话 breakif (otherItem.y > item.y + item.h) break;if (collides(item, otherItem)) {resolveCompactionCollision(layout,otherItem,// moveToCoord想相当于新的ymoveToCoord + item[sizeProp],axis);}}item[axis] = moveToCoord;
}
看一下紧凑布局的实际效果
const layout = [{ i: "a", x: 0, y: 0, w: 5, h: 5 },{ i: "b", x: 7, y: 6, w: 3, h: 2, minW: 2, maxW: 4, static: true },{ i: "c", x: 0, y: 10, w: 12, h: 2 },{ i: "d", x: 2, y: 16, w: 8, h: 2 },{ i: "e", x: 7, y: 9, w: 3, h: 1 }]; // 高度 (16 + 8) * 60 + 23 * 10 + 2 * 10 = 1690
compact调整之后
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7UCuxkBr-1693221682629)(https://tech-proxy.bytedance.net/tos/images/1693221360491_d79de77167d3c591075cdc27711f3ed8.png)]
看一下碰撞检测之后的处理结果
allowOverlap | preventCollision
**allowOverlap 为true时,**可以允许覆盖/重叠,并且不会对布局做压缩处理。
**preventCollision为true时,**阻止碰撞发生,在拖拽/缩放时,会有其作用
容器绘制
render() {const { className, style, isDroppable, innerRef } = this.props;//样式合并const mergedClassName = classNames(layoutClassName, className);const mergedStyle = {height: this.containerHeight(),...style,};return (<divref={innerRef}className={mergedClassName}style={mergedStyle}// 拖拽功能onDrop={isDroppable ? this.onDrop : noop}onDragLeave={isDroppable ? this.onDragLeave : noop}onDragEnter={isDroppable ? this.onDragEnter : noop}onDragOver={isDroppable ? this.onDragOver : noop}>{React.Children.map(this.props.children, child => this.processGridItem(child))}{isDroppable && this.state.droppingDOMNode && this.processGridItem(this.state.droppingDOMNode, true)}{this.placeholder()}</div>);}
GridItem
<GridItem containerWidth={width} cols={cols} margin={margin} containerPadding={containerPadding || margin} maxRows={maxRows} rowHeight={rowHeight} w={l.w} h={l.h} x={l.x} y={l.y} i={l.i} minH={l.minH} minW={l.minW} maxH={l.maxH} maxW={l.maxW} static={l.static} cancel={draggableCancel} handle={draggableHandle} // 拖拽onDragStop={this.onDragStop} onDragStart={this.onDragStart} onDrag={this.onDrag} isDraggable={draggable} // 缩放 onResizeStart={this.onResizeStart} onResize={this.onResize} onResizeStop={this.onResizeStop} isResizable={resizable} resizeHandles={resizeHandlesOptions} resizeHandle={resizeHandle} isBounded={bounded} useCSSTransforms={useCSSTransforms && mounted} usePercentages={!mounted} transformScale={transformScale} droppingPosition={isDroppingItem ? droppingPosition : undefined} > {child} </GridItem>
计算实际位置(top/left/width/height)
function calcGridItemPosition(positionParams,x,y,w,h,state
){const { margin, containerPadding, rowHeight } = positionParams;// 计算列宽 (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / colsconst colWidth = calcGridColWidth(positionParams);const out = {};// 如果gridItem正在缩放,就采用缩放时state记录的宽高(width,height)。// 通过回调函数获取布局信息if (state && state.resizing) {out.width = Math.round(state.resizing.width);out.height = Math.round(state.resizing.height);}// 反之,基于网格单元计算else {// gridUnits, colOrRowSize, marginPx// Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx)// margin值计算,会单独留一个margin在下方或者右侧out.width = calcGridItemWHPx(w, colWidth, margin[0]);out.height = calcGridItemWHPx(h, rowHeight, margin[1]);}// 如果gridItem正在拖拽,就采用拖拽时state记录的位置(left,top)// 通过回调函数获取布局信息if (state && state.dragging) {out.top = Math.round(state.dragging.top);out.left = Math.round(state.dragging.left);}// 反之,基于网格单元计算else {out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);}return out;
}
// 计算列宽
function calcGridColWidth(positionParams: PositionParams): number {const { margin, containerPadding, containerWidth, cols } = positionParams;return ((containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols);
}
// 计算宽高的实际值,最后一个margin会留在当前网格的下面
function calcGridItemWHPx(gridUnits, colOrRowSize, marginPx){// 0 * Infinity === NaN, which causes problems with resize contraintsif (!Number.isFinite(gridUnits)) return gridUnits;return Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx);
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQGZ37uY-1693221682630)(https://tech-proxy.bytedance.net/tos/images/1693221360608_b333c2cc2256a2207154e26e5bbea246.png)]
拖拽
布局拖拽处理
onDrag
onDrag: (i: string, x: number, y: number, GridDragEvent) => void = (i,x,y,{ e, node }) => {const { oldDragItem } = this.state;let { layout } = this.state;const { cols, allowOverlap, preventCollision } = this.props;const l = getLayoutItem(layout, i);if (!l) return;// Create placeholder (display only)const placeholder = {w: l.w,h: l.h,x: l.x,y: l.y,placeholder: true,i: i};const isUserAction = true;// 根据实时拖拽 生成布局layout = moveElement(layout,l,x,y,isUserAction,preventCollision,compactType(this.props),cols,allowOverlap);this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);this.setState({layout: allowOverlap? layout: compact(layout, compactType(this.props), cols),activeDrag: placeholder});};function moveElement(layout: Layout,l: LayoutItem,x: ?number,y: ?number,isUserAction: ?boolean,preventCollision: ?boolean,compactType: CompactType,cols: number,allowOverlap: ?boolean
): Layout {if (l.static && l.isDraggable !== true) return layout;if (l.y === y && l.x === x) return layout;log(`Moving element ${l.i} to [${String(x)},${String(y)}] from [${l.x},${l.y}]`);const oldX = l.x;const oldY = l.y;//只 修改 xy 更快速if (typeof x === "number") l.x = x;if (typeof y === "number") l.y = y;l.moved = true;// 排序,以便在发生碰撞的时候找最近碰撞的元素let sorted = sortLayoutItems(layout, compactType);const movingUp =compactType === "vertical" && typeof y === "number"? oldY >= y: compactType === "horizontal" && typeof x === "number"? oldX >= x: false;if (movingUp) sorted = sorted.reverse();const collisions = getAllCollisions(sorted, l);const hasCollisions = collisions.length > 0;if (hasCollisions && allowOverlap) {// 允许覆盖时 不处理return cloneLayout(layout);} else if (hasCollisions && preventCollision) {// 不允许碰撞的时候,撤销本次拖拽log(`Collision prevented on ${l.i}, reverting.`);l.x = oldX;l.y = oldY;l.moved = false;return layout;}//处理碰撞for (let i = 0, len = collisions.length; i < len; i++) {const collision = collisions[i];log(`Resolving collision between ${l.i} at [${l.x},${l.y}] and ${collision.i} at [${collision.x},${collision.y}]`);if (collision.moved) continue;if (collision.static) {// 与静态元素碰撞的时候,只能处理当前移动的元素layout = moveElementAwayFromCollision(layout,collision,l,isUserAction,compactType,cols);} else {layout = moveElementAwayFromCollision(layout,l,collision,isUserAction,compactType,cols);}}return layout;
}function moveElementAwayFromCollision(layout: Layout,collidesWith: LayoutItem,itemToMove: LayoutItem,isUserAction: ?boolean,compactType: CompactType,cols: number
): Layout {const compactH = compactType === "horizontal";const compactV = compactType !== "horizontal";const preventCollision = collidesWith.static;if (isUserAction) {isUserAction = false;// 构建元素 出现在碰撞元素的左上方const fakeItem: LayoutItem = {x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,w: itemToMove.w,h: itemToMove.h,i: "-1"};if (!getFirstCollision(layout, fakeItem)) {log(`Doing reverse collision on ${itemToMove.i} up to [${fakeItem.x},${fakeItem.y}].`);return moveElement(layout,itemToMove,compactH ? fakeItem.x : undefined,compactV ? fakeItem.y : undefined,isUserAction,preventCollision,compactType,cols);}}return moveElement(layout,itemToMove,compactH ? itemToMove.x + 1 : undefined,compactV ? itemToMove.y + 1 : undefined,isUserAction,preventCollision,compactType,cols);
}
元素拖拽处理
使用mixinDraggable函数,依赖react-draggable中的DraggableCore,为模块提供拖拽能力支持
onDrag
onDrag: (Event, ReactDraggableCallbackData) => void = (e,{ node, deltaX, deltaY }) => {const { onDrag } = this.props;if (!onDrag) return;if (!this.state.dragging) {throw new Error("onDrag called before onDragStart.");}let top = this.state.dragging.top + deltaY;let left = this.state.dragging.left + deltaX;const { isBounded, i, w, h, containerWidth } = this.props;const positionParams = this.getPositionParams();// 不得超过边界if (isBounded) {const { offsetParent } = node;if (offsetParent) {const { margin, rowHeight } = this.props;const bottomBoundary =offsetParent.clientHeight - calcGridItemWHPx(h, rowHeight, margin[1]);top = clamp(top, 0, bottomBoundary);const colWidth = calcGridColWidth(positionParams);const rightBoundary =containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);left = clamp(left, 0, rightBoundary);}}const newPosition: PartialPosition = { top, left };this.setState({ dragging: newPosition });// Call callback with this dataconst { x, y } = calcXY(positionParams, top, left, w, h);return onDrag.call(this, i, x, y, {e,node,newPosition});};
缩放
布局缩放处理
onResize
onResize: (i: string, w: number, h: number, GridResizeEvent) => void = (i,w,h,{ e, node }) => {const { layout, oldResizeItem } = this.state;const { cols, preventCollision, allowOverlap } = this.props;// 把缩放之后的新元素set到layout中,cb单独处理不可碰撞时的场景const [newLayout, l] = withLayoutItem(layout, i, l => {let hasCollisions;if (preventCollision && !allowOverlap) {const collisions = getAllCollisions(layout, { ...l, w, h }).filter(layoutItem => layoutItem.i !== l.i);hasCollisions = collisions.length > 0;if (hasCollisions) {// 只能向右下角伸缩,因此取x,y 的最小值,保证拖拽元素在碰撞let leastX = Infinity,leastY = Infinity;collisions.forEach(layoutItem => {if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);});if (Number.isFinite(leastX)) l.w = leastX - l.x;if (Number.isFinite(leastY)) l.h = leastY - l.y;}}if (!hasCollisions) {// Set new width and height.l.w = w;l.h = h;}return l;});// Shouldn't ever happen, but typechecking makes it necessaryif (!l) return;// Create placeholder element (display only)const placeholder = {w: l.w,h: l.h,x: l.x,y: l.y,static: true,i: i};this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node);// Re-compact the newLayout and set the drag placeholder.this.setState({layout: allowOverlap? newLayout: compact(newLayout, compactType(this.props), cols),activeDrag: placeholder});};
元素缩放处理
使用mixinResizable函数,依赖react-resizable中的Resizable,为模块提供缩放能力支持
onResizeHandler
onResizeHandler(e: Event,{ node, size }: { node: HTMLElement, size: Position },handlerName: string // onResizeStart, onResize, onResizeStop): void {const handler = this.props[handlerName];if (!handler) return;const { cols, x, y, i, maxH, minH } = this.props;let { minW, maxW } = this.props;// 获取新的宽高let { w, h } = calcWH(this.getPositionParams(), // margin, maxRows, cols, rowHeightsize.width,size.height,x,y);// 保证宽度至少为1minW = Math.max(minW, 1);// 最大宽度不应超过当前行剩余的宽度,缩放 可以挤掉其右侧的模块,但是无法对左侧的模块进行改变maxW = Math.min(maxW, cols - x);// 获取在上下边界内的值w = clamp(w, minW, maxW);h = clamp(h, minH, maxH);this.setState({ resizing: handlerName === "onResizeStop" ? null : size });handler.call(this, i, w, h, { e, node, size });}// px 转 格数
function calcWH(positionParams: PositionParams,width: number,height: number,x: number,y: number
): { w: number, h: number } {const { margin, maxRows, cols, rowHeight } = positionParams;const colWidth = calcGridColWidth(positionParams);let w = Math.round((width + margin[0]) / (colWidth + margin[0]));let h = Math.round((height + margin[1]) / (rowHeight + margin[1]));// 在其边界内取值w = clamp(w, 0, cols - x);h = clamp(h, 0, maxRows - y);return { w, h };
}
ResponsiveGridLayout
响应式布局,主要实现的是针对不同宽度的适配。值得注意的是,如果一定不想给每一个breakpoint配置layout的话,请一定给最大的那个breakpoint配置layout。
配置
breakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
cols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},// 固定间隔或者响应式间隔 e.g.[10,10]| `{lg: [10, 10], md: [10, 10], ...}.
margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}// 由断点查找的 layouts 对象 e.g. {lg: Layout, md: Layout, ...}
layouts: {[key: $Keys<breakpoints>]: Layout}// 回调函数
onBreakpointChange: (newBreakpoint: string, newCols: number) => void,
onLayoutChange: (currentLayout: Layout, allLayouts: {[key: $Keys<breakpoints>]: Layout}) => void,
// 页面宽度变化时的回调,可以根据需要修改 layout 或者处理其他内容
onWidthChange: (containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) => void;
流程
布局生成方法
function findOrGenerateResponsiveLayout(layouts: ResponsiveLayout<Breakpoint>,breakpoints: Breakpoints<Breakpoint>,breakpoint: Breakpoint,lastBreakpoint: Breakpoint,cols: number,compactType: CompactType
): Layout {// 如果有提供对应配置的layout 直接使用if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint]);// 另外生成let layout = layouts[lastBreakpoint];const breakpointsSorted = sortBreakpoints(breakpoints);const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));for (let i = 0, len = breakpointsAbove.length; i < len; i++) {const b = breakpointsAbove[i];if (layouts[b]) {layout = layouts[b];break;}}layout = cloneLayout(layout || []);return compact(correctBounds(layout, { cols: cols }), compactType, cols);
}
总结
**性能好:**200个模块 约268.8ms
独立的是否更新layout的判断机制
用 transform: translateY(-5px) 只是改变了视觉位置,元素本身位置还是在 0px,不改动 css 布局,因为渲染行为大多数情况下在元素本身,所以效率比 top left 要高
功能齐全
附
https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html
https://github.com/react-grid-layout/react-grid-layout/tree/master
相关文章:

react-grid-layout 实现原理介绍
简介 React-grid-layout 是一个基于 React 的网格布局库,它可以帮助我们轻松地在网格中管理和排列组件。它提供了一个直观的 API,可以通过配置网格的大小、列数和组件的位置来实现复杂的布局,还支持对网格中组件的拖拽和重新排列。 实现 诉…...

集合框架-(Collection/Map)
1.单列集合 1.1基础概要 集合中存储的是对象的地址信息,想要输出对象的信息,需要在具体的类中重写toString()方法 Collection代表单列集合,每个元素数据只包含一个值 List集合:添加的元素可以是有序、可…...

什么是单文件组件?
单文件组件形式 非单文件组件 可以理解为是通过 html 文件来使用 Vue。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><…...

国际站阿里云服务器多久会重启一次系统??
阿里云服务器是一种高性能、高可靠的云计算服务,但在长时间运行过程中,系统可能会出现一些问题,需要重启来恢复正常运行。那么,阿里云服务器多久重启一次系统呢?本文将对这个问题进行解答。 阿里云服务器重启频率 阿里…...

低成本32位单片机电动工具无感方波控制方案
RAMSUN介绍基于灵动32位微处理器MM32SPIN0230的BLDC电动工具无感方波控制方案,包括MM32SPIN0230芯片资源。 以下是电动工具无感方波控制方案的简述: MM32SPIN0230电动工具专用板 芯片介绍 MM32SPIN0230系列是灵动微MindSPIN旗下高性能的单电机控制产品…...

安防视频监控/视频集中存储/云存储平台EasyCVR平台无法播放HLS协议该如何解决?
视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同,支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强,视频能力丰富,具体可实现视频监控直播、视频轮播、视频录像、…...

MySQL如何查找某个字段值相同的数据
当我们想要查找MySQL中某个字段值相同的数据,但我们又不知道这个数据的值是什么的时候该如何操作呢? 在我的数据表中有单词表以及对应的详细信息表,如果两张表是以单词作为逻辑上的外键时,查询单词详细信息操作就可以根据word值进…...

8.react18并发模式与startTransition(搜索高亮思路)
React 18 之前,渲染是一个单一的,不间断的,同步的事务,一旦渲染开始,就不能被中断 React 18引入并发模式,它允许你将标记更新作为一个transitions,这会告诉React他们可以被中断执行.这样可以将紧急任务先更新,不紧急任务后更新. 将任务给紧急任务先执行, 优先级低的任务后执行…...

前端Vue自定义得分构成水平柱形图组件 可用于系统专业门类得分评估分析
引入Vue自定义得分构成水平柱形图组件:cc-horBarChart 随着技术的发展,传统的开发方式使得系统的复杂度越来越高,一个小小的改动或小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,…...

Linux获取纳秒级别时间
在 Linux 系统中可以使用 gettimeofday 函数来获取时间,这个函数能够以毫秒的精度来获取时间 struct timeval tv;gettimeofday(&tv, NULL);time_t cur_time tv.tv_sec;long cur_time_ms tv.tv_usec/1000;printf(“cur_time %d \n”, cur_time);printf(“cur…...

CSS中你不得不知道的盒子模型
目录 1、CSS的盒子模型1.1 css盒子模型有哪些:1.2 css盒子模型的区别1.3 通过css如何转换css盒子模型 1、CSS的盒子模型 1.1 css盒子模型有哪些: 标准盒子模型、怪异盒子模型(IE盒子模型) 1.2 css盒子模型的区别 标准盒子模型&a…...

知识储备--基础算法篇-数组
1.学习 2.数组 2.1第53题-最大子数组和 给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。 子数组 是数组中的一个连续部分。 心得:一直在纠结这个连续的事情&…...

zookeeper 理论合集
目录 系统背景 集群结构 多个节点之间的角色 节点的状态 为什么引入 Observer 存储结构 ZNode 节点结构 ZNode 创建类型 内存数据存储 数据持久化 zookeeper 的容量大小 数据同步 消息广播 崩溃恢复 如何保证顺序一致性 核心流程 Leader 选举流程 脑裂问题 …...

【pyinstaller 怎么打包python,打包后程序闪退 不打日志 找不到自建模块等问题的踩坑解决】
程序打包踩坑解决的所有问题 问题1 多个目录怎么打包 不管你包含多个层目录,引用多么复杂,只需要打包主程序所在文件即可,pyinstaller会自动寻找依赖包,如果报错自建模块找不到,参照问题3 pyinstaller main.py问题2…...

【Docker】网络
文章目录 Docker 网络基础Docker网络管理Docker网络架构CNMLibnetwork驱动 常见的网络类型 Docker 网络管理命令docker network createdocker network inspectdocker network connectdocker network disconnectdocker network prunedocker network rmdocker network ls docker …...

Linux :realpath 命令
以后可以直接用于查找相关文件 例: 输入:realpath .repo/manifests/rv1126_rv1109_linux_release.xml 输出:/home/sdk/work/rk/rv1126_rv1109/.repo/manifests/rv1126_rv1109_linux/rv1126_rv1109_linux_v3.0.2_20230406.xml根据输入的文件找到对应复制过来的型号,这个命令不…...

react17:生命周期函数
挂载时更新时 setState触发更新、父组件重新渲染时触发更新forceUpdate触发更新卸载时 react(v17.0.2)的生命周期图谱如下。 相较于16版本,17版本生命周期函数有如下变化: componentWillMount() componentWillUpdate() compone…...

腾讯内部单边拥塞算法BBR-TCPA一键脚本安装
TCPA简介 腾讯内部使用的TCPA,由腾讯TEG操作系统组研发,基于RHEL7.4源码,定制化的TCPA。团队介绍:腾讯TEG操作系统组, 2010年成立,专业的内核团队,维护研发腾讯内部linux操作系统tlinux, 保证百万级server高效稳定运行…...

【LLM】chatglm-6B模型训练和推理
本篇文章记录下 chatglm-6B 训练和推理过程 环境:Ubuntu 20.04 1.13.0cu116 chatglm-6B 源代码仓库:链接 chatglm-6B 模型权重:链接 源代码及模型 clone 到本地 这里使用的是 THUDM 在 hugging face 开源的模型。 因为模型比较大ÿ…...

性能可靠it监控系统,性能监控软件的获得来源有哪些
性能可靠的IT监控系统是企业IT运维的重要保障之一。以下是一个性能可靠的IT监控系统应该具备的特点: 高可用性 高可用性是IT监控系统的一个重要特点,它可以保证系统在24小时不间断监控的同时,保证系统服务的可用性和稳定性。为了实现高可用性…...

TCP/IP网络编程(一) 理解网络编程和套接字
文章目录 理解网络编程和套接字网络编程和套接字概要构建套接字编写 Hello World 服务器端构建请求连接套接字在Linux平台下运行 基于Linux的文件操作打开文件关闭文件将数据写入文件读取文件中的数据 理解网络编程和套接字 网络编程和套接字概要 网络编程就是编写程序使两台…...

Python 潮流周刊#18:Flask、Streamlit、Polars 的学习教程
你好,我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容,大部分为英文。标题取自其中三则分享,不代表全部内容都是该主题,特此声明。 本周刊由 Python猫 出品,精心筛选国内外的 250 信息源,为你挑选…...

装备一台ubuntu
配置远程连接: ubuntu的root用户无法远程登入问题: openssh安装命令: sudo apt-get install openssh-server 安装完成通过以下命令查看SSH是否启动 ps -e | grep ssh 如果只有ssh-agent表示还没启动,需要: /etc/i…...

为了更好和大家交流,欢迎大家加我的微信账户
因为一些懂的都懂的原因,如果我的账户显示为 此时我无法通过站内信、留言或者任何方式和大家联系。 如果看到这样的内容,可以在此评论区留下你的微信账户,我看到后会添加你。为防止其他人冒充我,我的微信号以2206结尾。...

MS1826A HDMI 多功能视频处理器 HDMI4进1出画面分割芯片
基本介绍 MS1826A 是一款多功能视频处理器,包含 4 路独立 HDMI 音视频输入通道、1 路 HDMI 音视 频输出通道以及 1 路独立可配置为输入或者输出的 SPDIF、I2S 音频信号。支持 4 个独立的字库定 制型 OSD;可处理隔行和逐行视频或者图形输入信号࿱…...

最新文献怎么找|学术最新前沿文献哪里找
查找下载最新文献最好、最快、最省事的方法就是去收录该文献的官方数据库中下载。举例说明: 有位同学求助下载一篇2023年新文献,只有DOI号10.1038/s41586-023-06281-4,遇到这种情况可以在DOI号前加上http://doi.org/输入地址栏查询该文献的篇…...

ctfshow 红包题
前言: 最近一直在搞java很少刷题,看见ctfshow的活动赶紧来复现一波~ ctfshow 红包挑战7 <?php highlight_file(__FILE__); error_reporting(2); extract($_GET); ini_set($name,$value); system("ls ".filter($_GET[1])."" )…...

SpringBoot项目(jar)部署,启动脚本
需求 SpringBoot项目(jar)部署,需要先关闭原来启动的项目,再启动新的项目。直接输入命令,费时费力,还容易出错。所以,使用脚本启动。 脚本 脚本名:start.sh 此脚本需要放置在jar包…...

大数据(四)主流大数据技术
大数据(四)主流大数据技术 一、写在前面的话 To 那些被折磨打击的好女孩(好男孩): 有些事情我们无法选择,也无法逃避伤害。 但请你在任何时候都记住: 你可能在一些人面前,一文不值&a…...

【已解决】激活虚拟环境报错:此时不应有Anaconda3\envs\[envs]\Library\ssl\cacert.pem。
新建虚拟环境后,进入虚拟环境的时候出现这样的报错: 此时不应有Anaconda3 envs yolov5 Library ssl cacert.pem。 但是之前装的虚拟环境也还能再次激活,base环境也无任何问题,仅新装的虚拟环境无法激活。 查遍了百度谷歌ÿ…...