Dans l'exercice de la leçon précédente,
nous avons construit un serveur HTTP simple qui pourrait servir du contenu statique,
ceci a été entièrement construit en utilisant Node.js.
Maintenant que nous avons appris à propos d'Express,
le framework minimaliste qui prend en charge le développement du serveur sur Node.js,
examinons maintenant comment nous pouvons utiliser Express pour construire le même serveur dans cet exercice.
Pour commencer, allez dans le dossier Node.js que nous avons utilisé pour stocker
tout le code de ce cours, puis créez un nouveau dossier nommé node-express,
puis déplacez dans ce dossier.
Maintenant, nous allons créer
un dossier public ici dans le dossier express du nœud.
Ensuite, nous allons aller à ce dossier public HTTP nœud, puis copier ces deux fichiers,
le index.HTML et aboutus.html dans le dossier public node-express.
Nous allons servir ces deux fichiers en utilisant
le serveur Express que nous allons construire dans cet exercice.
Maintenant, aller aux terminaux.
Déplacez dans le dossier node-express dans le terminal, puis à l'invite, tapez npm init,
pour initialiser une application de nœud.
Ensuite, pour le nom du paquet, nous allons simplement utiliser node-express,
et pour la description, nous allons dire Node Express Examples,
et le point d'entrée est index.js,
et tout le reste de ce même comme avant,
et créons le fichier package.json.
Maintenant, laissez-moi ouvrir
le projet en utilisant l'éditeur Visual Studio Code dans mon cas, puis,
dans le fichier package.json entrons et ajoutons le nouveau script appelé start,
qui est l'index de nœud et enregistrez les modifications.
Maintenant que nous avons initialisé le module de nœud,
allons de l'avant et installons le framework Express dans
le projet pour l'utiliser pour construire notre serveur express.
Ainsi, à l'invite,
tapez npm install express.
C' est ainsi que vous installeriez
un module de nœud tiers si vous prenez ce cours pour
la première fois et n'avez pas suivi les cours précédents
, alors c'est quelque chose qui est important à noter.
C' est ainsi que vous allez installer un module de noeud en ajoutant le moins save,
nous enregistrons également les informations que
ce module de noeud tiers est une dépendance
pour notre projet et ces informations seront enregistrées dans le fichier package.json.
Si vous avez suivi les cours précédents de la spécialisation,
alors vous connaissez déjà cette information.
Alors, allons de l'avant et installons le module Express.
Comme vous pouvez le constater,
nous utilisons la version 4.16.3 Express dans ce cours.
Donc, revenons maintenant à notre code. En
regardant le fichier package.json,
vous voyez que dans le fichier package.json en installant Express, nous voyons déjà
une autre propriété qui est incluse dans le fichier package.json appelée dépendances.
Ces dépendances suivent tous les paquets
sur lesquels ce projet actuel va dépendre.
Ici, vous voyez Express
y être installé et la version correspondante d'Express en cours d'installation ici,
donc cela déclare que ce projet particulier
dépend de la version Express au moins 4.16.3.
En outre, vous voyez également ce dossier appelé modules de noeud créés ici.
C' est donc là que tous les modules de nœuds tiers installés par
votre application vont être stockés.
Maintenant, lorsque nous faisons un commit Git,
nous ne voulons pas valider ce dossier de modules de noeud.
Donc, pour ignorer
cela, nous
allons créer un fichier nommé .gitignore et dans le fichier .gitignore, tapez node_ modules.
Donc, cela permet à Git de savoir que nous ne voulons pas
valider le dossier des modules de noeud dans le dépôt Git.
Donc, avec cela, sauvegardons les changements.
Donc maintenant, lorsque vous créez un référentiel Git,
le dossier des modules de noeud sera ignoré.
Ce n'est pas nécessaire car vous pouvez toujours recréer le dossier des modules de noeud chaque fois
que vous clonez ce projet à partir de votre dépôt Git en tapant simplement npm install.
Cela va regarder le fichier package.json,
et regarder toutes les dépendances,
et les dépendances de développement qui sont dans le
fichier package.json et sont automatiquement installés tous ces paquets pour vous.
Maintenant, que nous avons terminé cela,
créons notre premier projet Express,
donc pour ce faire, nous allons créer un fichier nommé index.js et dans le index.js
nous allons déclarer un const express require express.
Maintenant, vous remarquerez qu'express est un module de noeud tiers et qu'il a été
installé dans notre dossier de modules de noeud dans le répertoire correct.
Donc, lorsque nous déclarons ceci ici disant que ce module Express est requis,
alors il sera automatiquement inclus à partir du dossier des modules de noeud dans notre application.
Maintenant, installez également HTTP
le module de base ici.
Maintenant, que nous avons installé ceci,
créons le nom du cours en tant qu'
hôte local et numéro de port comme 3000.
Donc, vous voyez que nous utilisons exactement la même façon de faire
cet exercice que nous l'avons fait pour l'exercice HTTP plus tôt.
Maintenant, à ce stade,
nous allons déclarer cette const appelée app comme express.
Ainsi, nous disons que notre application va utiliser le module de nœud Express.
Donc, une fois que nous faisons
cela, Express fournit un tas de méthodes que nous pouvons utiliser pour construire notre serveur Web.
Donc, après cela, nous allons dire app.use () et à l'intérieur,
nous allons déclarer une fonction qui sera appelée pour configurer notre serveur.
Donc, cette fonction prend trois paramètres req,
qui est la requête ; res,
qui est la réponse, et suivant.
Maintenant, comme nous l'avons vu, Express utilise des intergiciels supplémentaires.
Ainsi, le suivant est utilisé lorsque vous avez besoin d'
invoquer des intergiciels supplémentaires pour prendre soin du travail en votre nom.
Nous verrons l'utilisation de suivant dans certains des exercices ultérieurs,
mais la fonction ici prendra trois paramètres req, res, et suivant.
Suivant est un paramètre facultatif qui ne peut
pas être inclus si vous n'allez pas l'utiliser dans votre code.
Donc, à l'intérieur, nous allons dire,
journal de la console, puis,
nous allons enregistrer ces en-têtes,
et nous allons répondre avec le code d'état défini sur 200.
Définissez le type de contenu d'en-tête
en tant que texte HTML.
Donc, vous remarquez qu'une grande partie de ce code ressemble très
à la façon dont nous avons configuré notre application de nœud.
Donc, nous allons dire res.end et
ici corps HTML h1.
On va juste dire que c'est un serveur Express et fermer
les chars là-bas, et c'est tout.
D' après votre compréhension du nœud HTTP,
vous comprenez déjà ce que ces trois font
et la même chose est également faite dans le serveur Express.
Maintenant que nous avons configuré le serveur en utilisant l'application,
nous allons configurer le serveur,
puis c'est là que nous allons utiliser le HTTP CreateServer,
et donc CreateServer va maintenant prendre l'application comme paramètre de fonction là,
et par la suite, nous allons simplement dire le port server.listen,
hostname et la
fonction flèche ici dans laquelle je vais imprimer,
console, serveur de couche arrière de journal en cours d'exécution sur HTTP : //nom_hôte:port,
c'est tout. Vous verrez donc que cette partie est très similaire
à ce que vous avez fait pour l'exercice HTTP,
sauf que CreateServer prend maintenant cette application,
que nous avons déclarée précédemment Express.
Donc, Express ajoute des fonctionnalités supplémentaires qui seront
utilisées par le serveur HTTP que nous créons en utilisant note.
Une fois que nous avons terminé avec cela,
sauvegardons les changements,
puis nous allons de l'avant et démarrer le serveur,
et jeter un oeil à ce que le serveur va servir.
En entrant dans le terminal, ajoutez le terminal,
tapez NPM start et vous verrez que votre serveur est opérationnel.
Maintenant, quand nous y accédons à partir du navigateur ou du facteur,
vous verrez ce qu'il sert.
Donc, ici, j'ai l'agent de poste et de l'argent.
Permettez-moi d'envoyer la requête GET à localhost 3,000 comme avant
et vous verrez que cela sert le code HTML que nous incluons ici,
et donc c'est un serveur Express.
En cliquant sur l'aperçu,
cela vous montrera à quoi cela ressemblera dans un navigateur,
et cela montre la version brute du code qui a été renvoyé du côté serveur,
et vous pouvez voir que le code d'état est 200, ok ?
Et l'autre vecteur d'informations d'en-tête a été envoyé à partir du site du serveur.
Notez en particulier qu'il dit x alimenté par Express dans l'en-tête.
Avec cela, nous terminons la première partie de cet exercice où nous avons vu
comment nous pouvons utiliser Express pour mettre en place un serveur web simple.
Permettez-moi maintenant d'arrêter le serveur et d'initialiser le dépôt Git,
donc à l'invite je vais taper « git init »
puis « git status » et vous verrez que les fichiers qui ont été non suivis,
donc je dirai « get and dropped » et ces fichiers sont maintenant ajoutés dans le dépôt Git,
et donc quand vous dites git,
vous voyez les fichiers qui ont été ajoutés.
Notez en particulier que le dossier des modules de noeud
n'a pas été ajouté au référentiel Git car dans le
fichier .gitignore, nous avons explicitement indiqué que
le dossier des modules de noeud ne doit pas être inclus dans le référentiel Git.
Alors maintenant, vérifions notre échange de commit en disant git
commit moins m Express exemple,
et nous avons engagé ceci dans notre dépôt Git.
Dans la deuxième partie de cet exercice,
nous examinerons l'utilisation du middleware Express appelé Morgan.
Morgan est utilisé pour enregistrer les informations à l'écran,
donc il consigne les informations sur les demandes entrantes à l'écran afin que nous
puissions voir certaines informations en cours d'impression dans notre console ici.
En outre, nous verrons comment nous pouvons configurer notre serveur Express pour servir des fichiers HTML statiques.
Pour commencer, à l'invite, tapez npm
installer Morgan moins, moins enregistrer.
Maintenant, Morgan va être une dépendance que nous allons utiliser dans notre Application.
Donc, c'est pourquoi c'est moins,
moins enregistrer et cela obtiendrait Installer,
et vous pouvez voir que j'utilise Morgan version 1.9.0 dans ce cours.
Maintenant que nous avons installé Morgan,
voyons comment nous pouvons en faire usage dans notre Application.
Donc, en allant à notre application,
la façon de faire usage de Morgan est de déclarer ici
const Morgan exiger Morgan,
et ensuite nous dirons,
« App utiliser Morgan avec le développement ».
Donc, c'est la version de développement.
Ainsi, il imprimera des informations supplémentaires à l'écran si nécessaire.
Maintenant, je vais dans notre demande.
Dans notre application, je ne vais pas enregistrer les en-têtes entiers.
Au lieu de cela, permettez-moi de supprimer cela parce que Morgan
enregistrera suffisamment d'informations pour que nous puissions regarder,
et je vais configurer mon serveur pour servir les fichiers HTML du dossier public.
Donc, pour ce faire,
je vais déclarer usage et exprimer statique.
Cela indique à Express de servir les fichiers statiques à partir du double trait de soulignement dirname.
Donc, cela dit la racine de
ce projet et ils trouveront ces fichiers
dans double_dirname, plus/ public.
Donc, rappelez-vous que nous avons créé le dossier public dans le dossier Express du nœud.
Donc, cela informe Express que vous allez regarder
ce dossier particulier dans le dossier racine de ce projet et dans le dossier public.
Donc, ce sera le dossier à partir duquel
les fichiers HTML statiques seront servis par mon serveur Express.
Après avoir apporté ces modifications,
sauvegardons les modifications,
puis redémarrez notre serveur,
puis voyons comment cela fonctionne.
Aller à cette invite,
tapez npm start,
pour démarrer notre serveur,
et une fois que le serveur est en service,
examinons ce qu'il servira lorsque nous envoyons diverses requêtes à ce serveur.
En utilisant Postman, envoyons d'abord une requête get à l'hôte local:3,000
et vous remarquerez qu'il sert le fichier index.html.
Nous avons configuré notre serveur pour servir les fichiers statiques du dossier public,
et si nous disons juste localhost:3000 par défaut,
il servira le fichier index.html.
Donc, c'est ainsi que fonctionne votre serveur Web typique.
Donc, c'est ce que nous avons fini par configurer notre serveur express pour faire.
Maintenant, tapez localhost:3000 about.html et envoyez la requête,
et dit que c'est à propos de notre stratégie HTML,
et aussi le fichier HTML à propos de nous a été enregistré ici.
Ainsi, dans l'aperçu,
vous pouvez voir le fichier résultant qui a été servi à partir de notre site serveur.
Essayons d'accéder à un fichier inexistant
et vous verrez que lorsque vous essayez d'accéder à un fichier inexistant,
alors il sera par défaut à la deuxième installation que nous avons faite dans notre code,
qui dit qu'il s'agit d'un serveur Express.
Nous n'avons pas spécifié à notre serveur Express comment gérer
les situations où il rencontre un fichier qui n'existe pas.
Donc, c'est pourquoi il utilise la valeur par défaut qui ont mis en place juste en dessous de la statique Express,
qui est de servir la valeur par défaut, et bien sûr,
ce n'est pas le comportement le plus idéal,
mais c'est ce que nous avons dans le serveur Express en ce moment.
Plus tard, nous modifierons le serveur Express pour traiter les
erreurs plus en détail, dans les exercices ultérieurs.
C' est aussi un bon moment pour vous de faire un commit Git des changements.
Donc, vérifions l'état de Git après l'arrêt du serveur,
et nous allons ajouter les fichiers modifiés,
puis faire Git commit
moins m Express,
servir les fichiers statiques.
C' est ça. Avec cela,
nous complétons cet exercice.
Dans cet exercice, nous avons vu comment nous pouvons mettre en place
un simple serveur Web pour diffuser du contenu en notre nom.