Bienvenue dans cette leçon, je vais vous montrer comment nous pouvons écrire.
H m 1.
Dans un fichier séparé et nous pouvons envoyer ce fichier de retour dans la réponse plutôt que ce que nous avons fait jusqu'à présent en utilisant redstart envoyer.
Il ya trois objectifs principaux ici.
Le premier est d'utiliser redstart rendre à lui rendre à renvoyer un fichier de chaque fichier et qui aura plus de sens une fois que nous parlons de ce que chacun de nous est.
Et c'est le prochain objectif.
Expliquez ce qu'Éjaz est et pourquoi nous l'utilisons.
Enfin, passez les variables à Ejay en tant que modèles.
Donc, pour commencer ici, je vais avoir besoin d'une nouvelle application Express et je vais passer à travers la création de l'application express de base à partir de zéro que je ne vais pas continuer à faire dans chaque vidéo, mais il est encore assez tôt dans le cours .
Et je veux juste m'assurer que vous vous habituez à le voir et à le faire parce que c'est quelque chose que vous ferez sans arrêt.
Donc, j'ai un répertoire appelé More express où je vais travailler à partir de cette unité et je vais faire un nouveau répertoire à l'intérieur de cela et nous allons simplement appeler ce Ejay nous démo.
Et puis au lieu de démonstration Ejaz nous allons exécuter NPM en elle et je vais juste accélérer à travers cela.
Donc, ce nom est très bien.
La version est fine, la description est vide.
J'aime toujours changer cela à l'application.
Oui.
Juste une préférence personnelle.
Appuyez sur Entrée quelques fois de plus.
Vous n'avez pas besoin de remplir un de ces et là nous allons.
Et maintenant, si nous ne nous permettre, nous avons un paquet que Jason nous laisser créer notre acte J nous et nous allons aussi exécuter NPM installer express dash dash enregistrer.
Voilà.
Maintenant, ouvrons le fichier de jazz et commençons à y ajouter du code.
Et plutôt que de faire juste ls et puis en cliquant sur J.S. Et en cliquant sur ouvrir J'ai récemment trouvé une autre façon de le faire.
Que Cloud 9 a récemment ajouté qui est si vous tapez l'espace C9, puis le nom d'un fichier ou le chemin d'accès à un fichier.
Donc C9 base app.
J Oui qui va vous ouvrir dans l'éditeur.
Il est beaucoup plus rapide que d'avoir à taper ls, puis cliquez sur le fichier, puis cliquez sur Ouvrir.
Donc, nous allons obtenir le code express de base ici à ce moment exprimer exprimer exprimer et puis var app est égal à exprimer l'exécuter en tant que fonction.
Une chose que vous verrez occasionnellement est ce là où quelqu'un a dit Savar app égal à exiger express et puis il suffit de l'exécuter en tant que fonction immédiatement.
La plupart des gens le feront ainsi dans deux étapes distinctes et le plus souvent vous verrez Xpress et app que ceux qui peuvent être n'importe quoi.
Maintenant, mettons l'acte en place.
Écoutez aller au fond même qui va démarrer le serveur de sorte qu'il aurait besoin du port qui est le processus que le port EMV et ensuite le processus que D-NV IP et ceux qui sont des variables d'environnement que cloud 9 a mis en place que nous accédons au port et Adresse IP.
Et puis j'ajoute dans mon rappel qui s'exécutera une fois que le serveur a été mis en place une fois qu'il est l'écoute et nous allons juste voir ce qui se passe sur le journal.
Le serveur écoute comme ça et sauvera.
Maintenant, ajoutons dans notre premier itinéraire et nous ferons l'itinéraire.
J'aime toujours commencer là et c'est toujours une expression confuse à certains de mes étudiants parce que ce mot que je prononce route certains d'entre eux se prononcera en tant que racine.
J'essaie de le dire très clairement quand je dis des racines.
Je parle seulement de R O T comme dans ce.
L'itinéraire racine.
OK alors nous allons ajouter que dans apt get root ou slash et puis notre fonction de rappel sera exécuté chaque fois qu'une demande pour obtenir des requêtes est faite de barre oblique et puis auront ces deux objets demande en réponse et nous allons aller de l'avant et juste appeler le rez Envoyer et nous allons juste faire une chose simple.
Bienvenue sur la page d'accueil.
Tout comme cela devrait tous être examen à ce point.
Commençons le serveur vers le haut afin que le noeud j.
On dirait que tout va bien.
Passons maintenant à la page racine ici et rafraîchissons.
Bienvenue sur la page d'accueil.
Évidemment, ce type de contenu d'une seule ligne de texte est assez ennuyeux.
Ce que nous pouvons faire pour l'épincer un peu, c'est que nous pouvons revenir ici et faire de cette H-2A Mel.
Si nous voulions juste comme ça et puis nous pouvons ajouter en dessous que et H-2 qui dit bla bla.
Juste comme ça.
Voilà.
Et si nous enregistrons ceci et redémarrez le serveur.
Et puis nous revenons ici et rafraîchir.
Nous obtenons des albums HVM étant rendus à nous, mais c'est encore incroyablement douloureux de taper réellement une page entière.
C'est techniquement possible, mais ce serait si difficile.
Ce n'est pas une bonne idée.
Heureusement il ya un moyen plus facile où nous pouvons écrire tout notre code dans un fichier séparé tout le temps que nous voulons tous les C Ss et oui tous les javascript front-end que nous voulons renvoyer à l'utilisateur afin que nous puissions utiliser une méthode Appelé rendu et que la méthode de rendu vit sur l'objet de réponse quel que soit son nom.
Dans notre cas revs si repos ne rendent pas.
Et puis nous lui donnons un nom d'un fichier comme la page d'accueil ou à la maison dot vieilli lui ou Dogstar vieilli hors de lui ou quelque chose comme ça.
Et bien sûr, nous devons avoir ce fichier créé et il doit y avoir du contenu.
Mais avant même que nous le fassions il ya un petit problème, je vais me débarrasser de cette ligne et le problème est que lorsque nous utilisons Express, nous n'écrivons pas les fichiers h m l simples.
Il y a des façons de le faire.
Il nécessite un peu plus de configuration, mais la plupart de nos applications Web ne vont pas être juste standard Tim fichiers statiques qui sont renvoyés.
Ce que nous recherchons sont des fichiers html dynamiques appelés modèles et dans la seconde moitié de cette vidéo, nous allons les présenter.
Mais pour l'instant je vais aller ici et changer cela à E.J. S et tout ce que je vais dire sur E.J. Est qu'il est synonyme de javascript incorporé et que vous allez en apprendre beaucoup plus à ce sujet dans environ cinq minutes quand il demande est faite de slash notre code rendra un fichier appelé Dogstar.
Oui.
Et nous allons le changer à la maison juste parce que cela fait plus de sens avec la route route.
Nous devons donc créer ce fichier et nous ne le créons pas dans le même répertoire que nous.
Ce que nous devons faire est de créer un nouveau répertoire appelé views et ce n'est pas un nom arbitraire qui est un répertoire qui exprime va chercher.
Donc chaque fois que nous rendons un fichier quel qu'il soit appelé il va regarder d'abord dans le répertoire vues et essayer de trouver ce fichier exact à l'intérieur d'un fusible.
Alors maintenant, créons cela.
Donc, je vais faire un coup de pouce vue slash home que ejay nous juste comme ça.
Et puis la prochaine chose que je veux faire est d'ajouter du contenu.
Ouvrons donc ce fichier avec cette nouvelle commande C9 C-9 affiche slash home.
E.J ..
Oui et ajoutons des trucs ici.
C'est la page d'accueil.
Faisons-le.
Et ajoutons également une image et j'ai une image que je voudrais utiliser ici.
C'est quelque chose qu'on appelle un palm ski.
C'est un Pomeranian et un mélange husky.
Apparemment, il s'agit d'un Parsky plein, ce qui est assez fou si c'est vrai.
Il ressemble à un husky miniaturisé ou juste un chiot husky permanent.
Quoi qu'il en soit, nous copions cette URL et revenons en arrière.
Et bien sûr, vous pouvez faire n'importe quelle image que vous souhaitez.
Vous n'avez pas à aller trouver que ou sans typographie vous êtes Ellaby vous-même et sauver.
Et maintenant, nous allons fermer à ce sujet et nous devrions être bon à aller.
Sauf pour manquer une chose et je vais vraiment laisser exprimer nous dire ce qui nous manque.
Nous recevrons un message d'erreur.
Donc, je vais clarifier cela pour vous donner plus de place.
Et maintenant je vais commencer le serveur.
Et quand nous allons à l'itinéraire route, il appellera la méthode de rendu qui cherchera à la maison.
Oui.
Dans un répertoire appelé views.
Et puis, une fois qu'il le trouve, il prendra le contenu et l'envoyer dans la réponse afin qu'il nous retourner à notre application et de rafraîchir et nous obtenons un message d'erreur ici, il dit ne peut pas trouver Montreuil.
E.J ..
Oui.
Et ce que cela signifie est que express est à la recherche d'un paquet appelé Ejay nous qu'il a besoin d'utiliser afin de rendre et Ejaz fichier.
Donc, nous devons NPM installer Ejay nous et cela aura tous un sens pourquoi nous utilisons Ejaz en quelques minutes.
Mais pour l'instant il suffit de me faire confiance NPM installer ejay nous et nous allons faire dash dash sauver.
Et une fois que finit nous pouvons juste faire le noeud.
J.S. De nouveau et rafraîchir la page maintenant et nous obtenons ceci est la page d'accueil et nos chiots adorables dernier Tomsky plein développé.
Donc maintenant nous avons un fichier de h t m l que nous avons écrit que nous sommes maintenant renvoyer à l'utilisateur et qui est rendu dans le navigateur.
Et c'est génial, mais c'est encore extrêmement limité pour les applications Web.
Cela ne fera que renvoyer exactement la même page à chaque fois et dans la plupart des applications Web ce n'est pas ce que nous voulons.
Peut-être la page d'accueil est la même ou la page de connexion est la même.
Mais une fois que l'utilisateur a ouvert une session, par exemple, il ya généralement un message qui dit bienvenue back appels ou bienvenue de retour.
Adorable Parsky chiot slash adulte.
Permettez-moi de vous montrer ce que je veux dire avec un exemple rapide.
Donc, je vais revenir en arrière et ajouter un nouveau itinéraire et notre itinéraire va être quelque chose comme Slash.
Tomber en amour avec et puis une chose comme Rustie et puis nous pouvons aussi aller tomber en amour avec un palm ski.
Je pense que c'est comme ça que c'est écrit.
Et nous voulons un fichier HMO qui nous montrera un message qui contient la variable de l'itinéraire que le paramètre de chemin d'accès.
Donc, il dirait quelque chose comme vous êtes tombé en amour avec rouillé afin de faire que vous avez besoin de définir ou d'obtenir la chute de slash en amour avec la chose Slash.
C'est ce que nous allons appeler.
Et puis nous avons besoin de notre demande et de réponse à l'intérieur du rappel.
Et tout comme le dernier exercice permettra de capturer la chose qui sera la chose de VAR équivaut à demander jusqu'à harams chose et puis nous pouvons commencer avec ce simple point rouge envoyer tout comme nous l'avons fait avec l'exercice de parler animal.
Le porc dit oink.
La vache dit moo peut faire la même chose ici.
Donc, nous allons juste dire que vous êtes tombés amoureux d'une chose plus.
D'accord.
Donc, c'est un examen et si je redémarrer le serveur maintenant et je reviens et maintenant je vais à slash tomber en amour avec Slash ske nous vous obtenons tombé en amour avec Tomsky qui n'est pas exactement grammaticalement correcte, mais encore une fois ni le mot pompes.
Donc, je vais revenir en arrière et maintenant ce que nous voulons faire est de comprendre comment nous pouvons envoyer un H à lui, je vais fichier retour qui dit que vous êtes tombé en amour avec plus et puis quelque chose, nous pouvons commencer par créer le fichier et nous 'Ll appeler ce fichier dans le répertoire vues et l'appeler ce que vous voulez bien sûr, mais je vais juste aller avec amour EJ Comme pour le garder court et alors nous allons remplir cela.
Donc nous avons besoin C-9 vues slash.
J'aime ça.
Oui, nous avons cette ouverture et commençons par simplement ajouter en vous êtes tombé en amour avec et puis nous avons besoin de remplir le blanc.
Mais nous ne savons pas quoi mettre ici encore, alors nous allons juste laisser comme ça et mettons une note ici qui dit P.S. C'est l'amour que Ejay nous dépose juste pour que vous sachiez qu'il provient du fichier Ejaz.
Ce n'est pas l'envoi redstart que nous avons en ce moment.
En fait pour se débarrasser de cela.
Donc ce que nous voulons faire est de rendre ce fichier ainsi lu n'est pas rendre.
Et le nom du fichier est l'amour que E.J ..
Oui, il sera automatiquement regarder dans le répertoire vues qui est juste là.
Là-bas nous allons nous avons deux fichiers, nous allons commencer le serveur jusqu'à Node.
Oui redémarre et rafraîchit.
D'ACCORD.
Notre dossier est donc ici.
Vous êtes tombé amoureux et nous devons remplir le blanc ici.
Et je sais que c'est un exemple vraiment simple qui est le point que je ne veux pas vous confondre avec quelque chose de fou encore, mais ce type de logique est vraiment important où nous pouvons remplir un modèle avec des données revenant d'une base de données ou de données Qu'un utilisateur a fourni là où il n'est pas un fichier kill statique.
C'est exactement la même chose à chaque fois.
Nous voulons essentiellement ajouter des variables dans HTL et c'est ce que chaque Oui nous permet de faire.
So E.J. S signifie javascript incorporé.
Il nous permet d'intégrer des variables de code javascript si les instructions boucles à l'intérieur de H Timo.
Donc, c'est comment nous pourrions faire quelque chose comme.
Vous êtes tombé en amour avec et alors ici ceci ne fonctionnera pas encore pourtant mais nous pourrions mettre notre variable appelée la chose laisse juste la faire dans toute la variable de casquette.
Mais cela ne fonctionnera pas parce qu'il va juste le traiter comme HMO régulier et il nous montrera juste la variable de chose de mot.
Nous devons faire quelque chose pour dire à chacun de nous que c'est le code javascript ne pas lui apprendre que je vais traiter ce javascript comme.
Heureusement, il nous donne juste une façon de le faire.
C'est un peu bizarre quand on le voit pour la première fois.
Ça ressemble à ça.
Donc, nous avons nos parenthèses, puis les signes de pourcentage, puis signe égal sur la parenthèse d'ouverture et tout ce qui va entre ces deux crochets ici va être traité comme Javascript.
Donc, je vais vous montrer ce que je veux dire, nous pouvons simplement utiliser quelque chose comme cinq plus cinq qui en HM L régulière et je vais le faire en fait pour vous montrer cinq plus cinq.
Sans ces collègues, il suffit d'imprimer cinq plus cinq, mais si nous le faisons ici, nous allons effectivement imprimer.
Donc, je vais enregistrer ce modèle de quitter ou de démarrer le serveur de nouveau nœud après J nous et rafraîchir la page et nous vous obtenons tombé en amour avec cinq plus cinq dix.
Et je l'ai totalement compris.
Si je fais une pause de cinq dix est une prise complète tout droit tout droit.
Nous reviendrons donc.
Donc nous ne voulons pas que cinq plus cinq soient imprimés là-bas.
Mais nous voulons réellement est la chose variable.
Nous l'appellerons juste la VAR de chose ou elle font juste la chose loin.
Et cela doit venir de notre code ici.
Donc, ce que nous devons faire est de passer cette chose valeur à notre amour que E.J. Comme modèle et nous voulons l'imprimer et tandis que nous sommes ici aussi se débarrasser des cinq plus cinq.
Donc, nous vous obtenons tombé en amour avec et puis nous avons besoin de définir la chose loin et vous pourriez penser que nous pourrions simplement faire cette chose var.
Var est égal à la demande de la chose slot.
Et vous pouvez espérer que exprimé automatiquement envoie toutes ces variables d'une manière ou d'une autre à ce modèle.
Et il sait juste sur la chose var.
Malheureusement ce n'est pas comment ça marche.
Et je vais vous montrer que redémarrer le serveur, je vais obtenir un message d'erreur et il me dit rien var n'est pas définie.
Donc, maintenant, je dois revenir en arrière et définir la barre de chose.
Et la façon dont je fais que est en fait passer à travers à mon aimé E.J. S modèle et je le fais sur la ligne de rendu de point quand vous le passez comme un objet.
Et dans cet objet je peux mettre plusieurs morceaux de données que je veux avoir dans mon modèle.
Donc, plutôt que les choses vont juste appeler la chose pour rendre cela plus clair et puis ici je vais passer des données à travers et je vais dire dans le template chose var devrait être égal à chose.
Ce que cela va faire est de prendre la valeur de la chose et de le coller ici.
Donc, il ressemblera à une chose loin est égal à Rusty.
Et puis ici, chose var sera remplacé.
Tout cela serait remplacé par rouillé.
OK, nous allons laisser cela à cela.
Revenez ici et pourquoi ne pas commencer par le codage dur comme resti juste comme ça et va redémarrer le serveur et je vais rafraîchir la page et je vous obtenez tombé en amour avec Rusty.
Donc, plutôt que de faire une chaîne de la prochaine étape est juste de revenir à ce que nous avions qui est la chose entière variable sauver et je vais passer que par sous la barre de nom de chose et puis nous rendre cela ici avec là.
E.J. A tagué cette chose regardant wonky.
Redémarrez le serveur à nouveau revenir.
Maintenant, je vous fais tomber en amour avec Parsky.
Et si je vais à vous vous êtes tombé en amour avec Tater Tots qui est également reflété ici.
C'est un concept très puissant que nous allons utiliser.
Comme je l'ai dit et à peu près toutes les applications à partir de maintenant sur ces pages dynamiques ayant itched lui toutes les réponses qui peuvent changer en fonction de ce que l'utilisateur a demandé dans des morceaux de données spécifiques dans la demande.
L'autre chose que je vais montrer, c'est que ce n'est que Javascript régulier.
Donc, ici, je peux faire des choses comme en majuscules et ce sera exécuté en premier et puis il retournera quelque chose qui sera imprimé comme rouillé.
Donc, c'est juste javascript régulier et nous allons parler plus de ce qui devrait aller ici et ce qui ne devrait pas.
Parce qu'il ya quelques règles que vous ne voulez pas encombrer votre vieilli il hors de tout votre modèle Ejaz avec des tonnes et des tonnes de javascript.
Vous voulez le garder à un minimum, mais pour l'instant je vais le faire et d'économiser.
Et ce sera la toute dernière chose que nous faisons.
Redémarrez l'actualisation du serveur.
Et maintenant, je reçois une version en majuscule.
D'accord, maintenant, rappelons tout ce dont nous avons parlé.
Il y a beaucoup de choses dans cette leçon.
La première chose est que nous pouvons renvoyer le contenu d'un fichier à l'aide redstart rendre comme nous l'avons fait ici et ici et ces modèles doivent exister dans le répertoire de vues exprimé automatiquement regarde là.
La prochaine chose que nous avons parlé de son Ejaz qui représente javascript incorporé et c'est ce qui nous permet d'avoir des modèles dynamiques HDMI out qui va changer en fonction de certaines données que nous fournissons.
Nous avons vu que nous devions faire chaque Oui et ensuite avoir notre dossier appelé quelque chose DOD Ejay Oui.
Et puis nous avons aussi eu besoin d'exécuter NPM installer Ejay nous et puis la dernière chose est que nous pouvons utiliser Ejay nous crochets qui sont très bizarres au début à taper.
Vous n'êtes probablement pas habitué à utiliser cette partie du clavier autant, mais il ya des parenthèses où le signe pourcentage et un égal et puis de l'autre côté c'est juste un signe de pourcentage et tout ce qui va à l'intérieur est traité comme code JavaScript d'abord et puis Tout ce que le code retourne est alors imprimé à l'HMO et de transmettre des données.
Nous pouvons passer un objet dans l'appel de rendu de point rouge où nous avons des paires de valeur de clé.
C'est juste un objet javascript régulier.
Et dans le modèle, nous avons accès aux variables que nous définissons sont les propriétés de l'objet.
Dans ce cas, la chose est égale à ce que la valeur de la chose est qui change à chaque fois.
Et ici nous pouvons utiliser la chose pour.
OK alors je sais qu'il ya beaucoup dans cette vidéo beaucoup à digérer.
Nous aurons beaucoup plus de pratique avec ces concepts en particulier.
E.J ..