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

什么是 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"><ElMenustyle="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 --><ElSubMenuv-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><ElMenuItemv-for="child in item.children":key="child.index":index="child.index":route="child.path">{{ child.title }}</ElMenuItem></ElSubMenu><!-- 没有子菜单时，直接显示 ElMenuItem --><ElMenuItemv-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', // 起始节点的 IDtargetNodeId: '2', // 目标节点的 IDtype: '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', // 起始节点的 IDtargetNodeId: '2', // 目标节点的 IDtype: '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 // 获取模型的IDconst 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组件到DOMsetTimeout(() => {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.rhkb.cn/news/347571.html

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

相关文章

RN：Error: /xxx/android/gradlew exited with non-zero code: 1

RN：Error: /xxx/android/gradlew exited with non-zero code: 1

问题 执行 yarn android 报错&#xff1a; 解决 这个大概率是缓存问题&#xff0c;我说一下我的解决思路 1、yarn doctor 2、根据黄色字体提示&#xff0c;说我包版本不对&#xff08;但是这个是警告应该没事&#xff0c;但是我还是装了&#xff09; npx expo install --…
阅读更多...
企事业单位安全生产月活动怎样向媒体投稿？

企事业单位安全生产月活动怎样向媒体投稿？

作为一名单位的信息宣传员,我肩负着将每一次重要活动的精彩瞬间转化为文字,向外界传递我们单位声音的重任。初入此行时,我满怀热情,坚信通过传统的方式——电子邮件投稿,能够有效地将我们的故事传播出去。然而,现实却给我上了生动的一课。 记得在筹备“安全生产月”活动的宣传时…
阅读更多...
Ubuntu22.04之解决：emacs无法输入中文问题(二百四十)

