Sur cette page

Qt Quick Démo - Client API RESTful

Exemple de création d'un client QML RESTful API.

Un service de palette de couleurs GUI

Cet exemple montre comment créer un client QML RESTful API de base avec un service de palette de couleurs imaginaire. L'application utilise la communication RESTful avec le serveur sélectionné pour demander et envoyer des données. Le service REST est fourni sous la forme d'un élément QML dont les éléments enfants enveloppent les API de données JSON individuelles fournies par le serveur.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Fonctionnalité de l'application

L'exemple fournit les fonctionnalités de base suivantes :

  • Sélection du serveur avec lequel communiquer
  • Liste des utilisateurs et des couleurs
  • Connexion et déconnexion des utilisateurs
  • Modifier et créer de nouvelles couleurs
Sélection du serveur

Au démarrage, l'application présente des options prédéfinies avec lesquelles le serveur de la palette de couleurs peut communiquer :

Une fois sélectionné, le client de l'API RESTful envoie un test HTTP GET à l'API des couleurs pour vérifier si le service est accessible.

Une interface graphique qui affiche deux serveurs au choix

Une différence majeure entre les deux options d'API prédéfinies est que l'exemple de serveur d'API REST basé sur Qt Test est une application avec état qui vous permet de modifier les couleurs, alors que le site reqres.in est un service de test d'API sans état. En d'autres termes, lorsque vous utilisez le backend reqres.in, la modification des couleurs n'a pas d'impact durable.

Liste des utilisateurs et des couleurs

Les utilisateurs et les couleurs sont des ressources paginées côté serveur. Cela signifie que le serveur fournit les données en morceaux appelés pages. La liste de l'interface utilisateur reflète cette pagination et affiche les données sur des pages.

L'affichage des données sur l'interface utilisateur se fait à l'aide de vues QML standard :

ListView {
    id: colorListView

    model: root.colors.data

Le modèle est une liste de données JSON reçues du serveur.

Connexion

La connexion s'effectue via la fonction de connexion fournie par la fenêtre contextuelle de connexion :

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

Sous le capot, la connexion envoie une requête HTTP POST. Lorsque la réponse est positive, le jeton d'autorisation est extrait de la réponse, qui est ensuite utilisée dans les demandes HTTP ultérieures qui nécessitent le jeton.

Une interface graphique qui répertorie les utilisateurs

Modification des couleurs

La modification et l'ajout de nouvelles couleurs s'effectuent dans une fenêtre contextuelle :

Une interface graphique pour l'édition d'une couleur

Notez que le téléchargement des modifications de couleurs sur le serveur nécessite que l'utilisateur soit connecté.

Mise en œuvre de REST

L'exemple illustre une façon de composer un service REST à partir d'éléments de ressources individuels. Dans cet exemple, les ressources sont les ressources paginées user et color ainsi que le service de connexion. Les éléments de ressources sont liés par l'URL de base (URL du serveur) et le gestionnaire d'accès au réseau partagé.

La base du service REST est l'élément RestService dont les éléments enfants composent le service proprement dit :

RestService {
    id: paletteService

    PaginatedResource {
        id: users
        path: "users"
    }

    PaginatedResource {
        id: colors
        path: "unknown"
    }

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

Lors de l'instanciation, l'élément RestService boucle ses éléments enfants et les configure pour qu'ils utilisent le même gestionnaire d'accès au réseau. De cette manière, les ressources individuelles partagent les mêmes détails d'accès, tels que l'URL du serveur et le jeton d'autorisation.

La communication proprement dite est assurée par un gestionnaire d'accès au repos qui met en œuvre certaines fonctionnalités de commodité pour traiter spécifiquement les API HTTP REST et qui s'occupe effectivement d'envoyer et de recevoir les éléments QNetworkRequest et QNetworkReply selon les besoins.

Fichiers sources

Exemple de projet @ code.qt.io

Voir aussi Tous les exemples Qt et Qt Quick Exemples et tutoriels.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.