当前位置: 首页 > news >正文

【前端】跟着maxkb学习流程图画法

文章目录

  • 背景
    • 1. 选定学习对象-maxkb应用逻辑编排
    • 2. 确定实现框架
    • 3. 关键逻辑:查看app-node.js
    • 4. 学习开始节点绘制

背景

看看前端如何绘制流程图,界面好看点。

1. 选定学习对象-maxkb应用逻辑编排

在这里插入图片描述

2. 确定实现框架

maxkb采用vue3 + ts + logicflow2实现上面的界面,我们选择vue2 + js跟着学。

3. 关键逻辑:查看app-node.js

import { HtmlResize } from '@logicflow/extension'

app-node.js是maxkb的基础节点, 所有的节点基本都是由此扩展而来,以开始节点为例,其定义的js为:

import StartNodeVue from './index.vue'
import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
class StartNode extends AppNode {constructor (props) {super(props, StartNodeVue)}
}
export default {type: 'start-node',model: AppNodeModel,view: StartNode
}

而配置开始节点的属性字段、通过表单录入的逻辑则是在startNode/index.vue中编写。

4. 学习开始节点绘制

我们绘制一个demo级别的开始节点,通过logicflow2
在这里插入图片描述
可以看到很简陋,那么我们尝试自定义节点样式

http://www.xdnf.cn/news/3007.html

相关文章:

  • Qt QML实现Windows桌面歌词动态播放效果
  • Win10如何一键切换IP地址教程
  • ubtuntu安装docker拉取iwebsec镜像
  • 关于STM32G030和G070未初始化看门狗,程序里面喂狗会导致擦除Flash失败或进入‘HardFault_Handler’
  • WebSocket 实现数据实时推送原理
  • GPT,Bert类模型对比
  • 4.17---实现商铺和缓存与数据库双写一致以及宕机处理
  • 2025.04.17【Dendrogram】生信数据可视化:Dendrogram图表详解
  • 网络编程 - 1
  • Genspark:重新定义AI搜索与代理的全能型工具
  • 私人笔记:动手学大模型应用开发llm-universe项目环境创建
  • 【前端vue生成二维码和条形码——MQ】
  • 【随身WIFI】随身WiFi Debian系统优化教程
  • AUTOSAR图解==>AUTOSAR_SWS_DefaultErrorTracer
  • 计算机网络 - UDP协议
  • 4.15BUUCTF Ez_bypass,HardSQL,AreUSerialz,BabyUpload,CheckIn
  • 【Docker】运行错误提示 unknown shorthand flag: ‘d‘ in -d ----详细解决方法
  • jQuery入门和选择器
  • JavaScript-立即执行函数(Immediately Invoked Function Expression,IIFE)
  • 【AI量化第24篇】KhQuant 策略框架深度解析:让策略开发回归本质——基于miniQMT的量化交易回测系统开发实记
  • dumpsys--音频服务状态信息
  • ASP.NET Core Web API 配置系统集成
  • 解决 VSCode 中 NVM 配置后无法识别 Node 和 NPM 的问题
  • 京东3D空间视频生成技术探索与应用
  • 游戏引擎学习第230天
  • [图论]Kruskal
  • Windows快速切换屏幕/桌面
  • 如何自学机器学习?零基础到实战的完整路径
  • 超详细VMware虚拟机扩容磁盘容量-无坑版
  • 探索关系型数据库 MySQL