流程驱动设计研发实战

云课堂 #

课程地址：网易云课堂在线课程

github：https://github.com/chalecao/flow-engine

实现效果 #

应用市场查找“流程编辑器”，结果如下图，是我开发的可视化的流程编辑器：

1. 新建配置文件 创建目录：

• comps，用于存放功能点函数组件

• config，用于存放配置文件

• config.flow.json，存放配置文件

配置文件以.flow.json结尾。 示例：

{
  "doctorStationFlow": {
    "config": [
      [
        "handleCardNumberByBackendWeishan",
        "figureOutNameSearchType",
        "searchCardNumberByName"
      ],
      [
        "backendParserWeishan",
        "daliIdCardReadCard"
      ],
      [
        "fastKeyReadCard",
        "backendParserWeishan",
        "getMedicarePatientInfo"
      ],
      "searchPatientRequest"
    ],
    "mark": "xxxx"
  }
}

2. 设计业务流程 安装vscode插件，市场搜索流程编辑器，安装。右键config.flow.json，选择打开流程设计。

切换到节点管理，选择基础设置，设置相对组件路径，这个用于生成代码使用。

3.业务流程设计 点击添加业务流程，开始设计流程。

编辑完，注意填写流程标识，后面业务就使用这个标识来执行对应流程。点保存。

然后点生成代码，会自动生成代码

4.使用示例

import React, { useState, useEffect } from 'react';
import runnable from 'flow-engine';
import flow from './config'
export default props => {
  /**
   * 指定对应流程标识的配置流程
   * @param {*} scene 具体流程标识
   */
  const exeAlipayFlow = (scene) => {
    runnable.excute(flow(scene), {
      ...props,
      debug: {
        mode: 2, // 打印执行流程
        // mode: 1,  // debug执行流程
        disabledNodes: [], // 禁用的流程
        ...debug,
      },
    }, () => {
      // 流程最后执行完的回调函数
    });
  }
  return <div></div>
}

目录 #

章节1前端流程引擎

• 课时1初识前端流程引擎04:11
• 课时2流程引擎演示-流程设计04:36
• 课时3流程引擎演示-流程节点实现04:22
• 课时4流程引擎演示-流程驱动执行05:05

章节2流程引擎设计

• 课时5流程驱动与编码设计7大原则06:16
• 课时6流程驱动数据模型设计05:28
• 课时7串行流程设计代码实现08:35
• 课时8并行流程设计和代码实现06:47
• 课时9异常处理和调试03:09
• 课时10代码演示01:40

章节3流程可视化开发

• 课时11流程数据模型可视化配置07:04
• 课时12流程可视化代码生成与作业03:49
• 课时13流程驱动课件