当前位置:   article > 正文

Node-RED中实现HTML表单提交和获取提交的内容_node-red post

node-red post

场景

Node-RED中建立静态网页和动态网页内容:

Node-RED中建立静态网页和动态网页内容_霸道流氓气质的博客-CSDN博客

在上面的基础上,怎样实现用户输入并提交表单,然后解析获取表单提交的内容

注:

博客:
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、第一个流程回应一个HTML表单网页,路由/form,方法是get

2、template节点,建立表单form标签,method属性是POST

action是表单处理的/name路由

  1. <html>
  2. <head>
  3. <title>HTML Form</title>
  4. </head>
  5. <body>
  6. <form action="/name" method="POST">
  7. 姓名:
  8. <input type="text" name="user"><br/><br/>
  9. <input type="submit" value="送出">
  10. </form>
  11. </body>
  12. </html>

3、第二个流程是表单处理,因为是接收表单,所以/name的方法是post

template节点,因为上面提交时imput标签的name是user,所以表单处理使用

msg.payload.user获取

  1. <html>
  2. <head>
  3. <title>Form Handle</title>
  4. </head>
  5. <body>
  6. <h1>输入姓名: {{payload.user}} </h1>
  7. </body>
  8. </html>

4、json数据

  1. [
  2. {
  3. "id": "f4a4d8eab7935bc8",
  4. "type": "tab",
  5. "label": "流程 3",
  6. "disabled": false,
  7. "info": "",
  8. "env": []
  9. },
  10. {
  11. "id": "c428312d1f6165d1",
  12. "type": "mqtt-broker",
  13. "name": "mqtt",
  14. "broker": "127.0.0.1",
  15. "port": "1883",
  16. "clientid": "",
  17. "autoConnect": true,
  18. "usetls": false,
  19. "protocolVersion": "4",
  20. "keepalive": "60",
  21. "cleansession": true,
  22. "birthTopic": "",
  23. "birthQos": "0",
  24. "birthPayload": "",
  25. "birthMsg": {},
  26. "closeTopic": "",
  27. "closeQos": "0",
  28. "closePayload": "",
  29. "closeMsg": {},
  30. "willTopic": "",
  31. "willQos": "0",
  32. "willPayload": "",
  33. "willMsg": {},
  34. "sessionExpiry": ""
  35. },
  36. {
  37. "id": "51eee50b4ec9422f",
  38. "type": "ui_group",
  39. "name": "dashboardDemo",
  40. "tab": "29ae4c620f43ee0d",
  41. "order": 1,
  42. "disp": true,
  43. "width": "6",
  44. "collapse": false,
  45. "className": ""
  46. },
  47. {
  48. "id": "29ae4c620f43ee0d",
  49. "type": "ui_tab",
  50. "name": "Home",
  51. "icon": "dashboard",
  52. "disabled": false,
  53. "hidden": false
  54. },
  55. {
  56. "id": "a506c767a5c1edbd",
  57. "type": "ui_base",
  58. "theme": {
  59. "name": "theme-light",
  60. "lightTheme": {
  61. "default": "#0094CE",
  62. "baseColor": "#0094CE",
  63. "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
  64. "edited": true,
  65. "reset": false
  66. },
  67. "darkTheme": {
  68. "default": "#097479",
  69. "baseColor": "#097479",
  70. "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
  71. "edited": false
  72. },
  73. "customTheme": {
  74. "name": "Untitled Theme 1",
  75. "default": "#4B7930",
  76. "baseColor": "#4B7930",
  77. "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
  78. },
  79. "themeState": {
  80. "base-color": {
  81. "default": "#0094CE",
  82. "value": "#0094CE",
  83. "edited": false
  84. },
  85. "page-titlebar-backgroundColor": {
  86. "value": "#0094CE",
  87. "edited": false
  88. },
  89. "page-backgroundColor": {
  90. "value": "#fafafa",
  91. "edited": false
  92. },
  93. "page-sidebar-backgroundColor": {
  94. "value": "#ffffff",
  95. "edited": false
  96. },
  97. "group-textColor": {
  98. "value": "#1bbfff",
  99. "edited": false
  100. },
  101. "group-borderColor": {
  102. "value": "#ffffff",
  103. "edited": false
  104. },
  105. "group-backgroundColor": {
  106. "value": "#ffffff",
  107. "edited": false
  108. },
  109. "widget-textColor": {
  110. "value": "#111111",
  111. "edited": false
  112. },
  113. "widget-backgroundColor": {
  114. "value": "#0094ce",
  115. "edited": false
  116. },
  117. "widget-borderColor": {
  118. "value": "#ffffff",
  119. "edited": false
  120. },
  121. "base-font": {
  122. "value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
  123. }
  124. },
  125. "angularTheme": {
  126. "primary": "indigo",
  127. "accents": "blue",
  128. "warn": "red",
  129. "background": "grey",
  130. "palette": "light"
  131. }
  132. },
  133. "site": {
  134. "name": "Node-RED Dashboard",
  135. "hideToolbar": "false",
  136. "allowSwipe": "false",
  137. "lockMenu": "false",
  138. "allowTempTheme": "true",
  139. "dateFormat": "DD/MM/YYYY",
  140. "sizes": {
  141. "sx": 48,
  142. "sy": 48,
  143. "gx": 6,
  144. "gy": 6,
  145. "cx": 6,
  146. "cy": 6,
  147. "px": 0,
  148. "py": 0
  149. }
  150. }
  151. },
  152. {
  153. "id": "248cbbb0.18e794",
  154. "type": "ui_group",
  155. "name": "MyGroup",
  156. "tab": "3f79c420.cfc1bc",
  157. "order": 1,
  158. "disp": true,
  159. "width": "6",
  160. "collapse": false
  161. },
  162. {
  163. "id": "3f79c420.cfc1bc",
  164. "type": "ui_tab",
  165. "name": "Home",
  166. "icon": "dashboard",
  167. "disabled": false,
  168. "hidden": false
  169. },
  170. {
  171. "id": "a0954be5.a7f7e8",
  172. "type": "ui_group",
  173. "name": "MyInput",
  174. "tab": "3f79c420.cfc1bc",
  175. "order": 2,
  176. "disp": true,
  177. "width": "6",
  178. "collapse": false
  179. },
  180. {
  181. "id": "508bd6f8398ab80f",
  182. "type": "ui_group",
  183. "name": "OpenWeatherMap",
  184. "tab": "3f79c420.cfc1bc",
  185. "order": 3,
  186. "disp": true,
  187. "width": "6",
  188. "collapse": false
  189. },
  190. {
  191. "id": "8824dea1.83e31",
  192. "type": "websocket-client",
  193. "path": "ws://localhost:9898/",
  194. "tls": "",
  195. "wholemsg": "false"
  196. },
  197. {
  198. "id": "3e898387.1abbec",
  199. "type": "http in",
  200. "z": "f4a4d8eab7935bc8",
  201. "name": "",
  202. "url": "/name",
  203. "method": "post",
  204. "upload": false,
  205. "swaggerDoc": "",
  206. "x": 270,
  207. "y": 300,
  208. "wires": [
  209. [
  210. "9595631d.c6261"
  211. ]
  212. ]
  213. },
  214. {
  215. "id": "25b130b6.60b02",
  216. "type": "http response",
  217. "z": "f4a4d8eab7935bc8",
  218. "name": "",
  219. "statusCode": "",
  220. "headers": {},
  221. "x": 590,
  222. "y": 300,
  223. "wires": []
  224. },
  225. {
  226. "id": "9595631d.c6261",
  227. "type": "template",
  228. "z": "f4a4d8eab7935bc8",
  229. "name": "HTML网页",
  230. "field": "payload",
  231. "fieldType": "msg",
  232. "format": "handlebars",
  233. "syntax": "mustache",
  234. "template": "<html>\n <head>\n <title>Form Handle</title>\n </head>\n <body>\n <h1>输入姓名: {{payload.user}} </h1>\n </body>\n</html>\n",
  235. "output": "str",
  236. "x": 430,
  237. "y": 300,
  238. "wires": [
  239. [
  240. "25b130b6.60b02"
  241. ]
  242. ]
  243. },
  244. {
  245. "id": "ebf6d171.b92a2",
  246. "type": "template",
  247. "z": "f4a4d8eab7935bc8",
  248. "name": "HTML表单",
  249. "field": "payload",
  250. "fieldType": "msg",
  251. "format": "handlebars",
  252. "syntax": "mustache",
  253. "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",
  254. "output": "str",
  255. "x": 430,
  256. "y": 120,
  257. "wires": [
  258. [
  259. "41fbbc2d.654f24"
  260. ]
  261. ]
  262. },
  263. {
  264. "id": "bc5ee3d8.079d7",
  265. "type": "http in",
  266. "z": "f4a4d8eab7935bc8",
  267. "name": "",
  268. "url": "/form",
  269. "method": "get",
  270. "upload": false,
  271. "swaggerDoc": "",
  272. "x": 260,
  273. "y": 120,
  274. "wires": [
  275. [
  276. "ebf6d171.b92a2"
  277. ]
  278. ]
  279. },
  280. {
  281. "id": "41fbbc2d.654f24",
  282. "type": "http response",
  283. "z": "f4a4d8eab7935bc8",
  284. "name": "",
  285. "statusCode": "",
  286. "headers": {},
  287. "x": 590,
  288. "y": 120,
  289. "wires": []
  290. }
  291. ]

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/808682
推荐阅读
相关标签
  

闽ICP备14008679号