Ubuntu22.04之解决：emacs无法输入中文问题(二百四十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
代码随想录 | Day18 | 二叉树：完全二叉树的节点个数平衡二叉树

代码随想录 | Day18 | 二叉树：完全二叉树的节点个数平衡二叉树

代码随想录 | Day18 | 二叉树&#xff1a;完全二叉树的节点个数&&平衡二叉树 主要学习内容&#xff1a; 1.完全二叉树的性质&#xff0c;满二叉树的节点数量的计算 2.树的高度和深度问题要用后序遍历更加合适 222.完全二叉树的节点个数 222. 完全二叉树的节点个数…
阅读更多...
MT2096 数列分段

MT2096 数列分段

代码&#xff1a; #include <bits/stdc.h> using namespace std; const int N 1e5 10; int n, m; int a[N]; int ans 1; int main() {cin >> n >> m;for (int i 1; i < n; i)cin >> a[i];int num 0;for (int i 1; i < n; i){if (num a[i…
阅读更多...
【QT】记录一次QT程序发布exe过程

【QT】记录一次QT程序发布exe过程

记录一次QT程序发布exe过程 使用windeploy与enigma发布独立的QT程序第一步 QT编译输出 **release** 版本第二步 QT 自带 windepoyqt 补全链接库第三步 enigma virtual box压缩打包为单一exe最后【2024-06-07 17】- 【补充】 贴一个自己用的bat脚本【**QtDeploy2exe.bat**】半自…
阅读更多...
6月11号作业

6月11号作业

思维导图 #include <iostream> using namespace std; class Animal { private:string name; public:Animal(){}Animal(string name):name(name){//cout << "Animal&#xff1b;有参" << endl;}virtual void perform(){cout << "讲解员的…
阅读更多...
WordPress——Argon主题美化

WordPress——Argon主题美化

文章目录 Argon主题美化插件类类别标签页面更新管理器文章头图URL查询监视器WordPress提供Markdown语法评论区头像设置发信设置隐藏登陆备份设置缓存插件 主题文件编辑器页脚显示在线人数备案信息(包含备案信息网站运行时间)banner下方小箭头滚动效果站点功能概览下方Links功能…
阅读更多...
Spring Boot入门

Spring Boot入门

目录 前言 1.安装Spring Boot Help插件 1.1查找插件并下载 2.2安装插件 2.Idea创建SpringBoot项⽬ 3.其他方式创建SpringBoot项⽬ 3.1 Spring 官网创建 3.2 阿里云创建 3.3 不基于任何页面&#xff0c;插件进行创建 4.⽬录介绍 5.项目启动 5.1项目启动前可能会遇到…
阅读更多...
统计绘图 | 既能统计分析又能可视化绘制的技能

统计绘图 | 既能统计分析又能可视化绘制的技能

在典型的探索性数据分析工作流程中&#xff0c;数据可视化和统计建模是两个不同的阶段&#xff0c;而我们也希望能够在最终的可视化结果中将相关统计指标呈现出来&#xff0c;如何让将两种有效结合&#xff0c;使得数据探索更加简单快捷呢&#xff1f;今天这篇推文就告诉你如何…
阅读更多...
Nginx 网站服务

Nginx 网站服务

一.Nginx 概述 1.一款高性能、轻量级Web服务软件 稳定性高 系统资源消耗低 对HTTP并发连接的处理能力高 单台物理服务器可支持30000~5000个并发请求 2.Nginx与Apache区别 最核心的区别在于 Nginx 采用异步非阻塞机制&#xff0c;多个连接可以对应一个进程&#xff1b;Apache 采…
阅读更多...
HyperAI超神经 x MoonBit | 与中科院、Intel 等专家共话基础软件前沿发展与期待

HyperAI超神经 x MoonBit | 与中科院、Intel 等专家共话基础软件前沿发展与期待

本次 Meetup 将讨论 MoonBit 编程语言、RuyiSDK、WAMR和 RISC-V 等技术&#xff0c;来现场参与不仅可以学习到最前沿的技术知识&#xff0c;更可与大咖面对面互动交流心得&#xff0c;还有美食茶歇与精美礼品&#xff0c;期待你的到来&#xff01; 扫码立即报名 ⬇️ 活动详情…
阅读更多...
自动驾驶#芯片-1

自动驾驶#芯片-1

概述 汽车是芯片应用场景之一&#xff0c;汽车芯片需要具备车规级。  车规级芯片对加工工艺要求不高&#xff0c;但对质量要求高。需要经过的认证过程&#xff0c;包括质量管理标准ISO/TS 16949、可靠性标准 AEC-Q100、功能安全标准ISO26262等。  汽车内不同用途的芯片要求…
阅读更多...
SAP CS01/CS02/CS03 BOM创建维护删除BAPI使用及增强改造

SAP CS01/CS02/CS03 BOM创建维护删除BAPI使用及增强改造

BOM创建维护删除相关BAPI的使用代码参考示例&#xff0c;客户电脑只能远程桌面&#xff0c;代码没法复制粘贴出来&#xff0c;只能贴图。 创建及修改BAPI: CSAP_MAT_BOM_MAINTAIN。 删除BAPI: CSAP_MAT_BOM_DELETE。 改造BAPI: CSAP_MAT_BOM_MAINTAIN 改造点1&#xff1a;拷…
阅读更多...
贪吃蛇小游戏简单制作-C语言

贪吃蛇小游戏简单制作-C语言

文章目录 游戏背景介绍实现目标适合人群所需技术浅玩Window API什么是API控制台程序窗口大小,名称设置 Handle(句柄)获取句柄 坐标结构体设置光标位置 光标属性获取光标属性设置光标属性 按键信息获取 贪吃蛇游戏设计游戏前的初始化设置窗口的大小和名称本地化设置 宽字符Waht …
阅读更多...
金士顿U盘被写保护的解决方法

金士顿U盘被写保护的解决方法

1.适用的U盘芯片信息 USB设备ID: VID 0951 PID 1666 设备供应商: Kingston 设备名称: DataTraveler 3.0 设备修订版: 0110 产品制造商: Kingston 产品型号: DataTraveler 3.0 产品修订版: PMAP 主控厂商: Phison(群联) 主控型号: PS2251-07(PS2307) - F/W 08.03.50 [2018-…
阅读更多...
ViewModel原理分析

ViewModel原理分析

认识 ViewModel ViewModel 是一种用来存储和管理UI相关数据的类。 ViewModel 的作用可以从两个方面去理解&#xff1a; UI界面控制器&#xff1a;在最初的MVC模式中&#xff0c;由于 Activity / Fragment 承担的职责过重&#xff0c;因此在后续的 MVP、MVVM 模式中&#xff…
阅读更多...
【C++进阶】模板与仿函数：C++编程中的泛型与函数式编程思想

【C++进阶】模板与仿函数：C++编程中的泛型与函数式编程思想

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;栈和队列相关知识 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀模板进阶 &#x1f9e9;<&…
阅读更多...
OpenGauss数据库-8.权限管理

OpenGauss数据库-8.权限管理

第2关&#xff1a;权限设置 gsql -d postgres -U gaussdb -W passwd123123 CREATE ROLE lily WITH CREATEDB PASSWORD passwd123123; GRANT lily TO gaussdb; 第3关&#xff1a;管理员 gsql -d postgres -U gaussdb -W passwd123123 CREATE USER peter WITH SYSADMIN PASSWOR…
阅读更多...
uniapp地图选择位置

uniapp地图选择位置

直接上代码 通过一个点击事件调用官方api即可调用 点击调用成功后显示如下 然后选择自己所需要的位置即可
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023