低代码平台directus 实战半年-提升篇flow

1,670 阅读4分钟

介绍

flow是一种可以基于多个步骤串联实现具体业务的流程 image.png

创建

image.png

image.png

选择类型

  • 事件钩子 :用于系统表的数据响应式触发
  • 互联网钩子: 就是我们平时自己写的REST接口,支持POST和GET
  • 计划任务: 定时任务
  • 另外一个流程:系统的流程被另外一个流程调用
  • 手动:在directus后台页面 添加触发的按钮 image.png

互联网钩子

  1. 使用get请求方式 image.png

  2. 测试请求,复制url image.png

http://127.0.0.1:8055/flows/trigger/874ceaee-4523-49b8-8812-768517cfa9c0

image.png

operation介绍

在flow里面每一个框都是一个operation,operation会做输入,执行逻辑,然后输出。 operation有以下10种类型,常用的有

  1. 条件
  2. 运行脚本
  3. 创建数据
  4. 读取数据
  5. 更新数据
  6. 互联网钩子
  7. 转为有效负荷

image.png

operation-建立连接

拖动operation的勾勾 到 另外一个operation的左边圆点 image.png

image.png

注意:老版本的 directus 每次只能做一次已有数据的拖拉操作,所以需要每次拖拉后,点击保存,刷新最新关系。

operation-转换有效载荷

flow默认为第一个operation 为互联网钩子做get处理

image.png

通过点击+创建,我们可以继续创建下一个operation

这里创建一个 “转换有效载荷”的 operation image.png

在这里输入返回的json格式 image.png

测试请求 返回 data和user

http://127.0.0.1:8055/flows/trigger/874ceaee-4523-49b8-8812-768517cfa9c0

image.png

operation-查询数据

通过点击+创建,选择“读取数据” image.png

权限:

  • form trigger 来自当前登陆用户的token信息,如果为空或没有权限则不能访问
  • public role 读取角色配置的内容
  • full access 不校验权限,都可以查询 image.png

image.png

  1. 关键字: 用于返回数据后,代码访问使用
  2. 数据模型:选择之前创建的省份表
  3. 查询:通过条件过滤出需要查询的数据,返回的是列表集合
  4. ID组:返回单个对象数据
  5. 发出事件:当数据变化时,对应的监听flow是否需要接收消息

访问读取的数据

修改转换的内容

image.png

{
    "data": "{{ item_read_province[0] }}"
}

返回数据读取的内容

image.png

在右边日志可以查看完整日志信息

image.png

image.png

image.png

image.png

image.png

ID组查询

ID这里直接输入主键对应的内容 ,回车后会到带到下面。 查询条件可以忽略。 image.png

返回的内容是对象,所以调整转换的内容

{
    "data": "{{ item_read_province }}"
}

operation 运行脚本

  1. 运行脚本拥有执行js的能力,就能直接写node 是一样的效果
  2. 可以输出需要的对象,并且通过定义关键字提供给下一个operation
  3. 可以输出console到控制台

测试一把

image.png

image.png 在脚本输入

module.exports = async function(data) {
    const name = 'json'
    console.log("hello",name)
    const body = {
    	name : name
    }
	return body;
}

访问get

127.0.0.1:8055/flows/trigger/874ceaee-4523-49b8-8812-768517cfa9c0 image.png

控制台输出 打印信息

image.png

data参数变量

参数 data包含 调用该互联网钩子传入的参数,环境变量等信息

修改请求方式,把get 改成 post

image.png

修改代码,打印

module.exports = async function(data) {
    console.log("data",data)
    const name = data.$trigger.body.test
    console.log("hello",name)
    const body = {
    	name : name
    }
	return body;
}

传入参数

{
    "test" : "jason.yang"
}

运行结果 image.png

控制台 打印信息

