Maison > interface Web > js tutoriel > Un guide du débutant sur les plumes.js

Un guide du débutant sur les plumes.js

Jennifer Aniston
Libérer: 2025-02-14 09:55:13
original
996 Les gens l'ont consulté

FEATHERS.JS: Un guide pour construire rapidement un serveur API RESTful

A Beginner’s Guide to Feathers.js

Points de base:

  • plumes.js simplifie la création de serveurs API RESTful, gère la plupart des travaux de backend répétitifs et permet aux développeurs de se concentrer sur la personnalisation et la configuration du code.
  • Ce framework est construit sur Express, prend en charge les bases de données SQL et NOSQL et utilise des services qui génèrent automatiquement le code nécessaire, permettant à des opérations de crud d'être facilement effectuées.
  • Authentification in FEATHERS.js peut utiliser JSON Web Tokens (JWT) pour protéger les points de terminaison de l'API, garantissant que seuls les utilisateurs autorisés peuvent accéder ou modifier des données.
  • Les crochets en plumes.js agissent comme des fonctions middleware qui manipulent les données avant ou après les données atteignent la base de données, ce qui est très utile pour les tâches telles que la vérification, l'autorisation et l'ajout de champs dynamiquement.
  • FEATHERS.js est conçu pour être facile à utiliser et à étendre, prend en charge les mises à jour en temps réel via les lignes Web et fournit une architecture flexible pour une variété de cadres frontaux.

Cet article vous guidera pour créer un serveur API RESTful dans Node.js à l'aide de FEATHERS.js.

API Server, également connu sous le nom d'application Server, est un programme qui fournit des données aux applications frontales. Il traite également la logique métier sur le backend et fournit un accès restreint à la base de données de l'organisation. Non seulement il empêche les personnes non autorisées d'accéder aux données;

Chaque application que vous créez doit fournir des services à l'utilisateur final. Pour ce faire, votre application doit traiter les données. Vous pouvez utiliser l'API distante pour créer un nouveau service. Cependant, pour la plupart des applications, vous devez gérer votre propre stockage de données. Une option populaire consiste à utiliser des services de stockage de données en ligne tels que Firebase. De cette façon, vous n'avez pas à faire face aux détails fastidieux de l'exécution d'un serveur de base de données distribué. Cependant, les exigences de votre projet peuvent nécessiter un système de gestion de base de données interne entièrement traduit, tel que MongoDB ou Oracle. Pour que votre application frontale accéde aux données stockées dans la base de données, vous avez besoin d'une application de serveur située entre la base de données et l'application frontale.

A Beginner’s Guide to Feathers.js

Comme indiqué dans l'image ci-dessus, le travail d'un serveur d'applications consiste à accéder aux données à partir d'une base de données à l'aide de commandes SQL ou NOSQL et de la convertir en un format qu'une application frontale (navigateur client) peut comprendre - comme JSON . De plus, les serveurs d'application peuvent utiliser divers protocoles de sécurité, comme le chiffrement HTTPS et l'autorisation de jeton - pour garantir que la communication entre la base de données et les applications client est sécurisée et fiable. L'un des principaux avantages de l'utilisation de cette architecture est que vous pouvez utiliser le même serveur d'applications pour déployer des applications pour différentes plates-formes - Desktop, mobile, Web, etc. De plus, il est également facile de mettre à l'échelle votre application horizontalement afin de fournir des services à davantage d'utilisateurs et d'obtenir des temps de réponse rapides.

Nous créerons un serveur API simple et démontrerons les différentes fonctionnalités fournies par Feathers.

Prérequis:

Avant de commencer ce tutoriel, vous devez avoir une base solide sur les sujets suivants:

  • es6 javascript
  • Créer une application express
  • Créer une API RESTful en utilisant Express

Les plumes sont construites sur le dessus d'Express, un cadre Web minimaliste pour Node.js. Si vous terminez le tutoriel démontré dans le lien, vous trouverez très laborieux de construire l'API RESTFul en utilisant Express uniquement. Avec des plumes, la plupart du travail répétitif est fait pour vous. Il vous suffit de vous concentrer sur la configuration et la personnalisation de votre code. Faisons dans le code et découvrons comment fonctionne ce framework Web.

Création du projet:

Pour commencer à utiliser des plumes, vous devez installer son application de ligne de commande à l'échelle mondiale:

npm install -g @feathersjs/cli
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Ensuite, créez un nouveau projet API en utilisant la commande suivante:

