Node-RED UI Builder 使用教程：构建数据驱动Web界面的完整指南

2026-02-06 04:32:43作者：史锋燃Gardner

Node-RED UI Builder是一个强大的Node-RED插件，能够帮助用户轻松创建自定义的Web用户界面，支持从零代码到完整代码的各种开发方式。

项目概述与安装

Node-RED UI Builder旨在简化数据驱动Web应用的创建过程，提供前后端之间的无缝通信桥梁。该插件完全兼容现有的前端开发工作流程，同时支持多种前端框架或完全无需框架。

安装方法

通过Node-RED的Palette Manager安装是最简单的方式。在Node-RED编辑器中，进入"管理面板"菜单，搜索"node-red-contrib-uibuilder"并安装。

核心功能特性

多种开发模式支持

UI Builder提供了三种主要的开发模式：

零代码模式：完全通过Node-RED节点配置创建UI，无需编写任何HTML或JavaScript代码。

低代码模式：使用标准化JSON配置来定义UI元素，结合少量自定义代码实现更复杂的界面。

完整代码模式：完全自定义前端代码，使用任意前端框架或纯HTML/CSS/JS。

内置节点类型

uibuilder节点：核心通信节点，负责前后端数据交换
uib-element节点：创建各种UI元素（列表、表格、卡片等）
uib-update节点：运行时动态更新页面元素
uib-tag节点：添加单个任意类型的HTML元素
uib-cache节点：提供数据缓存功能

快速入门指南

基础配置步骤

添加uibuilder节点：从节点面板拖拽uibuilder节点到流程中
设置URL路径：在节点配置中指定唯一的URL路径（如"myui"）
初始部署：设置URL后必须立即部署，创建必要的文件夹结构
访问页面：通过http<s>://<node-red-host>:<node-red-port>/myui访问你的Web界面

零代码开发示例

通过uib-element节点创建动态UI元素：

连接注入节点 → uib-element节点 → uibuilder节点
配置uib-element输出类型（卡片、列表、表格等）
部署流程并在浏览器中查看结果

自定义代码开发

编辑前端文件位于~/.node-red/uibuilder/<your-url>/src目录：

index.html：定义页面结构
index.css：定制样式
index.js：处理业务逻辑

基础HTML结构示例：

<div id="more">等待数据...</div>

JavaScript响应示例：

uibuilder.onChange('msg', (msg) => {
    $('#more').textContent = msg.payload
})

动态UI更新方法

UI Builder提供了多种简单的方法来动态更新Web页面内容：

1. 使用uib-topic属性

在任何HTML元素上添加uib-topic自定义属性，实现自动内容更新：

<p uib-topic="mytopic">初始文本</p>

从Node-RED发送消息{topic:'mytopic', payload:'来自Node-RED的消息'即可自动更新元素内容。

2. 使用uib-var自定义组件

<uib-var topic="mytopic"></uib-var>

3. 前端JavaScript监听

uibuilder.onChange('msg', (msg) => {
    const element = $(`#${msg.topic}`)
    if (msg.attribute) {
        element.setAttribute(msg.attribute, msg.payload)
    } else {
        element.innerHTML = msg.payload
    }
})

4. 零代码节点更新

使用uib-update节点可以直接更新页面上的特定元素，无需编写任何前端代码。

项目目录结构

了解项目结构对于有效使用UI Builder至关重要：

node-red-contrib-uibuilder/
├── docs/                    # 完整文档
│   ├── images/              # 文档图片资源
│   ├── using/               # 使用指南
│   └── client-docs/         # 客户端文档
├── examples/                # 示例流程
├── front-end/               # 前端资源文件
│   ├── uibuilder.*.js      # 客户端库
│   ├── uib-brand.css        # 品牌样式
│   └── utils/               # 工具函数
└── nodes/                   # 节点实现
    ├── uibuilder/           # 主节点
    ├── uib-element/         # 元素创建节点
    └── uib-update/          # 更新节点