[16:02:34] POST /flows/trigger/874ceaee-4523-49b8-8812-768517cfa9c0 200 28ms
[16:02:34.701] INFO:
    0: "data"
    1: {
      "$trigger": {
        "path": "/trigger/874ceaee-4523-49b8-8812-768517cfa9c0",
        "query": {},
        "body": {
          "test": "jason.yang"
        },
        "method": "POST",
        "headers": {
          "authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImZkOGY5MmEwLThkYTAtNDQ4Yy05MWFjLTlmYjE4MTlhMThkZCIsInJvbGUiOiI1N2FjNTJhZS0xYzYwLTQxMjItODQwNi1jMjdmMWEzN2NkOWIiLCJhcHBfYWNjZXNzIjoxLCJhZG1pbl9hY2Nlc3MiOjEsImlhdCI6MTY5OTg2MjU1MSwiZXhwIjoxNjk5ODYzNDUxLCJpc3MiOiJkaXJlY3R1cyJ9.qqelBLAnnD6W42Y_cvDMuvbfUnUs_ZEWuUNRvbGwofQ",
          "user-agent": "Apifox/1.0.0 (https://apifox.com)",
          "content-type": "application/json",
          "accept": "*/*",
          "host": "127.0.0.1:8055",
          "accept-encoding": "gzip, deflate, br",
          "connection": "keep-alive",
          "content-length": "29"
        }
      },
      "$last": {
        "path": "/trigger/874ceaee-4523-49b8-8812-768517cfa9c0",
        "query": {},
        "body": {
          "test": "jason.yang"
        },
        "method": "POST",
        "headers": {
          "authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImZkOGY5MmEwLThkYTAtNDQ4Yy05MWFjLTlmYjE4MTlhMThkZCIsInJvbGUiOiI1N2FjNTJhZS0xYzYwLTQxMjItODQwNi1jMjdmMWEzN2NkOWIiLCJhcHBfYWNjZXNzIjoxLCJhZG1pbl9hY2Nlc3MiOjEsImlhdCI6MTY5OTg2MjU1MSwiZXhwIjoxNjk5ODYzNDUxLCJpc3MiOiJkaXJlY3R1cyJ9.qqelBLAnnD6W42Y_cvDMuvbfUnUs_ZEWuUNRvbGwofQ",
          "user-agent": "Apifox/1.0.0 (https://apifox.com)",
          "content-type": "application/json",
          "accept": "*/*",
          "host": "127.0.0.1:8055",
          "accept-encoding": "gzip, deflate, br",
          "connection": "keep-alive",
          "content-length": "29"
        }
      },
      "$accountability": {
        "user": "fd8f92a0-8da0-448c-91ac-9fb1819a18dd",
        "role": "57ac52ae-1c60-4122-8406-c27f1a37cd9b",
        "admin": true,
        "app": true,
        "ip": "127.0.0.1",
        "userAgent": "Apifox/1.0.0 (https://apifox.com)",
        "permissions": []
      },
      "$env": {}
    }

我们在运行脚本里打印data数据,看到 data 包括几个关键对象

  1. $trigger.body: 记录客户端post 的json数据
  2. $accountability: 用于记录
  3. last:其实和last: 其实和trigger数据一致,用于引用最近一次operation返回的数据(一般不建议使用,因为一旦调整的operation位置代码非常难维护)
  4. $accountability:记录当前请求用户的一些信息,用于校验权限等
  5. $env:directus的环境变量,需要在.env 里面设置指定白名单才能访问

条件处理

通过条件可以控制 operation的流向

新建一个条件

image.png 输入判断的内容,这里判断post请求的body中的test字段是否是jason.yang

{
    "$trigger": {
        "body": {
            "test": {
                "_eq": "jason.yang"
            }
        }
    }
}

同时在成功或失败添加不同的转换载荷

image.png

image.png

image.png

测试一把

分别传入 jason.yang 和 micheal 返回不同的结果 image.png

image.png

条件分支:脚本抛异常

另一种实现条件分支的效果 我们把条件修改为脚本运行,代码修改如下

image.png

image.png 只要是抛异常,就会走 失败的分支逻辑

module.exports = async function(data) {
    if (data.$trigger.body.test !== "jason.yang") {
    	throw("当前不是json")
    }
	return {};
}

operation 创建数据

我们实现一个flow创建省份效果 image.png

{
    "name": "{{$trigger.body.name}}",
    "desc": "{{$trigger.body.desc}}"
}

注意:这里payload的动态变量需要通过 "{{变量}}" 方式获取,获取的上下文主要是data里面的数据,$trigger.body为前端apifox传入数据

测试一把

使用test2@qq.com

{
    "name" : "湖北",
    "desc" : "华中地区"
}

image.png 查询显示湖北

image.png

operation 更新数据

image.png

测试一把

先打开权限

image.png

image.png 使用test2@qq.com 测试

{
    "id" : "7",
    "name" : "湖北2",
    "desc" : "华中地区2"
}

image.png

验证数据

image.png

批量更新1

directus 目前不支持在operation直接更新多条数据,但支持关联表更新多条数据。如我们可以批量更新广东下面的所有城市信息。通过city 的update属性 传入批量更新的对象即可,注意对象需要有唯一id做关联

{
    "city": {
        "update": "{{$trigger.body.updateCity}}"
    }
}

image.png

测试一把

切换管理员账号test@qq.com

先查询当前广东的数据 image.png

通过关联批量更新城市,把所有城市名称都+3显示

{
    "id" : "1",
    "updateCity" : [
        {
            "id": "1",
            "name": "深圳3"
        },

        {
            "id": "3",
            "name": "广州3"
        },
        {
            "id": "4",
            "name": "韶关3"
        }

    ]
}

image.png

再次查询数据已被批量刷新

image.png

传送门

  1. 低代码平台directus 实战半年-入门篇 - 掘金 (juejin.cn)

  2. 低代码平台directus 实战半年-提升篇flow - 掘金 (juejin.cn)

  3. 低代码平台directus 实战半年-进阶篇 - 掘金 (juejin.cn)

  4. 低代码平台directus 实战半年-踩坑日志 - 掘金 (juejin.cn)