mkdir contacts-api
cd contacts-api
feathers generate app
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Voici mes choix, vous pouvez choisir n'importe quel cadre de test que vous aimez. Malheureusement, le test n'est pas à l'occasion de cet article, il ne sera donc pas couvert ici. Personnellement, j'aime la simplicité, c'est pourquoi j'ai choisi la plaisanterie.

A Beginner’s Guide to Feathers.js

Une fois l'installation terminée, vous pouvez ouvrir votre éditeur de code préféré pour afficher le fichier du projet.

A Beginner’s Guide to Feathers.js

Si vous terminez le didacticiel express que j'ai répertorié dans la section Prérequis, le code généré ne doit pas vous effrayer. Voici un court résumé qui décrit les dossiers et les fichiers.

A Beginner’s Guide to Feathers.js

Maintenant, ne vous inquiétez pas trop du rôle de chaque fichier. Au fur et à mesure que vous parcourez ce tutoriel, vous en apprendrez plus sur la façon dont ils fonctionnent. Maintenant, confirmons que le test fonctionne correctement.

Vérification du style de code (libelting):

Pour vous assurer que notre projet est conforme aux règles Eslint définies, exécutez simplement la commande npm test. Si vous utilisez une plate-forme UNIX ou Linux, cela devrait fonctionner correctement. Si vous utilisez Windows, vous devez modifier quelque chose pour exécuter le test avec succès.

Tout d'abord, accédez à package.json et affichez la section scripts. Changez la ligne test en:

"scripts": {
  "test": "npm run eslint && SET NODE_ENV= npm run jest",
},
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Ensuite, si vous avez plus joli installé dans le code Visual Studio, vous devez modifier le paramètre de devis unique en true dans l'onglet Paramètres de l'espace de travail:

{
  "prettier.singleQuote": true
}
Copier après la connexion
Copier après la connexion

Enfin, assurez-vous que lors de la création ou de la modification d'un fichier, la nouvelle ligne est LF. Si vous utilisez Visual Studio Code ou des éditeurs similaires, vous pouvez vérifier le style Newline actuel dans la barre d'état. Si CRLF est affiché, passez à LF. Faire ces modifications vous aidera à réussir le test de vérification du style de code. Malheureusement, il faut plus de travail pour faire passer le test et ne sera pas introduit ici.

Voyons comment générer l'interface Crud Restful.

Générer le service:

Construire une interface API crud reposante dans Express nécessite un peu de travail. En plumes, vous pouvez générer du code en exécutant simplement une seule commande et en répondant à quelques questions:

npm install -g @feathersjs/cli
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Dans ce tutoriel, nous utiliserons la base de données NEDB. Feathers prend en charge les bases de données SQL (telles que MySQL) et les bases de données NOSQL (telles que MongoDB). Cependant, l'installation d'un système de base de données - que ce soit sur votre machine ou sur un serveur cloud - prend un certain temps pour le configurer. NEDB, en revanche, est une base de données en mémoire entièrement écrite en JavaScript, prenant en charge un sous-ensemble de l'API MongoDB. Aucune configuration n'est requise; vous avez juste besoin de l'installer. Il est parfait pour le prototypage et le test de nouvelles applications. Il s'agit de la base de données que nous utiliserons dans ce tutoriel.

Jetons un bref aperçu de certains des fichiers générés à l'aide de cette commande:

  • services/contacts/contact.service.js. Il s'agit d'un service de plumes qui fournit des points de terminaison API crud pour /contacts. Très petit, n'est-ce pas? En effet, les plumes ont fait le gros levage pour nous. Il nous évite d'écrire du code crud à chaudières.
  • services/contacts/contact.hooks.js. Ici, nous personnalisons le comportement de Crud Logic. Nous avons la section before où nous pouvons vérifier ou modifier les données avant que les plumes lisent ou écrivent dans la base de données. Nous avons également une section after où nous pouvons vérifier ou modifier les résultats dans la base de données avant de les envoyer à l'application client. Nous pouvons effectuer des opérations telles que la restriction de l'accès, la vérification des données, l'exécution des opérations de jointure et le calcul des valeurs de champs ou de colonnes supplémentaires.
  • models/contacts.model.js. Ici, nous définissons un modèle et l'ajoutons à la table de base de données. C'est également là que nous définissons un modèle qui peut être utilisé pour vérifier les champs lorsqu'un nouvel enregistrement est inséré ou mis à jour. Malheureusement, NEDB ne prend pas en charge le mode. Cependant, j'ai fourni un exemple de modèle connecté à MongoDB qui prend en charge les fonctionnalités de mode via l'adaptateur Mongoose:
