低代码平台directus 实战半年-入门篇

jason_yang
7,310 阅读4分钟

1. 介绍

  • directus是一个基于node.js，包含后端与前端的低代码+无代码平台。
  • 前端底层使用的是vue3
  • 后台底层服务使用的express

网址

2. 特点

  1. 可以快速数据库建模，并自带字段展示组件，并提供API的REST的接口
  2. 源码开源 directus/directus
  3. 完善的工具链命令工具
  4. 支持各种数据库连接
  5. 支持docker部署

3. 搭建

  1. 创建项目 npm init directus-project example-project
  2. 选择对应的数据库版本

image.png

  1. 输入对应的数据库和管理员账号 （数据库记得提前创建好）

image.png

  • 数据库名 directus_db
  • 账号 test@qq.com
  • 密码 123456
  1. 生成的内容

image.png

extension文件夹是 项目所有扩展的文件

  • displays： 前端vue页面二次开发展示
  • interfaces： 用于某个字段显示的二次定制开发
  • layouts： 整体的排版布局

.env 项目配置

  • 记录所有环境变量，包括第三方js库引入，数据库配置信息等

directus开头的表都是系统自带的内置表

image.png

  1. 运行启动
 cd /test_directus
 npx directus start

输入账号和密码

congratulation～ 成功登陆

image.png

  1. 汉化设置 在菜单 设置 -> setting 选择 chinese image.png

环境变量.env

image.png

下面是关键的环境变量


### General

# IP or host the API listens on ["0.0.0.0"] 默认本地启动
HOST="0.0.0.0"

# The port Directus will run on [8055] 默认端口
PORT=8055

# 本地服务外部访问的url
# The URL where your API can be reached on the web. It is also used for things like OAuth redirects,
# forgot-password emails, and logos that needs to be publicly available on the internet. ["/"]
PUBLIC_URL="/"
# PUBLIC_URL="http://localhost:8055"

# 控制台样式显示
# Render the logs human readable (pretty) or as JSON (raw), [pretty]
# "pretty", "raw"
# LOG_STYLE="pretty"

### Database 数据库配置

# All DB_* environment variables are passed to the connection configuration of a Knex instance.
# Based on your project's needs, you can extend the DB_* environment variables with any config
# you need to pass to the database instance.

DB_CLIENT="mysql"
DB_HOST="127.0.0.1"
DB_PORT="3306"
DB_DATABASE="directus_db"
DB_USER="xxxx"
DB_PASSWORD="xxxx"

### Extensions 系统扩展配置

# Path to your local extensions folder ["./extensions"]
EXTENSIONS_PATH="./extensions"

# Automatically reload extensions when they have changed [false]
EXTENSIONS_AUTO_RELOAD=false

# 指定允许自定义或第三方的js库，便于flow运行脚本使用
FLOWS_EXEC_ALLOWED_MODULES="ioredis,http,cache,joi,decimal.js,moment,lodash"
# 导出允许被访问的环境变量 便于flow运行脚本使用
FLOWS_ENV_ALLOW_LIST="PUBLIC_URL"

4. 实战 CRUD

我们以省份和城市演示一下

4.1 创建省份表

image.png 在菜单 设置 -> 数据模型 -> 新建模型 (就是创建表的意思)

输入表名 image.png

选择系统自带字段，点击右上角勾勾即可 image.png

此时系统已生成好表 image.png

点击创建字段 ,创建多name名称和desc描述字段 image.png

image.png

在数据查看到新增的表

image.png

image.png

4.1.1 系统自带字段说明

注意：系统status是枚举 包含 published发布,draft草稿,garchived归档 可以创建后，在字段点击编辑-> 接口里查看，目前使用的是json描述 key+ 国际化输出

image.png

image.png

image.png

image.png

[
    {
        "text": "$t:published",
        "value": "published"
    },
    {
        "text": "$t:draft",
        "value": "draft"
    },
    {
        "text": "$t:archived",
        "value": "archived"
    }
]

4.2 录入数据

创建一条广东省数据 image.png

image.png

image.png

4.3 创建城市表

image.png

新增name字段

4.4 创建关联关系

省份与城市是 一对多的关系 ，在directus 只需要在 image.png

