最新消息:

基于关系型数据库的App Inventor网络应用(7)

App Inventor 少儿编程 1569浏览 0评论

第七节 创建服务器端程序

对于客户端(前端)程序来说,当它需要访问服务器端(后端)程序时,需要知道两件事:一是请求数据指令的书写方式,二是返回数据的格式,只有这样,才能正确调用后端程序,并正确处理后端返回的数据。我们编写后端服务程序,同样也要从这两方面来考虑,首先要明确前端的需求,即,它要访问的数据内容是什么,并根据需求制定前端访问指令的格式;其次,要设置返回数据的格式,如字符串或JSON文本等。基于这样的考虑,我们先来介绍Node-RED中用于接受网络请求及响应网络请求的两个节点:输入节点http及输出节点http response。

我们创建一个新的程序页,将数据库操作相关的流程序复制到新页中,新页取名为“访问SQLite”,如图28所示。

基于关系型数据库的App Inventor网络应用(7)

基于关系型数据库的App Inventor网络应用(7)

图28 创建新页——访问SQLite

 

1. 输入节点http

 

向新页中添加一个输入节点——http,并打开节点编辑窗口。如图29所示,关于web请求的GET及POST方法,感兴趣的读者可以在网上搜索相关词条,在此不作解释。关于URL地址,完整地地址应该是http://localhost:1880/query。

基于关系型数据库的App Inventor网络应用(7)

图29 设置http节点的属性

 

向工作区拖入一个debug节点,设置其标签为“查看请求”,设置其Output属性为完整对象(Complete msg object),连接查单词节点与查看请求节点。如图30所示。点击部署按钮,使程序生效。

基于关系型数据库的App Inventor网络应用(7)

图30 连接查单词节点与查看请求节点

 

如图31所示,在浏览器地址栏中输入http://localhost:1880/query?english=good,此时注意观察Node-RED开发环境中debug窗口中发生的变化。

 

基于关系型数据库的App Inventor网络应用(7)

图31 在浏览器中请求Node-RED服务

 

在debug窗口中,打开msg.payload对象,如图32所示,发现我们在URL地址中加入的参数出现在payload对象里,参数名english成为对象的属性,而good成为该属性的值。这为我们处理前端请求提供了思路,后面会有详细介绍。有兴趣的读者还可以打开msg对象中的req(request,请求)对象及res(response,响应)对象,看看里面包含了哪些有趣的信息。

基于关系型数据库的App Inventor网络应用(7)

图32 在debug窗口中查看浏览器发来的请求

我们再来关心一下刚刚输入URL地址的浏览器窗口,发现窗口中显示了错误信息,如图33所示。这是必然的,因为我们没有处理并回应前端发来的请求,当前端请求在一定时间内没有得到响应时,便会提示用户访问失败。

基于关系型数据库的App Inventor网络应用(7)

图33 没有得到响应的前端请求

 

2. 添加输出节点http response

 

向工作区中拖入一个输出节点http response,并编辑该节点的属性,如图34所示。然后连接查单词节点与返回单词节点,并点击部署按钮,让修改后的程序生效。

基于关系型数据库的App Inventor网络应用(7)

图34 为http response节点设置标签

 

此时,我们再回到浏览器中,刷新刚才的请求,得到以下结果,如图35所示。

基于关系型数据库的App Inventor网络应用(7)

图35 服务器对前端请求有了回应

 

从图35中我们获得了一个非常重要的线索,即,Node-RED的http response节点的返回值是msg对象的payload属性值。回忆一下我们在图32中观察到的结果。

 

3. 处理前端请求

 

前端的查询请求是,通过英文单词查询到中文,即,返回与“good”相对应的中文,这就需要我们从请求信息中提取“good”,以此为条件查询SQLite数据库,并将返回结果写入msg对象的payload属性中,这样客户端才能收到正确的结果。为此我们需要添加一个功能节点——function。

function即函数,我们将利用函数来获取查询条件,把查询指令写入msg对象的topic属性,再将指令发送给SQLite;SQLite会将查询结果保存在msg对象的payload属性中,并返回给前端调用者。函数的内容如图36所示。

基于关系型数据库的App Inventor网络应用(7)

图36 用JavaScript语言编写函数内容

复制此前的SQLite节点“学英语”,连接http(查单词)、function(查询单词)、sqlite(学英语)以及http response(返回单词)四个节点,并点击部署按钮,让程序生效,如图37所示。

基于关系型数据库的App Inventor网络应用(7)

图37 完整的服务器端程序

下面在浏览器地址栏中刷新此前的请求,得到以下结果,如图38所示。

基于关系型数据库的App Inventor网络应用(7)

图38 服务器返回的查询结果

 

这是JSON格式的文本,在App Inventor中,web客户端组件可以识别这样的格式,并将其转化为列表(键值对列表)。下一节中,我们将在Node-RED与App Inventor两个开发环境中穿梭,实现前后端程序的对话。

您必须 登录 才能发表评论!