如何创建自定义节点的UI

Question

我想创建像仪表板UI(在此处输入链接描述(、节点按钮、表单、表格等节点。。。自定义节点代码有两个输入，我想输入呈现到网站(HTML(。我该怎么办？我的节点：http in->自定义节点->http输出。HTML:

<script type="text/javascript">
RED.nodes.registerType('lower-case', {
category: 'input',
color: '#a6bbcf',
defaults: {name: {value:""},authtoken: {value:""} },
credentials: { username: {type: "text"}, password: {type: "password"},},
inputs: 1,
outputs: 1,
icon: "file.png",
label: function() {return this.name || "lower-case'";},
});
</script>
<script type="text/html" data-template-name="lower-case">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name">
</div>
<div class="form-row">
<label for="node-input-username"><i class="fa fa-tag"></i> Username</label>
<input type="text" id="node-input-username">
</div>
<div class="form-row">
<label for="node-input-password"><i class="fa fa-tag"></i> Password</label>
<input type="password" id="node-input-password">
</div>
</script>

JS:

module.exports = function(RED) {
"use strict";
function LowerCaseNode(config) {
console.log("config", config)
RED.nodes.createNode(this, config);
var node = this;
node.on('input', function(msg) {
var username = this.credentials.username;
var password = this.credentials.password;
msg.payload = {
"username": username,
"password": password
}
node.send(msg);
});
this.close('close', function() {});
}
RED.nodes.registerType("lower-case", LowerCaseNode, {
credentials: {
username: { type: "text" },
password: { type: "password" }
}
});
}

Answer 1

如果您想通过一对http-in/http响应节点将HTML发送回触发您的节点的浏览器，则您的节点需要设置msg.payload以在将要发送的HTML发送到http响应节点之前保存该HTML。

您可能还想将msg.headers设置为包括text/html的content-type条目