LogicFlow 学习笔记——1. 初步使用 LogicFlow

news2025/4/19 7:19:24

什么是 LogicFlow

LogicFlow 是一个开源的前端流程图编辑器和工作流引擎，旨在帮助开发者和业务人员在网页端创建、编辑和管理复杂的业务流程和工作流。它提供了一个直观的界面和强大的功能，使得设计和管理工作流变得更加高效和便捷。
官网地址：https://site.logic-flow.cn/tutorial

LogicFlow 的主要功能

  1. 可视化编辑: 提供拖拽式的节点和连线操作，用户可以通过简单的鼠标操作设计和调整流程图。
  2. 节点和边的自定义: 支持自定义节点和边的样式、行为和属性，满足不同业务场景的需求。
  3. 插件系统: 提供丰富的插件机制，可以根据需要扩展 LogicFlow 的功能，例如增加特定类型的节点或边。
  4. 数据导入导出: 支持将流程图数据导出为 JSON 格式，便于保存和共享，同时也支持从 JSON 数据导入流程图。
  5. 事件机制: 提供丰富的事件机制，可以监听节点、边的添加、删除、修改等操作，方便与其他系统进行集成。
  6. 嵌入式使用: 可以嵌入到任何前端应用中，支持 React、Vue 等主流前端框架。

更多有关 LogicFlow 文章：https://site.logic-flow.cn/article/article01

新建前端项目编写 LogicFlow Demo

为了方便和系统化地学习 LogicFlow，这里我们将新建一个前端项目来编写对应的样例代码。我们选择使用 Vite + Vue + TypeScript 的技术栈来构建前端项目。

Vite 官网：https://www.vitejs.net/

新建前端项目