mkdir contacts-api
cd contacts-api
feathers generate app
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Malgré certaines limites avec NEDB, il s'agit toujours d'une base de données très appropriée pour le prototypage. La plupart des bases de données NoSQL vous permettent de soumettre des données en utilisant une structure sans définir d'abord le schéma. Il est préférable de mettre en œuvre le modèle après la mise en œuvre des exigences du projet. Avec le modèle, les plumes effectueront la validation du champ pour vous en utilisant les règles que vous avez définies. Vous avez besoin d'une base de données prête pour la production (comme MongoDB) pour définir le schéma. Veuillez noter que la définition de configuration de la base de données de développement est dans config/default.json:

"scripts": {
  "test": "npm run eslint && SET NODE_ENV= npm run jest",
},
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

C'est là que les informations d'identification de la base de données sont fournies. Nous avons un autre fichier de configuration config/production.json. Il s'agit de la configuration de la base de données de production utilisée lors du déploiement de l'application Feathers. Il est important d'utiliser une base de données distincte pendant le développement. Sinon, vous risquez de supprimer ou de nuire aux données opérationnelles commerciales dans votre base de données de production.

Maintenant que nous avons mis en place le service CRUD du contact, il est temps de l'essayer. Vous pouvez démarrer le serveur Feather à l'aide de la commande npm start. Veuillez noter que ce serveur ne prend pas en charge le rechargement chaud. Par conséquent, il doit être redémarré chaque fois que vous modifiez le code. Pour interagir avec notre application Feathers, nous avons besoin d'un outil de navigateur API tel que Postman ou Insomnia. Dans ce tutoriel, j'utiliserai l'insomnie, mais vous pouvez facilement le faire avec Postman ou tout autre outil.

Créez une nouvelle demande de GET (appuyez sur Ctrl n ) et nommez "List Contacts". Dans la section URL, entrez http://localhost:3030/contacts. Lorsque vous cliquez sur le bouton "Envoyer", vous devriez voir la vue suivante:

A Beginner’s Guide to Feathers.js

rien! Notre base de données est actuellement vide, nous devons donc créer de nouveaux contacts. Créer une nouvelle demande appelée Créer un contact. Remplissez les champs restants comme suit:

A Beginner’s Guide to Feathers.js

Si vous oubliez de modifier la méthode dans la forme ci-dessus pour publier, vous pouvez la modifier plus tard. Changez la méthode pour publier et modifiez l'onglet Body en JSON. Copiez les données suivantes dans l'onglet JSON:

npm install -g @feathersjs/cli
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Lorsque vous cliquez sur le bouton "Envoyer", vous devez recevoir la réponse suivante. Veuillez noter qu'un _id a été généré pour votre nouveau contact.

A Beginner’s Guide to Feathers.js

Revenez aux "Contacts de liste", puis cliquez à nouveau sur le bouton "Envoyer". Vous devriez obtenir les résultats suivants:

mkdir contacts-api
cd contacts-api
feathers generate app
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Retour à "Créer un contact" et publier plusieurs nouveaux enregistrements:

"scripts": {
  "test": "npm run eslint && SET NODE_ENV= npm run jest",
},
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
{
  "prettier.singleQuote": true
}
Copier après la connexion
Copier après la connexion

Effectuons l'opération de mise à jour maintenant. À cette fin, nous n'utiliserons pas la méthode de mise à jour HTTP. Cette méthode écrasera complètement l'enregistrement. Tout ce que nous voulons faire, c'est écraser un seul champ, pas l'enregistrement entier. Pour ce faire, nous utiliserons Patch. Créez une nouvelle demande, "Contact de mise à jour", comme indiqué ci-dessous:

A Beginner’s Guide to Feathers.js

Dans le champ URL, entrez http://localhost:3030/contacts/{_id}. Remplacez {_id} par l'ID du premier enregistrement. Collez les données suivantes dans l'onglet JSON:

feathers generate service
Copier après la connexion

Cliquez sur le bouton "Envoyer". Vous devriez voir les résultats suivants:

A Beginner’s Guide to Feathers.js

Veuillez noter que les champs restants restent inchangés. Ensuite, nous supprimerons un record. C'est facile. Créez simplement une nouvelle demande de suppression et nommez-le "Supprimer le contact". Dans le champ URL, utilisez le format http://localhost:3030/contacts/{_id}. Tout comme avant, remplacez {_id} par l'ID de l'enregistrement que vous souhaitez supprimer. Cliquez sur "Send" supprimera l'enregistrement pour vous. Vous pouvez confirmer en exécutant à nouveau la demande de contacts de liste.

