在开发 Web 应用时，前端框架很重要，但是一个好的界面模板同样不可或缺。在这个方面，node-red-dashboard-es 是一个值得推荐的 npm 包。本文将详细介绍使用 node-red-dashboard-es 的步骤及注意事项。
什么是 node-red-dashboard-es
node-red-dashboard-es 是一个使用 AngularJS 1.x 开发的 Web 应用框架，专门设计用于 node-red 流程编辑器的 Dashboard 扩展插件。它提供了可在 node-red 编辑窗口中轻松部署的基础 UI 组件，包括仪表盘、表格、数组和文本输入等。
安装和配置
- 安装 node-red-dashboard-es：
npm install node-red-dashboard-es
- 在 node-red 的 settings.js 文件中，添加以下代码：
# settings.js
httpStatic: path.join(__dirname, "public"),
ui: {
path: "/ui",
theme: "default",
serves: ["dashboard-es"]
}Node-RED 添加启动参数：--userDir
path。该参数告诉 Node-RED 使用 /path/to/user/directory 代替默认的用户目录。在 node-red 的项目文件夹中创建 public 文件夹，并在其中创建 index.html 文件，并添加如下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- -------------------------- ---------------- --
------- ---------------------------------
-------
------
----------- -- ---------------------------
-----------------------------
-------
-------- 启动 node-red 并打开浏览器，在地址栏中输入 http://localhost:1880/ui，即可看到 node-red-dashboard-es 的效果。
示例代码
接下来，让我们看一下如何创建一个简单的数据展示界面。该界面包含一个 仪表盘和一个表格。
HTML 代码
-- -------------------- ---- -------
--------- -----
------
------
----- -------------------------- ---------------- --
------- ---------------------------------
-------
------
----------- -- ---------------------------
--------------
---- --------------------------------------
---------- ------- -- --- -----------
------
---- --------------------------------------
------- ------------------------------ ------------
--------------
--------------
---------
---------------
--------------------
------------------------------
---------- --------------------
---------------------
----------------
-----------------
---- ---------------- ---------------------------- - ---
-----------------------
------
---- ---------------------------- - ---
----- -- -- ----
------
------------------
----------
---------------
--------------
---------
---------------
--------------------
------------------------
------------ -----------
---------------------
----------------
-----------------
-------
-------
----
-------------
----------------
-----
--------
-------
--- -------------- -- ----------------
---------------------
------------------------
-----
--------
--------
------------------
----------
---------------
---------------
------
---------------
-------
-------Script代码
-- -------------------- ---- -------
-------------------------- -- -
--- -------- - --------
--- ---- - ------------- ----- ------------ -------- ------------- ------------- ----- -----------
--- ---- - ---------------- ------
---------------------- ---- -- ------------------------------
---------------------- ---- -- --------------------------------
--------------- - -- --------------------- ------- --- -----------
------------
---总结
node-red-dashboard-es 是一个非常实用的 npm 包，可以帮助我们快速搭建 Web 应用。通过本文的介绍，您已经了解了如何安装和配置 node-red-dashboard-es，以及如何使用它创建数据展示界面。希望本文对您有所帮助，并且能够激发您对于前端技术的学习和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0b65