我们将创建一个使用 Vite4, Vue3, TypeScript, ES6, vue-router-next 以及 Element-Plus 的前端项目，并使用 pnpm 作为包管理器。

  1. 初始化项目
    在终端中运行以下命令来创建一个新的项目文件夹并进入该文件夹：

    mkdir logicflow_example && cd logicflow_example

  2. 创建一个新的Vite项目
    使用Vite的官方模板初始化一个新的Vue + TypeScript项目：

    pnpm create vite . -- --template vue-ts

    命令行中选择 VUE 和 TypeScript，如下图所示：
    在这里插入图片描述

  3. 安装 Vue Router 和 Element-Plus 以及安装 Node.js 类型定义文件
    安装最新版本的vue-router-next和Element-Plus：

    pnpm add vue-router@4 element-plus

    安装Node.js类型定义文件

    pnpm add -D @types/node

  4. 配置路径别名
    在 Vite 项目中配置路径别名，以便使用 ‘@’ 符号来代替相对路径，从而简化模块导入。修改 vite.config.ts 文件，设置别名让 ‘@’ 指向 src 文件夹的步骤如下：

    a. 打开或创建 Vite 配置文件
    如果你的项目中还没有 vite.config.ts 文件，请在项目根目录下创建这个文件。

    b. 编辑配置文件
    在 vite.config.ts 文件中，编辑如下内容：

    import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

    c. 在 tsconfig.json 文件中新增如下配置：
    在这里插入图片描述

  5. 配置Vue Router
    在 src 目录下新建 router 目录，并创建 index.ts 文件，代码内容如下：

    import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/example/logic_flow/example01",
    name: "LogicFlowExample01",
    component: () => import("@/views/Example/LogicFlow/Example01.vue"),
  },
  {
    path: "/example/logic_flow/example02",
    name: "LogicFlowExample02",
    component: () => import("@/views/Example/LogicFlow/Example02.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

  6. 配置 Element-Plus 和 Router
    在src/main.ts中，添加Element-Plus 和 Router 的全局引用：

    import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

  7. 新建 Router 中配置的对应的页面
    在项目中新建 views/Example/LogicFlow 目录，并创建两个 Vue 文件 Example01.vue 和 Example02.vue，如下所示：
    在这里插入图片描述
    文件内容可以自己随意编写，例如：

    <script setup lang="ts"></script>
<template>
  <h1>Example01</h1>
</template>

  8. 修改 App.vue
    修改 App.vue 内容如下：

    <script setup lang="ts">
</script>

<template>
  <RouterView />
</template>

<style scoped>
</style>

    此时启动项目pnpm run dev访问前端页面 http://localhost:5173/example/logic_flow/example01 会出现如下页面：
    在这里插入图片描述

  9. 配置样式以及进行简单布局
    为了方便页面的选择，这里可以使用 Element Plus 的 Menu 组件。首先需要修改 style.css 中的样式：

    body {
  margin: 0;
  min-height: 100vh;
}
#app {
  padding: 0;
}

    新建 layout/AppView.vue 内容如下：

    <script setup lang="ts">
import { ElMenu, ElMenuItem, ElSubMenu } from 'element-plus'
import { menuItems } from './config'
import 'element-plus/dist/index.css'
</script>

<template>
  <div id="app">
    <ElMenu
      style="height: 100vh; width: 200px"
      default-active="1"
      class="el-menu-vertical-demo"
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
      router
    >
      <!-- 使用 v-for 和 v-if/v-else 分别处理有子菜单和无子菜单的情况 -->
      <template v-for="item in menuItems">
        <!-- 当存在子菜单时，使用 ElSubMenu -->
        <ElSubMenu
          v-if="item.children"
          :key="'submenu-' + item.index"
          :index="item.index"
        >
          <template #title>
            <i v-if="item.icon" :class="item.icon" style="margin-right: 10px" />
            <span>{{ item.title }}</span>
          </template>
          <ElMenuItem
            v-for="child in item.children"
            :key="child.index"
            :index="child.index"
            :route="child.path"
          >
            {{ child.title }}
          </ElMenuItem>
        </ElSubMenu>
        <!-- 没有子菜单时，直接显示 ElMenuItem -->
        <ElMenuItem
          v-else
          :key="'menuitem-' + item.index"
          :index="item.index"
          :route="item.path"
        >
          <i v-if="item.icon" :class="item.icon" style="margin-right: 10px" />
          <span>{{ item.title }}</span>
        </ElMenuItem>
      </template>
    </ElMenu>
    <div class="main-content">
      <RouterView />
    </div>
  </div>
</template>

<style>
#app {
  display: flex;
  width: 100%;
}
.el-menu-vertical-demo {
  border-right: 0;
}
.main-content {
  flex-grow: 1;
  padding: 20px;
  width: 100%;
}
</style>

    创建layout/config/index.ts文件内容如下：

    interface MenuItem {
    index: string;
    title: string;
    icon?: string;
    path?: string;
    children?: MenuItem[];
}

export const menuItems: MenuItem[] = [
    {
        index: '1',
        title: 'LogicFlowExample',
        icon: 'fa-solid fa-desktop',
        children: [
            {
                index: '1-1',
                title: 'Example 1',
                path: '/example/logic_flow/example01'
            },
            {
                index: '1-2',
                title: 'Example 2',
                path: '/example/logic_flow/example02'
            }
        ]
    }
];

    修改 App.vue 如下所示：

    <script setup lang="ts">
import AppView from './layout/AppView.vue';
</script>

<template>
  <AppView />
</template>

