LogicFlow 学习笔记——4. LogicFlow 基础 边 Edge

边 Edge

和节点一样，LogicFlow 也内置一些基础的边。LogicFlow 的内置边包括：

  1. 直线 - line
  2. 直角折现 - polyline
  3. 贝塞尔曲线 - bezier

新建 src/views/Example/LogicFlow/Example08.vue 并编写如下代码：

<script setup lang="ts">
// 导入 LogicFlow 库及其样式
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
// 导入 Vue 的 onMounted 钩子，用于组件挂载后的操作
import { onMounted } from 'vue'// 配置项，用于设定 LogicFlow 的交互模式，禁止图表的滚动、移动和缩放功能
const SilentConfig = {stopScrollGraph: true,stopMoveGraph: true,stopZoomGraph: true
}// 定义图表数据，包括各种形状的节点和连接它们的边
const data = {nodes: [{id: '1', // 节点的唯一标识符type: 'rect', // 节点的类型为矩形x: 100, // 矩形的 x 坐标y: 100, // 矩形的 y 坐标text: '矩形1' // 节点上显示的文本},{id: '2',type: 'ellipse', // 节点类型为椭圆x: 500,y: 100,text: '椭圆2'},{id: '3',type: 'polygon', // 节点类型为多边形x: 100,y: 250,text: '多边形3'},{id: '4',type: 'diamond', // 节点类型为菱形x: 300,y: 250,text: '菱形4'}],edges: [{sourceNodeId: '1', // 边的起始节点 IDtargetNodeId: '2', // 边的目标节点 IDstartPoint: {x: 100, // 起始点的 x 坐标y: 60 // 起始点的 y 坐标},endPoint: {x: 500, // 结束点的 x 坐标y: 50 // 结束点的 y 坐标},type: 'polyline' // 连接线类型为折线},{sourceNodeId: '2',targetNodeId: '3',type: 'line' // 连接线类型为直线},{sourceNodeId: '2',targetNodeId: '4',type: 'bezier' // 连接线类型为贝塞尔曲线}]
}// 当 Vue 组件挂载完成后执行的操作
onMounted(() => {// 创建 LogicFlow 实例，并指定容器和其他配置const lf = new LogicFlow({container: document.getElementById('container')!, // 获取 DOM 元素作为图表的容器grid: true, // 启用网格...SilentConfig // 应用静默模式配置})// 使用预定义的数据渲染图表lf.render(data)lf.translateCenter() // 将图表内容居中显示
})
</script><template><h3>Example08</h3><div id="container"></div><!-- 容器用于展示 LogicFlow 图表 -->
</template><style>
#container {/* 定义容器的宽度和高度 */width: 100%;height: 500px;
}
</style>

运行后效果如下：
在这里插入图片描述

选择自定义边继承的内置边

// 直线
import { LineEdge, PolylineEdgeModel } from "@logicflow/core";
// 折线
import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
// 贝塞尔曲线
import { BezierEdge, BezierEdgeModel } from "@logicflow/core";

基于继承的自定义边

和节点一样，LogicFlow 的边也支持基于继承的自定义机制。同样也只需同时继承view和model。但是和节点不一样的是，由于边的编辑复杂度问题，绝大多数情况下，自定义边时不推荐自定义 view。只需要在自定义 edgeModel 中样式类即可。

新建 src/views/Example/LogicFlow/component/Sequence/index.ts 代码内容如下：

// 从 @logicflow/core 导入 PolylineEdge 和 PolylineEdgeModel 类
import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core'// 创建一个名为 SequenceModel 的类，继承自 PolylineEdgeModel
class SequenceModel extends PolylineEdgeModel {// 设置属性方法setAttributes() {this.offset = 20 // 设置折线的偏移量为 20，这可能影响折线的布局或外观}// 获取动画样式方法getAnimation() {const animation = super.getAnimation() // 调用父类的方法获取默认动画设置animation.stroke = 'blue' // 设置动画的颜色为蓝色return animation // 返回配置后的动画对象}// 获取边的样式方法getEdgeStyle() {const style = super.getEdgeStyle() // 调用父类的方法获取默认边的样式const { properties } = this // 从当前模型中获取属性if (properties.isActived) {style.strokeDasharray = '4 4' // 如果边处于激活状态，设置虚线样式}style.stroke = 'orange' // 设置边的颜色为橙色return style // 返回配置后的样式对象}// 获取文本样式方法getTextStyle() {const style = super.getTextStyle() // 调用父类的方法获取默认文本样式style.color = '#3451F1' // 设置文本颜色为深蓝色style.fontSize = 30 // 设置文本字体大小为 30if (style.background) {style.background.fill = '#F2F131' // 如果有背景，设置背景颜色为浅黄色}return style // 返回配置后的文本样式}// 获取轮廓样式方法getOutlineStyle() {const style = super.getOutlineStyle() // 调用父类的方法获取默认轮廓样式style.stroke = 'red' // 设置轮廓的颜色为红色if (style.hover) {style.hover.stroke = 'red' // 如果有悬停样式，设置悬停时轮廓的颜色也为红色}return style // 返回配置后的轮廓样式}
}// 导出一个对象，包含类型、视图和模型的配置
export default {type: 'Sequence', // 自定义边的类型标识view: PolylineEdge, // 使用 PolylineEdge 作为视图model: SequenceModel // 使用 SequenceModel 作为模型
}

之后新增 src/views/Example/LogicFlow/Example09.vue，内容如下：

<script setup lang="ts">
// 导入 LogicFlow 库及其样式
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
// 导入 Vue 的 onMounted 钩子，用于组件挂载后的操作
import { onMounted } from 'vue'
import Sequence from './component/Sequence'// 配置项，用于设定 LogicFlow 的交互模式，禁止图表的滚动、移动和缩放功能
const SilentConfig = {stopScrollGraph: true,stopMoveGraph: true,stopZoomGraph: true
}// 定义图表数据，包括各种形状的节点和连接它们的边
const data = {nodes: [{id: '1',type: 'rect',x: 100,y: 100,text: '矩形'},{id: '2',type: 'circle',x: 300,y: 100,text: '圆形'},{id: '3',type: 'ellipse',x: 500,y: 100,text: '椭圆'},{id: '4',type: 'polygon',x: 100,y: 250,text: '多边形'},{id: '5',type: 'diamond',x: 300,y: 250,text: '菱形'},{id: '6',type: 'text',x: 500,y: 250,text: '纯文本节点'}],edges: [{sourceNodeId: '1',targetNodeId: '3',startPoint: {x: 100,y: 60},endPoint: {x: 500,y: 50},text: '333',type: 'Sequence'},{sourceNodeId: '3',targetNodeId: '4',type: 'line'},// TODO{sourceNodeId: '3',targetNodeId: '5',type: 'bezier'}]
}// 当 Vue 组件挂载完成后执行的操作
onMounted(() => {// 创建 LogicFlow 实例，并指定容器和其他配置const lf = new LogicFlow({container: document.getElementById('container')!, // 获取 DOM 元素作为图表的容器grid: true, // 启用网格...SilentConfig // 应用静默模式配置})lf.register(Sequence)// 使用预定义的数据渲染图表lf.render(data)lf.translateCenter() // 将图表内容居中显示
})
</script><template><h3>Example08</h3><div id="container"></div><!-- 容器用于展示 LogicFlow 图表 -->
</template><style>
#container {/* 定义容器的宽度和高度 */width: 100%;height: 500px;
}
</style>

页面效果如下：
在这里插入图片描述

自定义边文本位置

默认情况下，边上文本的位置是用户双击点击边时的位置。如果是通过 API 的方式给边添加的文本，文本位置按照如下规则。

  • line：起点和终点中间
  • poyline：最长线段中间
  • bezier：起点、终点、调整点中间
    LogicFlow支持开发者自定义文本位置，例如文本位置永远在边起点旁边。定义方式为将属性customTextPosition设置为 true，然后重写getTextPosition方法，此方法发回的坐标就是文本的坐标。

新建 src/views/Example/LogicFlow/component/CustomEdge2/index.ts 代码如下：

// 导入 @logicflow/core 中的 PolylineEdge 和 PolylineEdgeModel
import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core'// 定义一个自定义的边模型
class CustomEdgeModel extends PolylineEdgeModel {customTextPosition = true // 设置一个属性来标识是否自定义文本位置getTextStyle() {const style = super.getTextStyle() // 获取默认的文本样式// const { x: x1 } = this.pointsList[0];// const { x: x2 } = this.pointsList[1];// // if (x1 === x2) {// //   // 垂直// //   style.textWidth = 20;// // } else {// //   style.textWidth = 200;// // }style.className = 'custom-text' // 为文本样式添加一个自定义的类名，用于CSS样式定制return style}// 重写获取文本位置的方法getTextPosition() {const position = super.getTextPosition() // 获取默认的文本位置const currentPositionList = this.points.split(' ') // 将点列表字符串分割为单个点const pointsList = [] // 初始化一个数组来存储点对象// 遍历当前点列表，将字符串转换为点对象currentPositionList &&currentPositionList.forEach((item) => {const [x, y] = item.split(',')pointsList.push({ x: Number(x), y: Number(y) })})if (currentPositionList.length > 1) {let [x1, y1]: string[] | number[] = currentPositionList[0].split(',')let [x2, y2]: string[] | number[] = currentPositionList[1].split(',')let distence = 50 // 设置默认文本偏移距离x1 = Number(x1)y1 = Number(y1)x2 = Number(x2)y2 = Number(y2)// 计算文本的新位置，根据点的相对位置来调整if (x1 === x2) {// 如果 x 坐标相同，表示线是垂直的// 垂直if (y2 < y1) {distence = -50 // 如果第二个点在第一个点之上，调整偏移方向}position.y = y1 + distenceposition.x = x1} else {// 如果线是水平的或斜的if (x2 < x1) {distence = -50 // 如果第二个点在第一个点之左，调整偏移方向}position.x = x1 + distenceposition.y = y1 - 10 // 小幅下移文本，使其不直接覆盖在线上}}return position}
}class CustomEdge extends PolylineEdge {}export default {type: 'CustomEdge2',model: CustomEdgeModel,view: CustomEdge
}

之后新增 src/views/Example/LogicFlow/Example10.vue 代码如下：

<script setup lang="ts">
// 导入 LogicFlow 库及其样式
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
// 导入 Vue 的 onMounted 钩子，用于组件挂载后的操作
import { onMounted } from 'vue'
import CustomEdge2 from './component/CustomEdge2'// 配置项，用于设定 LogicFlow 的交互模式，禁止图表的滚动、移动和缩放功能
const SilentConfig = {stopScrollGraph: true,stopMoveGraph: true,stopZoomGraph: true
}// 定义图表数据，包括各种形状的节点和连接它们的边
const data = {nodes: [{id: 'rect_2',type: 'circle',x: 450,y: 300},{id: 'rect_3',type: 'rect',x: 150,y: 100}],edges: [{sourceNodeId: 'rect_3',targetNodeId: 'rect_2',type: 'CustomEdge2',text: '连线文本'}]
}// 当 Vue 组件挂载完成后执行的操作
onMounted(() => {// 创建 LogicFlow 实例，并指定容器和其他配置const lf = new LogicFlow({container: document.getElementById('container')!, // 获取 DOM 元素作为图表的容器grid: true, // 启用网格...SilentConfig // 应用静默模式配置})lf.register(CustomEdge2)lf.setDefaultEdgeType('CustomEdge2')lf.setTheme({edgeText: {textWidth: 100,overflowMode: 'autoWrap',fontSize: 10,background: {fill: '#FFFFFF'}}})// 使用预定义的数据渲染图表lf.render(data)lf.translateCenter() // 将图表内容居中显示
})
</script><template><h3>Example10</h3><div id="container"></div><!-- 容器用于展示 LogicFlow 图表 -->
</template><style>
#container {/* 定义容器的宽度和高度 */width: 100%;height: 500px;
}
</style>

