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

低代码平台ToolJet实战总结

news 2025/7/21 19:54:37

这是一个不是低代码的低代码平台，这是自己试用的感觉。

一.安装企业版
tooljet下载安装文档可以参考：https://docs.tooljet.ai/docs/setup/docker
1.下载docker-compose.yaml
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/docker/docker-compose-db.yaml
mv docker-compose-db.yaml docker-compose.yaml
mkdir postgres_data

2.下载.env文件
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/docker/.env.internal.example
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/docker/internal.sh && chmod +x internal.sh
mv .env.internal.example .env && ./internal.sh

3.启动
docker-compose up -d

二.安装开源版
装好企业版后，发现free plan有很多限制，只能建一个App, 而且是没有多级菜单的，如果自己设计菜单页面，那就是只能通过APP的方式分开不同的功能。
删除前面的安装。
按前面安装企业版的方法重来一遍。
只是下载docker-compose.yaml 完成后，将里面的tooljet的镜像修改成开源版的：
image:tooljet/tooljet-ce:latest
保存后启动
docker-compose up -d
此时登录就是开源版了，没有APP数量限制了。

三.创建APP的数据库
设定一个业务实例：设备的点检，不同的点检方案有不同的检查点和标准。消防设备和会议室设备要点检，标准为：
消防设备每月点检一次，会议室设备点检每周点检一次。
消防设备点检标准：
a.检测方案：目测有效期是否过期
b.检测方案：目测保险是否已经被打开
c.etc.
会议室设备点检标准
a.检测方案：目测投影仪是否清晰
b.检测方案：目测会议室桌椅是否摆放整齐
c.etc.
1.数据库准备，需要创建三张表：点检标准表，点检项目表，设备点检表
2.把数据表记录的添加，删除，更新的存储过程写完
3.tooljet的data source设置连接到你的数据库，创建一个checkdb的数据源。

四.使用它tooljet实现APP页面
1.创建Sql Query
创建查看的Query
SELECT * FROM CHECK_STANDARD
注意点：
a.表中需要手工添加一条记录，否则你绑在table上，页面加载后table里字段值不显示出来。
b.query建好后，setting中要把页面加载时运行勾上，否则你打开页面时是一片空白。如果你使用js调用actions.runQuery('yourqueryname')显示数据，那是没有影响的;

2.执行存储过程的Query.
EXEC CHECK_STANDARD_DELETE @ID={{componets.standardid.value}} 直接把组件值写在里面运行是最简单的，但是这个query就不能被复用。希望通过传参方式，但这个地方的传参是最坑人的。似乎创建的parameter永远不被赋值，但是你直接在参数的value里面赋值又时可以的，最后搞得自己没有办法，使用variables来传值。
EXEC CHECK_STANDARD_DELETE @ID={{variables.standardid}}
另外这里还有一个会容易误导的sql parameter,通常用于自己测试。

3.创建JS Query
因为不能传参到sql query,所以自己就需要再包一个js来实现sql query的调用。js query传值就很顺利，按钮配置传入啥，js query就能接住啥，然后俺就把接到的值传个variables，然后再执行sql query，真是官大一级压死人，不搞个全局变量都搞不定这个query.
actions.setVariable('standardid', parameters.standardid);
actions.runQuery('CHECKSTANDARD_DELETE');
有点绕，但有效，弊端也很明显，query创建数量就翻倍了。

4.创建APP的页面
a.界面组件：从组件库里面拖拽到页面上，改改描述，改改名，这是低代码的体现，但是相比之下，效率也是低下的。
搞笑的是，组件可以设置必填，但是你用的时候，如果鼠标光标不在组件里面，是不会触发验证的。
取值时要注意组件的层级，比如你的文本输入框如果在Form里面，取值的时候{{components.loginform.data.usernameInput.value}}
b.一般数据绑定：然后就是绑定数据显示。一般用到globals.，variables.,components.,querys.,parameters.等。
日期设置当天的默认值: {{variables.selectedRow?.plan_date || new Date().toString()}}
比如下拉选项框中的列表：
{{queries.typename_get.data}},注意你查询中的字段要对应label ,value
比如选中行，编辑modal中文本字段的显示值：
{{components.checkstandard.selectedRow?.STANDARDNAME||''}}
c.特殊值绑定：上面这些是比较简单的绑定，一般不会遇到问题，如果遇到不显示通常都是语法问题。
比较麻烦的是日期控件的显示，编辑页面下拉框默认选中显示原值。
下拉框的原值显示，主要利用default这个参数，实现默认显示。
{{queries.equipment_type_get.data.map(option => ({
label: option.label,
value: option.value,
disable: false,
visible: true,
default: option.value === variables.selectedrow.typeid
}))}}
数据库中取出的日期控件值很麻烦，我直接在数据库查询中format(checkdate,'MM/dd/yyyy') 格式化。
d.图片和pdf:点检过程要拍照，所以用了imagepicker,pdfPicker，然后将上传的图片保存到数据库的var(max)字段中。
上传图片，保存数据库的值
{{components.imagePicker.file[0].base64Data}}
上传pdf，保存数据库的值
{{components.pdfPicker.file[0].base64Data}}
显示这些图片和pdf文件的时候，绑定查询值时用，url修改成如下：
{{'data:image;base64,' + queries.getFiles.data[0].image}}
{{'data:pdf;base64,' + queries.getFiles.data[0].pdf}}
e.table的批量添加行：通常我们都需要自己创建一个modal用来添加数据，但是使用table中的添加行也是可以的，相当于在表格中直接填写数据，虽然不能调整大小和宽度，但是一般的输入也是可以接受，比modal中一条条添加要好。
然后在保存事件中：
// 获取所有新添加的行数据
const newRows = components.checkstandard.newRows;
// 验证是否有新数据
if (!newRows || newRows.length === 0) {
alert("没有要保存的新数据！", "warning");
return;
}
//全局变量传sql query
for (let i = 0;i < newRows.length; i++) {
const row = newRows[i];
actions.setVariable('cp_stdname', row.STANDARDNAME);
actions.setVariable('cp_purpose', row.purpose);
await actions.runQuery('CHECKSTANDARD_ADD');
}
// 保存成功后操作
showAlert(`成功保存 ${newRows.length} 条记录！`);
// 清空新行
components.your_table_name.clearNewRows();
// 刷新表格数据
actions.runQuery('CHECKSTANDARD_GET');