<style scoped></style>

  10. 配置 eslint
    运行以下命令安装 ESLint 及其相关插件：

    pnpm add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-vue

    项目中新建 .prettierrc 文件，并添加如下内容：

    {
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

    新建.eslintrc 文件，并添加如下内容：

    {
  // "extends" 部分用于继承一系列预定义的规则集或配置。
  "extends": [
    // "eslint:recommended": 包含 ESLint 的核心规则集，这些规则可以检测JavaScript代码中的潜在问题。
    "eslint:recommended",
    // "plugin:vue/vue3-recommended": 专为 Vue 3 设计的规则集，包含对 Vue 代码风格和最佳实践的严格检查。
    // 这个规则集适用于 Vue 3 项目，涵盖了 Vue 特定的语法和模式。
    "plugin:vue/vue3-recommended",
    // "plugin:prettier/recommended": 这是一个配置集，旨在集成 Prettier 的格式化功能到 ESLint 中。
    // 它首先使用 "eslint-plugin-prettier" 来运行 Prettier 作为 ESLint 规则，
    // 然后使用 "eslint-config-prettier" 来禁用所有可能与 Prettier 冲突的 ESLint 规则。
    "plugin:prettier/recommended"
  ],
  // "rules" 部分允许你定义或重写从 "extends" 部分继承来的规则。
  "rules": {
    // "prettier/prettier": "error": 配置 Prettier 产生的问题为 ESLint 的 "error" 级别错误。
    // 这意味着任何代码风格不符合 Prettier 配置的地方都会被 ESLint 标记为错误，
    // 这样可以在编写代码时即时纠正格式问题。
    "prettier/prettier": "error"
  }
}

    在.vscode中配置settings.json ，内容如下：

    {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": "always",
        "source.fixAll.eslint": "always"
    },
    "eslint.validate": [
        "javascript",
        "vue",
        "typescript"
    ],
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.formatOnSave": true
    }
}

    项目启动后运行如下所示：
    在这里插入图片描述

  11. 安装 Font Awesome CSS
    使用 pnpm 安装 Font Awesome 的 CSS 包

    pnpm install @fortawesome/fontawesome-free

    在 main.js 中引入

    // main.js 或 main.ts
import '@fortawesome/fontawesome-free/css/all.min.css';

    此时页面即可显示图图标：
    在这里插入图片描述

初步使用 LogicFlow

LogicFlow 分为：

  • core 包——核心包
  • extension 包——插件包（不使用插件时不需要引入）
  • engine 包——执行引擎
  1. 使用 pnpm 安装 logicflow
    pnpm install @logicflow/core --save
  2. 在 Example01.vue 中编写如下代码：
    <script setup lang="ts">
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import { onMounted } from 'vue'

// 定义图表数据，包含节点和边
const data = {
  nodes: [
    {
      id: '1',
      type: 'rect', // 节点类型为矩形
      x: 100, // 节点的 x 坐标
      y: 100, // 节点的 y 坐标
      text: '节点1' // 节点显示的文本
    },
    {
      id: '2',
      type: 'circle', // 节点类型为圆形
      x: 300, // 节点的 x 坐标
      y: 100, // 节点的 y 坐标
      text: '节点2' // 节点显示的文本
    }
  ],
  edges: [
    {
      sourceNodeId: '1', // 起始节点的 ID
      targetNodeId: '2', // 目标节点的 ID
      type: 'polyline', // 边的类型为折线
      text: '连线', // 边显示的文本
      startPoint: {
        x: 140, // 边起点的 x 坐标
        y: 100 // 边起点的 y 坐标
      },
      endPoint: {
        x: 250, // 边终点的 x 坐标
        y: 100 // 边终点的 y 坐标
      }
    }
  ]
}

// 在组件挂载时执行
onMounted(() => {
  // 创建 LogicFlow 实例
  const lf = new LogicFlow({
    container: document.getElementById('container')!, // 指定容器元素
    grid: true // 启用网格
  })
  // 渲染图表数据
  lf.render(data)
})
</script>

<template>
  <h3>Example01</h3>
  <div id="container"></div>
  <!-- 用于显示 LogicFlow 图表的容器 -->
</template>

<style>
#container {
  /* 容器宽度 */
  width: 100%;
  /* 容器高度 */
  height: 500px;
}
</style>
    运行后页面如下所示：
    在这里插入图片描述
    LogicFlow 支持 JSON 格式数据，上面代码 data 对象中 nodes 代表节点数据，edges 代表边数据

渲染节点和边

在 Example02.vue 中编写如下代码：

<script setup lang="ts">
import { LogicFlow, Definition } from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import { onMounted } from 'vue'

