npm 包 node-red-dashboard-es 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在开发 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 组件，包括仪表盘、表格、数组和文本输入等。

安装和配置

  1. 安装 node-red-dashboard-es：
--- ------- ---------------------
  1. 在 node-red 的 settings.js 文件中，添加以下代码：
- -----------

----------- -------------------- ----------
--- -
    ----- ------
    ------ ----------
    ------- ----------------
-

  1. Node-RED 添加启动参数：--userDir path。该参数告诉 Node-RED 使用 /path/to/user/directory 代替默认的用户目录。

  2. 在 node-red 的项目文件夹中创建 public 文件夹，并在其中创建 index.html 文件，并添加如下代码：

--------- -----
------
  ------
    ----- -------------------------- ---------------- --
    ------- ---------------------------------
  -------
  ------
    ----------- -- ---------------------------
    -----------------------------
  -------
-------
  1. 启动 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

阅读全文

猜你喜欢

  • npm 包 i6-core 使用教程

    简介 i6-core 是一款基于 Vue.js 封装的前端组件库，它包含了常用的 UI 组件、工具函数和样式等，并且具有高度的可定制性，通过它我们可以快速地构建一个符合业务需求的前端应用。

    3 年前
  • NPM 包 `babel-plugin-syntax-numeric-separator` 使用教程

    在 Javascript 中，数字常常用作一种基本的数据类型。在 ES2021 中，引入了一个新的特性-数字分隔符，可以使数字更容易理解并使代码更易读。然而，并不是所有流行的浏览器都支持这一特性，因此...

    3 年前
  • npm 包 babel-plugin-transform-new-target 使用教程

    本文将详细介绍前端的 npm 包 babel-plugin-transform-new-target 的使用教程，包括安装、配置以及示例代码，希望能对前端开发者有所帮助。

    3 年前
  • npm 包 v-inputmask 使用教程

    v-inputmask 是一个基于 Vue.js 的输入框格式化工具，可以帮助我们轻松地格式化各种类型的输入框。这篇文章将会教你如何使用这个 npm 包，并配合实例代码展示。

    3 年前
  • npm 包 engined-notification-aws 使用教程

    简介 engined-notification-aws 是一个基于 AWS SNS 和 AWS SQS 的通知服务。使用 engined-notification-aws 可以快速地将消息发送到订阅者...

    3 年前
  • npm 包 devicon-react 使用教程

    在前端开发中，icon 图标的使用非常普遍。通常情况下，我们需要使用一些工具或者第三方库来完成 icon 图标的使用。而 devicon-react 就是一个非常好用的 npm 包，它可以让我们方便地...

    3 年前
  • npm 包 engined-mailer 使用教程

    engined-mailer 是一个 Node.js 的邮件发送库，它支持使用 SMTP 和 Amazon SES 两种方式发送邮件。本文将介绍如何使用 engined-mailer 发送邮件。

    3 年前
  • npm 包 glue-ionic-gallery-modal 使用教程

    介绍 npm 是 Node.js 的包管理器，其中包含了大量的开源 JavaScript 库。在前端开发中，使用 npm 能够极大地提高开发效率和代码质量，同时也可以避免重复造轮子。

    3 年前
  • npm 包 react-on-a-roll 使用教程

    在前端开发中，React 是非常受欢迎的框架之一。而在 React 的应用程序构建中，使用 webpack 作为打包工具则是非常常见的做法。因此，许多开发者使用了 react-on-a-roll 这个...

    3 年前
  • sprint-helper

    An IRC bot to help with IPFS sprint notifications ipfs-sprint-helper An IRC bot to help IPFS announ...

    3 年前
  • npm 包 @anarklab/react-gmaps 使用教程

    简介 @anarklab/react-gmaps 是一个基于 Google Maps JavaScript API 的 React 组件库，可以方便地在 React 中使用 Google 地图功能。

    3 年前
  • npm 包 express-error-response 使用教程

    在前端开发中，我们经常会遇到各种错误和异常情况，如未知的 URL、数据库连接失败等。为了更好地处理这些错误和异常，我们可以使用 npm 包 express-error-response 这一工具来快速...

    3 年前
  • npm 包 engined-mailer-aws 使用教程

    介绍 engined-mailer-aws 是一个 Node.js 的 npm 包，它可以帮助我们通过 AWS SES（Simple Email Service）服务发送邮件。

    3 年前
  • npm 包 ionic-gallery-modal-custom 使用教程

    Ionic 是一款流行的前端框架，它允许我们开发跨平台的移动应用。其中，Ionic Gallery Modal 是一个非常实用的组件，它允许我们在应用中创建一个类似于图片库的模态框。

    3 年前
  • npm 包 engined-notification 使用教程

    什么是 engined-notification？ Engined-notification 是一款基于 Node.js 开发的通知管理器。通过该 npm 包，前端开发人员可以很容易地在应用中实现通知...

    3 年前
  • npm 包 ionic2-fixedscroll-directive 使用教程

    简介 ionic2-fixedscroll-directive 是一个基于 ionic2 框架的 npm 包，提供了一个自定义指令 fixedScroll，可以使一个 ion-content 元素在滚...

    3 年前
  • npm 包 rmq-helpers 使用教程

    rmq-helpers 是一个前端常用的工具包，它提供了一些常用的函数和工具方法，帮助我们解决各种常见的问题。在前端开发过程中，这个工具包可以让我们更加高效地编写代码，减少重复劳动，提高开发效率。

    3 年前
  • npm 包 babel-plugin-codemod-optional-catch-binding 使用教程

    babel-plugin-codemod-optional-catch-binding 是一个 babel 插件，它可以帮助我们将捕获异常时的 try-catch 语句中的错误变量名绑定修改为可选的（...

    3 年前
  • npm 包 babel-plugin-transform-export-namespace 使用教程

    前言 在前端开发中，我们经常会使用 JavaScript 模块化开发。ES6 的模块系统已经被大家广泛应用，其对于开发和维护大型项目提供了很多便利。然而，对于一些老项目而言，其可能未使用 ES6 模块...

    3 年前
  • npm 包 babel-plugin-transform-numeric-separator 使用教程

    什么是 babel-plugin-transform-numeric-separator babel-plugin-transform-numeric-separator 是一个用于将数字的分隔符（_...

    3 年前

相关推荐

    暂无文章