Commencez avec Express.Js

Sep 18, 2025
Comment
Get started with Express.JS [dix] [dix] [dix]
[dix]

Création d'applications de navigateur avec node.js devient fastidieuse. Express.js est un Cadre javascript Dédié aux applications à une seule page et à plusieurs pages hébergées dans l'environnement Node.js.

[dix]
  • 29 outils de conception Web pour accélérer votre flux de travail

Il fournit une fine couche de fonctionnalités de l'application Web fondamentales qui n'observent pas les fonctionnalités NODE.JS que vous connaissez déjà, vous pouvez donc être sûr que votre application finie sera à la hauteur de la performance. Et il est également idéal pour créer des API robustes, grâce à une pile de méthodes utilitaires HTTP et de middleware prêt à être utilisées.

Si vous souhaitez une option moins complexe, vous pouvez créer un site sans le codage avec un Générateur de site Web . De toute façon, assurez-vous d'obtenir votre hébergement Web Service Droite. Vous voulez commencer? Voici ce que vous devez savoir sur Express.js.

01. Générer une structure fonctionnelle

Get started with Express.JS: Generate a workable structure

[dix] [dix]
Introduisez les bonnes options de travail pour commencer

Express.js est fier d'être «non utilisée» - c'est-à-dire que le cadre permet au développeur de mélanger et de faire correspondre en termes d'architectures, de moteurs de modèles et de balisage. Malheureusement, avec un grand pouvoir vient une grande responsabilité.

L'équipe Express Developer cherche à adoucir le coup en introduisant un générateur de projet (si vous concevez les côtés d'une équipe, déployez le meilleur stockage en ligne garder les choses cohérentes). Il s'agit de votre poste de travail sous la forme d'un forfait NPM et facilitera nos expériences avec le cadre suivant:

[dix] 
 Tamhan @ tamhan-thinkpad: ~ / Desktop /
Stuff / 2018AUG / FutureExpressjs /
Espace de travail $ SUDO NPM Installer
Express-Generator -g

Le générateur contient également des dizaines d'options de projet - la figure accompagnant cette étape montre la sortie de l'aide complète. Pour la simplicité, nous nous limiterons à un projet basé sur les paramètres par défaut. Offrez son processus de génération avec: 

 Tamhan @ tamhan-thinkpad: ~ / Desktop /
Stuff / 2018AUG / FutureExpressjs /
Espace de travail $ express futuretest

AVERTISSEMENT: Le moteur de vue par défaut ne sera pas jade dans les prochains versions.

Une fois terminé, le répertoire de travail actuel contient un nouveau dossier appelé «futuretest». Il abrite notre projet de test et doit être configuré à l'aide de la commande de téléchargement du package de NPM. Au moment de la rédaction, le générateur comprend le générateur de vue Jade - le projet prévoit de modifier cela dans un proche avenir, vous obligeant à passer à un paramètre sélectionnant le moteur de vue prévu. Alternativement, demandez l'utilisation de PUG - c'est le successeur officiel du moteur Jade: 

 CD futuretest /
NPM Installer

02. Comprendre la structure de l'application

