使用场景介绍
在VUE中使用nodeRed实现对节点的 增删改查等功能，且储存成功之后下点击时启动对应流程
安装与配置
1.安装NodeRed
npm install -g --unsafe-perm node-red
安装完成后，你可以通过运行以下命令来启动Node-RED
node-red-start
2. 配置文件
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",//流程ID
"type": "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.SceneLinkageList
this.SceneLinkageList = res.data
// 过滤出type为'tab'且label存在的项
.filter(item => item.type === 'tab' && item.label)
// 对过滤后的每一项进行映射，生成新的对象数组
.map(item => ({
// 新对象的id属性，取自原项的id
id: item.id,
// 新对象的label属性，取自原项的label
label: item.label,
// 新对象的description属性，取自原项的info，如果info不存在则默认为空字符串
description: item.info || '',
// 新对象的status属性，根据原项的disabled属性决定，如果disabled为true则为'disabled'，否则为'enabled'
status: 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: "规则设计器" },
最后就是安装个性化插件 以及 设置语言，设置中皆可自定义调整
![[c++进阶(三)]单例模式及特殊类的设计](https://i-blog.csdnimg.cn/direct/de16d0141c454d46a212b7e4837e3d19.png)
