怎么建网站锦州,微网站建设教程视频,网站建设 微信公众号运营,wordpress 签到插件使用场景介绍
在VUE中使用nodeRed实现对节点的 增删改查等功能#xff0c;且储存成功之后下点击时启动对应流程 安装与配置
1.安装NodeRed
npm install -g --unsafe-perm node-red
安装完成后#xff0c;你可以通过运行以下命令来启动Node-RED
node-red-start2. 配置文件
N…使用场景介绍
在VUE中使用nodeRed实现对节点的 增删改查等功能且储存成功之后下点击时启动对应流程 安装与配置
1.安装NodeRed
npm install -g --unsafe-perm node-red
安装完成后你可以通过运行以下命令来启动Node-RED
node-red-start2. 配置文件
Node-RED的主要配置文件是settings.js。这个文件位于Node-RED的安装目录下或者在你的用户目录下的.node-red文件夹中。你可以通过编辑这个文件来自定义Node-RED的行为。首先就是部署了要真正的实现且储存成功之后下点击时启动对应流程还是要麻烦后端同学部署一下(具体如何部署我也不清楚) 后端部署之后会提供一个地址 如: http://192.168.1.19:1880/#flow/ff07562cd6ebb566 http://192.168.1.19:1880 为后端提供的地址ff07562cd6ebb566为当前流程的ID已启动对应的流程 拖动一些节点右上角后点击部署后会自动存储一个json文件
[{id: 8587ac557a88ac60,//流程IDtype: tab,label: 流程 2, //流程名称disabled: false,info: ,env: []},{id: de312079982d37a9,type: debug,z: 8587ac557a88ac60,name: debug 3,//节点类型active: true,tosidebar: true,console: false,tostatus: false,complete: payload,targetType: msg,statusVal: ,statusType: auto,x: 1000,//节点位置y: 300,//节点位置wires: []},{id: b3f87d7d2496d6b3,type: http request,z: 8587ac557a88ac60,name: Get News Details,method: GET,ret: obj,paytoqs: ignore,url: http://shop.pulisi.sd.cn:8088/pleaseds/stationlist?strwhere,tls: ,persist: false,proxy: ,insecureHTTPParser: false,authType: ,senderr: false,headers: [],x: 370,y: 360,wires: [[6f54cda79df1511a]]},{id: 10a4b6f9d7cb092c,type: inject,z: 8587ac557a88ac60,name: ,props: [{p: payload},{p: topic,vt: str}],repeat: ,crontab: ,once: false,onceDelay: 0.1,topic: ,payload: ,payloadType: date,x: 110,y: 300,wires: [[b3f87d7d2496d6b3]]},{id: 6f54cda79df1511a,type: function,z: 8587ac557a88ac60,name: function 3,func: \nreturn msg;,outputs: 1,timeout: 0,noerr: 0,initialize: ,finalize: ,libs: [],x: 680,y: 360,wires: [[de312079982d37a9]]}
]代码演示增删改查
在以上完成 安装 部署 存储等 就可以进行编程了完整代码我会贴在我的雨雀笔记毕竟是公司代码需要一些保密
查询出对应节点 getlist() {axios.get(http://192.168.1.19:1880/flows) 这里是替换你后端的api.then(res {console.log(res, res);// 将API返回的数据res.data进行过滤和映射处理生成一个新的数组赋值给this.SceneLinkageListthis.SceneLinkageList res.data// 过滤出type为tab且label存在的项.filter(item item.type tab item.label)// 对过滤后的每一项进行映射生成新的对象数组.map(item ({// 新对象的id属性取自原项的idid: item.id,// 新对象的label属性取自原项的labellabel: item.label,// 新对象的description属性取自原项的info如果info不存在则默认为空字符串description: item.info || ,// 新对象的status属性根据原项的disabled属性决定如果disabled为true则为disabled否则为enabledstatus: item.disabled ? disabled : enabled}));// 将处理后的SceneLinkageList数组复制一份给filteredSceneLinkageList用于后续的过滤显示this.filteredSceneLinkageList [...this.SceneLinkageList]; }).catch(error {console.error(请求失败:, error);});},启动对应流程 将上一步的json数据保存后 渲染到页面后点击时传值
launchNodeRED(rule) {console.log(rule, rule);if (!rule.id) {console.error(该规则没有关联的流程 ID);this.$message.error(无法启动流程未指定流程 ID);return;}if (this.currentNodeREDWindow !this.currentNodeREDWindow.closed) {this.currentNodeREDWindow.close();}const nodeREDUrl http://192.168.1.19:1880/#flow/${rule.id};console.log(Node-RED URL:, nodeREDUrl);try {this.currentNodeREDWindow window.open(nodeREDUrl, nodeREDWindow);if (!this.currentNodeREDWindow) {throw new Error(弹出窗口被阻止);}} catch (error) {console.error(打开 Node-RED 流程失败:, error);this.$message.error(启动流程失败请检查您的浏览器设置);}
},删除 axios.delete(http://192.168.1.19:1880/flow/${rule.id}); 新增与编辑 async submitForm() { try { const valid await this.$refs.ruleForm.validate(); if (!valid) return; if (this.dialogTitle 新增规则) {const response await axios.post(http://192.168.1.19:1880/flow, {label: this.formData.name,info: this.formData.description,nodes: []});const newFlow response.data;this.SceneLinkageList.push({id: newFlow.id,label: newFlow.label,description: newFlow.info,status: enabled});this.$message.success(新流程创建成功);this.launchNodeRED({ id: newFlow.id });} else {const response await axios.get(http://192.168.1.19:1880/flow/${this.formData.id});const flow response.data;flow.label this.formData.name;flow.info this.formData.description;await axios.put(http://192.168.1.19:1880/flow/${this.formData.id}, flow);const updatedRule this.SceneLinkageList.find(rule rule.id this.formData.id);if (updatedRule) {updatedRule.label this.formData.name;updatedRule.description this.formData.description;}this.$message.success(规则修改成功);}this.dialogVisible false;this.getlist(); // Refresh the list after adding or editing} catch (error) {console.error(提交表单失败:, error);this.$message.error(操作失败请重试);}
},这里只做简单的介绍看不懂把代码喂给AI他也能给你解答
如何在nodeRed中运行想要的结果
关于noderRed如何配置节点并运行
1.首先需要一个能触发的节点如 inject 拖到画布中 2.配置HTTP节点自定义调整 请求方式 URL地址 返回值等 无需过多配置 3.配置function放(可省略) 4.debug节点打印输出的内容 5.将他们如图依次连接后点击部署后 点击 inject 左侧按钮即可打印接口返回的结果
如何个性化配置nodeRed
nodeRed下载后 网页标题与页面标题都是初始化的 如果要修改则需要去nodeRed安装目录找到settings.js文件
如何找到nodeRed安装目录常见的默认安装目录
- Windows: C:\Users\[用户名]\.node-red
- Linux: /home/[用户名]/.node-red
- Mac: /Users/[用户名]/.node-red找到后打开文件找到 editorTheme: {}在这个里面添加你要的值如 page: {title: 规则设计器},header: {title: 规则设计器},最后就是安装个性化插件 以及 设置语言设置中皆可自定义调整