// 静默模式配置，禁用滚动、移动和缩放等功能
const SilentConfig = {
  isSilentMode: true, // 启用静默模式
  stopScrollGraph: true, // 禁止滚动图表
  stopMoveGraph: true, // 禁止移动图表
  stopZoomGraph: true, // 禁止缩放图表
  adjustNodePosition: true // 调整节点位置
}

// 样式配置部分，定义节点和边的样式
const styleConfig: Partial<Definition> = {
  style: {
    rect: {
      rx: 5, // 矩形节点的圆角 x 半径
      ry: 5, // 矩形节点的圆角 y 半径
      strokeWidth: 2 // 矩形节点的边框宽度
    },
    circle: {
      fill: '#f5f5f5', // 圆形节点的填充颜色
      stroke: '#fff' // 圆形节点的边框颜色
    }
  }
}

// 定义图表数据，包含节点和边
const data = {
  nodes: [
    {
      id: '1',
      type: 'rect', // 节点类型为矩形
      x: 100, // 节点的 x 坐标
      y: 100, // 节点的 y 坐标
      text: '节点1' // 节点显示的文本
    },
    {
      id: '2',
      type: 'circle', // 节点类型为圆形
      x: 300, // 节点的 x 坐标
      y: 100, // 节点的 y 坐标
      text: '节点2' // 节点显示的文本
    }
  ],
  edges: [
    {
      sourceNodeId: '1', // 起始节点的 ID
      targetNodeId: '2', // 目标节点的 ID
      type: 'polyline', // 边的类型为折线
      text: '连线', // 边显示的文本
      startPoint: {
        x: 140, // 边起点的 x 坐标
        y: 100 // 边起点的 y 坐标
      },
      endPoint: {
        x: 250, // 边终点的 x 坐标
        y: 100 // 边终点的 y 坐标
      }
    }
  ]
}

// 在组件挂载时执行
onMounted(() => {
  // 创建 LogicFlow 实例
  const lf = new LogicFlow({
    container: document.getElementById('container')!, // 指定容器元素
    grid: true, // 启用网格
    ...SilentConfig, // 应用静默模式配置
    ...styleConfig // 应用样式配置
  })
  // 渲染图表数据
  lf.render(data)
})
</script>

<template>
  <h3>Example02</h3>
  <div id="container"></div>
  <!-- 用于显示 LogicFlow 图表的容器 -->
</template>

<style>
#container {
  width: 100%; /* 容器宽度 */
  height: 500px; /* 容器高度 */
}
</style>

运行后页面如下：
在这里插入图片描述

使用前端框架节点

创建 src/views/Example/LogicFlow/component/CustomEdge 目录，在目录下新建 CustomLine.vue 文件，内容如下：

<script setup lang="ts">
// 这里可以包含 TypeScript 代码或特定逻辑
</script>
<template>
  <div class="custom-edge">aaa</div>
</template>

<style scoped>
.custom-edge {
  flex: 1 1;
  text-align: center;
  background-color: #fff;
  border: 1px solid black;
  border-radius: 8px;
}
</style>

之后创建 src/views/Example/LogicFlow/component/CustomEdge/types/index.ts 文件，内容如下：

import { BaseEdgeModel, h, LineEdge } from '@logicflow/core'
import { createApp } from 'vue'
import CustomLine from '../CustomLine.vue'

// 默认的边的宽度和高度
const DEFAULT_WIDTH = 48
const DEFAULT_HEIGHT = 32

// 自定义边的模型类，继承自BaseEdgeModel
export class CustomEdgeModel extends BaseEdgeModel {
  // 获取边的样式，可以在这里自定义边的视觉效果
  getEdgeStyle() {
    const edgeStyle = super.getEdgeStyle()
    edgeStyle.strokeDasharray = '4 4' // 设置虚线样式
    edgeStyle.stroke = '#DDDFE3' // 设置线的颜色
    return edgeStyle
  }
}