Nous venons de vérifier que toutes les opérations CRUD fonctionnent correctement. Dans la section suivante, nous apprendrons à configurer l'authentification.

(Le contenu suivant est similaire au texte d'origine, mais certains ajustements de déclaration et fusion de paragraphes ont été faits pour améliorer la lisibilité et la maîtrise et garder l'intention d'origine inchangée. Le format d'image reste inchangé.)

Authentification:

Actuellement, nos points de terminaison API /contacts ne sont pas protégés. Si nous déployons l'application sur un serveur cloud, toute personne disposant de l'URL peut accéder et utiliser nos enregistrements. Pour restreindre l'accès, nous devons configurer l'authentification. Nous utiliserons les jetons Web JSON pour implémenter l'authentification pour nos applications API. Exécutez la commande suivante pour le définir:

npm install -g @feathersjs/cli
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Comme vous pouvez le voir, Feathers prend en charge différentes méthodes d'authentification des utilisateurs. L'option "Mot de passe du nom d'utilisateur local" est la plus facile à définir.

Sélectionnez les options suivantes:

Ensuite, nous devons créer un nouvel utilisateur. Nous pouvons le faire en utilisant l'insomnie ou tout autre outil de navigateur API. Créez une nouvelle demande et nommez-le "Créer un utilisateur".

Dans l'onglet JSON, envoyez les données suivantes:

mkdir contacts-api
cd contacts-api
feathers generate app
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Vous devriez recevoir une réponse similaire à ce qui suit:

Nous avons maintenant un utilisateur. Confirmons cela en créant une nouvelle demande "Liste des utilisateurs" et en envoyant l'URL http://localhost:3030/users. Malheureusement, vous recevrez la réponse suivante:

Nous devons nous authentifier pour accéder à ces données. Étant donné que nous n'avons pas une application frontale que nous pouvons utiliser pour nous connecter, nous continuerons à utiliser le navigateur API. Créez une nouvelle demande et nommez-le "Get JWT Token". Remplissez le formulaire comme suit:

Cette demande utilise la méthode post-post. Pour plus de clarté, vous pouvez le renommer pour "vous connecter". Dans l'onglet JSON, copiez les données suivantes:

"scripts": {
  "test": "npm run eslint && SET NODE_ENV= npm run jest",
},
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Après avoir cliqué sur le bouton Envoyer, vous devriez recevoir la réponse suivante:

Copiez le code de jeton (sans doubles guillemets). Accédez à la page de la demande de la liste, sélectionnez l'onglet AUTH et sélectionnez Bearier. Collez ce code de jeton dans le champ de jeton.

Après avoir cliqué sur le bouton "Envoyer", vous devriez voir la liste d'utilisateurs. Veuillez noter que notre système d'authentification n'est pas complètement sécurisé. Toute personne avec un point de terminaison /users URL peut créer un nouveau compte et accéder à notre système. Pour éviter la création non autorisée de nouveaux comptes, nous devons également restreindre ce point final. Ouvrez le fichier services/users/users.hooks.js et mettez à jour l'extrait de code suivant:

Cela garantira que seuls les utilisateurs authentifiés peuvent créer de nouveaux comptes. L'étape suivante consiste à protéger le point final /contacts. Ouvrez simplement le fichier services/contacts/contacts.hooks.js et mettez à jour en conséquence:

Redémarrez le serveur FEATHERS pour que les modifications de code prennent effet. Si vous essayez d'exécuter la demande de contacts de liste, vous recevrez la réponse suivante:

Pour vous authentifier, vous devez configurer le jeton de support comme auparavant. Une fois que vous avez fait cela, vous pouvez envoyer une demande et vous devez recevoir votre liste de contacts. Veuillez noter que le jeton que vous avez obtenu plus tôt expirera en une journée. Pour plus d'efficacité, il est préférable d'utiliser des variables d'environnement pour faciliter la mise à jour de tous les paramètres de la demande d'API à la fois. Lors de la construction d'une application frontale, vous devez stocker ce jeton dans un stockage local. N'utilisez pas de cookies. Sinon, votre application sera vulnérable aux attaques du CSRF. Consultez la documentation de sécurité des plumes pour les autres risques de sécurité que vous devez connaître.

Maintenant que vous avez configuré l'authentification, tous les nouveaux services créés ultérieurement vous donneront la possibilité de protéger les nouveaux points de terminaison. Voyons le dernier sujet de ce tutoriel dans la section suivante.

