⾃定义node-red节点超级详细⽰例解读
本⽂参考官⽅⽹站⽰例
1. 如果什么都不懂，参考我的package.json 。
2. ⾸先我们必须在 package.json 中添加 node-red 的部分
{
"name": "node-red-lower-case",
"version": "1.0.0",
"description": "⾃定义node-red节点⼩写转化",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"node-red" : {
"nodes": {
"lower-case": "lower-case.js"
}
}
}
3. 除了这个，项⽬中还必须包含⼀个 js 和html ⽂件，也就是上⾯指⽰的lower-case.js
lower-case.js ⽂件
function LowerCaseNode(config) {
var node = this;
<('input', function(msg) { // 对消息进⾏处理消息到达节点时，事件侦听就会启动，进⾏消息转化
msg.payload = LowerCase();
node.send(msg); // 输出的消息如果msg为空则不发任何消息也可以进⾏多个发送，node.send([msg1,msg2])
});
}
}
lower-case.html ⽂件
<script type="text/javascript">
category: 'function', // 节点调⾊板的类别
color: '#a6bbcf', // 使⽤的背景颜⾊
defaults: { // 节点可编辑的属性
name: {value:""}
},
inputs:1, // 节点有多少输⼊ 0 或者 1
outputs:1, // 节点有多少输出 0 或者更多
icon: "file.png", // 要使⽤的图标
label: function() { // ⼯作空间中要使⽤的标签
return this.name||"lower-case";
}
});
</script>
<script type="text/x-red" data-template-name="lower-case"> <!--date-template-name 编辑模板，⽤户定义节点的编辑对话框内容，值对节点类型进⾏绑定和上⾯的registerType 中类型进⾏匹配-->
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label> <!--node-input 后⾯的名字和defaults 中的名字相同-->
<input type="text" id="node-input-name" placeholder="Name"> <!--id 值和for 中的值相同-->
</div>
</script>
<script type="text/x-red" data-help-name="lower-case"> <!--对应的帮助⽂档-->
<p>A simple node that converts the message payloads into all lower-case characters</p> <!--i单的提⽰信息-->
</script>
上⾯是最简单的⽤法，现在我们使⽤复杂的⽤法进⾏升级改造，包括tab 的使⽤ 简单⽰范本⽂参考mysql 的使⽤
<i> 中使⽤的图标库
其中 isterType 注册的节点名称不要重名，负责会出现异常情况
重要的就是 节点中，相当于也可以创建节点，但是这个节点也是需要进⾏注册的，也就是说其实这个节点，仍然是在RED 中，如下图红⾊部分
js ⽂件
function LowerCaseNode(config) {
var node = this;
<('input', function(msg) { // 对消息进⾏处理消息到达节点时，事件侦听就会启动，进⾏消息转化
msg.payload = LowerCase();
// 获取所有的值
var mydb = db); // 获取节点也就是这个节点⾥⾯包含的节点
msg.payload = "name =" + config.name +"{"+ "host="+ mydb.host +"port="+ mydb.port + "user="+ dentials.user + "password="+ dentials.password + "}";
node.send(msg); // 输出的消息如果msg为空则不发任何消息也可以进⾏多个发送，node.send([msg1,msg2])
});
}
function MySQLNode(n) {
this.host = n.host;
this.port = n.port;
< = n.tz || "local";
this.dbname = n.db;
this.setMaxListeners(0);
var node = this;
}
credentials: {
user: {type: "text"},
password: {type: "password"}
}
});
}
html ⽂件
<script type="text/javascript">
category: 'function', // 节点调⾊板的类别或者字符串
color: '#a6bbcf', // 使⽤的背景颜⾊
defaults: { // 节点可编辑的属性
name: {value:""},
mydb: {type:"MySQLdatabase1",required:true}
},
align: 'right', // 对齐⽅式
inputs:1, // 节点有多少输⼊ 0 或者 1
outputs:1, // 节点有多少输出 0 或者更多
outputLabels: ["1","2","3"], // 输出节点⿏标放上去之后显⽰的内容
icon: "file.png", // 要使⽤的图标
label: function() { // ⼯作空间中要使⽤的标签就是节点的标签
return this.name||"lower-case";
},
oneditprepare: function () {
// 创建tab
var tabs = ate({
var tabs = ate({
id: "node-input-tabs", <!--绑定tab位置-->
onchange: function (tab) { <!--菜单的内容-->
$("#node-input--tabs-content").children().hide();
$("#" + tab.id).show();
}
});
tabs.addTab({
id: "database-query",
label: "SQL query"
});
tabs.addTab({ <!--添加菜单-->
id: "database-content", <!--绑定的div id-->
label: "connection" <!--菜单名称-->
});
}
});
</script>
<script type="text/javascript">
category: 'config',
defaults: {
host: {value:"localhost",required:true},
port: {value:"3306",required:true},
/
/user: {value:"",required:true},
//pass: {value:"",required:true},
db: {value:"",required:true},
tz: {value:""}
},
credentials: {
user: {type: "text"},
password: {type: "password"}
},
label: function() {
return this.db;
}
});
</script>
<script type="text/x-red" data-template-name="lower-case"> <!--模板就是对应上⾯注册的节点类型-->
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label> <!--node-input 后⾯的名字和defaults 中的名字相同--> <input type="text" id="node-input-name" placeholder="Name"> <!--id 值和for 中的值相同-->
</div>
<br/>
<div class="form-row">
<label for="node-input-mydb"><i class="fa fa-database"></i> Database</label>
<input type="text" id="node-input-mydb">
</div>
<br/>
<div class="form-row">
input标签placeholder属性<ul id="node-input-tabs"></ul>
</div>
<div id="node-input--tabs-content" >
<!--菜单内容-->
<div id="database-query" >
<div class="form-row">
<label for="node-input-server"><i class="fa fa-globe"></i> Server</label>
<input type="text" id="node-input-server">
<input type="text" id="node-input-server">
</div>
</div>
<div id="database-content" >
<div class="form-row">
<label for="node-input-server"><i class="fa fa-globe"></i> Server</label>
<input type="text" id="node-input-server">
</div>
<br/>
<div class="form-row">
<label for="node-input-port"><i class="fa fa-tag"></i> Port</label>
<input type="text" id="node-input-port" placeholder="Port">
</div>
</div>
</div>
</script>
<script type="text/x-red" data-template-name="MySQLdatabase1"> <!--模板就是对应上⾯注册的节点类型-->
<div class="form-row">
<label for="node-config-input-host"><i class="fa fa-globe"></i> Host</label>
<input type="text" id="node-config-input-host">
</div>
<div class="form-row">
<label for="node-config-input-port"><i class="fa fa-random"></i> Port</label>
<input type="text" id="node-config-input-port">
</div>
<div class="form-row">
<label for="node-config-input-user"><i class="fa fa-user"></i> User</label>
<input type="text" id="node-config-input-user">
</div>
<div class="form-row">
<label for="node-config-input-pass"><i class="fa fa-lock"></i> Password</label>
<input type="password" id="node-config-input-password">
</div>
<div class="form-row">
<label for="node-config-input-db"><i class="fa fa-database"></i> Database</label>
<input type="text" id="node-config-input-db">
</div>
<div class="form-row">
<label for="node-config-input-tz"><i class="fa fa-clock-o"></i> Timezone</label>
<input type="text" id="node-config-input-tz">
</div>
</script>
<script type="text/x-red" data-help-name="lower-case">
<p>A simple node that converts the message payloads into all lower-case characters</p> <!--i单的提⽰信息--> </script>
转载于:wwwblogs/chengyangyang/p/11169046.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论