Node-RED中實現HTML表單提交和獲取提交的內容
阿新 • • 發佈：2022-04-16
場景
Node-RED中建立靜態網頁和動態網頁內容：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124211653
在上面的基礎上，怎樣實現使用者輸入並提交表單，然後解析獲取表單提交的內容
注：
部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
1、第一個流程迴應一個HTML表單網頁，路由/form，方法是get
2、template節點，建立表單form標籤，method屬性是POST
action是表單處理的/name路由
<html>
<head>
<title>HTML Form</title>
</head>
<body>
<form action="/name" method="POST">
姓名:
<input type="text" name="user"><br/><br/>
<input type="submit" value="送出">
</form>
</body>
</html>
3、第二個流程是表單處理，因為是接收表單，所以/name的方法是post
template節點，因為上面提交時imput標籤的name是user,所以表單處理使用
msg.payload.user獲取
<html>
<head>
<title>Form Handle</title>
</head>
<body>
<h1>輸入姓名: {{payload.user}} </h1>
</body>
</html>
4、json資料
[ { "id": "f4a4d8eab7935bc8", "type": "tab", "label": "流程 3", "disabled": false, "info": "", "env": [] }, { "id": "c428312d1f6165d1", "type": "mqtt-broker", "name": "mqtt", "broker": "127.0.0.1", "port": "1883", "clientid": "", "autoConnect": true, "usetls": false, "protocolVersion": "4", "keepalive": "60", "cleansession": true, "birthTopic": "", "birthQos": "0", "birthPayload": "", "birthMsg": {}, "closeTopic": "", "closeQos": "0", "closePayload": "", "closeMsg": {}, "willTopic": "", "willQos": "0", "willPayload": "", "willMsg": {}, "sessionExpiry": "" }, { "id": "51eee50b4ec9422f", "type": "ui_group", "name": "dashboardDemo", "tab": "29ae4c620f43ee0d", "order": 1, "disp": true, "width": "6", "collapse": false, "className": "" }, { "id": "29ae4c620f43ee0d", "type": "ui_tab", "name": "Home", "icon": "dashboard", "disabled": false, "hidden": false }, { "id": "a506c767a5c1edbd", "type": "ui_base", "theme": { "name": "theme-light", "lightTheme": { "default": "#0094CE", "baseColor": "#0094CE", "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif", "edited": true, "reset": false }, "darkTheme": { "default": "#097479", "baseColor": "#097479", "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif", "edited": false }, "customTheme": { "name": "Untitled Theme 1", "default": "#4B7930", "baseColor": "#4B7930", "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif" }, "themeState": { "base-color": { "default": "#0094CE", "value": "#0094CE", "edited": false }, "page-titlebar-backgroundColor": { "value": "#0094CE", "edited": false }, "page-backgroundColor": { "value": "#fafafa", "edited": false }, "page-sidebar-backgroundColor": { "value": "#ffffff", "edited": false }, "group-textColor": { "value": "#1bbfff", "edited": false }, "group-borderColor": { "value": "#ffffff", "edited": false }, "group-backgroundColor": { "value": "#ffffff", "edited": false }, "widget-textColor": { "value": "#111111", "edited": false }, "widget-backgroundColor": { "value": "#0094ce", "edited": false }, "widget-borderColor": { "value": "#ffffff", "edited": false }, "base-font": { "value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif" } }, "angularTheme": { "primary": "indigo", "accents": "blue", "warn": "red", "background": "grey", "palette": "light" } }, "site": { "name": "Node-RED Dashboard", "hideToolbar": "false", "allowSwipe": "false", "lockMenu": "false", "allowTempTheme": "true", "dateFormat": "DD/MM/YYYY", "sizes": { "sx": 48, "sy": 48, "gx": 6, "gy": 6, "cx": 6, "cy": 6, "px": 0, "py": 0 } } }, { "id": "248cbbb0.18e794", "type": "ui_group", "name": "MyGroup", "tab": "3f79c420.cfc1bc", "order": 1, "disp": true, "width": "6", "collapse": false }, { "id": "3f79c420.cfc1bc", "type": "ui_tab", "name": "Home", "icon": "dashboard", "disabled": false, "hidden": false }, { "id": "a0954be5.a7f7e8", "type": "ui_group", "name": "MyInput", "tab": "3f79c420.cfc1bc", "order": 2, "disp": true, "width": "6", "collapse": false }, { "id": "508bd6f8398ab80f", "type": "ui_group", "name": "OpenWeatherMap", "tab": "3f79c420.cfc1bc", "order": 3, "disp": true, "width": "6", "collapse": false }, { "id": "8824dea1.83e31", "type": "websocket-client", "path": "ws://localhost:9898/", "tls": "", "wholemsg": "false" }, { "id": "3e898387.1abbec", "type": "http in", "z": "f4a4d8eab7935bc8", "name": "", "url": "/name", "method": "post", "upload": false, "swaggerDoc": "", "x": 270, "y": 300, "wires": [ [ "9595631d.c6261" ] ] }, { "id": "25b130b6.60b02", "type": "http response", "z": "f4a4d8eab7935bc8", "name": "", "statusCode": "", "headers": {}, "x": 590, "y": 300, "wires": [] }, { "id": "9595631d.c6261", "type": "template", "z": "f4a4d8eab7935bc8", "name": "HTML網頁", "field": "payload", "fieldType": "msg", "format": "handlebars", "syntax": "mustache", "template": "<html>\n <head>\n <title>Form Handle</title>\n </head>\n <body>\n <h1>輸入姓名: {{payload.user}} </h1>\n </body>\n</html>\n", "output": "str", "x": 430, "y": 300, "wires": [ [ "25b130b6.60b02" ] ] }, { "id": "ebf6d171.b92a2", "type": "template", "z": "f4a4d8eab7935bc8", "name": "HTML表單", "field": "payload", "fieldType": "msg", "format": "handlebars", "syntax": "mustache", "template": "<html>\n <head>\n <title>HTML Form</title>\n </head>\n <body>\n <form action=\"/name\" method=\"POST\">\n 姓名:\n <input type=\"text\" name=\"user\"><br/><br/>\n <input type=\"submit\" value=\"送出\">\n </form> \n </body>\n</html>\n\n", "output": "str", "x": 430, "y": 120, "wires": [ [ "41fbbc2d.654f24" ] ] }, { "id": "bc5ee3d8.079d7", "type": "http in", "z": "f4a4d8eab7935bc8", "name": "", "url": "/form", "method": "get", "upload": false, "swaggerDoc": "", "x": 260, "y": 120, "wires": [ [ "ebf6d171.b92a2" ] ] }, { "id": "41fbbc2d.654f24", "type": "http response", "z": "f4a4d8eab7935bc8", "name": "", "statusCode": "", "headers": {}, "x": 590, "y": 120, "wires": [] } ]