Codez votre première API avec node.js et express: configurez le serveur

Dans le tutoriel précédent, nous avons appris l'architecture de repos, les six contraintes de repos, comment comprendre la méthode de la demande HTTP et son code de réponse, et la composition du point de terminaison API RESTFul.

Ce tutoriel configurera un serveur pour notre API. Vous pouvez créer des API à l'aide de n'importe quel langage de programmation et logiciel de serveur, mais nous utiliserons Node.js (l'implémentation backend de JavaScript) et Express (un framework de nœud minimaliste populaire).

Installer

Notre première prémisse consiste à nous assurer que Node.js et NPM sont installés à l'échelle mondiale sur l'ordinateur. Nous pouvons tester les deux avec express-api et y passer.

 Mkdir Express-API && CD Express-API

Maintenant que nous sommes dans le nouveau répertoire, nous pouvons initialiser notre projet avec les commandes d'installation ainsi que chaque dépendance pour terminer la configuration du projet.

 NPM Installer Body-Parser Express MySQL Demande

Cela créera un fichier package-lock.json et un répertoire node_modules , et notre package.json sera mis à jour pour ressembler à ceci:

 {
  "nom": "express-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "Auteur": "Asyncbanana",
  "Licence": "MIT",
  "dépendances": {
    "Body-Parser": "^ 1.19.2",
    "Express": "^ 4.17.3",
    "mysql": "^ 2.18.1",
    "nœud-fetch": "^ 3.2.0"
  }
}

Ensuite, nous devons ajouter l'objet "scripts". L'objet "Scripts" peut nous aider à exécuter le code.

 {
  "nom": "express-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "Auteur": "Asyncbanana",
  "Licence": "MIT",
  "dépendances": {
    "Body-Parser": "^ 1.19.2",
    "Express": "^ 4.17.3",
    "mysql": "^ 2.18.1",
    "nœud-fetch": "^ 3.2.0"
  },
  "type": "module"
}

Qu'est-ce qu'un module ECMAScript?

Le module ECMAScript (ou ESM) est une nouvelle spécification pour connecter les scripts dans des environnements tels que les navigateurs et les nœuds. Il remplace les anciennes spécifications telles que CommonJS (CJS) utilisées par le nœud par défaut. Dans ce tutoriel, nous utiliserons tous les ESM.

Configurer un serveur HTTP

Avant de commencer à configurer le serveur express, nous utiliserons le module http intégré de Node pour configurer rapidement un serveur HTTP et définir un numéro de port (j'ai choisi createServer() ).

 // Créez le serveur à l'aide du module HTTP de Node Import {CreateServer} à partir de "http";
Port const = 3001;
const Server = createServer ();

Dans l'article d'introduction à REST, nous discutons des demandes et des réponses sur les serveurs HTTP. Nous allons configurer notre serveur pour traiter la demande, afficher l'URL demandée du côté du serveur et afficher le message "Hello, serveur!"

 server.on ("demande", (demande, réponse) => {
    console.log (`url: $ {request.url}`);
    Response.end ("Hello, Server!");
});

Enfin, nous dirons au serveur quel port écouter et afficher une erreur lorsqu'il apparaît.

 // Démarrez le serveur Server.Listen (port, (erreur) => {
    if (error) return console.log (`error: $ {error}`);
    console.log (`Server écoute sur le port $ {port}`);
});

Nous pouvons maintenant démarrer le serveur en exécutant le script NPM que nous avons créé plus tôt.

 NPM Start

Vous verrez cette réponse dans le terminal:

 <code>Server is listening on port 3001</code>

Pour vérifier si le serveur est en cours d'exécution, visitez https://localhost:3001/hello et vous verrez la demande GET sur le répertoire root du serveur ( / recevoir la demande, nous afficherons l'URL demandée et le message "Hello, Server!").

 app.get ("/", (demande, réponse) => {
    console.log (`url: $ {request.url}`);
    Response.Send ("Hello, Server!");
});

Enfin, nous commençons le serveur sur le port sur listen() .

 const Server = app.Listen (port, (error) => {
    if (error) return console.log (`error: $ {error}`);
    console.log (`serveur écoutant sur le port $ {server.address (). port}`);
});

Maintenant, nous pouvons utiliser curl -i pour l'URL, nous verrons qu'il est maintenant alimenté par Express et qu'il y a des en-têtes supplémentaires comme POST et les modules body-parser . Ajoutez l'instruction import en haut du fichier index.js .

 Importer BodyParser de "Body-Parser";
...

Ensuite, nous dirons à notre application Express d'utiliser curl -i au serveur et vous verrez que l'en-tête renvoie désormais à GET route vers le répertoire racine ( .js n'est pas requise dans require . Maintenant, nous déplacerons le routeur de l'application afin que nous puissions l'utiliser dans le fichier index.js .

 // Routeur d'exportation du routeur d'exportation par défaut;

Dans index.js , remplacez l'itinéraire:

 itinéraires (app);

Vous devriez maintenant pouvoir accéder à la variable users dans routes.js qui contient de fausses données utilisateur au format JSON.

 const users = [
  {
    ID: 1,
    Nom: "Richard Hendricks",
    Courriel: "richard@piedpiper.com",
  },
  {
    ID: 2,
    Nom: "Bertram Gilfoyle",
    Courriel: "gilfoyle@piedpiper.com",
  },
]]

Nous ajouterons un autre /users et enverrons les données utilisateur via.

 app.get ("/ utilisateurs", (demande, réponse) => {
    Response.Send (utilisateurs);
});

Après avoir redémarré le serveur, vous pouvez désormais naviguer vers http://localhost:3002/users et afficher toutes les données que nous affichons.

Remarque: Si vous n'avez pas d'extension JSON Viewer sur votre navigateur, je vous recommande fortement de télécharger un, comme JSONVue de Chrome. Cela rendra les données plus faciles à lire!

Visitez notre référentiel GitHub pour afficher le code complet de cet article et comparez-le à la vôtre.

en conclusion

Dans ce didacticiel, nous avons appris à configurer un serveur HTTP et un serveur express intégrés dans le nœud, les demandes de route et les URL, et utiliser les demandes GET pour utiliser les données JSON.

Dans le dernier numéro de la série API RESTFul, nous connecterons notre serveur express à MySQL pour créer, afficher, mettre à jour et supprimer les utilisateurs dans la base de données pour compléter les fonctionnalités de l'API.

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!