Maintenant que le générateur de projet a fait sa chose, ouvre-nous app.js dans un éditeur de choix. Sa structure - une structure beaucoup abrégée se présente comme suit: 

 var indexdrouter = nécessite ('./
itinéraires / index ');
var utilisateurRouter = nécessite ('./
itinéraires / utilisateurs);
var app = express ();
// Voir la configuration du moteur
App.set ('vues', chemin.join (__
Dirname, 'Vues'));
App.set ("Moteur de vue", "Jade");
app.utilisateur (enregistreur ('dev'));
app.use (express.json ());
app.use (express.urlencoded ({
étendu: faux}));
App.Utilisez (CookieParser ());
App.Utilisez (express.static (chemin.
rejoindre (__ dirname, "public"));

Express.js est très modulaire. App.js sert de point d'entrée, où une ou plusieurs «utilisations» () »permettent d'ajouter des composants destinés à gérer diverses demandes. Invocations de 'Set ()' vous permet de régler les paramètres dans le moteur - dont l'installation du moteur de vue Jade mentionné à l'étape précédente.

L'émission réelle de contenu Web a lieu dans les classes de routeurs. Pour la Brevity's Sake, limitait nous-mêmes à index.js: 

 Var Express = Exiger ('Express');
var routeur = express.router ();
routeur.get ('/', fonction (req, res,
suivant) {
  res.Render ('Index', {Titre:
'Express' });
});
module.exports = routeur;

'Obtenir ()' est fourni avec une chaîne de correspondance et un gestionnaire d'événements qui est invoqué chaque fois qu'un événement correspondant se produit. Dans notre cas, la méthode de rendu du moteur de modèle choisi est invitée à renvoyer le contenu au navigateur de l'utilisateur qui s'est connecté.

03. Exécutez la page Web

À ce stade, nous sommes prêts à prendre le site Web pour une tournée pour la première fois. Retournez à la borne contenant l'installation Express.js et appelez le NPM Démarrer avec le drapeau de débogage SET: 

 Debug = myApp: * NPM début

Une fois terminé, entrez http: // localhost: 3000 / dans un navigateur de choix pour examiner l'échafaudage créé par le générateur de projet. Quand terminé, appuyez sur ctrl + C Pour fermer la fenêtre et renvoyer le contrôle à l'interpréteur de la ligne de commande - N'oubliez pas que cela ferme également le serveur Web de débogage.

04. Tout concerne le routage et les points finaux

Get started with Express.JS: Routing and endpoints

[dix] [dix]
Trier les points d'entrée de droite, ajouter de nouvelles voies et introduire un support d'expression régulier

Par souci de simplicité, acceptez-nous qu'une application Web est généralement composée d'une séquence de points d'entrée. Express.js gère ceux-ci via la classe de routeurs - pensez-y en tant que référentiel de méthodes qui sont appelées en réponse à une demande entrante.

L'ajout d'un nouveau point d'extrémité à une application est accompli en ajoutant un nouveau travailleur dans la file d'attente. Notre exemple généré automatiquement crée deux types de routeurs, chacun étant soulevé à l'aide de la méthode "exiger": 

 var indexdrouter = nécessite ('./
Routes /
indice');
var utilisateurRouter = nécessite ('./
Routes /
utilisateurs ');

Dans la prochaine étape, 'APP.Utilise' enregistre les routeurs et les connecte aux chaînes de demande. Notre code ajoute en outre un gestionnaire d'erreur qui est invoqué si une URL non existante est entrée dans le système: 

 App.Utilisez ('/', indextrore);
app.use ('/ utilisateurs', utilisateursRouter);
app.use (fonction (req, res, suivant)
{
  suivant (CreateError (404));
});

05. Créer un nouvel itinéraire

Ouvrez les utilisateurs.js et modifiez son code comme ci-dessous: 

 routeur.get ('/ user1', fonction (req,
res,
suivant) {
  res.Send («futur dit bonjour
1');
});
routeur.get ('/', fonction (req, res,
suivant) {
  res.Send ('Répondre avec un
Ressource');
});

L'ajout de nouvelles voies à express.js est un processus mécanique. Saisissez l'objet de routeur de choix et appelez la méthode correspondant au verbe HTTP que vous cherchez à gérer. Ensuite, passez dans une chaîne qui sera ajoutée au «offset» enregistré avec 'app.use'. À partir de ce moment, http: // localhost: 3000 / utilisateurs / user1 et http: // localhost: 3000 / utilisateurs / renvoie une réponse valide.

Gardez à l'esprit que Express.js n'est pas limité à la manipulation des ressources «Obtenir». 'Post ()', 'Mettez ()' et 'Supprimer ()' G traitez les quatre demandes HTTP traditionnelles, avec des dizaines de méthodes de verbe supplémentaires répondant à des besoins plus inhabituels. Enfin, l'objet 'req' fournit un accès à l'en-tête de la demande - mettez-le à bon utilisation lors de l'analyse des paramètres ou des informations client.

06. Correspondance avancée

[dix]

Ajout de itinéraires à la main devient fastidieux à mesure que la complexité du programme augmente. EXPRESS.JS répond à ce problème en introduisant à la fois un support générique et une expression régulière. Par exemple, examinez la déclaration suivante qui utilise une expression régulière pour correspondre à différentes cordes contenant le chien de séquence de caractères. 

 App.get (/.* Dog $ /, fonction (req,
res) {
  ...})

07. Routage anormal

Tout en manipulant les quatre demandes HTTP devrait être suffisante pour quiconque (Tip Bill Gates), Express.js peut également travailler avec des protocoles supplémentaires. Express-ws est un candidat particulièrement savoureux pour cette section - il étend Express.js la portée d'inclure les communications WebSocket.

Une fois le plugin ajouté au projet principal Express.js, l'activation est accomplie via un appel "exiger". Il renvoie un objet d'assistance contenant tout sauf une méthode - appelez-le pour établir une connexion entre le routeur et le plugin: 

 var expressws = nécessite ('express-
WS ')
app);
Après cela, une nouvelle méthode appelée 'WS ()' peut être invoquée à ajouter de nouveaux itinéraires basés sur la technologie Websocket:
app.ws ('/', fonction (ws, req) {
  ws.on ("message", fonction (msg)
{
    console.log (msg);
  });
  console.log ('socket', req.
essai); });

Leur prototype diffère des itinéraires normaux en raison de la présence de l'objet «WS» - il permet d'accéder à l'instance Websocket sous-jacente connectée au client responsable de la connexion.

08. Intégrer les bases de données et les moteurs de modèles

Get started with Express.JS: Integrate databases and templating engines

[dix] [dix]
Assurez-vous d'utiliser la puissance de l'écosystème du plugin riche

Être basé sur Node.js signifie que l'écosystème de plugin riche est à votre commande lorsque vous travaillez sur des applications Web. Par exemple, accéder aux bases de données SQL et NOSQL - généralement une tâche extraordinairement fastidieuse - peut être traitée à l'aide des plugins fournis par les fournisseurs de base de données. Le déploiement réel est aussi simple que d'installer le module NPM requis - si votre code est d'accéder à une base de données REDIS, ajoutez simplement ce qui suit: 

 var Redis = nécessite ('Redis')
Var client = redis.createclient ()
client.set ('stringkey', 'Aval',
Redis.Print)
. . .

Bien sûr, SQLite en mémoire est également pris en charge: 

 var sqlite3 = nécessite ('sqlite3').
verbeux()
var db = nouveau sqlite3.
Base de données (': Mémoire:')
db.sérialize (fonction () {
  db.run ('Create Table Lorem
(texte d'information) ')

Gardez à l'esprit que l'intégration Node.js n'est pas limitée aux plugins de base de données. Les développeurs aventureux pourraient aller jusqu'à inclure des produits comme Tessel, créant ainsi des applications Web pouvant également interagir avec Internet des choses dispositifs.

09. Modèle de style

Un domaine où les programmes simples et réels diffèrent est la création de vues. Bien qu'un petit projet d'exemple utilise généralement des cordes fabriquées à la main, l'assemblage de grandes sensations HTML avec une chaîne de choses connectées est très gênante.

Les moteurs de modèles offrent une solution de contournement soignée. Ils permettent la création de fichiers de schéma prédéfinis, qui peuvent être peuplés de manière programmatique dans l'exécution.

Dans le cas de notre exemple de programme, les vues sont dans les fichiers .JADE. L'indice d'ouverture révèle la structure suivante: 

 étend la mise en page
Contenu du bloc
  h1 = titre
  p Bienvenue sur # {titre}

Les expressions conçues dans des supports bouclés agissent comme des champs de modèle dont les valeurs doivent être remplacées au moment de l'exécution. Index.js invoque le rendu avec un objet de paramètre, entraînant le rendu de la page de démarrage affiché dans la figure accompagnant cette étape: 

 routeur.get ('/', fonction (req, res,
suivant) {
  res.Render ('Index', {Titre:
'Express' });
});

La plupart des moteurs de modèles peuvent également analyser des matrices lorsqu'ils sont munis d'un modèle d'élément. Dans ce cas, chaque ligne de la matrice est affichée avec une instance du modèle DOM - Les similitudes du modèle d'affichage de la liste trouvée dans Android sont purement opportunes. Express.js ne se limite pas aux moteurs de modèles prédéfinis. Si vous avez envie de vous déplaçant la vôtre pour une raison quelconque, suivez simplement les étapes décrites ici - En principe, vous devez remplacer toute seule fonction.

10. Manipuler le contenu statique

Les applications Express.js ont tendance à contenir des fichiers et des images CSS. Les servir via la fonction de rendu est inefficace - une manière plus intelligente impliquerait de les envoyer sur leur voie joyeuse avec une demande HTTP traditionnelle. Cela peut être atteint via la fonction 'Express.Static ()', qui peut marquer des dossiers entiers à l'exportation: 

 App.Utilisez (Express.Static ("Public"))
app.use (Express.Static ("Fichiers"))

11. Modifier le flux d'événements

Enfin, nous permettent de mentionner le terme middleware sous peu. Dans Express.js Parlance, le middleware est un ensemble d'un ou plusieurs composants qui s'intègrent dans l'organigramme montré ci-contre. Ils peuvent ensuite être utilisés pour modifier les demandes car ils passent dans le système de routage - lorsqu'ils sont mis en œuvre correctement, des fonctionnalités illimitées peuvent être obtenues.

De plus, certains composants prêts peuvent être trouvés ici - Visitez ce site avant de se lancer dans un projet de développement à grande échelle.

12. Comment héberger une application express.js

Get started with Express.JS: How to host an Express.JS app

[dix] [dix]
Considérez les plates-formes où vous pouvez héberger votre nouvelle création

Tester Express.js Applications est facile. Des problèmes surviennent une fois que vous souhaitez que la page soit accessible à des tiers - en raison de sa générosité par le nœud.js Environnement, il n'existe aucun moyen d'obtenir une image statique adaptée au déploiement FTP aux services d'hébergement Web.

En théorie, rien contre l'utilisation d'un PI de framboise, d'une orangepi, d'un serveur dédié ou d'une machine virtuelle louée à partir d'un service de cloud ou d'un fournisseur d'hôte Web offrant un hébergement virtuel. Cependant, la location d'une machine virtuelle complète peut vous faire face aux responsabilités de maintenir l'environnement d'exécution et le système d'exploitation à jour.

Si cette tâche n'est pas à votre goût, un fournisseur de plate-forme-AS-A-service peut être un choix plus attrayant (bien que dans la plupart des cas, assez coûteux).

De nombreux développeurs considèrent que Heroku, avec ses tarifs présentés dans la figure qui accompagne ce boxout, être la norme d'or pour toutes choses liées à Node.js Hosting.

C'est cependant un peu injuste dans la vérité - l'élastique d'Amazon, la plate-forme de cloud de Google et l'azur de Microsoft fournissent tous un support similaire à une exécution à distance de charges utiles à base de nœud.js. Dans tous ces systèmes, le problème principal est la manipulation - tandis que Azure est connu pour ses déploiements lents, d'autres fournisseurs de promoteurs de charge avec des services de back-end difficiles à utiliser de systèmes de configuration extrêmement complexes.

En outre, la version prise en charge de l'environnement NODE.JS diffère du fournisseur au fournisseur. Bien sûr, nous n'avons pas assez d'espace pour couvrir le sujet en profondeur. Visite Tutoriel de déploiement de Mozilla et express.js ' Performance et fiabilité et Sécurité Meilleures pratiques Pages pour certaines des questions concernées. Assurez-vous de regarder la documentation du fournisseur pour glaner plus de bonnes pratiques.

13. Vos candidatures à l'avenir.

Get started with Express.JS: Future-proof your applications

[dix] [dix]
Une foule de nouveaux ajouts doit être notée

Le cycle de développement express.js est loin d'être lisse: les développeurs sont réputés pour des modifications fréquentes de l'API nécessitant des réécrites du code client. L'interrupteur de 3.x à 4.x était particulièrement douloureux, c'est pourquoi la libération imminente de 5.x pourrait laisser quelques-uns quelques-uns de vous sentir mal à l'aise.

Tandis que Express.js 5.0 apporte quelques changements de rupture, leur impact est plus limité. Tout d'abord, un ensemble de fonctions déjà obsolètes est supprimée pour réel - si le code les utilise toujours, la mise à niveau vers 5.x nécessite une maintenance.

Les concepteurs de vues Les moteurs doivent vérifier «Res.Render ():« La croissance de classement en ce qui concerne les rendriers, qui a conduit à certaines implémentations synchrones glissant. La version 5 du cadre améliore les performances en appliquant le rendu asynchrone.

En plus de cela, un ensemble d'améliorations diverses et de changements documentés ici voit le retour de certaines fonctionnalités éteintes des versions précédentes - en outre, certains bugs de longue date seront fixés dans la nouvelle version.

Enfin, soyez conscient que vous pouvez déjà essayer la nouvelle version. Créez simplement une copie de votre code source, saisissez une borne et entrez la commande suivante pour télécharger une archive de saignement à peine testé JavaScript. Fais attention. 

 $ NPM Install Express @ & GT; = 5.0.0-
alpha.1 --Save

Cet article a été publié à l'origine dans le numéro 279 de la création Web Design Magazine Web Designer. Achetez un numéro 279 ici ou Abonnez-vous à Web Designer ici .

Articles Liés:

  • Tout ce que vous devez savoir sur le nouveau nœud.js 8
  • 20 modules nœud.js que vous devez savoir
  • 25 outils JavaScript à changement de jeu
[dix] [dix]
[dix]

Comment - Most Popular Articles

44 des meilleurs raccourcis et gestes iPad pour iPados 2020

Comment Sep 18, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: futur) [DIX] Sauter à: ..

Comment affiner votre portefeuille de conception

Comment Sep 18, 2025

VOYE PORTEFEUILLE Détient La Clé Pour Obtenir Le PROCHAIN ​​PROJET DANS LE SAC AFIN QU'IL MÉRITE BEAUCOUP D'ATTENTION. Il est égamément important de SE Rappeler Que ce n'est pas Jama..

Comment construire un site de blogging avec Gatsby

Comment Sep 18, 2025

[DIX] [DIX] [DIX] [dix] [DIX] LES CADRES TELS QUE RÉGISSENT SEULIENT ENVOIENTE JavaScript Aux Clients, Q..

Dessine un portrait de crayon d'un chien

Comment Sep 18, 2025

[dix] [dix] [dix] [dix] Lorsque vous dessinez des portraits d'animal de compagnie, vous n'avez que be..

Peindre comme un impressionniste

Comment Sep 18, 2025

[dix] [dix] [dix] [dix] Les œuvres impressionnistes étaient fraîches et spontanées et exécutées..

Peindre un portrait dans les huiles

Comment Sep 18, 2025

[dix] [dix] [dix] [dix] Apprentissage Comment peindre Un portrait n'es..

Créer des carreaux ornés dans des concepteurs de substance

Comment Sep 18, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Conception et..

Prototype d'un bouton d'action flottant en pixate

Comment Sep 18, 2025

Le pixate vous permet de prototyser rapidement des maquettes mobiles interactives pouvant être prévisualisées sur les périphériques Android et iOS. Dans ce tutoriel, nous allons l'utilis..

Catégories