// 自定义边的视图类，继承自LineEdge
export class CustomEdgeView extends LineEdge {
  // 生成边的SVG元素
  getEdge() {
    const { model } = this.props // 从props中获取模型
    const { customWidth = DEFAULT_WIDTH, customHeight = DEFAULT_HEIGHT } =
      model.getProperties() // 获取自定义的宽度和高度
    const id = model.id // 获取模型的ID
    const edgeStyle = model.getEdgeStyle() // 获取边的样式
    const { startPoint, endPoint, arrowConfig } = model // 获取起点、终点和箭头配置

    // 计算线条的SVG属性
    const lineData = {
      x1: startPoint.x,
      y1: startPoint.y,
      x2: endPoint.x,
      y2: endPoint.y
    }

    // 计算外部对象的位置和尺寸
    const positionData = {
      x: (startPoint.x + endPoint.x - customWidth) / 2,
      y: (startPoint.y + endPoint.y - customHeight) / 2,
      width: customWidth,
      height: customHeight
    }
    const wrapperStyle = {
      width: customWidth,
      height: customHeight
    }

    // 延迟挂载Vue组件到DOM
    setTimeout(() => {
      const container = document.querySelector(`#${id}`) // 查找容器
      if (container) {
        createApp(CustomLine).mount(container) // 如果容器存在，则挂载Vue组件
      }
    }, 0)

    // 返回SVG元素的集合
    return h('g', {}, [
      h('line', { ...lineData, ...edgeStyle, ...arrowConfig }), // 创建线条
      h('foreignObject', { ...positionData }, [
        // 创建外部对象，用于承载Vue组件
        h('div', {
          id,
          style: wrapperStyle,
          class: 'lf-custom-edge-wrapper'
        })
      ])
    ])
  }

  // 返回追加的SVG元素，这里默认为空
  getAppend() {
    return h('g', {}, [])
  }
}

创建 src/views/Example/LogicFlow/component/CustomEdge/index.ts 文件内容如下：

// index.ts
import { CustomEdgeModel, CustomEdgeView } from './types'

export default {
  type: 'CustomEdge',
  view: CustomEdgeView,
  model: CustomEdgeModel
}

创建 src/views/Example/LogicFlow/Example03.vue 文件，代码如下:

<script setup lang="ts">
import { LogicFlow, Definition } from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import { onMounted } from 'vue'
import CustomEdge from './component/CustomEdge'

// 静默模式配置，禁用滚动、移动和缩放等功能
const SilentConfig = {
  isSilentMode: true, // 启用静默模式
  stopScrollGraph: true, // 禁止滚动图表
  stopMoveGraph: true, // 禁止移动图表
  stopZoomGraph: true, // 禁止缩放图表
  adjustNodePosition: true // 调整节点位置
}

// 样式配置部分，定义节点和边的样式
const styleConfig: Partial<Definition> = {
  style: {
    rect: {
      rx: 5, // 矩形节点的圆角 x 半径
      ry: 5, // 矩形节点的圆角 y 半径
      strokeWidth: 2 // 矩形节点的边框宽度
    },
    circle: {
      fill: '#f5f5f5', // 圆形节点的填充颜色
      stroke: '#fff' // 圆形节点的边框颜色
    }
  }
}

// 定义图表数据，包含节点和边
const data = {
  nodes: [
    {
      type: 'rect',
      x: 100,
      y: 100,
      text: '节点1',
      id: 'node_id_1'
    },
    {
      type: 'rect',
      text: '节点2',
      x: 300,
      y: 100,
      id: 'node_id_2'
    }
  ],
  edges: [
    {
      id: 'edge_id_1',
      type: 'CustomEdge',
      sourceNodeId: 'node_id_1',
      properties: {},
      targetNodeId: 'node_id_2',
      startPoint: {
        x: 140,
        y: 100
      },
      endPoint: {
        x: 250,
        y: 100
      }
    }
  ]
}

