Qt Quick 示例 - RESTful API 客户端

本示例演示了如何基于一个假想的调色板服务创建一个基本的 QML RESTful API 客户端。该应用程序通过 RESTful 通信方式与本地服务器交互，以请求和发送数据。REST 服务以 QML 元素的形式提供，其子元素封装了服务器提供的各个 JSON 数据 API。

运行示例

您可以通过以下方式运行示例：

• Qt Creator

  打开“Welcome ”模式，并从“Examples ”中选择该示例。有关更多信息，请参阅Qt Creator ：教程：构建和运行。

• Qt Extension for Visual Studio Code

  在Command Palette 中运行Qt: Open Qt examples 命令，并从列表中选择该示例。有关更多信息，请参阅Qt Extension for Visual Studio Code ：教程：构建和运行。

应用程序功能

该示例提供以下基本功能：

• 列出用户和颜色
• 用户登录和注销
• 修改和创建新颜色

运行服务器

客户端与位于QtHttpServer的基于 Qt 的 REST API 服务器示例进行通信，该服务器监听http://127.0.0.1:49425 端口。在启动客户端之前，请先启动该服务器。

客户端在启动时建立连接，并向颜色 API 发送 HTTP GET 请求。如果无法连接到服务器，系统将弹出对话框报告连接失败，并允许您在服务器运行后重试一次。

该基于 Qt 的 REST API 服务器是一个带状态的应用程序，允许您修改颜色，且这些更改将在服务器进程运行期间持续有效。

列出用户和颜色

用户和颜色在服务器端是分页资源。这意味着服务器将数据以称为“页面”的块为单位提供。列表界面反映了这种分页机制，并按页面显示数据。

在 UI 上查看数据使用标准的 QML 视图实现：

ListView {
    id: colorListView

    model: root.colors.data

其中模型是从服务器接收到的 JSON 数据列表。

登录

登录通过登录弹出窗口提供的登录功能实现：

userMenu.userLoginService.login({"email" : userInfo.modelData.email,
                    "password" : "apassword",
                    "id" : userInfo.modelData.id})

在后台，登录操作会发送一个 HTTP POST 请求。收到成功响应后，系统会从响应中提取授权令牌，该令牌随后将用于需要该令牌的后续 HTTP 请求中。

编辑颜色

颜色编辑和新增操作均在弹出窗口中进行：

请注意，将颜色更改上传至服务器需要用户已登录。

REST 实现

该示例演示了如何通过组合各个资源元素来构建 REST 服务。在此示例中，资源包括分页的user 和color 资源，以及登录服务。这些资源元素通过基础 URL（服务器 URL）和共享的网络访问管理器相互关联。

REST 服务的基础是RestService 元素，其子项共同构成了实际的服务：

RestService {
    id: paletteService
    url: window.serverUrl

    PaginatedResource {
        id: users
        path: "users"
    }

    PaginatedResource {
        id: colorPalette
        path: "unknown"
    }

    BasicLogin {
        id: colorLogin
        loginPath: "login"
        logoutPath: "logout"
    }
}

实例化时，RestService 元素会遍历其子元素，并将其配置为使用相同的网络访问管理器。这样，各个资源便共享相同的访问详细信息，例如服务器 URL 和授权令牌。

实际通信由一个 REST 访问管理器完成，该管理器实现了若干便利功能，专门用于处理 HTTP REST API，并能根据需要有效地发送和接收 `QNetworkRequest ` 及 `QNetworkReply `。

源文件

示例项目 @ code.qt.io