Je suis un développeur front-end débutant. Maintenant, j'étudie et je m'entraîne dans une entreprise informatique de Minsk. L'apprentissage des bases de web-ui s'effectue à l'aide de la bibliothèque Webix JS à titre d'exemple. Je veux partager ma modeste expérience et l'enregistrer en tant que petit tutoriel sur cette intéressante bibliothèque d'interface utilisateur.SIXIÈME PROBLÈME
Webix est une bibliothèque JavaScript dans laquelle les opérations se produisent principalement côté client, et ce n'est qu'ensuite que le résultat est envoyé au serveur si les données doivent être enregistrées. Il n'y a pas d'exigences strictes pour le backend ici. Peu importe les données traitées sur le serveur, l'essentiel est qu'il accepte les demandes d'un certain format et donne la réponse sous la bonne forme. Tout ce qui est requis du développeur est de connecter le serveur et de travailler avec des requêtes simples, étant donné que le projet n'a pas de paramètres utilisateur complexes.Considérez les tâches suivantes:- connecter le côté serveur de l'application;
- méthodes de demande du serveur;
- comment suivre le résultat du téléchargement;
- Comment suivre le résultat de l'enregistrement.
L'article utilise le widget Table , qui est décrit en détail dans la documentation.Les sources pour travailler avec l'article se trouvent ici .L'application terminée peut être trouvée ici .Connexion côté serveur de l'application
Voici un exemple basé sur le widget Table. La structure source a maintenant changé la structure de l'application. Auparavant, c'était un fichier index.html ordinaire avec des fichiers js connectés. Maintenant, deux dossiers ont été ajoutés - le backend, avec un simple script de serveur sur nodeJS et le dossier de l'application, où se trouve tout le code client écrit. Les opérations du serveur pour chaque widget sont décrites dans des fichiers séparés. Pour le widget Table, il s'agit du fichier films.js.Le code du widget Table est situé dans le fichier table.js du dossier de l'application et rendu dans l'onglet «Dashboard».
Tout d'abord, exécutez l'application sur le serveur local.Ouvrez la ligne de commande du dossier avec l'application et entrez séquentiellement les commandes suivantes:npm installer
npm exécuter le serveur
Après cela, l'entrée suivante apparaîtra dans le terminal:Le serveur fonctionne sur le port 3000 ...
Ouvrir l' hôte local : 3000 / app dans le navigateur
L'adresse / le lien spécifié est ouvert dans le navigateur.Le script serveur auquel le widget Table accédera prendra en charge toutes les opérations de base de crud.Pour charger des données dans une table, spécifiez le chemin d'accès au script dans sa propriété url.url: "/samples/server/films"
Pour envoyer des demandes de sauvegarde - le chemin d'accès au script est spécifié dans la propriété save. Le chemin sera le même que dans l'url, uniquement avec le préfixe de repos. Nous parlerons de repos ci-dessous.save:"rest->/samples/server/films"
Les méthodes de requête déterminent ce que nous voulons faire avec la ressource. Par défaut, Webix utilise les méthodes GET et POST, mais nous utiliserons l'API RESTful et toutes les méthodes adaptées à nos opérations de données: GET, POST, PUT et DELETE.Avec le préfixe de repos déjà défini dans le paramètre de sauvegarde, toutes les demandes seront envoyées via le proxy prêt à l'emploi correspondant . Le proxy de repos coordonne la méthode de demande avec le type d'opération que nous avons effectué sur le client. Il existe plusieurs proxys prêts à l'emploi pour certaines tâches; si nécessaire, vous pouvez créer des proxys personnalisés.Nous suivrons les demandes en utilisant l'exemple du widget Table. Pour ce faire, dans le navigateur, accédez à DevTools-> Réseau et recherchez des informations sur la demande souhaitée.Pour charger des données dans une table, utilisezMéthode GET .Nous actualiserons la page et cliquerons sur la demande de script films.Par défaut, il n'y aura pas de paramètres dans cette requête, car il s'agit du premier chargement de données dans le composant.Par conséquent, le serveur renvoie un tableau JSON avec toutes les données.Résultat d'une requête GET:
La méthode POST est utilisée pour créer un nouvel enregistrement dans la table .À l'aide du formulaire, ajoutez de nouvelles données au tableau.Les données de demande seront les données suivantes:
Lors de l'ajout d'un enregistrement au serveur, l'identifiant qui lui est attribué doit impérativement venir:{ "id":"ImurRuK1k59qzy2f" }
Ceci est nécessaire pour ne pas perdre la connexion entre les données sur le serveur / client. Le même identifiant sera désormais utilisé sur le client.Pour modifier les données dans les lignes, la méthode PUT est utilisée .Nous sélectionnons la première ligne du tableau - les données de celle-ci apparaîtront dans le formulaire. Ensuite, nous les changerons et économiserons. L'enregistrement entier (objet de données) ira au serveur avec nos modifications.
La réponse du serveur ne doit pas contenir d'état spécifique (un objet vide peut également être la réponse, comme indiqué ci-dessous), mais dans notre cas, le serveur renverra le JSON suivant:{ status: “updated” }
Pour supprimer des données, utilisez la méthode DELETE .Supprimez la première ligne en cliquant sur la croix.Dans ce cas, la chaîne entière sera les paramètres transmis au serveur. L'essentiel dans les paramètres est l'id de l'enregistrement à supprimer sur le serveur.
Le serveur retournera un objet vide, car une confirmation spéciale d'une telle opération n'est pas nécessaire.Suivre le résultat du téléchargement
Considérons une situation où nous devons calculer le nombre d'enregistrements chargés dans une table et l'afficher sous forme de message. Pour ce faire, utilisez le gestionnaire prêt .Le gestionnaire prêt est appelé immédiatement après l'arrivée des premières données dans le composant et une seule fois. À l'intérieur du gestionnaire, nous plaçons la fonction webix.message()appelant la méthode count . Après l'avoir appelé, un message apparaîtra dans le coin supérieur droit de l'écran “Loaded 250 records!”.const table = {
ready(){
webix.message({
text:`Loaded ${this.count()} records!`,
type:"success"
});
}
}
Moment de chargement des données:
dans le cas où une erreur s'est produite lors du chargement des données, l'événement onLoadError se déclenche :$$("datatable").attachEvent("onLoadError", function(xhr){
webix.message("Error!");
});
Suivi des résultats de sauvegarde
Vous pouvez obtenir la réponse du serveur lors de l'enregistrement par des opérations telles que l'ajout, la modification et la suppression. Prenons l'exemple du widget Table.Pour cela, le module DataProcessor est utilisé pour interagir avec le serveur. L'API de ce module peut être utilisée pour affiner le stockage des données. Nous avons seulement besoin de suivre le moment de l'enregistrement - par conséquent, nous utilisons l'un de ses événements - onAfterSync .Le paramètre DataProcessor est accessible par le paramètre. webix.dp(id)L'événement onAfterSync est déclenché lorsque la réponse du serveur est reçue et traitée. Pour cet événement, affichez un message via webix.message(). Après l'enregistrement, le message - apparaîtra dans le coin supérieur droit “Saved!”.Nous supprimons la première ligne du tableau et examinons le résultat.
Code d'événement dans le fichier script.js après l'initialisation de webix:let dp = webix.dp($$("film_list"));
dp.attachEvent('onAfterSync', () => {
webix.message({
text:"Saved!",
type:"success"
})
});
Dans ce cas, des erreurs peuvent être détectées avec l'événement onAfterSaveError :dp.attachEvent("onAfterSaveError", function(id, status, response, details){
webix.message("Error!");
});
Généralisation
En utilisant les opérations CRUD, nous avons compris comment interagir avec le côté serveur de l'application. Nous avons examiné un ensemble standard de méthodes de requête et comment intercepter les données de chargement et d'enregistrement. Les exemples présentés dans l'article sont disponibles non seulement pour le widget Table, mais aussi pour List. Vous pouvez l'essayer vous-même dans les codes sources indiqués au tout début.Le code de l'application terminée peut être trouvé ici .