ILLA home page
  1. Supabase DB

Supabase DB

Supabase 是一种开源的 Firebase 替代品，允许开发人员构建实时 Web 和移动应用程序。 它提供许多与 Firebase 相同的功能，例如实时数据库、用户身份验证和托管，但具有开源和提供 SQL API 的额外优势。 这允许开发人员使用他们现有的 SQL 知识和工具，从而很容易与其他系统集成。 此外，Supabase 提供了一个比 Firebase 更灵活和可定制的平台，后者在数据建模和使用方面可能更具限制性。

本教程概述了通过几个简单的步骤使用 ILLA Builder 和 Supabase 创建管理面板的过程。 ILLA 是面向开发人员的低代码平台，可实现内部工具的快速开发和部署。 它允许通过拖放 UI 组件、连接到任何数据库或 API 以及编写 JavaScript 来创建页面。 要了解有关Supabase的更多信息，请访问https://supabase.com/。

​
步骤1: 在Supabase上配置您的后端

在Supabase dashboard, 点击 New project 并且设置名称为adminPanel。

点击 Create a new table 创建新表。

Supabase 提供了多种选项来将数据填充到表里，包括编写查询、通过用户界面创建以及上传CSV文件等。

填充表内容，数据库创建完成。

​
步骤2: 在ILLA Cloud上构建UI

在ILLA Cloud里, 点击 Create New 创建新应用.

从Insert面板拖拽组件到画布上；

选中画布中的组件，并在Inspect面板上配置属性；

正如下方截图所见，按照上述步骤，我们搭建了一个简单的管理面板。

​
步骤3: 连接到Supabase DB，并配置CRUD

通过Supabase的Project Settings获取配置信息。

在Action列表，点击 + New 并选择Supabase DB。

填充表单信息，以连接到Supabase实例。测试连接并保存资源。

点击 Create Action 来使用刚保存的Supabase实例创建一个Action，在Action中配置CRUD

使用 {{ 获取前端输入数据。 下面是在管理面板中，用户管理视图的配置示例。

根据input1中输入的用户名称，查询表格：

SELECT *
FROM user
WHERE name = "{{input1.value}}"
;

更新用户数据，在id匹配时更新用户信息：

UPDATE user
SET name = "{{input3.value}}"
, email = "{{input4.value}}"
WHERE id="{{input2.value}}"
;

插入数据：

INSERT INTO user VALUES("{{input5.value}}","{{input6.value}}","{{input7.value}}");

在id匹配时删除用户：

DELETE FROM user WHERE id = "{{input2.value}}";

​
第四步: 在组件上展示数据

使用h {{ 在组件的属性中使用Action的数据结果。如下图所示:

​
相关链接