Node-RED UI Builder 使用教程
1. 项目目录结构及介绍
Node-RED node-red-contrib-uibuilder
是一个用于创建自定义用户界面的插件。其基本目录结构如下:
uibuilder/
├── public/ # 存放前端资源(HTML, CSS, JS 等)
│ └── lib/ # 第三方库或自定义JS/CSS
├── tiddlywiki/ # 可选,如果要集成 TiddlyWiki
└── flows.json # Node-RED 流程文件,其中包含了 uibuilder 的节点配置
public
: 这是你的前端应用的工作区,你可以在这里存放HTML页面,CSS样式表,JavaScript脚本以及任何其他前端资源。lib
: 这个文件夹通常用于存储外部库或者你自己编写的JS和CSS文件,它们会被引入到你的前端应用中。tiddlywiki
: 如果你需要集成 TiddlyWiki 到你的应用,这个文件夹将存储相关的数据。flows.json
: 包含了整个 Node-RED 流程的信息,包括 uibuilder 节点的设置。
2. 项目的启动文件介绍
在 node-red-contrib-uibuilder
中,启动文件是通过 Node-RED 自动处理的。当你在 Node-RED 的编辑器中添加并配置了一个 uibuilder 节点时,你会指定一个前端模板文件,比如 public/index.html
。这个文件就是你的前端应用的入口点。
当你在 Node-RED 中启动流并访问指定的端点(通常是 /uibuilder/<node-instance-name>
),Node-RED 将加载你配置的 HTML 文件,并传递数据到前端,同时接收来自前端的事件和命令。
3. 项目的配置文件介绍
node-red-contrib-uibuilder
主要的配置是在 Node-RED 的图形界面进行的,而不是通过单独的配置文件。不过,你的前端代码可以与 Node-RED 通信,这需要配置以下几个关键点:
- Topic: 在 uibuilder 节点中设定,定义了从 Node-RED 发送到前端的消息主题,也可以作为前端向 Node-RED 发送消息的主题。
- Frontend URLs: 指定前端访问的URL路径,如
/uibuilder/test
,这将在 Node-RED 中提供一个服务器接口供前端应用使用。 - Node.js to Frontend Variables: 可以设置变量,让 Node.js 数据可以在前端 JavaScript 中访问。
此外,如果你的前端应用需要特定的配置,你可以在 public/js/uibuilderfe.min.js
或 public/custom.js
文件中初始化这些配置,例如设置 WebSocket 连接的参数。
记得保存配置并在 Node-RED 中重新部署流,以便应用新的设置。
希望这份简短的教程能帮助你开始使用 node-red-contrib-uibuilder
创建自定义用户界面。更多详细信息,你可以参考 官方GitHub仓库 上的文档。