Get best of the week

Webix JavaScript库通过初学者的眼光。第6部分。服务器交互



我是初学者前端开发人员。现在，我在Minsk IT公司学习和培训。学习Web-ui的基础知识以Webix JS库为例。我想分享我的谦虚经验，并将其另存为这个有趣的UI库上的小教程。

第六个问题


Webix是一个JavaScript库，其中的操作主要发生在客户端，只有在需要保存数据时，才将结果发送到服务器。这里对后端没有严格的要求。服务器上处理什么数据都没有关系，主要是它会接收某种格式的请求并以正确的形式给出答案。鉴于项目没有复杂的用户设置，开发人员所需要做的就是连接服务器并使用简单的查询。

请考虑以下任务：

  • 连接应用程序的服务器端；
  • 服务器请求方法；
  • 如何跟踪下载结果；
  • 如何跟踪保存结果。

本文使用Table小部件，在文档中对其进行了详细描述。

与文章来源工作都位于这里。

完成的应用程序可以在这里找到。

连接应用程序的服务器端


这是一个基于Table小部件的示例。源结构现已更改了应用程序的结构。以前，它是连接了js文件的普通index.html文件。现在添加了两个文件夹-后端，在nodeJS上有一个简单的服务器脚本，而app文件夹是所有编写的客户端代码所在的目录。每个窗口小部件的服务器操作在单独的文件中描述。对于Table小部件，这是films.js文件。
Table小部件的代码位于app文件夹的table.js文件中，并在“仪表板”选项卡中呈现。
首先，在本地服务器上运行该应用程序。

使用应用程序打开文件夹的命令行，然后依次输入以下命令：
npm安装
npm运行服务器
之后，以下条目将出现在终端中：
服务器在端口3000上运行... 在浏览器中
打开localhost：3000 / app
在浏览器中打开指定的地址/链接。

Table小部件将访问的服务器脚本将支持所有基本的Crud操作。

要将数据加载到表中，请在其url属性中指定脚本的路径。

url: "/samples/server/films"

要发送保存请求-脚本的路径在save属性中指定。该路径将与url中的相同，仅带有其余前缀。我们将在下面谈论休息。

save:"rest->/samples/server/films"


查询方法确定我们要使用资源的方式。默认情况下，Webix使用GET和POST方法，但是我们将使用RESTful API和所有适合于数据操作的方法：GET，POST，PUT和DELETE。

使用保存设置中已经设置的rest前缀，所有请求将通过相应的现成代理发送。其余代理将请求方法与我们在客户端上执行的操作类型进行协调。对于某些任务，有几种现成的代理；如有必要，您可以创建自定义代理。

我们将使用Table小部件的示例跟踪请求。为此，在浏览器中，转至DevTools-> Network并找到有关所需请求的信息。

要将数据加载到表中，请使用GET方法。

我们将刷新页面，然后单击脚本请求films。

默认情况下，此请求中将没有参数，因为我们正在处理的是第一次将数据加载到组件中。

结果，服务器将返回包含所有数据的JSON数组。

GET请求的结果：POST方法



用于在表中创建新记录。 使用表格将新数据添加到表中。 请求数据将是以下数据： 将记录添加到服务器时，在此分配的ID必须一定是：









{ "id":"ImurRuK1k59qzy2f" }

这是必要的，以免丢失服务器/客户端上数据之间的连接。现在将在客户端上使用相同的ID。

要更改行中的数据，请使用PUT方法。

我们选择表中的第一行-来自它的数据将出现在表单中。然后，我们将更改它们并保存。整个记录（数据对象）将与我们的更改一起发送到服务器。



服务器响应不应包含特定状态（也可以是一个空对象，如下所示），但是在我们的情况下，服务器将返回以下JSON：

{ status: “updated” }

要删除数据，请使用DELETE方法。

单击十字架删除第一行。

在这种情况下，整个字符串将作为参数传递给服务器。参数中的主要内容是要在服务器上删除的记录的ID。



服务器将返回一个空对象，因为不需要特别确认这种操作。

追踪下载结果


考虑一种情况，在这种情况下，我们需要计算已将多少条记录加载到一个表中并将其显示为一条消息。为此，请使用ready处理程序。在第一个数据到达组件后，将立即调用就绪

处理程序，并且仅一次。在处理程序内部，我们放置了调用count方法的函数。调用后，屏幕右上角会出现一条消息。webix.message()“Loaded 250 records!”

const table = {
// code the widget Table
    ready(){
        webix.message({
            text:`Loaded ${this.count()} records!`, 
            type:"success"
        });
    }
}

数据加载时刻：



如果在数据加载期间发生任何错误，则将触发onLoadError事件：

$$("datatable").attachEvent("onLoadError", function(xhr){
    webix.message("Error!");
});

追踪保存结果


保存时，可以通过添加，编辑和删除等操作来获取服务器响应。考虑表小部件的示例。

为此，使用DataProcessor模块与服务器进行交互。该模块的API可用于微调数据存储。我们只需要跟踪保存的时刻-因此我们使用其事件之一-onAfterSync。

通过该设置可以访问DataProcessor模块，webix.dp(id)

当接收并处理了来自服务器的响应时，将引发onAfterSync事件。对于此事件，通过显示一条消息webix.message()。保存后，消息-将出现在右上角“Saved!”。

我们删除表中的第一行并查看结果。



Webix初始化后，script.js文件中的事件代码：

let dp = webix.dp($$("film_list"));
dp.attachEvent('onAfterSync', () => {
    webix.message({
        text:"Saved!",
        type:"success"
    })
});

这种情况下的错误可以通过onAfterSaveError事件捕获：

dp.attachEvent("onAfterSaveError", function(id, status, response, details){
    webix.message("Error!");
});

概括


通过使用CRUD操作，我们了解了如何与应用程序的服务器端进行交互。我们研究了一组标准的查询方法以及如何捕获加载和保存数据。本文讨论的示例不仅适用于Table小部件，还适用于List。您可以在开始时指出的源代码中自己尝试。

完成的应用程序的代码可以在这里找到。

More articles:


All Articles