Dans JavaScript Essentials : Partie 7, j'ai laissé entendre que nous examinerions le développement d'API ([0] [1]) et c'est par là que nous commençons. Nous aurons un avant-goût de ce qu'il faut pour développer une API simple pour suivre les dépenses.
Pour ce suivi des dépenses, nous devrons garder une trace de l'article acheté, du montant et de la date à laquelle l'article a été acheté. Une dépense ressemblera à ceci :
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
À ce stade, puisqu'une véritable base de données n'a pas encore été ajoutée, nous pouvons utiliser une liste (un tableau) pour contenir les données que nous allons créer. Dans cet extrait, nous passerons en revue chaque concept majeur entourant la création d'API et ajouterons quelques moyens d'améliorer cette application plus tard.
Sachez que nous allons construire sur ce projet, alors gardez-le propre et explorez, expérimentez, remuez, etc. autant que vous le pouvez.
Comme d'habitude, nous avons besoin d'un nouvel environnement de travail pour chaque projet, nous allons donc commencer par créer et initialiser un projet Node JS. Si vous n'êtes pas sûr, consultez JavaScript Essentials : Partie 6 (Mastermind en Javascript).
Maintenant, nous devons créer le dossier parent de notre API en faisant :
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
Tout ce que nous faisons avec ce script est assez direct.
Une alternative consiste à aller là où vous souhaitez créer ce dossier et à le créer là-bas, puis à ouvrir le dossier dans le projet de nœud vscode et init - consultez JavaScript Essentials : Partie 6 (Mastermind en Javascript).
À ce stade, nous devons installer un package nodejs appelé express. Express est une bibliothèque qui nous aidera à créer nos API.
Nous pouvons installer ce package en exécutant npm i express. Cela devrait modifier le fichier package.json et créer le fichier package-lock.json et le dossier node_modules. Consultez l'extrait, Qu'est-ce que Nodejs, pour plus de compréhension et d'informations sur la façon d'utiliser npm pour installer des packages.
Dans notre fichier index.js, nous pouvons ajouter ce code.
console.log("expense-tracker-simple-api");
// import the express lib
const express = require("express");
// create an express application
const app = express();
// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));
// create a server that listens to requests on port 3000
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
Tout ce que nous avons fait était de créer une application express, d'utiliser l'application pour créer une requête GET pour envoyer un message et de laisser l'application écouter les requêtes provenant du port 3000.
const app = express();
Crée une application express (? voilà comment créer une application express)
app.get("/", (req, res) => res.send("Hello world"));
Nous avons utilisé l'instance d'application express pour créer une requête GET. L'application possède plusieurs méthodes et propriétés qui incluent les méthodes HTTP. Découvrez l'exception des méthodes http ici.
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
Nous avons utilisé l'application express pour écouter sur un port et utilisé une fonction flèche pour nous dire, dire aux développeurs, que notre application est en cours d'exécution. Pour le port, nous pouvons le modifier vers un autre port de notre choix. Cependant, certains ports spéciaux sont déjà destinés ou utilisés pour une tâche particulière et ils sont bien connus dans la communauté et en tant que tels serveurs par défaut lorsque de telles applications ou programmes sont exécutés sur notre PC. Découvrez-les - 0 1 2
Remarque : Certains ne sont pas autorisés car votre système les accompagne et d'autres sont fournis avec des applications que nous installons, telles que certains serveurs et bases de données, etc. Ne vous inquiétez pas, lorsque nous utilisons un port déjà utilisé, notre application nous le fera savoir. Tout ce que nous avons à faire est d’en ajouter un ou d’en soustraire un. Pas de sueur.
Pour créer une requête GET, utilisez app.get(...), pour le POST, utilisez app.post(...) et ainsi de suite. Pour chaque itinéraire que nous souhaitons créer, app.SomeMethod(...), empruntera un itinéraire ou un chemin, indiquant la ressource que le client utilisateur souhaite ou l'action qu'il souhaite exécuter. Dans le cadre de l'itinéraire, cela peut nécessiter au moins un gestionnaire de requêtes. Cela signifie que nous pouvons avoir app.SomeMethod(path, hanlder1, handler2, ..., handlern);.
Pour la requête GET ci-dessus, le chemin ou la route est / (une chaîne) et le gestionnaire de requête unique que nous avons est (req, res) => res.send("Hello world"), une fonction de gestionnaire (un rappel ou une simple fonction fléchée). Les gestionnaires de requêtes peuvent être des middlewares et des contrôleurs.
Un gestionnaire de requêtes prend normalement deux arguments, la requête et la réponse, qui sont respectivement abrégés en req et res (vous n'êtes pas obligé de les appeler ainsi mais le premier est toujours une requête et le second est la réponse). La demande contient les données (ou certaines informations) sur qui a fait la demande et ce qu'il veut. La réponse est un moyen de fournir un retour d'information à l'utilisateur qui a fait la demande. Dans ce cas, nous envoyons "Hello world" lorsque le client fait une requête GET au chemin /.
Ici, vous remarquez que le client et l'utilisateur sont interchangeables, dans le sens où l'appareil fait la requête HTTP à notre serveur API et non un utilisateur, comme dans un compte utilisateur.
Habituellement, le gestionnaire de requêtes prendra un troisième argument qui pointera vers le gestionnaire suivant une fois que le gestionnaire précédent aura fait son travail. Nous appelons cela ensuite. Cela ressemble plus ou moins à :
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
L'argument suivant est utile, il pointe vers le gestionnaire de requêtes et parfois il prend un argument, une erreur. Nous implémenterons un gestionnaire d'erreurs pour gérer généralement les erreurs que nous n'avons pas traitées ou les erreurs que nous « transmettons » au gestionnaire de requêtes suivant.
Annulons maintenant le processus nodejs en cours d'exécution (dans le terminal), en utilisant le contrôle c. Puis exécutez-le à nouveau. Cette fois, avec le contenu mis à jour de la section Créer un serveur simple et une route GET, nous devrions voir une sortie dans la console (terminal) similaire à,
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
Ouvrez http://localhost:3000 dans le navigateur. Que vois-tu ? Un texte disant : Bonjour tout le monde ?
Rome ne s'est pas construite en un jour comme le dit le proverbe. Il en va de même pour le développement de logiciels. Peut-être que nous voulons dire ici que nous ajouterons progressivement plus de fonctionnalités au fur et à mesure de notre développement et dans ce processus continu, il devient irritant de démarrer et d'arrêter le serveur tout le temps.
Continuez, ajoutez une autre requête GET (itinéraire) avec le chemin /hello et un gestionnaire de requête qui dit quelque chose que vous voudriez dire. Soyez heureux.
Vous devrez redémarrer le serveur (le processus nodejs en cours d'exécution) et visiter http://localhost:3000/hello dans le navigateur pour voir la réponse de ce point de terminaison.
Ceci,GET http://localhost:3000/hello, est un point de terminaison. Vous partagez cela avec les consommateurs d’API. Entre nous, nous disons route, car nous n'avons pas besoin de connaître l'URL complète (y compris le protocole - http, le domaine - localhost, le port - 3000, et chemin - /bonjour). La route est METHOD PATH, plus ou moins, GET /hello.
Sur macOS ou Windows, nous pouvons faire node --watch index.js ou nous pouvons rechercher des modifications non seulement dans notre fichier d'entrée mais dans tout le chemin du dossier par, node --watch-path=./ index. js pour surveiller les changements dans le chemin du fichier ainsi que dans le fichier lui-même.
Actuellement, voici le contenu de mon fichier package.json :
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
Nous pouvons ajouter un script appelé dev dans la section script.
console.log("expense-tracker-simple-api");
// import the express lib
const express = require("express");
// create an express application
const app = express();
// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));
// create a server that listens to requests on port 3000
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
Nous pouvons arrêter le serveur en cours d'exécution avec control c et maintenant exécuter npm run dev. Cela surveillera les modifications enregistrées dans nos fichiers et rechargera le serveur.
Donc, si cela ne fonctionne pas pour vous, nous avons une alternative. Nous allons installer nodemone, npm et nodemon -g. Nous l'utiliserions partout comme outil utilitaire afin de ne pas avoir à l'installer dans le cadre de nos packages. Nous pouvons observer les changements en exécutant nodemon index.js. Il y a des cas où cela ne fonctionnera pas et quand cela ne fonctionnera pas, dom nodemon --exec node index.js
Nous pouvons modifier notre script de développement pour utiliser nodemon en,
const app = express();
À ce stade, vous pouvez librement modifier vos fichiers .js et lors de la sauvegarde, le serveur redémarrera pour recharger les modifications de charge appliquées.
Nous avons déjà créé une requête GET. Dans cette section, nous examinerons brièvement la signification de chaque méthode puisque nous en avons longuement discuté dans Requête et réponse.
Dans cette application, nous ne proposons qu'un seul type de ressource à nos clients, à savoir les dépenses. En supposant que nous desservons plusieurs ressources, nous regrouperons les demandes sous chaque ressource.
Disons que nous avons des utilisateurs et des dépenses, nous avons GET, POST, PUT, DELETE, etc. pour les utilisateurs et les dépenses.
Pour l'instant, nous utiliserions la route /expenditures pour représenter la ressource de dépense.
GET : Cela signifie que nous allons créer un itinéraire pour lister, tout obtenir, tout récupérer, etc. les enregistrements dont nous disposons sur les dépenses. Nous pouvons avoir une requête GET qui récupère l’un des enregistrements. Nous avons créé un GET similaire
POST : La méthode post est souvent utilisée pour créer des ressources
PUT : La méthode put permet de mettre à jour les recours
DELETE : La méthode delete est utilisée pour supprimer la ressource
Nous pouvons maintenant ajouter les lignes de code suivantes au fichier index.js mais au-dessus de app.listen(3000,...).
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
Lorsque vous enregistrez votre fichier, remarquez-vous les journaux dans le terminal ? Testez la route GET pour la dépense dans le navigateur.
Nous ne pouvons exécuter les requêtes GET que dans le navigateur. Nous discuterons ensuite des clients API.
Un client API dans ce contexte est un outil, un programme ou une application utilisé pour interagir (consommer, intégrer ou tester) des API. Les plus couramment utilisés sont Postman, Insomnia, curl, etc...
Dans vscode et à côté de certains autres IDE, il existe une extension qui fournit des extensions aux clients API. vscode possède d'ailleurs certaines de ces extensions. Cependant, nous envisagerons un client API appelé REST Client. Pour notre cas d'utilisation, il sera plus simple d'utiliser Rest Client en tant que tel, ne vous inquiétez pas. Nous sommes couverts.
Remarque : Postman ou tout autre client API de votre choix peut être utilisé
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
console.log("expense-tracker-simple-api");
// import the express lib
const express = require("express");
// create an express application
const app = express();
// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));
// create a server that listens to requests on port 3000
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
À titre d'exercice, créez la demande pour les points finaux de dépenses. Référez-vous lorsque vous rencontrez des difficultés. Nous avons encore beaucoup à faire.
À ce stade, je n'ai pas à souligner que nous utiliserions JSON pour communiquer avec notre API à l'aide du client API.
Comme mentionné précédemment, nous pouvons transmettre des données à notre API en utilisant le corps, l'en-tête ou l'URL de notre requête. Nous avons vu comment transmettre des données via le corps de la requête et l'en-tête (nous examinerons la transmission de certaines données spécifiques ultérieurement). Vérifiez la requête POST créée. Ce que nous n'avons pas examiné, c'est comment transmettre des données dans le cadre de l'URL.
Disons que nous voulons lire une dépense qui a un identifiant de 4, nous pouvons transmettre l'ajout d'un paramètre (dans le cadre de l'URL) sous la forme /dépenses/2. Pour la requête qui traitera cette exigence, nous faisons /expenditures/:id, où :id fait référence à l'identifiant de la dépense. En supposant qu'il s'agisse d'autre chose qu'un identifiant, disons un nom, alors nous ferions :name. Express traitera cela et nous fournira un moyen d'extraire cette valeur sans effort.
Maintenant, pour une chaîne de requête, l'idée est similaire aux paramètres de requête cependant, elle vient après une question, suivie d'un key1=value1&key2=value2...&keyN=valueN, où la clé est l'identifiant de la valeur que vous veux passer. Un exemple très direct est l'URL du client REST, https://marketplace.visualstudio.com/items?itemName=humao.rest-client. Le point d'interrogation marque le début de la chaîne de requête et tout ce qui le suit mappe une clé à une valeur. Par exemple : ?itemName=humao.rest-client.
Ce sera le bon moment pour tester tous vos points de terminaison API et expérimenter en jouant avec.
Nous allons maintenant traiter une requête qui transmet des données à l'aide du corps de la requête - Le point de terminaison POST.
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
L'objet de la requête a une propriété, body, et sur cette propriété, se trouvent les valeurs que nous avons transmises dans le corps de notre requête - req.body.
C'est la requête qui sera en cours d'exécution.
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
Il s'agit de notre implémentation de point de terminaison qui enregistrera simplement le corps de la requête dans la console.
console.log("expense-tracker-simple-api");
// import the express lib
const express = require("express");
// create an express application
const app = express();
// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));
// create a server that listens to requests on port 3000
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
Que s'est-il passé ? Nous avons eu la réponse habituelle mais... undefined a été enregistré dans la console. Eh bien, cela signifie que tout va bien, cependant, notre serveur API ne sait pas qu'il doit analyser le contenu entrant en tant que JSON. Vous vous souvenez de JSON ?
Ajoutons cette ligne sous const app = express(); ce qui devrait résoudre l'analyse des données entrantes au format json.
const app = express();
Maintenant, testons à nouveau le point de terminaison POST. Qu'as-tu eu cette fois ? Avez-vous obtenu quelque chose de similaire à ceci ?
app.get("/", (req, res) => res.send("Hello world"));
Vous savez maintenant comment obtenir les données du corps. Maintenant comme exercice, déstructurez le corps et passez un objet en réponse. Donc, au lieu de le consigner, renvoyez-le comme réponse.
Nous allons créer un nouveau point de terminaison GET pour lire une dépense par identifiant.
Ce sera notre requête API :
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
L'objet requête a une propriété, params et sur cette propriété, se trouvent les valeurs que nous avons passées dans le paramètre request de notre requête - req.params.
Maintenant, la mise en œuvre sera similaire à ce que nous avons fait jusqu'à présent mais un peu différente.
app.get("/", (req, res, next) => ...);
Nous pouvons également accéder directement à l'identifiant. J'espère que vous avez remarqué que la clé ou le nom :id transmis dans le cadre de la route correspond à la clé de l'objet enregistré. Essayez de renommer la clé params dans la route et voyez la sortie enregistrée.
Pour les chaînes de requête, il existe une propriété sur l'objet de requête, query, qui expose les chaînes de requête transmises.
Pour démontrer cela, une chaîne de requête sera transmise pour filtrer les enregistrements à renvoyer. Ce point de terminaison devrait en faire assez.
expense-tracker-simple-api Api running on http://localhost:3000
Maintenant, la mise en œuvre ressemblera à quelque chose de similaire à :
{
"name": "expense-tracker-simple-api",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"express": "^4.21.2"
}
}
Maintenant, exécutez votre API et vérifiez vos journaux. Expérimentez avec ça.
À ce stade, nous ne nous connectons pas encore à une base de données, nous devons donc manipuler les données depuis la mémoire. Ce que nous avons l'intention de faire est de créer un tableau, d'ajouter au tableau, de mettre à jour un élément et de supprimer un élément. Cela semble réalisable en tant que tel, c'est ce que nous allons faire.
Nous allons apporter quelques modifications à du code précédemment écrit, n'hésitez pas à modifier le vôtre également. L'extrait final sera partagé à la fin.
Créons un tableau de dépenses (données factices) ci-dessous const express = require("express");
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
Le point de terminaison actuel renvoie juste un message en utilisant res.send(message) mais ce que nous voulons renvoyer est json. Bien que le .send puisse également contenir un objet ou un json, nous utiliserons res.json(obj).
Je ne l'ai pas mentionné mais le code d'état par défaut renvoyé est 200. L'avez-vous remarqué ? Sauf qu'un autre problème se produit ou qu'il y a un problème avec la demande, le code d'état reste le même. Il y a une section sous les codes d'état, parcourez-la.
Nous pouvons modifier le code d'état en passant le code d'état souhaité dans res.status(desireStatusCode).json(obj). Je conserverai le code de statut 200 tout au long.
Assurez-vous que le serveur est toujours en cours d'exécution
On peut transmettre directement la liste des dépenses.
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
Quelle a été la réponse reçue ? Vérifiez le code d'état ainsi que la charge utile de la réponse.
Par expérience et aussi pour éviter toute ambiguïté, je préfère renvoyer le code d'état 200 par défaut et avoir soit une propriété success, soit un message ou une propriété data pour renvoyer un message ou une ressource demandée. Par défaut, lorsque le statut est faux, le message sera transmis, sinon un message ou des données pourront être transmis.
console.log("expense-tracker-simple-api");
// import the express lib
const express = require("express");
// create an express application
const app = express();
// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));
// create a server that listens to requests on port 3000
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
Nous devons afficher l'identifiant (index de chaque ligne)
const app = express();
app.get("/", (req, res) => res.send("Hello world"));
Pourquoi le filtre a-t-il été effectué après la cartographie ?
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
Cette implémentation vous fait-elle allusion à : Pourquoi le filtre a-t-il été effectué après le mappage ? ?
app.get("/", (req, res, next) => ...);
expense-tracker-simple-api Api running on http://localhost:3000
{
"name": "expense-tracker-simple-api",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"express": "^4.21.2"
}
}
Nous avons couvert la racine de la plupart des développements d'API. Ce projet est aussi fondamental que possible. Détendez-vous et regardez à nouveau. Il y a d'autres choses à examiner, comme
crud api = créer, lister, lire, mettre à jour et supprimer. C'est ainsi que vous abordez ces problèmes.
Liste de tâches
Calculatrice
Convertisseur de devises
Vous effectuez une conversion d'une devise à une autre. Faites-le pour autant de devises que possible (3 suffisent)
Sachez que l'excédent a été retiré.
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
Demandes API
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
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!
code d'activation de la clé Vista
Solution 0x80070002
Convertir le texte en valeur numérique
Comment désactiver la protection en temps réel dans le Centre de sécurité Windows
Comment insérer de l'audio dans ppt
Méthode de requête de nom de domaine de deuxième niveau
vscode crée une méthode de fichier HTML
Comment utiliser les macros Excel
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