页面结果如下：
在这里插入图片描述

自定义节点之间边的类型

默认情况下，通过从锚点手动连接节点生成的边为初始化edgeType指定的类型，也可以通过lf.setDefaultEdgeType(edgeType)来指定。但是当需要不同的节点之间连接的边类型不一样时，就只有自定义节点之间边的类型了。

const lf = new LogicFlow({...,// 默认边edgeType: 'bezier',// 移动已有边时会有 currentEdge 信息, 否则为空edgeGenerator: (sourceNode, targetNode, currentEdge) => {// 起始节点类型 rect 时使用 自定义的边 custom-edgeif (sourceNode.type === 'rect') return 'custom-edge'}
})

自定义箭头

在1.1.27版本后，LogicFlow支持单独自定义连线两端的箭头。和之前的自定义方式一样，支持通过主题自定义大小等基本数据和通过重写对应的方法实现完全的自定义。

主题设置

lf.setTheme({arrow: {offset: 4, // 箭头垂线长度verticalLength: 2, // 箭头底线长度},
});

自定义箭头形状

在自定义连线 view 的时候，可以重写 getEndArrow 和 getStartArrow 方法来实现自定义连线两端的图形，这两个方法可以返回的任意 svg 图形。
这里以通过连线属性中的 arrowType 来控制连线不同的外观为例。

class Connection extends PolylineEdge {getEndArrow() {const { model, graphModel } = this.props;const {id,properties: { arrowType },} = model;const { stroke, strokeWidth } = this.getArrowStyle();const pathAttr = {stroke,strokeWidth,};if (arrowType === "empty") {// 空心箭头return h("path", {...pathAttr,fill: "#FFF",d: "M -10 0  -20 -5 -30 0 -20 5 z",});} else if (arrowType === "half") {// 半箭头return h("path", {...pathAttr,d: "M 0 0 -10 5",});}return h("path", {...pathAttr,d: "M 0 0 -10 -5 -10 5 z",});}
}

自定义调整点样式

在初始化 LogicFlow 实例的时候，可以通过参数 adjustEdgeStartAndEnd 来开启调整边的起始点和结束点的功能。

在自定义连线 view 的时候，可以重写 getAdjustPointShape 方法来实现自定义调整点的样式。

// lf.js
const lf = new LogicFlow({adjustEdgeStartAndEnd: true,
});
// edge.js
class CustomEdge extends LineEdge {getAdjustPointShape(x, y, edgeModel) {return h("g", {}, [h("image", {x: x - 9,y: y - 9,width: 18,height: 18,cursor: "move",href: "data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyMnB4IiBoZWlnaHQ9IjIycHgiIHZlcnNpb249IjEuMSI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iNyIgc3Ryb2tlPSIjZmZmIiBmaWxsPSIjMjliNmYyIi8+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iMyIgc3Ryb2tlPSIjZmZmIiBmaWxsPSJ0cmFuc3BhcmVudCIvPjwvc3ZnPg==",}),]);}
}

以下为完整的样例代码，新建 src/views/Example/LogicFlow/Example11.vue 代码如下：

<script setup lang="ts">
// 导入 LogicFlow 核心库及其样式
import LogicFlow, {h, // 用于创建虚拟DOM节点LineEdge, // 基础线边类LineEdgeModel, // 基础线边模型PolylineEdge, // 基础折线边类PolylineEdgeModel // 基础折线边模型
} from '@logicflow/core'
import '@logicflow/core/dist/style/index.css' // 导入默认样式// 导入 Vue 的 onMounted 生命周期钩子
import { onMounted } from 'vue'
// 导入自定义边模块
import CustomEdge2 from './component/CustomEdge2'// 配置项，用于限制用户交互，禁用图形的滚动、移动和缩放功能
const SilentConfig = {stopScrollGraph: true,stopMoveGraph: true,stopZoomGraph: true
}// 自定义的连接类继承自 PolylineEdge，用于定义箭头的类型和样式
class Connection extends PolylineEdge {getEndArrow() {const { model } = this.props // 获取边的模型属性const {properties: { arrowType }} = model // 从模型中提取箭头类型const { stroke, strokeWidth } = model.getArrowStyle() // 获取箭头的样式const pathAttr = {stroke,strokeWidth}// 根据箭头类型返回不同的 SVG path 元素if (arrowType === 'empty') {// 空心箭头return h('path', {...pathAttr,fill: '#FFF',d: 'M -10 0  -20 -5 -30 0 -20 5 z'})} else if (arrowType === 'half') {// 半箭头return h('path', {...pathAttr,d: 'M 0 0 -10 5'})}// 默认实心箭头return h('path', {...pathAttr,d: 'M 0 0 -10 -5 -10 5 z'})}
}// 自定义的边视图，用于自定义边上的控制点形状
class CustomEdge extends LineEdge {getAdjustPointShape(x: any, y: any, edgeModel: any) {console.log(edgeModel) // 打印边模型信息// 返回一个含有 SVG 图像的组，用于表示控制点return h('g', {}, [h('image', {x: x - 9,y: y - 9,width: 18,height: 18,cursor: 'move',href: 'data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyMnB4IiBoZWlnaHQ9IjIycHgiIHZlcnNpb249IjEuMSI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iNyIgc3Ryb2tlPSIjZmZmIiBmaWxsPSIjMjliNmYyIi8+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iMyIgc3Ryb2tlPSIjZmZmIiBmaWxsPSJ0cmFuc3BhcmVudCIvPjwvc3ZnPg=='})])}
}// 定义图表数据，包括节点和边
const data = {nodes: [// 定义节点信息{id: 'rect_2',type: 'circle',x: 450,y: 300},{id: 'rect_3',type: 'rect',x: 300,y: 100},{id: 'rect_4',type: 'rect',x: 100,y: 100}],edges: [// 定义边信息{sourceNodeId: 'rect_4',targetNodeId: 'rect_2',type: 'CustomEdge',text: '连线文本1',startPoint: {x: 100,y: 100 + 40}},{sourceNodeId: 'rect_4',targetNodeId: 'rect_3',type: 'Connection',text: '连线文本2',startPoint: {x: 100,y: 100 - 40},endPoint: {x: 300,y: 100 - 40},pointsList: [{x: 100,y: 100 - 40},{x: 100,y: 100 - 80},{x: 300,y: 100 - 80},{x: 300,y: 100 - 40}],properties: {arrowType: 'empty' // 指定箭头类型}},{sourceNodeId: 'rect_3',targetNodeId: 'rect_2',type: 'CustomEdge2',text: '连线文本3'}]
}// 在 Vue 组件挂载后，初始化 LogicFlow 实例并渲染图表
onMounted(() => {const lf = new LogicFlow({container: document.getElementById('container')!, // 指定图表的 DOM 容器grid: true, // 启用网格显示adjustEdgeStartAndEnd: true, // 自动调整边的起始和结束位置...SilentConfig // 应用静默模式配置})lf.register(CustomEdge2) // 注册自定义边类型lf.register({type: 'Connection',model: PolylineEdgeModel,view: Connection})lf.register({type: 'CustomEdge',model: LineEdgeModel,view: CustomEdge})lf.setDefaultEdgeType('CustomEdge2') // 设置默认边类型lf.setTheme({edgeText: {textWidth: 100, // 设置文本框宽度overflowMode: 'autoWrap', // 自动换行模式fontSize: 10, // 字体大小background: {fill: '#FFFFFF' // 文本背景色}}})lf.render(data) // 渲染图表数据lf.translateCenter() // 居中显示图表
})
</script><template><h3>Example10</h3><div id="container"></div><!-- 图表容器 -->
</template><style>
#container {width: 100%;height: 500px;
}
</style>

效果如下：
在这里插入图片描述

样例代码
官方文档

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

图解系列 图解Kafka之Consumer

图解系列 图解Kafka之Consumer

文章目录 术语消息主题和分区集群和分区副本消费者组重新平衡组/分区再均衡消费者的分区策略群组协调者Coordinator 和群组领导者 Group Leader 流程初始化流程消费流程Consumer重平衡 消费者核心配置示例代码高级提交偏移量的几种方式自动提交手动同步提交手动异步提交提交特定…
阅读更多...
深入解析 Java 标准库：构建高效应用的基石

深入解析 Java 标准库：构建高效应用的基石

Java 标准库&#xff0c;也称为 Java API&#xff0c;是一组预先编写的类和接口&#xff0c;为 Java 应用程序提供了一系列丰富的功能。这些库被组织成包&#xff08;packages&#xff09;&#xff0c;每个包都包含了一组相关的类和接口&#xff0c;用于处理特定的任务&#xf…
阅读更多...
Python使用策略模式实现绘图功能

Python使用策略模式实现绘图功能

策略模式&#xff08;Strategy Pattern&#xff09;:允许定义一系列算法&#xff0c;将它们封装起来&#xff0c;使得它们可以互换。 实现绘制不同类型的图表&#xff08;如折线图、柱状图和饼图&#xff09;功能。 下面是一个示例&#xff0c;展示如何传入横坐标和纵坐标内容…
阅读更多...
人工智能技术应用笔记（十二）：搭建自带大模型微信，完美对接GPT-4o，Kimi等大模型，智能体平台Coze也能接

人工智能技术应用笔记（十二）：搭建自带大模型微信，完美对接GPT-4o，Kimi等大模型，智能体平台Coze也能接

许多朋友对如何搭建自己的微信机器人非常感兴趣。今天就来教大家如何操作。 一、 准备工作 一台电脑或者云服务器&#xff0c;对配置要求不高&#xff0c;一般的电脑就行 大模型API调用的Key&#xff0c;比如GPT-4o&#xff0c;Kimi&#xff0c;Deepseek&#xff08;不知道怎…
阅读更多...
使用Omnipeek进行Wifi/P2P抓包

使用Omnipeek进行Wifi/P2P抓包

前言 工作中解决Mirracast投屏连接失败的问题时&#xff0c;遇到了需要抓取wifi数据包的情况&#xff0c;记录一下配置和使用过程。 一、Omnipeek 的安装和配置 1.1 Omnipeek 安装 双击 setup.exe 进行安装 1.2 注册 注册时&#xff0c;版本写 71 &#xff0c;产生序列号和…
阅读更多...
代码随想录算法训练营第36期 last day

代码随想录算法训练营第36期 last day

最后一次更新&#xff0c;之后去复习专业课和简历 583两个字符串的删除操作 自己做出来了&#xff1a; Code: class Solution {public://找到公共子序列的最大长度dp 最小步数串1.size-dp串2.size-dp int minDistance(string word1, string word2) { vector<v…
阅读更多...
node 中间件使用例子

node 中间件使用例子

NodeJS在中间件领域有着较为广泛的应用&#xff0c;他能做一些中间层事件&#xff0c;把服务端一部分的代码抽出来&#xff0c;减少处理冗余事情付出的代价&#xff0c;同时让服务真正做业务处理而不用关心页面的事情 常见的应用场景有&#xff1a; 跨域&#xff1a;解决跨域问…
阅读更多...
二叉树左右树交换

二叉树左右树交换

leetcode 226题 翻转二叉树 题目描述 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3]…
阅读更多...
背就有效！2024下《系统架构设计师》50个高频考点汇总

背就有效！2024下《系统架构设计师》50个高频考点汇总

宝子们&#xff01;上半年软考已经结束一段时间了&#xff0c;准备备考下半年软考高级-系统架构设计师的小伙伴可以开始准备了&#xff0c;毕竟高级科目的难度可是不低的&#xff0c;相信参加过上半年架构的小伙伴深有体会。 这里给大家整理了50个高频考点&#xff0c;涵盖全书…
阅读更多...
node更改npm缓存存储位置-并配置环境变量

node更改npm缓存存储位置-并配置环境变量

更改缓存位置 node安装完成之后，在安装目录中新建一个存放缓存的文件夹node_cache 此时这个文件夹必须使用管理员权限才能更改，这使得命令行下使用npm进行下载的时候总是报权限不足的错误：permit 解决办法: 右键 -> 属性 -> 安全 -> 编辑 -> 选择user -> …
阅读更多...
【Linux】进程_3

【Linux】进程_3

文章目录 五、进程3. 进程4. 进程状态 未完待续 五、进程 3. 进程 在当前&#xff0c;我们只能通过执行可执行程序来让操作系统帮我们启动进程&#xff0c;那我们如何使用代码来自己启动进程呢&#xff1f;我们可以使用 fork() 函数。作用是创建子进程。 我们创建一个程序来…
阅读更多...
字节扣子搭建大模型擂台：匿名PK效果，用户当裁判，跑分时代要结束了

字节扣子搭建大模型擂台：匿名PK效果，用户当裁判，跑分时代要结束了

字节跳动的扣子&#xff08;coze.cn&#xff09;&#xff0c;给国产大模型们组了个大局—— 在同一个“擂台”上&#xff0c;两个大模型为一组&#xff0c;直接以匿名的方式PK效果&#xff01; 例如我们对两位参赛“选手”同时提问今年高考的题目&#xff1a; 阅读下面的材料&…
阅读更多...
探索数字化转型：提升企业客户服务竞争力的策略

探索数字化转型：提升企业客户服务竞争力的策略

当前&#xff0c;数字经济已成为引领经济发展的“主引擎”。在这一背景下&#xff0c;客户服务领域也在发生着深刻变化&#xff0c;传统的以客服热线、人工客服为核心的客户服务模式已不能满足企业发展的需要&#xff0c;而数字化转型成为企业寻求突破的必然选择。 企业可利用大…
阅读更多...
OpenAI把GPT-4原始版给了他们：研究不微调只靠提示词能走多远

OpenAI把GPT-4原始版给了他们：研究不微调只靠提示词能走多远

除了OpenAI自己&#xff0c;居然还有别人能用上GPT-4-Base版&#xff1f;&#xff1f; 也就是未经微调的预训练版&#xff0c;还不会对话聊天&#xff0c;只会补全句子的模型。 EPFL&#xff08;瑞士洛桑联邦理工&#xff09;团队申请到了访问权限&#xff0c;用于研究**“上…
阅读更多...
HCIE-QOS流量监管-拥塞管理

HCIE-QOS流量监管-拥塞管理

QOS流量监管-拥塞管理 QOS数据处理流程流量限速技术-令牌桶技术单桶单速双色标记法双桶单速三色标记法&#xff08;常用&#xff09;双桶双速三色标记法 流量监管承诺访问速率流量监管使用场景配置基于接口的流量监管配置MQC实现流量监管 流量整形流量整形的实现 (1)流量整形的…
阅读更多...
LeetCode | 21.合并两个有序链表

LeetCode | 21.合并两个有序链表

这道题也是很经典的一道题了&#xff0c;408的算法题中也考过这个思想&#xff0c;因为两个链表已是升序&#xff0c;合并只需要两个指针&#xff0c;分别指向两个表的表头&#xff0c;分别比较两个指针所指向的结点的val&#xff0c;小的就插入到目标链表里面&#xff0c;再后…
阅读更多...
鸿蒙轻内核Kconfig使用笔记

鸿蒙轻内核Kconfig使用笔记

鸿蒙轻内核使用Kconfig进行图形化配置&#xff0c;本文专门讲解下鸿蒙轻内核LiteOS-M和LiteOS-A的图形化配置方法。本文中所涉及的源码&#xff0c;均可以在开源站点 https://gitee.com/openharmony/kernel_liteos_a 、 https://gitee.com/openharmony/kernel_liteos_m 获取。本…
阅读更多...
交友系统定制版源码 相亲交友小程序源码全开源可二开 打造独特的社交交友系统

交友系统定制版源码 相亲交友小程序源码全开源可二开 打造独特的社交交友系统

交友系统源码的实现涉及到多个方面&#xff0c;包括前端页面设计、后端逻辑处理、数据库设计以及用户交互等。以下是一个简单的交友系统源码实现的基本框架和关键步骤: 1.数据库设计:用户表:存储用户基本信息&#xff0c;如用户ID、用户名、密码、头像、性别、年龄、地理位置…
阅读更多...
【我是产品经理_注册安全分析报告】

【我是产品经理_注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …
阅读更多...
go匿名函数

go匿名函数

【1】Go支持匿名函数&#xff0c;如果我们某个函数只是希望使用一次&#xff0c;可以考虑使用匿名函数 【2】匿名函数使用方式&#xff1a; &#xff08;1&#xff09;在定义匿名函数时就直接调用&#xff0c;这种方式匿名函数只能调用一次&#xff08;用的多&#xff09; &am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023