Node-RED UI 和儀表板技術
基本網頁
此流程將向您展示如何使用 http 端點節點構建基本網頁
要在不使用儀表板的情況下創建 UI，您可以使用 http 端點節點。在此示例中，我們將通過一個非常基本的示例介紹如何使用 http 端點構建流
從輸入托盤中拖動 http 輸入節點並添加一個獲取端點 url 路徑。這將是您可以訪問您的網頁的端點
的
拖動模板節點並添加一些基本的 HTML 以在模板屬性中查看網頁上的 html
<!DOCTYPE html>
<html>
<頭>
<title>你好</title>
的
<h1>你好世界</h1>
</頭>
<正文>
的
<p>這是一個關於如何創建網頁和儀表板的演示</p>
</body>
</html>
你的流程應該是這樣的，一旦你部署你應該能夠通過轉到你的應用程序的 URL 並附加你的端點來訪問你的網頁（在我的例子中：https: //pmistrynoderedtest.mybluemix.net/helloworld）
恭喜！您可以將應用程序的 URL 發送給您的朋友和家人，並說您創建了一個網頁。很簡單吧？您可以通過添加 javascript 和 css 來創建一個漂亮的動態網頁，使您的網頁更具交互性！
在下一節中，我將向您展示如何在沒有任何 html、css 或 JS 的情況下創建 UI。只是純粹的 node-RED pallet 節點！
的
[{"id":"473c5d1e.3f773c","type":"http in","z":"790250a5.c8101","name":"","url":"/helloworld","method":"get","upload":false,"swaggerDoc":"","x":180,"y":80,"wires":[["57d73f0b.fd0e78"]]},{"id":"57d73f0b.fd0e78","type":"template","z":"790250a5.c8101","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n\t<title>Hello</title>\n\n\t<h1>Hello World</h1>\n</head>\n<body>\n\n<p> This is a demo on how to create webpages and dashboards </p>\n</body>\n</html>","output":"str","x":350,"y":80,"wires":[["44786f9d.5edfb8"]]},{"id":"44786f9d.5edfb8","type":"http response","z":"790250a5.c8101","name":"","statusCode":"","headers":{},"x":530,"y":80,"wires":[]},{"id":"e1c55feb0fa3bea2","type":"inject","z":"790250a5.c8101","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Hello World","payloadType":"str","x":170,"y":260,"wires":[["4099ee4582aee041"]]},{"id":"b0b333bad257bdef","type":"debug","z":"790250a5.c8101","name":"debug 61","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":560,"y":200,"wires":[]},{"id":"4099ee4582aee041","type":"function","z":"790250a5.c8101","name":"function 14","func":"var newString = msg.payload.replace(\"World\",\"Everyone , I hope you enjoy Node Red \");\nreturn {payload : newString};\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":370,"y":260,"wires":[["b0b333bad257bdef"]]},{"id":"e84fee31dd7b61eb","type":"inject","z":"790250a5.c8101","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Hello World","payloadType":"str","x":170,"y":200,"wires":[["b0b333bad257bdef"]]}]
http://127.0.0.1:1880/helloworld
沒有留言:
張貼留言