// 在组件挂载时执行
onMounted(() => {
  // 创建 LogicFlow 实例
  const lf = new LogicFlow({
    container: document.getElementById('container')!, // 指定容器元素
    grid: true, // 启用网格
    ...SilentConfig, // 应用静默模式配置
    ...styleConfig // 应用样式配置
  })
  lf.register(CustomEdge)
  // 渲染图表数据
  lf.render(data)
  lf.translateCenter()
})
</script>

<template>
  <h3>Example03</h3>
  <div id="container"></div>
  <!-- 用于显示 LogicFlow 图表的容器 -->
</template>

<style>
#container {
  width: 100%; /* 容器宽度 */
  height: 500px; /* 容器高度 */
}
.lf-custom-edge-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

再配置下 Menu 和 Router，运行结果如下：
在这里插入图片描述

使用插件

LogicFlow 最初的目标就是支持一个扩展性强的流程绘制工具，用来满足各种业务需求。为了让LogicFlow的拓展性足够强，LogicFlow将所有的非核心功能都使用插件的方式开发，然后将这些插件放到@logicflow/extension包中。
执行命令安装插件包：

pnpm install @logicflow/extension --save

修改 Example03.vue，新增如下内容：

import '@logicflow/extension/lib/style/index.css'
import { Control } from '@logicflow/extension'
LogicFlow.use(Control)

页面内容如下：
在这里插入图片描述

完整样例代码：https://github.com/lt5227/example_code/tree/main/logicflow_example

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

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

相关文章

芯品荟 | 会议系统屏驱案例分享

芯品荟 | 会议系统屏驱案例分享

一、产品简介 智能会议系统是一种对声、光、电等各种设备进行集中控制的设备。其可实现对会议过程进行签到、表决、多国语言翻译、现场摄像视像跟踪功能&#xff0c;并对进程中处以发言管理&#xff0c;达到人性化高科技水平&#xff0c;使会议可一键掌控。 系统要做到可方便快…
阅读更多...
profiling模型性能分析与优化入门

profiling模型性能分析与优化入门

一、定义 profiler 作用入门pyproftorch.summary/torchinfo 模型参数量分析以及模型可视化profiling 参数分析-模型分析 二、实现 1.profiler 作用&#xff1a;分析模型执行时间,内存占用 CPU/GPU 端Op执行时间统计 CPU/GPU 端Op输入Tensor的维度分析 Op的内存消耗统计 2. 入…
阅读更多...
3D开发工具HOOPS如何推动3D打印应用实现数据格式转换、模型可视化？

3D开发工具HOOPS如何推动3D打印应用实现数据格式转换、模型可视化？

3D打印技术的发展已经彻底改变了制造业、医疗、建筑和设计等众多领域。这一技术的核心在于其能够将数字模型转化为实物&#xff0c;而这一过程需要强大的软件支持。在这一领域&#xff0c;HOOPS作为一种专业的图形软件开发工具&#xff0c;发挥着至关重要的作用。 本文将深入探…
阅读更多...
木板甲醛释放量气候箱法检测 木制品ENF级检测

木板甲醛释放量气候箱法检测 木制品ENF级检测

甲醛释放量气候箱法检测 甲醛释放量气候箱法检测是一种用于评估木制品中甲醛释放量的标准测试方法。这种方法通常涉及将样品放置在一个密闭的气候箱内&#xff0c;模拟一定的温度、湿度和通风条件&#xff0c;然后定期测量箱内空气中的甲醛浓度。通过这些数据&#xff0c;可以计…
阅读更多...
【ARM Cache 与 MMU 系列文章 7.5 -- ARMv8/v9 MMU FEAT_XS（XS Attribute）与 FEAT_MTE2 介绍】

【ARM Cache 与 MMU 系列文章 7.5 -- ARMv8/v9 MMU FEAT_XS（XS Attribute）与 FEAT_MTE2 介绍】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 MMU FEAT_XSXS AttributeXS Attribute 兼容性和影响XS Attribute 应用场景MMU FEAT_MTE2MTE2 主要目的和用途MTE2 工作原理MTE2 特性实现MTE2 注意事项MMU FEAT_XS 在ARMv8架构中，FE…
阅读更多...
k8s之HPA，命名空间资源限制