Crochets:

Hook est une fonction middleware attachée à une méthode de service avant, après, ou lorsqu'une erreur se produit. Ils sont souvent utilisés pour gérer l'exploitation forestière, restreindre l'accès, protéger les champs, remplir des entités liées, envoyer des notifications, etc. Si vous regardez services/users/users.hooks.js, vous pouvez voir que des crochets de plumes intégrés sont utilisés. Nous créerons nos propres crochets personnalisés. Tout d'abord, arrêtez le serveur et supprimez la table de base de données data/contacts.db. Ensuite, utilisez la commande suivante pour générer un nouveau crochet:

npm install -g @feathersjs/cli
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Créez des crochets personnalisés avec les options suivantes process-contact:

Ce que nous voulons faire dans ce crochet, c'est injecter deux nouveaux champs avant de traiter la demande "Créer un contact".

  • createdBy: lien vers l'utilisateur actuellement connecté via _id
  • createdOn

hooks/process-contact.js

populate-user

hooks/populate-user

: Ajouter la date de création Ouvrez le fichier et mettez à jour le fichier comme suit: Ensuite, créez un autre crochet qui mettra l'objet utilisateur à chaque enregistrement de contact lorsque vous demandez. Suivez les instructions dans la capture d'écran ci-dessous: Ouvrez le fichier et insérez le code suivant: Maintenant, vous pouvez démarrer le serveur. Utilisez à nouveau la demande de contact pour créer trois contacts. Si vous n'avez pas configuré de jeton de porteur, définissez-le. Sinon, vous recevrez une erreur d'autorisation. C'est le type de réponse que vous devez obtenir lors de la création d'un nouveau contact: Résumé:

J'espère que vous avez maintenant appris à créer rapidement votre propre serveur API RESTful. Nous avons seulement abordé les bases et vous devriez lire le guide complet pour découvrir plus de fonctionnalités que les plumes peuvent offrir qui peuvent vous aider à atteindre des fonctionnalités avancées avec un minimum d'effort. Vous devriez également consulter la page de plumes impressionnantes, qui contient beaucoup de ressources. Que vous ayez besoin de plugins, d'exemples de projet ou de tutoriels, vous pouvez y trouver le lien. Vous devez également consulter le CLI Feathers-plus, qui est une version améliorée des plumes. Il ajoute de nouvelles fonctionnalités en plus de ce que la CLI Feathers a déjà fournie, comme la génération de code pour l'ensemencement et la prise en charge de GraphQL.

Si vous souhaitez améliorer davantage le projet contacts-api, je vous recommande de créer une nouvelle application frontale en utilisant le cadre de votre choix. Construisez les écrans de connexion et les pages CRUD pour les points de terminaison /contacts et /users. Profitez du plaisir de mettre en œuvre des défis.

Des questions fréquemment posées sur les plumes.js:

  • Qu'est-ce que les plumes.js? FEATHERS.js est un cadre Web pour la création d'applications en temps réel. Conçu pour être léger, flexible et facile à utiliser, il fournit une suite d'outils et de modèles pour construire des applications côté serveur évolutives et maintenables.

  • Quels langages de programmation sont pris en charge par des plumes.js? FEATHERS.js utilise principalement JavaScript du côté du serveur et du client. Il peut être utilisé avec Node.js sur le serveur et prend en charge divers frameworks JavaScript sur le client, y compris des cadres tels que React, Angular et Vue.js.

  • Quelles sont les principales caractéristiques de Feathers.js? Feathers.js comprend des fonctionnalités en temps réel (via WebSocket et RESTful API), une architecture orientée services, une prise en charge de diverses bases de données (MongoDB, PostgreSQL, etc.), des mécanismes d'authentification et d'autorisation et des systèmes de plug-in pour extensions.

  • Comment les plumes.js gèrent-elles la communication en temps réel? FEATHERS.js utilise les fonctions des websockets pour réaliser une communication en temps réel. Il fournit une API en temps réel hors de la boîte qui permet aux clients de recevoir des mises à jour en temps réel lorsque les données sur le serveur changent.

  • Puis-je utiliser des plumes.js pour le rendu côté serveur (SSR)? Bien que Feathers.js soit principalement utilisé pour créer des API et des applications en temps réel, il peut être utilisé en conjonction avec d'autres cadres tels que Next.js ou nuxt.js pour implémenter le rendu côté serveur (SSR) des applications Web.

Tous les liens d'image conservent le format d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal