从react到xflow

从react到xflow

注意:xflow 1.0版本已经停止维护,2.0版本目前没有任何文档,也不太推荐使用

0、学习目标

可以使用react框架构建出前端web页面,并且使用xflow插入流程图

1、为什么要使用react?

优点:使用react(vue)框架开发前端页面比手搓html,css,js开发速度更快,且可用的第三方组件很多,效率高

缺点:有一定的上手成本

2、开发工具和环境准备:

nodejs,webstorm

3、前置知识准备:

语言:html、css、js、ts,ES6、JSX、TSX
环境:nodejs,yarn
打包:webpack

4、快速启动一个react

启动一个helloworld项目:https://blog.csdn.net/qq_40432886/article/details/117294503

5、使用组件加速开发

使用react后,复杂的页面被分为了多个小模块和可复用的组件,但是简单的button,form还是需要我们自己来写,所以使用别人已经写好的组件可以加速开发效率。

例如使用ant design中的button,icon等组件,需要什么就复制到自己的代码中即可

6、使用模板开发

虽然使用组件可以加速开发,但是其实很多网页都是相似的,区别很小,例如企业管理中台后台等系统的界面,

所以ant design pro直接提供了网页模板,一键启动一个后台管理系统,稍微改动一下即可定制化

7、网页如何添加流程图、ER图

有时候网页有特殊的需求,例如添加一个可视化流程图,DAG图等,我们同样可以使用别人开发好的组件继承到我们的网页中,

使用Xflow就可以很方便的在网页中集成流程图等

8、快速使用Xflow

介绍:XFlow 是 AntV 旗下, 基于 X6 图编辑引擎、面向 React 技术栈用户的图编辑应用级解决方案, 旨在让复杂的图编辑应用开发简单高效。

xflow官网: https://xflow.antv.vision/docs/tutorial/intro/getting-started/
ant design:https://ant-design.antgroup.com/components/overview-cn/
ant design pro:https://pro.ant.design/zh-CN/docs/getting-started/

可以参考这篇文章快速跑一个demo:
https://segmentfault.com/a/1190000042081353

使用前的前置知识:

语言:html、css、ts,ES6
环境:nodejs,yarn
打包:webpack
框架:react
脚手架:umi,ant design ,ant design pro
图可视化/图编辑:Xflow/X6
需求:基于react,使用ant design构建前端页面,并且使用Xflow组件插入流程图DAG图等

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

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

相关文章

解决VSCode按住Ctrl(or Command) 点击鼠标左键不跳转的问题(不能Go to Definition)

问题出现 往往在升级了VSCode以后,就会出现按住Ctrl(or Command) 点击鼠标左键不跳转的问题,这个问题很常见。 解决办法 1 进入VScode的首选项,选择设置 2 输入Go to definition,找到如下两个设置&#…

如何创建百科?建立百科词条的意义何在?九问百科营销

在营销工作实践中,小马识途营销顾问经常接到关于百科营销的咨询,现整理了最受关注的九个问题分享给热爱营销工作的小伙伴。 一、什么是百科营销? 百科营销是借助百科知识传播,可以将企业、品牌、人物所拥有的对用户有价值的信息&a…

【存储测试】fio存储性能测试工具

一、前言 GitHub地址:fio 官方文档:HOWTO 1、介绍 fio(flexible I/O Tester) 是一款由 Jens Axboe 开发的用于测评和压力/硬件验证的自由开源的软件,适用于文件及块接口性能测试。 fio常用的I/O引擎主要分为以下两种…

熬夜会秃头——beta冲刺Day3

这个作业属于哪个课程2301-计算机学院-软件工程社区-CSDN社区云这个作业要求在哪里团队作业—beta冲刺事后诸葛亮-CSDN社区这个作业的目标记录beta冲刺Day3团队名称熬夜会秃头团队置顶集合随笔链接熬夜会秃头——Beta冲刺置顶随笔-CSDN社区 目录 一、团队成员会议总结 1、成员…

【算法】单调栈题单——字典序最小⭐(一种类型的模板题)