k8s之HPA，命名空间资源限制

一、HPA 的相关知识 HPA&#xff08;Horizontal Pod Autoscaling&#xff09;Pod 水平自动伸缩&#xff0c;Kubernetes 有一个 HPA 的资源&#xff0c;HPA 可以根据 CPU 利用率自动伸缩一个 Replication Controller、Deployment 或者Replica Set 中的 Pod 数量。 &#xff08;…
阅读更多...
docker-compose部署一款老牌apm监控软件-- pinpoint（需定制docker镜像）

docker-compose部署一款老牌apm监控软件-- pinpoint（需定制docker镜像）

一、背景 公司测试环境需要重新部署一套apm监控软件&#xff0c;选择的是我们开发都使用过的pinpoint&#xff0c;当然首选使用docker-compose部署。 可是&#xff0c;在部署的过程中&#xff0c;却遇到了不少问题。 无法直接使用官网提供的docker-compose.yml&#xff0c;需…
阅读更多...
ATA-3080C功率放大器在电解液体浸润性测试中的应用

ATA-3080C功率放大器在电解液体浸润性测试中的应用

现在的电子设备上的供电电池多为可反复充放电的锂电池&#xff0c;这种在我们日常生活中扮演着重要角色的电池&#xff0c;却有着自燃、爆炸的风险&#xff1b;随着电池在生活中的普及&#xff0c;电池检测相关行业和领域也随之发展。那么功率放大器在电解液体浸润性测试中有什…
阅读更多...
Stack详解(含动画演示)

Stack详解(含动画演示)

目录 Stack详解1、栈数据结构动画演示2、Stack的继承体系3、Stack的push (入栈)方法4、Stack的pop (出栈)方法5、Stack是如何利用Vector实现栈数据结构的&#xff1f;6、自己实现栈(不借助JDK提供的集合)7、自己实现栈(借助JDK提供的集合)利用 ArrayDeque 实现高性能的非线程安…
阅读更多...
深入理解 Vue Router 及其 `router` 和 `route` 变量

深入理解 Vue Router 及其 `router` 和 `route` 变量

深入理解 Vue Router 及其 router 和 route 变量 在使用 Vue.js 进行单页面应用开发时&#xff0c;Vue Router 是一个不可或缺的工具。它使得我们可以轻松地管理应用中的路由&#xff0c;提供了流畅的用户体验。然而&#xff0c;在实际开发中&#xff0c;许多开发者可能会混淆…
阅读更多...
在自己的电脑上搭建我的世界Java版服务器

在自己的电脑上搭建我的世界Java版服务器

很多朋友&#xff0c;喜欢玩Minecraft&#xff0c;也希望搭建一个服务器&#xff0c;用于和小伙伴联机&#xff1b; 并且&#xff0c;拥有服务器后&#xff0c;即使所有玩家都下线&#xff0c;“世界”依旧在运行&#xff0c;玩家可以随时参与其中&#xff0c;说不定一上线&am…
阅读更多...
2. 音视频H264

2. 音视频H264

视频软件基本流程 1.什么是H264 H.264是由ITU-T视频编码专家组&#xff08;VCEG&#xff09;和ISO/IEC动态图像专家组&#xff08;MPEG&#xff09;联合组成的联合视频组&#xff08;JVT&#xff0c;Joint Video Team&#xff09;提出的高度压缩数字视频编解码器标准 H265又名高…
阅读更多...
我国含氢硅油产量逐渐增长 市场集中度较高

我国含氢硅油产量逐渐增长 市场集中度较高

