Premiers pas avec la création de serveurs Node.js, Express, Ejs, Mongodb et le développement d'applications à partir de scratch_node.js
WBOY
Libérer： 2016-05-16 16:25:31
original
1722 Les gens l'ont consulté
Cet article est adapté du "[Traduction] Guide de démarrage pour les développeurs front-end, construction de Node.js, Express, Jade, Mongodb Server from Scratch". La raison pour laquelle j'ai changé Jade en Ejs est parce que je pense qu'ejs. est plus adapté. Les habitudes des programmeurs WEB, plus précisément, devraient être plus conformes aux habitudes d'utilisation des programmeurs PHP et ASP. Bon, sans plus tarder, commençons directement le tutoriel.
Partie 1 – Installation de 15 minutes
Si vous voulez vraiment apprendre à partir de zéro, prenez d'abord le temps de configurer l'environnement. Ce n'est pas difficile, j'utilise Win8, donc cela semble un peu différent des tutoriels pour utiliser Mac et Ubuntu ou d'autres systèmes * nix, mais c'est fondamentalement la même chose.
Étape 1 – Installer Node.JS
C'est simple, allez sur le Site officiel de Node.js, cliquez sur le gros bouton vert Installer, il détectera automatiquement votre système et vous proposera de télécharger le bon fichier d'installation. (Sinon, cliquez sur le bouton Télécharger pour sélectionner le téléchargement dont vous avez besoin). Exécutez le programme d’installation et vous êtes prêt à partir. Node.js est installé et NPM (Node Package Manager) vous permet d'installer facilement divers packages utiles dans Node.
Étape 2 – Installer Express
Maintenant que Node est en cours d'exécution, nous avons besoin de quelques éléments qui nous permettront de réellement créer un site utilisable. Ensuite, nous devons installer Express, qui est un framework qui transforme Node d'une application primitive en un serveur Web qui ressemble davantage au serveur Web que nous utilisons habituellement. Nous devons commencer par Express car nous avons besoin de la fonctionnalité d’échafaudage qu’il fournit. On entre cette commande :
De cette façon, Express est correctement installé dans notre nœud et a été rendu disponible dans le monde entier. Vous verrez un tas de résultats dans la fenêtre de ligne de commande, principalement des requêtes http 304 et GET, c'est normal. Express doit être installé et disponible.
Étape 3 – Créer un projet Express
Nous allons utiliser Express et Ejs, mais pas pour le prétraitement CSS. Nous allons écrire du CSS à la main. Nous devons utiliser Ejs ou d'autres moteurs de modèles pour traiter les données Node et Express. Si vous connaissez HTML, Ejs n'est pas difficile. N’oubliez pas que vous devez vous concentrer, sinon les choses peuvent facilement mal tourner.
Maintenant, dans la même fenêtre de ligne de commande, tapez :
installer les dépendances :
$ cd nodetest1 && npm install
lancez l'application :
$ application de nœud
Étape 4 – Modifier les dépendances
D'accord, nous avons maintenant une structure de base du projet, mais nous n'avons pas encore terminé. Vous remarquerez que le processus d'installation express crée un fichier appelé package.json dans votre répertoire nodetest1. Ouvrez ce fichier avec un éditeur de texte. Il devrait ressembler à ceci.
Il s'agit d'un fichier au format JSON standard qui représente notre application et ses dépendances. Il faut ajouter un petit quelque chose. Par exemple, les appels à mongodb et Monk. Remplacez la partie dépendances par ceci :
Nous avons maintenant défini les dépendances du projet. Le * indiquera à NPM "d'installer la dernière version". Revenez à la fenêtre de ligne de commande, entrez dans le répertoire nodetest1 et entrez :
Cela produira un tas de choses. En effet, il lit directement notre fichier JSON modifié, identifie les dépendances qu'il contient et installe les fichiers nécessaires. Lorsque NPM est installé, vous devriez disposer d'un répertoire node_modules contenant tous les fichiers de dépendances dont notre projet a besoin.
Nous avons maintenant une application entièrement fonctionnelle et elle est prête à fonctionner. Essayons ! Assurez-vous que votre répertoire actuel est le répertoire nodetest1, saisissez :
merveilleux. Ouvrez le navigateur et entrez http://localhost:3000 Vous devriez voir une page de bienvenue pour Express.
Vous disposez désormais de votre propre serveur Web Node JS fonctionnant avec le moteur Express et le moteur de modèles HTML Ejs. Ce n'est pas si difficile, non ?
Partie 2 – D'accord, écrivons « Bonjour le monde ! »
Ouvrez votre éditeur de texte couramment utilisé ou un autre IDE. Personnellement, j'aime utiliser Sublime Text. Ouvrez app.js dans votre répertoire nodetest1. Ce fichier est le cœur de votre application. Vous devriez voir quelque chose comme ceci :
var express = require('express');
var routes = require('./routes');
var utilisateur = require('./routes/user');
var http = require('http');
var chemin = require('chemin');
Cela définit simplement un tas de variables JavaScript et pointe vers certains packages et dépendances, fonctions de nœud et itinéraires. Les routes sont équivalentes à une collection de modèles et de contrôleurs dans MVC. Elles sont responsables du transfert des requêtes et contiennent également une certaine logique de traitement. Express a créé toutes ces choses pour nous. Ignorons la route utilisateur pour l'instant et commençons à écrire la route de niveau supérieur (contrôlée par routesindex.js).
Cette phrase est cruciale. Il instancie Express et l'attribue à notre variable d'application. Le contenu suivant utilisera cette variable pour configurer un ensemble de paramètres Express. Continuez à taper :
Cela définit le port, le répertoire dans lequel rechercher les vues, le moteur de modèle à utiliser pour traiter ces vues et quelques autres éléments. Notez également la dernière ligne, qui indique à Express d'héberger les fichiers statiques dans le répertoire public/ en tant que fichiers dans le répertoire de niveau supérieur. Par exemple, votre répertoire d'images est stocké dans c:nodenodetest1publicimages, mais l'adresse d'accès réelle est http://localhost:3000/images/.
Il s'agit d'ignorer certains messages d'avertissement dans la fenêtre Node pendant l'exécution de l'application. Principalement quelques modifications futures possibles d'Express et de ses plug-ins. Si vous n'effectuez pas cette modification, vous recevrez de nombreux avertissements indiquant que certaines fonctions sont sur le point d'expirer lorsque le programme est en cours d'exécution.
Cela indique au routeur quelle route utiliser lorsqu'une requête URI arrive. Notez que la variable user a été définie précédemment et mappée sur /routes/user.js. Nous appellerons la fonction de liste définie dans ce fichier. Une liste d'utilisateurs peut être affichée ici.
http.createServer(app).listen(app.get('port'), function(){
console.log('Serveur express en écoute sur le port ' app.get('port'));
});
Enfin, créez un serveur http et démarrez-le. C'est à peu près tout.
(Le contenu ci-dessus est complet dans le modèle généré par le nouvel express, pas besoin de l'écrire vous-même)
Maintenant, écrivons quelque chose d'utile. Nous n'écrirons pas "Hello World!" directement dans notre page d'index. Nous profiterons de cette occasion pour apprendre à utiliser le routage de route et découvrir le fonctionnement du moteur Ejs. Ajoutez une ligne après la section app.get() du fichier app.js ci-dessus :
app.get('/helloworld', routes.helloworld);
Si vous appuyez sur ctrl C dans la fenêtre de ligne de commande pour terminer le processus app.js, puis le redémarrez, puis utilisez un navigateur pour accéder à http://localhost:3000/helloworld, vous obtiendrez une erreur de nœud très intéressante et ce qui suit message dans la fenêtre de ligne de commande : Un tas d'invites de crash. C'est parce que nous n'avons pas modifié le routage pour gérer ce chemin. Faisons ceci. Dans votre éditeur, accédez au répertoire routes, recherchez index.js et ouvrez-le. Cela devrait ressembler à ceci :
Ajoutons une nouvelle page. Je préfère créer un fichier de route indépendant pour chaque répertoire de premier niveau, mais nous ne prévoyons pas maintenant de créer une structure de répertoires complète pour helloworld sous vues, nous utiliserons donc le routage d'index pour l'instant. A la fin de ce fichier ajoutez :
exports.helloworld = function(req, res){
res.render('helloworld', { title: 'Bonjour le monde !' });
};
Il sera responsable du traitement de cette demande d'URI, mais maintenant nous n'avons pas de véritable page à restituer pour res.render. C'est le travail d'Ejs. Accédez à votre répertoire de vues, ouvrez index.ejs et enregistrez-le sous le fichier helloworld.ejs. Cela devrait maintenant ressembler à ceci :
Cela devrait être facile à comprendre.
Enregistrez le fichier. Appuyez sur ctrl c dans la fenêtre de ligne de commande pour interrompre app.js, puis tapez node app.js pour le redémarrer. Astuce : Lorsque vous modifiez un fichier modèle ejs, vous n'avez pas besoin de redémarrer le serveur. Mais lorsque vous modifiez un fichier js, tel que app.js ou un fichier js de routage, vous devez redémarrer le serveur pour voir l'effet.
Après le démarrage du serveur, notez que le serveur ouvre http://localhost:3000/helloworld, et vous devriez pouvoir voir cette belle interface :
D'accord ! Maintenant que nous disposons d’un itinéraire capable de gérer notre modèle, nous voyons l’effet souhaité. Ensuite, nous créerons un modèle (couche de données).
Partie 3 – Création de la base de données et lecture des données
Étape 1 – Installer Mongodb
Fermons l'éditeur de texte et revenons à la fenêtre de ligne de commande. Utilisez d’abord un navigateur, ouvrez http://mongodb.org/ et téléchargez Mongo. Cliquez sur le lien de téléchargement dans le menu principal pour trouver la version adaptée à votre système. Pour Win8 64 bits, téléchargez la version 64 bits *2008R2. Après le téléchargement, il s'agit d'un fichier zip, décompressez-le dans c:mongo ou c:program filesmongo ou ailleurs, cela n'a pas d'importance. Nous sauvegardons les données dans notre répertoire nodetest1.
Étape 2 – Exécutez Mongod et mongo
Créez un sous-répertoire data dans notre répertoire nodetest1, puis entrez le répertoire bin de votre répertoire mongodb dans la fenêtre de ligne de commande et saisissez :
Vous verrez que le serveur mongo démarre. Le premier démarrage prendra un certain temps car il doit pré-allouer de l'espace disque et d'autres tâches. Lorsqu'il affiche "[initandlisten] en attente de connexions sur le port 27017", c'est fait. Il n'y a rien d'autre à faire, le serveur est déjà en cours d'exécution. Vous devez maintenant ouvrir une autre fenêtre de ligne de commande, entrer dans le répertoire bin du répertoire mongo et entrer
c:mongo>mongo
Version du shell MongoDB : 2.4.5
connexion à : tester
Si vous regardez la fenêtre Mongod à ce moment-là, vous verrez une invite indiquant qu'une connexion a été établie. Nous utiliserons ensuite ce client de ligne de commande pour traiter manuellement notre base de données, mais cela n'est pas nécessaire pour notre site Web.
Étape 3 – Créer une base de données
Ne vous inquiétez pas de l'invite ci-dessus pour vous connecter pour tester. C'est juste la base de données par défaut que mongo utilise lorsque vous ne spécifiez pas de base de données. Il ne créera même pas la base de données nommée test à moins que vous n'y ajoutiez un enregistrement. Créons notre propre base de données. Dans la fenêtre de ligne de commande mongo, saisissez :
Il ne créera pas la base de données à moins que nous y insérons des données.
Étape 4 – Ajouter quelques données
Ma fonctionnalité préférée de MongoDB est qu'il utilise JSON comme structure de données, ce qui signifie que je le connais très bien. Si vous n'êtes pas familier avec JSON, lisez-le d'abord ; cela dépasse le cadre de ce didacticiel.
Nous ajoutons quelques données à la collection. Dans ce tutoriel, nous n'avons qu'une simple base de données, ne laissant que deux champs : nom d'utilisateur et email. Nos données ressemblent à ceci :
Vous pouvez créer vos propres valeurs de champ _id, mais je pense qu'il vaut mieux laisser mongo le faire. Cela crée une valeur unique pour chaque enregistrement. Voyons comment cela fonctionne. Dans la fenêtre mongo, saisissez :
Remarque importante : db est la base de données nodetest1 que nous avons créée ci-dessus et usercollection est notre collection, qui équivaut à une table de données. Notez que nous n’avons pas besoin de créer cette collection à l’avance, elle sera créée automatiquement lors de sa première utilisation. D'accord, appuyez sur Entrée. Si tout se passe bien, vous ne verrez... rien. Ce n'est pas bon, entrez :
Bien sûr, l'ObjectID que vous obtenez doit être différent, mongo en générera automatiquement un. Si vous avez déjà utilisé les services d'interface JSON, pensez-vous maintenant, wow, cela devrait être très simple d'appeler cela sur le Web ! Eh bien, vous avez raison.
Conseil : en tant que service formel, vous ne devriez pas souhaiter que toutes les données soient stockées au niveau supérieur. Concernant la conception de la structure de données mongodb, jetez un œil à Google.
Maintenant que nous avons une donnée, ajoutons-en d’autres. Entrez dans la fenêtre mongo :
Notez que nous transmettons plusieurs éléments de données à la collection via une donnée à la fois. Comme c'est simple ! Utilisez la commande find ci-dessus et vous verrez ces trois éléments de données.
Intégrons maintenant le serveur Web et la base de données construits précédemment.
Étape 5 – Connectez mongo au nœud
Créons maintenant une page pour afficher les enregistrements de la base de données dans un beau tableau. Voici le contenu HTML que nous allons générer :
Je sais que ce n'est pas très scientifique, mais c'est bon que vous compreniez. Nous voulons simplement créer un simple programme de lecture et d’écriture de base de données, pas créer un site Web complet. Tout d'abord, nous ajoutons un peu de contenu à app.js (le cœur et l'âme de notre application) afin de pouvoir nous connecter à mongodb. Ouvrez c:nodenodetest1app.js, en haut vous verrez :
var express = require('express');
var routes = require('./routes');
var utilisateur = require('./routes/user');
var http = require('http');
var chemin = require('chemin');
// Nouveau code
var mongo = require('mongodb');
var moine = require('moine');
var db = moine('localhost:27017/nodetest1');
Ces lignes indiqueront à l'application que nous devons nous connecter à MongoDB. Nous utilisons Monk pour être responsable de cette connexion. L'emplacement de notre base de données est localhost:27017/nodetest1. Notez que 27017 est le port par défaut de mongodb. Si vous modifiez le port pour une raison quelconque, enregistrez-le ici et modifiez-le en conséquence. Regardez maintenant en bas du fichier :
Cette ligne indique à l'application que lorsqu'un utilisateur accède au chemin /userlist, nous devons transmettre la variable db à la route userlist. Mais nous n’avons pas encore de route de liste d’utilisateurs, alors créons-en une maintenant.
Étape 6 – Lire les données en mongo et afficher
Ouvrez c:nodenodetest1routesidnex.js avec votre éditeur. Il y a deux routes, index et hello world. Ajoutons maintenant la troisième :
exports.userlist = function(db) {
Fonction de retour (req, res) {
var collection = db.get('usercollection');
collection.find({},{},function(e,docs){
res.render('userlist', {
« liste d'utilisateurs » : docs
});
});
};
};
Eh bien, les choses se compliquent un peu. Ici, nous définissons d'abord une fonction pour recevoir la variable db que nous avons transmise, puis appelons un rendu de page identique aux deux routes précédentes. Nous lui disons qu'il doit lire la collection d'utilisateurs, effectuer une recherche et enregistrer les données renvoyées dans la variable docs. Une fois que nous avons lu le contenu, nous appelons render pour afficher la page du modèle de liste d'utilisateurs et transmettons la variable docs obtenue en tant que variable de liste d'utilisateurs dans le moteur de modèle.
Créez ensuite notre modèle Ejs. Ouvrez index.ejs dans le répertoire vues, enregistrez-le sous userlist.ejs, puis modifiez son code HTML pour qu'il ressemble à ceci :
Enregistrez le fichier et redémarrez le serveur de nœud. J'espère que vous vous rappelez comment redémarrer. Ouvrez le navigateur et visitez http://localhost:3000/userlist Vous devriez voir une interface comme celle-ci : .
Cliquez sur le bouton Soumettre et vous verrez une erreur « Impossible de publier sur /adduser ». Réparons-le.
Étape 2 – Créez votre fonction de traitement de base de données
Comme précédemment, nous modifions app.js, puis le fichier de route, puis le modèle ejs. Cependant, il n'est pas nécessaire d'avoir un modèle ejs ici, car notre article sera publié plus tard. Ajoutez une ligne après la section app.get() de app.js :
Notez qu'il s'agit de app.post et non d'app.get. Établissons l'itinéraire. De retour dans routes/index.js, créez notre fonction d'insertion de base de données. Celui-ci est relativement volumineux, je vous suggère donc d'écrire un bon commentaire.
exports.adduser = fonction (db) {
Fonction de retour (req, res) {
// Récupère les valeurs de notre formulaire. Celles-ci reposent sur les attributs "name"
var nomutilisateur = req.body.nomutilisateur;
var userEmail = req.body.useremail;
// Définir notre collection
var collection = db.get('usercollection');
// Soumettre à la base de données
collection.insert({
"nom d'utilisateur" : nom d'utilisateur,
"email" : utilisateurEmail
}, fonction (err, doc) {
si (erreur) {
// En cas d'échec, renvoie l'erreur
res.send("Un problème est survenu lors de l'ajout des informations à la base de données.");
}
autre {
// Si cela a fonctionné, définissez l'en-tête pour que la barre d'adresse ne dise toujours pas /adduser
res.location("liste d'utilisateurs");
// Et en avant vers la page réussite
res.redirect("userlist");
}
});
}
>
Évidemment, dans un projet réel, vous devez encore effectuer de nombreuses vérifications. Par exemple, les noms d'utilisateur et les adresses e-mail ne peuvent pas être répétés et les adresses e-mail doivent respecter certaines règles de format. Mais ignorons cela pour l’instant. Vous pouvez voir que lorsque l'insertion dans la base de données est terminée, l'utilisateur revient à la page de la liste d'utilisateurs où il devrait voir les données nouvellement insérées.
Est-ce la meilleure façon ?
Étape 3 – Connectez-vous à la base de données et écrivez les données
Assurez-vous que votre mongod fonctionne ! Redémarrez ensuite votre serveur de nœuds. Ouvrez http://localhost:3000/newuser avec un navigateur. Maintenant, nous remplissons du contenu et cliquons sur le bouton Soumettre. Si tout se passe bien, nous devrions être de retour sur la page de la liste d'utilisateurs et voir les nouvelles données que nous venons d'ajouter.
Maintenant que nous avons officiellement terminé la lecture et l'écriture de la base de données Mongodb à l'aide de Node.js, Express et Ejs, nous sommes déjà des programmeurs géniaux.
Félicitations, vraiment. Si vous lisez attentivement ce didacticiel et l'étudiez attentivement au lieu de simplement copier le code, vous devriez avoir une notion complète des itinéraires, des vues, de la lecture et de l'écriture des données. C’est tout ce que vous devez savoir pour développer n’importe quel autre site Web complet ! Peu importe ce que vous pensez, je pense que c'est plutôt cool.
Partie 5 – Prochaines étapes
Commencez maintenant et vos possibilités sont infinies. Vous pouvez jeter un œil à Mongoose, un autre package Node pour travailler avec les bases de données MongoDB. Il est plus grand que Monk et possède plus de fonctionnalités. Vous pouvez également jeter un œil à Stylus, un moteur CSS pour Express. Vous pouvez utiliser le didacticiel Google Node Express Mongo pour voir ce qui suit. Étudiez dur et progressez chaque jour.
J'espère que ce tutoriel pourra être utile, j'ai écrit ceci parce que lorsque j'ai commencé à apprendre, j'avais vraiment besoin de quelque chose comme ça, mais je ne l'ai pas trouvé. Si vous êtes arrivé jusqu'ici, merci beaucoup !
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