文章目录 题目列表316. 去除重复字母⭐⭐⭐⭐⭐(类型题模板:单调栈,字典序最小)221021天池-03. 整理书架(保留数量为 limit 的字典序最小)402. 移掉 K 位数字(最多删除 k 次 前导零的处理&…

springboot + vue 智能物流管理系统

qq(2829419543)获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:springboot 前端:采用vue技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件&#xf…

『 Linux 』环境变量

文章目录 🚀什么是环境变量🚀🚀查看环境变量🚀🕹️和环境变量有关的命令🕹️ 🚀PATH环境变量🚀🕹️设置PATH环境变量🕹️ 🚀HOME环境变量&#x1…

三、C语言常见概念

目录 1. C语言是什么? 3. 编译器的选择 3.1 编译和链接 3.2 编译器的对比 6. main函数 7. printf 和 库函数 8. 关键字介绍 8.1 什么是预编译? 8.2 static 的关键词作用? 8.3 const 的作用 8.4 voliate 的作用 8.5 typedef 的作用…

Python---文件和文件夹操作

os模块 在Python中文件和文件夹的操作要借助os模块里面的相关功能,具体步骤如下: 第一步:导入os模块 import os 第二步:调用os模块中的相关方法 os.函数名() 与文件操作相关方法 编号函数功能1os.rename(目标文件名称&…

【MATLAB源码-第93期】基于matlab的白鲸优化算法(BWO)和鲸鱼优化算法(WOA)机器人栅格路径规划对比。

操作环境: MATLAB 2022a 1、算法描述 白鲸优化算法(BWO) 白鲸优化算法是受到白鲸捕食和迁徙行为启发的一种算法。其主要特点和步骤包括: 1. 搜索食物(全局搜索):算法模仿白鲸寻找食物的行为。…

执行npm run dev报Error: error:0308010C:digital envelope routines::unsupported问题

vue2element-ui项目,在执行npm run dev的时候突然报错: (node:19424) [DEP0111] DeprecationWarning: Access to process.binding(http_parser) is deprecated. (Use node --trace-deprecation ... to show where the warning was created) Er…

神策数据荣获 36 氪「WISE2023 未来商业之王 企业服务领域年度企业」

11 月 28 日,36 氪 WISE2023 商业之王大会举办。大会上,WISE2023 年度企业重磅发布,聚焦发掘推动产业发展、为经济增长提供创新动能的企业。神策数据作为专业的大数据分析和营销科技服务提供商,在数百家企业中脱颖而出&#xff0c…

diffusion DreamBooth是什么

DreamBooth 是一种利用扩散模型进行定制化图像生成的技术。通过这种技术,可以通过提供少量特定主题的参考图像,微调预训练好的扩散模型,使其能够生成包含特定主题特征的新图像。 在扩散模型的背景下,DreamBooth 的工作原理大致如…

微前端个人理解与简单总结

最近一段时间在学习微前端,一开始是看各种博客了解微前端含义、对比多种微前端框架优劣,最后选择了qiankun、micro-app、wujie这三种微前端框架进行深入研究、对比。 微前端框架 推出时间 官方文档易读性 社区讨论活跃度 配置难度 Qiankun&#xff…

避免客户开发信被限制的方法与策略

开发信是外贸或者出海企业常用的一种开发客户的方式。相较于其他的获客方式,开发信能够更加精准地投放到客户中,并且只需承担较低的成本。但是,由于一些限制管制要求,外贸人员可能会遇到开发新被限制的情况。今天,小编…

WebUI自动化学习(Selenium+Python+Pytest框架)005

基础知识学习完毕,接下来我们开始学习测试框架啦!!! 首先来回顾一下python自带的Unittest框架: Python基础学习016__UnitTest-CSDN博客文章浏览阅读97次。Testcase:测试用例:这个测试用例是UnitTest的组成部分,不是手…

基于SpringBoot校园周边美食探索及分享平台的设计与实现

摘要: 美食一直是与人们日常生活息息相关的产业。传统的电话订餐或者到店消费已经不能适应市场发展的需求。随着网络的迅速崛起,互联网日益成为提供信息的最佳俱渠道和逐步走向传统的流通领域,传统的美食业进而也面临着巨大的挑战&#xff0c…

【Linux系统化学习】揭秘 命令行参数 | 环境变量

个人主页点击直达:小白不是程序媛 Linux专栏:Linux系统化学习 代码仓库:Gitee 目录 命令行参数 环境变量 PATH 查看PATH $PWD 查看环境变量PWD $HOME 查看系统支持的环境变量 获取环境变量 命令行参数 在C/C编程语言中我们有一个…

快速上手PostMan,了解PostMan的基本使用

快速上手PostMan PostMan是一个可扩展的API开发和测试协同平台工具有网页版和独立客户端,推荐安装独立客户端 创建WorkSpace工作空间 类似于GitHub的个人空间可以起到云备份的作用 发送请求 发送Get请求 发送Post请求,设置请求体的格式是表单数据即namevalue的格式 发送Pos…

一个较为实用的日志类【Python】

文章目录 前言一、LogUtil 类提供了以下功能二、代码三、使用 前言 在软件开发中,日志记录是一项重要的任务,它可以帮助我们跟踪应用程序的行为、故障排查和性能分析。为了简化日志记录的过程并提供更多的灵活性,下面介绍一个名为 LogUtil 的…