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

使用 Blazor 和 Elsa Workflows 作为引擎的工作流系统开发

        开发一个完整的工作流系统使用 Blazor 和 Elsa Workflows 作为引擎,可以实现一个功能强大的工作流管理和设计系统。下面将提供详细的步骤和代码实现,展示如何在 Blazor 中开发一个基于 Elsa Workflows 的工作流系统。

项目概述

        我们的工作流系统将包含以下功能:

  • 使用 Elsa Workflows 创建和管理工作流。
  • 在 Blazor 前端界面中展示工作流的任务列表。
  • 用户能够执行工作流的任务(如审批、拒绝)。
  • 支持任务状态更新和流程流转。

1. 安装依赖

       首先,我们需要在 Blazor 项目中安装 Elsa Workflows 相关的 NuGet 包。

dotnet add package Elsa.Core 
dotnet add package Elsa.Activities.Http 
dotnet add package Elsa.Activities.Console 

这些包将帮助我们集成 Elsa 引擎,并使用 HTTP 和控制台活动。

2. 设置 Elsa 配置和工作流引擎

Startup.csProgram.cs 中配置 Elsa 工作流引擎。

using Elsa;
using Elsa.Persistence.EntityFramework.Core.Extensions;
using Elsa.Services;public class Program
{public static void Main(string[] args){CreateHostBuilder(args).Build().Run();}public static IHostBuilder CreateHostBuilder(string[] args) =>Host.CreateDefaultBuilder(args).ConfigureServices((hostContext, services) =>{services.AddElsa(options => options.UseEntityFrameworkPersistence(options =>{options.UseSqlite("Data Source=elsa_workflows.db");}).AddConsoleActivities().AddHttpActivities());// Add Blazor Server Servicesservices.AddRazorComponents().AddInteractiveComponents();});
}

        此配置初始化了 Elsa 工作流引擎,并将工作流数据存储在 SQLite 数据库中。你可以根据需要选择其他数据库存储类型。

3. 定义工作流

       我们需要创建一个工作流并定义其步骤。假设我们创建一个审批流程工作流。

using Elsa.Builders;
using Elsa.Services;
using Elsa.Activities.Console;
using Elsa.Activities.Http;public class ApprovalWorkflow : IWorkflow
{public string Id => "ApprovalWorkflow";public void Build(IWorkflowBuilder builder){builder.StartWith<HttpRequestActivity>().Then<ApprovalTask>().Then<EndTask>();}
}

        在这个例子中,ApprovalWorkflow 是我们定义的工作流,包含三个步骤:

  1. HttpRequestActivity:处理 HTTP 请求。
  2. ApprovalTask:审批任务,我们可以在这个步骤进行审批操作。
  3. EndTask:结束任务。

4. 实现审批任务

        假设 ApprovalTask 是一个自定义活动,它负责执行审批操作。

using Elsa.Services;
using Elsa.ActivityResults;public class ApprovalTask : Activity
{protected override IActivityExecutionResult Execute(ActivityExecutionContext context){var taskId = context.GetInput<string>("TaskId");var approvalDecision = context.GetInput<string>("ApprovalDecision");// 处理审批决策if (approvalDecision == "Approve"){// 执行审批通过的操作}else{// 执行拒绝操作}return Done();}
}

5. Blazor 页面实现

接下来,我们在 Blazor 页面中创建一个用户界面,允许用户查看工作流并进行操作。

@page "/workflow/{workflowId}"@inject Elsa.Services.IWorkflowLaunchpad WorkflowLaunchpad
@inject IJSRuntime JSRuntime<h3>工作流审批</h3><p>Workflow ID: @workflowId</p><button @onclick="StartWorkflow">开始工作流</button>@if (isTaskPending)
{<h4>审批任务</h4><button @onclick="ApproveTask">通过</button><button @onclick="RejectTask">拒绝</button>
}@code {private string workflowId;private bool isTaskPending = false;protected override void OnParametersSet(){workflowId = (string)RouteData.Values["workflowId"];}private async Task StartWorkflow(){// 启动工作流var instance = await WorkflowLaunchpad.StartWorkflowAsync("ApprovalWorkflow", new { TaskId = "123" });isTaskPending = true;}private async Task ApproveTask(){// 审批通过await JSRuntime.InvokeVoidAsync("alert", "审批通过!");isTaskPending = false;}private async Task RejectTask(){// 审批拒绝await JSRuntime.InvokeVoidAsync("alert", "审批拒绝!");isTaskPending = false;}
}

        在这个 Blazor 页面中:

  • StartWorkflow 方法用于启动工作流并触发第一个 HTTP 请求活动。
  • ApproveTaskRejectTask 分别处理审批通过和拒绝操作。
  • isTaskPending 控制页面是否显示审批按钮。

6. 前端与 Elsa 的集成

        Elsa 提供了 HTTP 请求活动,我们可以利用它在前端与工作流交互。Blazor 前端页面通过调用后端的 API 启动工作流,并通过状态更新来控制用户操作。

// HTTP 请求活动配置,接收任务数据并处理审批
public class HttpRequestActivity : Activity
{protected override IActivityExecutionResult Execute(ActivityExecutionContext context){// 获取工作流输入var taskId = context.GetInput<string>("TaskId");// 返回工作流状态或继续处理其他活动return Outcome("Approved");}
}

7. 工作流实例与状态管理

        Elsa 工作流引擎会自动管理工作流实例和任务状态。如果你希望将工作流状态持久化到数据库中,你可以配置 Elsa 使用 Entity Framework 或其他持久化机制。

8. 数据库配置

        在 Startup.cs 中,我们使用 SQLite 来持久化工作流实例。

services.AddElsa(options => options.UseEntityFrameworkPersistence(options =>{options.UseSqlite("Data Source=elsa_workflows.db");}).AddHttpActivities().AddConsoleActivities()
);

        这将确保工作流和任务实例在数据库中存储。

9. 运行与调试

        最后,确保你正确配置了数据库和工作流引擎,运行 Blazor 项目。在 Blazor 页面中启动工作流后,用户将看到审批任务,并能够进行审批操作。

10. 总结

        这个示例展示了如何使用 Blazor 和 Elsa Workflows 创建一个简单的工作流系统,支持启动工作流、审批任务和前端交互。你可以根据实际需求,扩展工作流的复杂性,增加更多的任务、角色和权限控制。

进一步扩展:

  • 用户管理:为不同的用户角色(如审批人、普通用户)设置不同的工作流操作权限。
  • 通知功能:通过 SignalR 或其他方式实时通知用户任务状态变化。
  • 自定义活动:根据需要,开发更多自定义活动来处理特殊任务。

相关文章:

使用 Blazor 和 Elsa Workflows 作为引擎的工作流系统开发

开发一个完整的工作流系统使用 Blazor 和 Elsa Workflows 作为引擎&#xff0c;可以实现一个功能强大的工作流管理和设计系统。下面将提供详细的步骤和代码实现&#xff0c;展示如何在 Blazor 中开发一个基于 Elsa Workflows 的工作流系统。 项目概述 我们的工作流系统将包含以…...

Node.js 完全教程:从入门到精通

Node.js 完全教程&#xff1a;从入门到精通 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;允许开发者在服务器端使用 JavaScript。它的非阻塞 I/O 和事件驱动架构使得 Node.js 非常适合于构建高性能的网络应用。本文将详细介绍 Node.js 的安装、基本语…...

elasticsearch 数据导出/导入

例子&#xff1a; 导出命令&#xff1a; elasticdump --inputhttps://elastic:elasticsearchlocalhost:9100/company --outputcompany.json --typedata --no-verify 注意&#xff0c;本地docker搭建&#xff0c;禁用自签证书验证&#xff0c;先设置环境变量 export NODE_TL…...

什么是三高架构?

大家好&#xff0c;我是锋哥。今天分享关于【什么是三高架构?】面试题。希望对大家有帮助&#xff1b; 什么是三高架构? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 “三高架构”通常是指高可用性&#xff08;High Availability&#xff09;、高性能&#xff…...

Docker 单机快速部署大数据各组件

文章目录 一、Spark1.1 NetWork 网络1.2 安装 Java81.3 安装 Python 环境1.4 Spark 安装部署 二、Kafka三、StarRocks四、Redis五、Rabbitmq六、Emqx6.1 前言6.2 安装部署 七、Flink八、Nacos九、Nginx 一、Spark 1.1 NetWork 网络 docker network lsdocker network create -…...

CSS笔记基础篇01——选择器、文字控制属性、背景属性、显示模式、盒子模型

黑马程序员视频地址&#xff1a; 前端Web开发HTML5CSS3移动web视频教程https://www.bilibili.com/video/BV1kM4y127Li?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodeshttps://www.bilibili.com/video/BV1kM4y127Li?vd_source0a2d3666…...

pytest全局配置文件pytest.ini

pytest.ini 改变 pytest 的默认行为&#xff0c;一般放在项目的根目录&#xff0c;不能包含中文符号。不管是主函数模式运行&#xff0c;命令行模式运行&#xff0c;都会去读取这个全局配置文件。 [pytest] ;配置命令行参数&#xff0c;用空格进行分隔。addopts 中的选项会被命…...

PyTest自学-认识PyTest

1 PyTest自学-认识PyTest 1.1 PyTest可以用来做什么&#xff1f; PyTest是一个自动化测试框架&#xff0c;支持单元测试和功能测试&#xff0c;有丰富的插件&#xff0c;如&#xff0c;pytest-selemium, pytest-html等。 1.2 安装pytest 使用pip install -U pytest。 1.3 py…...

【专题】为2025制定可付诸实践的IT战略规划报告汇总PDF洞察(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p39055 在当今瞬息万变的商业环境中&#xff0c;制定有效的 IT 战略规划对于企业的成功与可持续发展至关重要。本报告深入探讨了制定 IT 战略规划的关键活动&#xff0c;旨在为企业和决策者提供全面且实用的指导。 Gartner的《为202…...

自旋锁与CAS

上文我们认识了许许多多的锁&#xff0c;此篇我们的CAS就是从上文的锁策略开展的新概念&#xff0c;我们来一探究竟吧 1. 什么是CAS&#xff1f; CAS: 全称Compare and swap&#xff0c;字⾯意思:“比较并交换”&#xff0c;⼀个CAS涉及到以下操作&#xff1a; 我们假设内存中…...

数组-二分查找

目录 算法思想&#xff1a; 实践&#xff1a; 备注&#xff1a; 二分查找是一种高效的查找算法&#xff0c;适用于在 有序数组 或列表中快速定位目标元素的索引。 重要事情说三遍&#xff1a;使用前提&#xff1a;数组有序&#xff0c;无重复&#xff0c;如果数组未排序&am…...

如何使用 Python 进行文件读写操作?

大家好&#xff0c;我是 V 哥。今天的内容来介绍 Python 中进行文件读写操作的方法&#xff0c;这在学习 Python 时是必不可少的技术点&#xff0c;希望可以帮助到正在学习 python的小伙伴。 以下是 Python 中进行文件读写操作的基本方法&#xff1a; 一、文件读取&#xff1…...

springcloud中的Feign调用

目录 一、基础应用 1.feign使用 1.增加feign依赖 2.编写feign接口 3.启用feign 4.调试 5.可能出现的异常信息 1.404 可能原因: 2.503 可有原因: 2.feign自定义配置 1.创建Feign配置类 2.feign接口 3.调试结果 3.feign多参数请求 Feign是Netflix开发的声明…...

【部署】将项目部署到云服务器

目录 1.获得服务器 2.连接到云服务器 3.配置环境 3.1.Java&#xff08;运行后端所需&#xff09; 3.2.MySQL数据库 3.3.Nginx&#xff08;运行前端所需&#xff09; 3.4. Node.js&#xff08;构建前端所需&#xff09; 4.打包项目 4.1.打包后端项目 4.2.打包前端项目…...

2024年AI大模型技术年度总结与应用实战:创新与突破并进

前言 回顾2024年&#xff0c;我一共发布了286篇博文&#xff0c;粉丝数也达到了43000多。这一年里&#xff0c;我收获颇丰&#xff0c;始终坚持AI大模型的研究方向&#xff0c;并且积极开展大模型的实战应用&#xff0c;也取得了一系列令人振奋的突破。 在286篇博文中&#…...

docker离线安装及部署各类中间件(x86系统架构)

前言&#xff1a;此文主要针对需要在x86内网服务器搭建系统的情况 一、docker离线安装 1、下载docker镜像 https://download.docker.com/linux/static/stable/x86_64/ 版本&#xff1a;docker-23.0.6.tgz 2、将docker-23.0.6.tgz 文件上传到服务器上面&#xff0c;这里放在…...

SuperdEye:一款基于纯Go实现的间接系统调用执行工具

关于SuperdEye SuperdEye是一款基于纯Go实现的间接系统调用执行工具&#xff0c;该工具是TartarusGate 的修订版&#xff0c;可以利用Go来实现TartarusGate 方法进行间接系统调用。 该工具的目标是为了扫描挂钩的NTDLL并检索Syscall编号&#xff0c;然后使用它来执行间接系统调…...

PCL 新增自定义点类型【2025最新版】

目录 一、自定义点类型1、前言2、定义方法3、代码示例二、合并现有类型三、点云按时间渲染1、CloudCompare渲染2、PCL渲染博客长期更新,本文最近更新时间为:2025年1月18日。 一、自定义点类型 1、前言 PCL库自身定义了很多点云类型,但是在使用的时候时如果要使用自己定义的…...

Docker导入镜像

使用命令行进行处理&#xff1a; docker load < onething1_wxedge.tar如下图所示 查看状态 docker images...

PyTorch使用教程(9)-使用profiler进行模型性能分析

1、简介 PyTorch Profiler是一个内置的性能分析工具&#xff0c;可以帮助开发者定位计算资源&#xff08;如CPU、GPU&#xff09;的瓶颈&#xff0c;从而更好地优化PyTorch程序。通过捕获和分析GPU的计算、内存和带宽利用情况&#xff0c;能够有效识别并解决性能瓶颈。 2、原…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...