Share
Il y a quelques années, comme beaucoup de gens, j'ai commencé à entendre parler de plus en plus de Node.js. Je construisais des applications côté serveur dans ColdFusion depuis plus de 10 ans, mais j'étais toujours curieux de voir comment les autres plates-formes fonctionnaient également. J'ai apprécié JavaScript sur le client et son utilisation sur le serveur semblait fascinante. (Bien que pas nécessairement nouveau. Je suis assez vieux pour me souvenir de la sortie de SSJS par Netscape dans les années 90.) J'ai lu quelques tutoriels, assisté à quelques séances et en général, je suis parti… impressionné..
Chaque fois que je lisais quelque chose sur Node, cela revenait à la même histoire: créer un serveur Web. Franchement, ce n'était pas excitant. Même à l'époque où je développais des applications Web dans des scripts Perl CGI, je n'avais pas à m'en préoccuper. Je pouvais voir le potentiel des petits fournisseurs d'API légers, mais est-ce que je construirais un site simple? En aucune façon!
Mais un jour, j'ai eu de la chance. J'avais décidé d'assister à une autre présentation de nœud (principalement parce que je connaissais bien le présentateur) et pendant sa présentation, l'orateur a présenté Express. Une ampoule s'est éteinte. Voici le framework de nœud que j'attendais! Oui, en théorie, vous construisez toujours votre propre serveur Web, mais cet aspect est minimisé et vous pouvez vous concentrer sur la logique et le contenu de votre site. Mieux encore, j'ai vu à quel point l'intégration de moteurs de templates permettait une expérience presque de type ColdFusion (ou PHP). Dans cet article, je vais vous montrer comment installer Express et comment commencer à créer des applications Web à l'aide du framework..
Vous êtes probablement déjà développeur de nœuds. Si vous êtes nouveau sur la plate-forme, vous serez peut-être toujours impressionné par la puissance de npm. Je sais que je le suis. Comme je l'ai dit, j'ai passé la majeure partie de ma vie à faire ColdFusion. Il existe un écosystème d’open source riche, sinon grand, pour cette plate-forme. Mais découvrir et installer est une affaire manuelle. Les premières fois où j'ai utilisé NPM, j'étais impressionné. Franchement, j’ai du mal à imaginer utiliser une plate-forme sans outil comme npm. Commençons par un package.json fichier où nous ajouterons la dépendance Express.
"name": "demo1", "description": "Première application Express", "version": "0.0.1", "dépendances": "express": "3.x"
Encore une fois, cela devrait être assez standard pour les développeurs de nœuds. Descendez à la ligne de commande et exécutez:
npm installer
Qui installera Express et ses dépendances.
Inversement, vous pouvez également installer Express en tant qu'outil de ligne de commande pour générer rapidement des applications squelettes. Cela peut être fait en exécutant:
npm install -g express
Une fois que vous avez fait cela, vous pouvez exécuter Express en ligne de commande pour générer une application.
Revenons à l'application que nous avons créée avec la précédente package.json déposer et ajouter un app.js fichier. Au minimum, votre application créera une nouvelle instance de l'objet Express et commencera à écouter sur un port particulier. Commençons par ceci:
Accentsconagua
var express = require ('express'); var app = express (); app.listen (3000); Personnellement, j’ai tendance à prendre les choses assez lentement lors de l’apprentissage d’un nouveau framework, il est donc logique de fonctionner rapidement. application de noeud juste pour s'assurer que rien n'a été foiré.
Essayons maintenant d’ajouter quelques itinéraires simples à l’application. Les applications Express peuvent répondre à divers verbes HTTP en tant que méthodes d'API. Donc à titre d'exemple:
// HTTP normal obtenir app.get (une URL, faire quelque chose); // Une autre page app.get (une autre url, fait autre chose); // Je peux répondre à un formulaire post app.post (des URL, faire plus de choses);
Créons un exemple concret et ajoutons une page d'accueil à l'application:
app.get ('/', fonction (demande, réponse) response.send ("Ce serait du HTML");); Notez que Express ajoute un simple envoyer() méthode à la réponse objet. Cela élimine une partie du code standard pour gérer les réponses. Si vous avez tout fait correctement, vous pouvez maintenant redémarrer votre application et ouvrir votre navigateur sur le port 3000..
le demande envoyée() L'API gère également de manière intelligente différents types de données. Imaginez que vous souhaitiez ajouter une simple API basée sur JSON à votre site. En renvoyant simplement un objet au lieu d'une chaîne, Express gérera la conversion du résultat en JSON, ainsi que la définition des en-têtes de réponse appropriés..
app.get ('/ api', fonction (demande, réponse) response.send (name: "Raymond", age: 40);); Comme vous pouvez l’imaginer, à ce stade, la création d’une application consisterait à ajouter de plus en plus de routes pour répondre à tous vos besoins. Construisons un site statique très simple qui utilise ce que nous avons appris jusqu'à présent.
Pour notre premier site, nous allons construire un blog. Oui, ce n'est pas vraiment nouveau ou excitant, mais c'est aussi quelque chose que tout le monde comprend conceptuellement. Vous pouvez trouver le code source complet de cette application dans le téléchargement ci-joint dans la blog1 dossier. Nous allons sauter le package.json fichier car il est exactement le même, sauf pour le nom. Regardons plutôt app.js.
var express = require ('express'); var app = express (); app.get ('/', fonction (req, res) res.sendfile ('./ views / index.html');); app.get ('/ about', fonction (req, res) res.sendfile ('./ views / about.html');); app.get ('/ article', fonction (req, res) res.sendfile ('./ views / article.html');); app.listen (3000); Une des premières choses que vous remarquerez est que nous sommes passés du envoyer api à envoyer le fichier. Bien que nous puissions intégrer de grandes chaînes HTML dans notre app.js fichier, cela deviendrait désordonné assez vite. Nous avons trois itinéraires pour cette application. Un pour la page d'accueil, un pour une page "À propos" et un pour un article. Généralement, la page de l'article représente une entrée de blog, mais pour le moment, nous gardons les choses simples.
Le code HTML de nos pages est également assez simple. Voici la page d'accueil:
Page d'accueil Blog!
Remarquez qu'il n'y a rien de spécial ici. C'est du HTML statique simple qui sera renvoyé tel quel par l'application Express. Les pages À propos et Article sont identiques, à l’exception des modifications apportées au titre et h1 valeurs.
Encore une fois, lancez-le en ligne de commande et ouvrez votre navigateur. (Au fait, l'une des erreurs les plus courantes que j'ai commises lors de mon premier apprentissage de Node était d'oublier de tuer mes précédentes démos. Si vous exécutez toujours la dernière application, elle contiendra le port 3000. Tuez-le ou utilisez un autre port pour cela. application.) Vous devriez pouvoir naviguer autour de cette application simple en quelques clics.
Passons maintenant du statique au dynamique.
Express prend en charge une variété de moteurs de gabarit. Les moteurs de modèles ressemblent à beaucoup de choses dans le monde de la technologie - un pas de plus que la religion et la politique. La ligne de commande express peut ajouter un support pour Jade, EJS, JSHTML et Hogan. Selon la documentation Express, tout moteur de gabarit conforme à une signature particulière fonctionnera avec elle. Ils recommandent également de consulter la bibliothèque consolidate.js pour obtenir une liste des moteurs de modèles pris en charge..
Personnellement, je suis un grand fan de Handlebars (handlebarsjs.com). Je l'ai utilisé dans de nombreuses applications côté client et il était tout à fait naturel que je l'utilise côté serveur. Pour utiliser le guidon, vous devez installer une bibliothèque de wrapper appelée hbs. Ajoutons ceci à notre application.
"name": "blog2", "description": "application Blog", "version": "0.0.1", "dépendances": "express": "3.x", "hbs": "*"
Maintenant mettons à jour notre app.js utiliser ce moteur:
var express = require ('express'); var app = express (); var hbs = require ('hbs'); app.set ('moteur de vue', 'html'); app.engine ('html', hbs .__ express); app.get ('/', fonction (req, res) res.render ('index');); app.get ('/ about', fonction (req, res) res.render ('about');); app.get ('/ article', fonction (req, res) res.render ('article');); app.listen (3000); Nous avons fait quelques choses importantes ici. Pour utiliser le guidon, nous chargeons (via require) la bibliothèque d'encapsuleurs HBS. Nous devons ensuite dire à Express de l’utiliser. Par défaut, Handlebar fonctionnera avec les fichiers contenant une extension correspondant au moteur en question. Dans notre cas, quelque chose.hbs. Mais nous pouvons dire à Express de traiter les fichiers HTML comme dynamiques en utilisant le "moteur de vue" directive, vous voyez ci-dessus. Ce n'est pas obligatoire, mais je préfère travailler avec des fichiers HTML. Mon éditeur peut alors fournir des conseils de code et une coloration syntaxique plus agréables. Le chargement du moteur s'effectue alors via app.engine.
Enfin, tous les itinéraires passent à l’utilisation du nouveau rendre méthode. Express utilise par défaut le dossier views pour que nous puissions le laisser. Comme Express connaît également l’extension que nous préférons, nous pouvons également l’oublier. Essentiellement, res.render ('quelque chose') équivaut à dire à Express de rechercher views / quelque chose.html, analysez-le en fonction des règles de notre moteur de gabarits et renvoyez-le au navigateur.
Vous pouvez trouver cet exemple dans le blog2 dossier, dans le code source joint. Comme je l'ai déjà dit, j'aime bien faire des pas en avant. Par conséquent, même si nous ne faisons rien de dynamique, je vous recommande d'activer cette commande en ligne de commande et de vous assurer que vous pouvez toujours parcourir le site..
Étant donné que nous prenons maintenant en charge les modèles dynamiques, rendons-les réellement dynamiques. Puisque nous construisons un blog, nous devrions ajouter un support pour la liste d'un ensemble d'entrées de blog sur la page d'accueil et vous permettre de créer des liens vers un moteur de blog particulier. Bien que nous puissions établir une connexion avec MySQL ou Mongo, créons un ensemble de données statique ainsi qu’une simple bibliothèque d’encapsuleurs. Voici une blog.js fichier qui fournit à la fois pour obtenir un ensemble d'entrées, ainsi que pour obtenir un seul.
var entries = ["id": 1, "titre": "Bonjour le monde!", "corps": "Ceci est le corps de mon entrée de blog. Sooo excitant.", "publié": "6/2/2013 ", " id ": 2," titre ":" Œufs pour le petit-déjeuner "," corps ":" Aujourd'hui, j'avais des œufs pour le petit-déjeuner. Trop excitant. "," publié ":" 6/3/2013 ", "id": 3, "title": "La bière c'est bien", "body": "Flash d'actualité! La bière est géniale!", "publié": "6/4/2013", "id": 4 , "title": "Mean People Suck", "body": "Les gens méchants ne sont ni gentils ni amusants à traîner.", "publié": "06/05/2013", "id": 5, "title": "Je quitte Technology X et You Care", "body": "Permettez-moi d'écrire quelques liens pour expliquer pourquoi je n'utilise plus une technologie particulière.", "Publié": "6 / 10/2013 ", " id ": 6," titre ":" Aide mon Kickstarter "," body ":" Je veux une nouvelle XBox One. Veuillez financer mon Kickstarter. "," Publié ":" 6/12 / 2013 "]; exports.getBlogEntries = function () retourne les entrées; exports.getBlogEntry = function (id) pour (var i = 0; i < entries.length; i++) if(entries[i].id == id) return entries[i];
En règle générale, nous aurions également des méthodes pour ajouter, éditer et supprimer, mais pour le moment cela suffit. Regardons maintenant une mise à jour app.js fichier qui utilise ce moteur.
var express = require ('express'); var app = express (); var hbs = require ('hbs'); var blogEngine = require ('./ blog'); app.set ('moteur de vue', 'html'); app.engine ('html', hbs .__ express); app.use (express.bodyParser ()); app.get ('/', fonction (req, res) res.render ('index', titre: "mon blog", entrées: blogEngine.getBlogEntries ());); app.get ('/ about', fonction (req, res) res.render ('about', title: "About Me");); app.get ('/ article /: id', fonction (req, res) var entry = blogEngine.getBlogEntry (req.params.id); res.render ('article', titre: entry.title, blog: entrée);); app.listen (3000); Abordons les mises à jour une à une. (Cette version peut être trouvée dans le blog3 dossier.) Tout d’abord, nous chargeons notre moteur en utilisant un appel rapide. Cela nous donne la possibilité de l'appeler et d'obtenir des entrées. Vous remarquerez peut-être une nouvelle ligne appelant bodyParser, mais ignore que pour l'instant.
Dans notre routeur de page d'accueil, nous avons passé un deuxième argument à l'API de rendu. L'argument est un objet avec deux clés, Titre et les entrées. La valeur pour le titre est juste une chaîne, mais les entrées appellent notre blogEngine API. Voici où les choses deviennent intéressantes. Toutes les données que nous transmettons ici seront disponibles pour nos modèles. En fonction de la langue de votre modèle, les détails de son utilisation peuvent changer, mais regardons la page d'accueil..
Blog!
#chaque entréesTitre
/chaque
Publié: publié
Si vous n’avez jamais utilisé le guidon auparavant, vous pouvez probablement encore deviner ce qui se passe ici. le #chaque directive itérera sur un tableau. À l'intérieur du bloc, j'ai utilisé une combinaison de jetons du guidon qui renvoient aux données de mon blog ainsi que du code HTML pour générer une simple liste d'entrées de blog. Venant d'un fond ColdFusion, c'est très familier.
Je parie que vous vous demandez également où est passé le reste du code HTML. Lorsque vous utilisez des moteurs de gabarit dans Express, vous bénéficiez d'une prise en charge automatique de la mise en page. Cela signifie que je peux créer une présentation générique avec la conception de mon site et qu'Express y injecte la sortie d'une page particulière. Par convention, cela s'appelle layout.something où "quelque chose" est l'extension particulière que vous utilisez. Depuis que nous avons utilisé HTML, ce sera juste layout.html:
Titre corps
Assez lisse, non? La page À propos de n'est pas intéressante, nous allons donc l'ignorer, mais consultez l'itinéraire de l'article. Il comprend maintenant un jeton, : id, dans l'URL. Express nous permet de créer des URL dynamiques pouvant ensuite être mappées pour demander des arguments. Vous remarquerez que dans la page d'accueil, nous avons défini des liens ressemblant à ceci: / article / id.
En théorie, nous ajouterions une route pour chaque entrée de blog que nous avons, mais il est bien préférable de créer une route abstraite qui corresponde à toute demande de cette forme particulière. Pour avoir accès à cette valeur, nous ajoutons également dans un autre morceau, le bodyParser ligne que nous avons définie plus tôt. (Cette fonctionnalité particulière provient du framework Connect et vous apporte une aide précieuse pour la prise en charge des chaînes de requête et des corps de formulaire. Presque toutes les applications Express voudront l'inclure.)
Parce que nous avons accès à la valeur dynamique à la fin de l’URL, nous pouvons simplement le transmettre à la blogEngine object et utilise le résultat comme argument de la vue.
Ici se trouve le article.html fichier:
Titre du Blog
Publié: blog.published blog.body
Nous avons maintenant une application vraiment dynamique, mais laide. Voici notre nouvelle page d'accueil:
Et voici l'une des entrées d'un blog particulier:
Ajoutons quelques styles de base à notre application pour la rendre un peu plus jolie. Express constitue un moyen simple d’ajouter une prise en charge des ressources statiques telles que les images, les bibliothèques JavaScript et les feuilles de style. En définissant simplement un dossier statique, toute demande de fichier sera vérifiée par rapport à ce dossier particulier avant d'être comparée aux itinéraires. Voici un exemple de la version finale de notre moteur de blog (qui peut être trouvé dans le blog4 dossier):
app.use (express.static («public»));
À ce stade, si vous demandez /foo.css, et le dossier foo.css existe dans le Publique dossier, il sera retourné. Étant donné que mes compétences en matière de conception sont aussi bonnes que celles de tout développeur, j'ai choisi la solution de facilité et ai saisi un exemplaire de Bootstrap (http://twitter.github.io/bootstrap/). Je l'ai laissé tomber et une copie de jQuery, dans mon Publique dossier.
Puis dans mon layout.html, Je peux me référer à ces ressources. Voici un exemple de lien dans bootstrap.css:
Express va maintenant rechercher automatiquement ce fichier dans les Publique dossier. Vous pouvez avoir plusieurs dossiers statiques comme celui-ci et même configurer des préfixes d'URL personnalisés. Le résultat est - magnifique. (Ok, comparé à la première version, c'est une énorme amélioration!)
La page d'accueil:
Et un article:
Voulez-vous en savoir plus? Voici quelques liens qui peuvent être utiles.