image.png

image.png

image.png

image.png

image.png

4.5 录入城市数据

image.png

image.png

image.png

4.6 更新城市

点击具体的一行 image.png

在文本框修改，点击右上角保存即可（默认位草稿，可以修改为发布） image.png

4.7 删除城市

选择勾勾具体行，点击右上角删除按钮即可 image.png

4.8 优化排版

directus 后台app默认使用整行布局，可以通过半宽优化排版

image.png

image.png 优化调整后

image.png

5.原生的REST接口

5.1 通过f12 查看网络请求 ，看到新建的表已经自带接口

http://127.0.0.1:8055/items/city?limit=25&fields[]=name&fields[]=province.name&fields[]=province.id&fields[]=status&fields[]=id&sort[]=id&page=1&filter[status][_neq]=archived

是一个get请求 http://127.0.0.1:8055/items/city

image.png

每个请求都自带登陆的头信息

Authorization:Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImZkOGY5MmEwLThkYTAtNDQ4Yy05MWFjLTlmYjE4MTlhMThkZCIsInJvbGUiOiI1N2FjNTJhZS0xYzYwLTQxMjItODQwNi1jMjdmMWEzN2NkOWIiLCJhcHBfYWNjZXNzIjoxLCJhZG1pbl9hY2Nlc3MiOjEsImlhdCI6MTY5OTYwNDQ0MiwiZXhwIjoxNjk5NjA1MzQyLCJpc3MiOiJkaXJlY3R1cyJ9.mKCDcvCzXlB3_VOCmR87yh8kjfYanRzcAd_dPa2KsJE

image.png

image.png

5.2 模拟用户登陆

使用系统自带的用户登陆，通过apifox模拟post请求登陆

image.png

http://127.0.0.1:8055/auth/login

{
    "email": "test@qq.com",
    "password": "123456"
}

返回

{
    "data": {
        "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImZkOGY5MmEwLThkYTAtNDQ4Yy05MWFjLTlmYjE4MTlhMThkZCIsInJvbGUiOiI1N2FjNTJhZS0xYzYwLTQxMjItODQwNi1jMjdmMWEzN2NkOWIiLCJhcHBfYWNjZXNzIjoxLCJhZG1pbl9hY2Nlc3MiOjEsImlhdCI6MTY5OTYwNDc2NywiZXhwIjoxNjk5NjA1NjY3LCJpc3MiOiJkaXJlY3R1cyJ9.OEENgNhZMby-w0773u4rkAaIu2yoIGDWO5qw8HjoPFE",
        "expires": 900000,
        "refresh_token": "pNgyUJUMFmEvlPljnT3CwO3TWALFQbINvpi27957NzMNr47F_GSDrp_RmD-aFesj"
    }
}

5.3省份查询接口

把上面添加 access_token 添加到Authorization 里面输入 Bearer token

get请求

http://127.0.0.1:8055/items/province

image.png

{
    "data": [
        {
            "id": 1,
            "status": "published",
            "user_created": "fd8f92a0-8da0-448c-91ac-9fb1819a18dd",
            "date_created": "2023-11-10T07:46:43.000Z",
            "desc": "南部地区",
            "name": "广东",
            "city": [
                1
            ]
        }
    ]
}

5.3.1 高级查询

fields关键字

精准获取内容搜索。

如我需要查询 省份表的 id，name

请求url，添加get参数 http://127.0.0.1:8055/items/province?fields=id,name

image.png

关联所有查询

关联集合city的所有字段信息

请求url，get参数 http://127.0.0.1:8055/items/province?fields=id,name,city

image.png directus 默认只会把city集合的id放在数组返回

通过.*关键子可以查询所有信息或局部信息

http://127.0.0.1:8055/items/province?fields=id,name,city.* image.png

关联精准查询

可以把集合的具体字段也按需提取，city.id,city.name

http://127.0.0.1:8055/items/province?fields=id,name,city.id,city.name image.png

filter关键字

filter 类似于sql的where 条件

先查询所有city数据,这里我提前把广州改成草稿状态

