Qt Quick Demo – RESTful-API-Client

Dieses Beispiel zeigt, wie man einen einfachen QML-Client für eine RESTful-API mit einem fiktiven Farbpaletten-Dienst erstellt. Die Anwendung nutzt die RESTful-Kommunikation mit einem lokalen Server, um Daten abzufragen und zu senden. Der REST-Dienst wird als QML-Element bereitgestellt, dessen untergeordnete Elemente die einzelnen vom Server bereitgestellten JSON-Daten-APIs umschließen.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ aus dem Verzeichnis „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Funktionalität der Anwendung

Das Beispiel bietet die folgenden grundlegenden Funktionen:

• Benutzer und Farben auflisten
• An- und Abmelden von Benutzern
• Farben bearbeiten und neue Farben anlegen

Ausführen des Servers

Der Client kommuniziert mit dem Beispiel für einen Qt-basierten REST-API-Server unter QtHttpServer, der auf der Adresse http://127.0.0.1:49425 lauscht. Starten Sie diesen Server, bevor Sie den Client starten.

Der Client stellt beim Start eine Verbindung her und sendet einen HTTP-GET-Aufruf an die Farb-API. Wenn der Server nicht erreichbar ist, meldet ein Dialogfeld die fehlgeschlagene Verbindung und bietet Ihnen die Möglichkeit, es erneut zu versuchen, sobald der Server läuft.

Der Qt-basierte REST-API-Server ist eine zustandsbehaftete Anwendung, mit der Sie die Farben ändern können; die Änderungen bleiben für die Dauer des Serverprozesses erhalten.

Benutzer und Farben auflisten

Die Benutzer und Farben sind serverseitig paginierte Ressourcen. Das bedeutet, dass der Server die Daten in Blöcken, sogenannten Seiten, bereitstellt. Die Auflistung in der Benutzeroberfläche spiegelt diese Paginierung wider und zeigt die Daten seitenweise an.

Die Darstellung der Daten in der Benutzeroberfläche erfolgt mit Standard-QML-Ansichten:

ListView {
    id: colorListView

    model: root.colors.data

Dabei handelt es sich bei dem Modell um eine Liste von JSON-Daten, die vom Server empfangen wurden.

Anmelden

Die Anmeldung erfolgt über die vom Anmelde-Popup bereitgestellte Anmeldefunktion:

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

Im Hintergrund sendet die Anmeldung eine HTTP-POST-Anfrage. Nach Erhalt einer erfolgreichen Antwort wird das Autorisierungstoken aus der Antwort extrahiert, das dann in nachfolgenden HTTP-Anfragen verwendet wird, die das Token erfordern.

Farben bearbeiten

Das Bearbeiten und Hinzufügen neuer Farben erfolgt in einem Popup:

Beachten Sie, dass für das Hochladen der Farbänderungen auf den Server eine Anmeldung des Benutzers erforderlich ist.

REST-Implementierung

Das Beispiel veranschaulicht eine Möglichkeit, einen REST-Dienst aus einzelnen Ressourcenelementen zusammenzustellen. In diesem Beispiel handelt es sich bei den Ressourcen um die paginierten Ressourcen „ user “ und „ color “ sowie den Anmeldedienst. Die Ressourcenelemente werden durch die Basis-URL (Server-URL) und den gemeinsamen Netzwerkzugriffsmanager miteinander verknüpft.

Die Grundlage des REST-Dienstes bildet das Element „ RestService “, dessen untergeordnete Elemente den eigentlichen Dienst bilden:

RestService {
    id: paletteService
    url: window.serverUrl

    PaginatedResource {
        id: users
        path: "users"
    }

    PaginatedResource {
        id: colorPalette
        path: "unknown"
    }

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

Bei der Instanziierung durchläuft das Element „ RestService “ seine untergeordneten Elemente in einer Schleife und richtet sie so ein, dass sie denselben Netzwerkzugriffsmanager verwenden. Auf diese Weise nutzen die einzelnen Ressourcen dieselben Zugangsdaten, wie beispielsweise die Server-URL und das Autorisierungstoken.

Die eigentliche Kommunikation erfolgt über einen REST-Zugriffsmanager, der einige Komfortfunktionen für den Umgang mit HTTP-REST-APIs implementiert und das Senden und Empfangen von „ QNetworkRequest “ und „ QNetworkReply “ nach Bedarf effizient abwickelt.

Quelldateien

Beispielprojekt auf code.qt.io