Web应用程序是在Web服务器上运行的软件。最终用户通过网络浏览器访问网络应用程序。Web应用程序使用客户端-服务器(C/S)架构进行编程，在该架构中，通过远程服务器（可能由第三方托管）为用户（客户端）提供服务。WebAPI（ApplicationProgrammingInterface）在整个Web上都是可用的，用户可以通过HTTP协议访问它，如图1所示。图1：WebAPI本文将演示如何设计一个基于Web的自动智能停车系统用于地铁的汽车。它是使用开源Node-RED设计的。该系统通过使用模板节点创建一个交互式、时尚的用户登录表单来自动化停车系统，该表单以HTML和CSS编码以获取车主详细信息。我们可以看到图2和图3的登录表单和提交表单的流程图，使用到的节点如下：表函数地铁智能停车节点流程设计Node-RED由node-red命令激活。访问网址http://127.0.0.1:1880/可以看到Node-RED用户界面进程浏览器已经启用，可以认为Node-RED设置已经完成，可以正常工作了。按照下面给出的步骤创建登录表单并提交表单。图2：登录表单流程图图3：提交表单流程图登录表单1.在节点画布中，拖放节点中的http输入http，这将创建一个用于创建Web服务的HTTP访问点。2.将节点中的http输入http连接到函数节点。函数节点帮助编写JavaScript函数来处理节点接收到的消息。图4：汽车智能停车登录表单3。将功能节点连接到模板模板节点，模板节点根据提供的模板创建WebAPI。4.将template模板节点连接到http响应节点，响应输入httpin节点的http请求。图5：汽车智能停车提交表单提交表单1、在节点中拖拽http输入http连接到json节点，json节点将数据转换成JSON字符串进行通信。2.将node中的http输入http连接到debug节点，debug节点的debugmonitor会输出结果。3.将json节点放置并连接到function节点，将后者连接到httpresponse节点。创建完整流程后，单击Node-RED窗口右上角的Deploy按钮。访问http://127.0.0.1:1880/ui/查看UI。输入链接并单击提交后，该链接将带您进入下一页，您可以在其中阅读所有新闻。Node-RED工作流程在单个Node-RED流程中，您可以创建一个登录表单和一个提交表单，如图4和图5所示。现在我们将配置节点属性。Loginformedithttpinputhttpinattribute:methodmethod选择“Get”URLURLas/MetroStationname配置为“SmartParking”。（LCTT译注：下面http响应节点名称为Smartparking，p字母小写，为了区别，这里的中文翻译成smartparkingsystem。）图6：Httpinnodepropertyconfigurations注:URL可以使用任何用户定义的局部变量。现在选中功能节点，编辑功能节点属性：输入codemsg.url=project，配置codename字段为“ProjectSubmission”。图7：功能节点属性配置在模板节点的属性窗口中，为登录表单配置相应的HTML代码，并将代码名称命名为“显示面板”。这个过程中使用了Mustache模板格式（LCTT译注：Mustache是??小胡子的意思，因为它嵌入的标签{{}}很像小胡子）。Mustache是一个简单的Web模板系统，被描述为一个无逻辑的模板引擎。Mustache没有任何明确的控制流语句，例如if和else条件以及for循环。循环和条件评估可以通过使用块标签操作列表和lambda来实现。图8：模板节点属性配置编辑http响应节点的属性，并将名称设置为“Smartparking”（图9）。图9：Http响应节点属性配置提交表单在http节点的编辑属性窗口中输入http，方式选择“POST”，URL设置为/project。图10：节点属性配置中的Http在JSON节点的编辑窗口中，操作Action设置为“ConvertbetweenJSONString&Object”，参见图11。图11：JSON节点属性配置功能节点的配置如图12所示。图12：功能节点属性配置响应http中的http响应节点，将属性名称编辑为“ProjectSubmitted”。图13：Http响应节点属性配置注：添加注释节点，注释为“登录表单”和“提交表单”。图14：调试节点属性配置UI控制面板当用户单击提交时，给定的数据将显示在UI和调试节点中。如果单击Reset，详细信息将被清除，从而允许用户输入新的详细信息（图15）。图15：用户登录UI地铁停车费通过超链接提供，票价表显示在UI中。因此，汽车的智能停车系统是自动化的，带有显示地铁站停车费的适当超链接。可以在Node-RED仪表板UI和调试监视器中检索和显示此自动化系统的最终输出。图16：地铁停车费