{
    "data": [
        {
            "id": 1,
            "status": "published",
            "user_created": "fd8f92a0-8da0-448c-91ac-9fb1819a18dd",
            "date_created": "2023-11-10T08:00:20.000Z",
            "province": 1,
            "name": "深圳2"
        },
        {
            "id": 3,
            "status": "draft",
            "user_created": "fd8f92a0-8da0-448c-91ac-9fb1819a18dd",
            "date_created": "2023-11-10T09:03:26.000Z",
            "province": 1,
            "name": "广州"
        },
        {
            "id": 4,
            "status": "published",
            "user_created": "fd8f92a0-8da0-448c-91ac-9fb1819a18dd",
            "date_created": "2023-11-10T09:12:21.000Z",
            "province": 1,
            "name": "韶关"
        }
    ]
}

需求，把草稿的广州的数据过滤掉

http://127.0.0.1:8055/items/city?filter[status][_eq]=published

image.png

5.4省份更新接口

patch 请求

http://127.0.0.1:8055/items/province/1

更新内容

{
 "name":"广东2"    
}

image.png

5.5城市新增 通过关联表新增

directus 支持关联表新增，json描述关系即可

先在省份打开id显示 image.png

image.png

{
    "name": "广州", 
    "province": 1
}

image.png

5.6省份更新同时添加城市

{
   "name":"广东3" ,
   "city" : {
    "create" : [
    {
        "name" : "韶关"
    }
   ] 
   }   
}

image.png

5.7更详细的CRUD文档描述

Accessing Items | Directus Docs

6. 权限控制

directus 自带两个角色

  1. public 公开
  2. administrator 超级管理员 image.png

公开默认是没有所有表的访问权限 image.png

超级管理员有所有表权限，并且有另外一个维护的页面 image.png

我们新增一个test角色

image.png

app访问：指的是directus 自带的后台管理页面权限 image.png

创建后，自定义的表都是没有权限访问，系统表 有两个默认推荐的方案

  1. 最小权限：只给最基本的权限（默认自动设置这个）
  2. 推荐权限：适合后台管理使用

image.png

image.png

测试一把

新建用户 json2，邮箱：test2@qq.com , 密码123456 image.png

image.png

角色选择 test

在apifox重新用test2@qq.com登陆 测试查询省份接口

image.png

提示当前权限不足

image.png

新增读权限

image.png

image.png

再次请求apifox ，请求成功

image.png

高级权限设置

directus 支持通过当前登陆用户信息过滤数据。

比如我希望只有我自己创建的数据，才能被查询到

  1. 设置+ ：为允许所有
  2. 设置查询 ： 自定义

image.png

image.png

image.png

image.png

$CURRENT_USER 是directus自带的系统变量，访问的就是当前登陆用户的id，我们通过匹配创建用户的id是否刚好等于当前登陆用户id ，实现数据的隔离。 更详细的变量 Filter Rules | Directus Docs

image.png

测试第二把

再次请求发现没有数据 image.png

我们新增多一条福建省

image.png

再再次请求发现有福建数据 image.png

同理在directus自带的后台，登陆test2@qq.com 我们也看到数据也被过滤了

image.png

我们切换为test@qq.com 试试看，由于test@qq.com是管理员所以所有数据都能查看到。 image.png

扩展docker部署

image.png

1. 创建文件夹

mkdir -p ./data 
chmod -R 777 ./data

2. docker-copose.yml

version: '3.8'

services:
  directus:
    image: directus/directus:latest
    ports:
      - 8055:8055
    environment:
      DIRECTUS_SECRET: 'mysecret'
      DB_CLIENT: 'sqlite3'
      DB_FILENAME: '/data/database.db' # 使用绝对路径 如果无法访问请设置 权限 chmod -R 777 ./data
    volumes:
      - ./data:/data

3. 启动

  1. 直接docker-compose up -d
  2. 控制台会输出对应的管理员账号和密码
  3. 直接访问http://127.0.0.1:8055
  4. 进入docker 容器一样可以执行 npx directus start 等命令

如果启动异常，数据库文件需要调整 权限 chmod -R 777 ./data

源码地址

mjsong07/directus_demo: directus测试代码 (github.com)

传送门

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

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

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

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

avatar
文章
阅读
粉丝