我国含氢硅油产量逐渐增长 市场集中度较高 含氢硅油又称为烷基硅油&#xff0c;是一种有机硅化合物&#xff0c;在常温常压下多表现为一种无色透明液体。与其他类型的硅油相比&#xff0c;含氢硅油具有良好的滋润性、疏水性、润滑性、化学稳定性等优点。经过多年发展&#xff…
阅读更多...
【C语言】10.C语言指针（5）

【C语言】10.C语言指针（5）

文章目录 1.sizeof和strlen的对比1.1 sizeof1.2 strlen1.3 sizeof 和 strlen的对⽐ 2.数组和指针笔试题解析2.1 ⼀维数组2.2 字符数组2.3 ⼆维数组 3.指针运算笔试题解析3.1 题⽬13.2 题⽬23.3 题⽬33.4 题⽬43.5 题⽬53.6 题⽬63.7 题⽬7 1.sizeof和strlen的对比 1.1 sizeof …
阅读更多...
正则表达式：从左到右一个个去匹配，api帮助文档搜：Pattern

正则表达式：从左到右一个个去匹配，api帮助文档搜：Pattern

正则匹配字符&#xff1a; \:在java里面是转义字符的意思&#xff0c;在java里面可以理解为&#xff1a;\\\ “你”匹配一个&#xff1a;. a匹配一个&#xff1a;. 匹配多个的情况&#xff1a; 正则表达式练习&#xff1a; 忽略大小写的书写方式&#xff1a;(?i) 正则表达式在…
阅读更多...
【仿真建模-anylogic】Dynamic Event原理解析

【仿真建模-anylogic】Dynamic Event原理解析

Author&#xff1a;赵志乾 Date&#xff1a;2024-06-12 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 类图 2. 原理解析 EventOriginator是Anylogic中各类事件的父类&#xff0c;对外暴露的接口主要有: 函数功能boolean isActive()判定…
阅读更多...
泛微OA E9 浏览框显示的数据根据表单字段过滤

泛微OA E9 浏览框显示的数据根据表单字段过滤

一、实现效果&#xff1a;如图所示&#xff0c;字段“物品名称”浏览框显示的数据根据“类型”字段进行过滤。 二、实现方法&#xff1a; 1、建模引擎-应用建模-浏览框-浏览框列表中单击“办公耗材”-“浏览框列表”-“操作”-“编辑” 2、sql语句中根据OA自带是示例增加where…
阅读更多...
autoware lidar-centerpoint 点云在rviz上叠加显示问题

autoware lidar-centerpoint 点云在rviz上叠加显示问题

在使用自采数据包放入autoware中的lidar_centerpoint上进行检测时发现&#xff0c;在rviz可视化上出现问题&#xff1a;多帧点云在一个位置上不断叠加&#xff0c;不能正常随时间显示。 如下图所示&#xff1a; 解决方法&#xff1a; 出现上述问题是因为autoware默认使用的是…
阅读更多...
多用户竞拍商城系统 挂售转卖竞拍商城系统源码 竞拍系统 竞拍系统开发定制 转拍闪拍系统 后端PHP+前端UNIAPP源码+教程

多用户竞拍商城系统 挂售转卖竞拍商城系统源码 竞拍系统 竞拍系统开发定制 转拍闪拍系统 后端PHP+前端UNIAPP源码+教程

挂售转卖竞拍商城系统源码/竞拍系统/转拍闪拍系统/后端PHP前端UNIAPP源码 玩法简介 ①、后台可添加商品进行挂单 ②、后台设置场次以及场次开始时间 ③、用户抢单 ④、抢单以后可选择提货或者转售 ⑤、玩家寄售需按照后台设置百分比进行加价 ⑥、玩家寄售需支付手续费(余额支付…
阅读更多...
图的存储表示

图的存储表示

目录 概述 图的定义 图的存储结构 1&#xff09;邻接矩阵 2&#xff09;邻接表 3&#xff09;十字链表 4&#xff09;邻接多重表 概述 数据结构分为两类&#xff0c;一类是具有递归结构的数据结构&#xff0c;也就是可以给出一个递归定义的数据结构&#xff0c;一类是非递归结构…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023