OK nous reviendrons pour les prochaines vidéos.
Nous allons nous concentrer sur la création de l'application blog que j'ai montré dans la dernière vidéo.
Et il va prendre quelques vidéos.
Nous allons suivre un itinéraire à la fois en raison de l'importance de ces routes reposantes dans cette première vidéo.
Nous allons nous concentrer sur l'indice et nous allons dans l'ordre.
Mettre l'accent sur les nouveautés et créer, puis afficher modifier et mettre à jour.
Et puis enfin une vidéo sur la destruction et avec la création de l'application et l'ajout dans les sept routes que nous avons le plus besoin d'introduire l'interface utilisateur sémantique qui est un autre cadre semblable à bootstrap pour CSSA et Javascript.
Donc, encore une fois dans les derniers, j'ai mentionné Pourquoi vraiment je juste comme j'aime comment il ressemble.
C'est une raison, mais surtout, je veux juste vous exposer à un autre cadre afin que vous puissiez voir comment les choses sont similaires.
Vous pourriez être vous pourriez penser que c'est une mauvaise idée pour moi de vous montrer un autre cadre pour vous bombarder avec toutes ces informations, mais la bonne nouvelle est que les choses sont si semblables.
Une fois que vous voyez deux ou trois, vous commencez à voir combien ils ont en commun et que c'est vraiment plus qu'ils ont en commun qu'ils font différemment.
Alors sémantiquement pourquoi, mais nous allons commencer par créer notre application.
Donc je suis à l'intérieur d'un répertoire appelé routage reposant.
Si vous voulez suivre le long il ya une solution déjà là.
Donc, si vous voulez faire référence qui se sentent libres de le faire et si vous ne voulez pas passer par la création de l'application si vous ne voulez pas couvrir l'index nouveau et créer parce que vous avez vu que avant de pouvoir sauter à l'avance .
Mais je vous recommande de parcourir toutes les routes avec moi code le long.
Il est très important que nous obtenions cela.
C'est vraiment le pain et le beurre de nos applications express.
D'ACCORD.
Donc, nous allons créer notre application, je vais simplement l'appeler l'application blog.
En fait, appela-t-il l'application de blog reposante, puis CD et puis notre NPM préféré et il effectivement oui est notre point d'entrée.
Génial.
C'est bon.
D'ACCORD.
Maintenant, nous allons installer certaines choses que nous avons besoin pour l'installation de NPM et le premier est bien sûr express et puis ajoute également dans la mangouste.
Et pendant que nous sommes ici nous ferons analyseur de corps.
Donc, ces trois tiret sauver rappeler que l'analyseur de corps est la façon dont nous obtenons des données de la forme de la forme envoie des données dans le corps de la demande et ensuite nous analyser le corps de la demande en utilisant la personne du corps.
Donc, ce serait dans la prochaine vidéo.
Pour l'instant nous faisons juste index.
Donc, nous avons mis en place nous allons créer ou effectivement oui.
Maintenant, nous allons ouvrir l'appareil et faire notre haut standard du fichier où nous avons besoin expresse expresse requise et puis nous ferons l'application équivaut à Express et sera également ajouter dans l'analyseur Vadi juste pendant que nous sommes ici parce que besoin d'analyseur Dasch corps.
Et finalement, nous allons faire la mangouste et j'aimerais bien nettoyer ça.
Je voudrais les commander par longueur aussi bien.
Alors nous finissons avec des parties du corps ou d'abord si nous suivons ma convention.
Mais ce n'est pas si important, mais dis simplement que je n'aime pas faire ça.
Les parties du corps sont d'abord et ensuite nous avons la mangouste et ensuite exprimer et puis à.
Et c'est juste pour les aligner par longueur et puis nous pouvons décaler les choses si nous voulons vraiment, mais ce n'est pas le point de cette vidéo, donc je ne vais pas passer trop de temps à faire cela.
OK, nous l'avons fait maintenant.
Assurez-vous que chaque point-virgule.
Ensuite, nous devons mettre en place la mangouste.
Ainsi sont notre modèle de blog.
Il va être appelé blog aura un titre qui aura une image que vous Arel et puis nous allons avoir nous allons simplement appeler corps qui sera le texte du blog le contenu de ce post.
Donc, l'image du titre et le corps et ils sont tous les cordes et aussi ajouter quelque chose de nouveau que vous n'avez pas vu qui est une date ainsi créé sera une date.
Donc, c'est arrivé à cela.
Et avant que nous puissions faire tout cela, nous avons besoin de configurer la mangouste Nous avons donc besoin de notre connexion mongoose et nous allons nous connecter à Mongo divi Cole et slash slash hôte local slash le nom de notre application et notre application sera appelée blog reposant.
Et encore cela n'a pas d'importance.
Nous la créons pour la première fois.
Donc, tant que nous ne le changeons pas dans l'avenir, il sera toujours connecté à la promenade reposante à la première fois.
Il va le créer.
D'ACCORD.
Et juste pour que nous n'ayons pas à le faire plus tard.
Mais configurez notre moteur de visualisation de jeu de données pour qu'il soit oui que nous devons également installer.
Et tandis que nous attendons pour cela, allons faire une application utiliser exprimer cette statique et le répertoire public afin que nous puissions servir notre feuille de style personnalisé.
Lorsque nous arrivons à cette juste bonne pratique à faire au début de toute application express et ajoutera également une application ne pas utiliser l'analyseur de corps qui est notre parser corps.
Vous êtes tous codés vrai appel étendu et vrai type d'une bouchée, mais ces trois lignes, vous pouvez simplement copier des applications préexistantes ainsi.
Donc, nous avons mis en place, puis en bas, juste pour s'assurer que notre application express fonctionne.
Faisons la leçon opt out où nous avons le processus papa dans le processus de port env dot IP et ajouter dans le conseil de rappel du serveur de journal des adultes est en cours d'exécution.
D'accord.
Testez-le.
Pas de problème.
Génial.
Alors maintenant, travaillons sur la mangouste.
Nous avons donc la mangouste connectée.
Maintenant, nous devons créer notre schéma et notre modèle.
Nous allons donc commencer par le schéma.
Nous allons juste faire un schéma var log équivaut à nouveau mongoose que le schéma comme ça et de l'avoir le titre qui est une chaîne d'une image qui est une chaîne d'un corps qui est aussi une chaîne.
Et puis, nous avons des données qui gouttent appel créé.
Et ce que nous pouvons faire, c'est simplement dire que ce n'est pas très pratique car nous devrons spécifier manuellement la date.
Nous ne voulons pas utiliser ou saisir la date.
Nous voulions juste prendre la date actuelle quand cet utilisateur a créé le poteau ou a créé le blog.
Il suffit de saisir cette date afin que nous puissions définir une valeur par défaut à quelque chose de nouveau.
Nous spécifions type comme date, mais nous spécifions également la date par défaut.
Maintenant et cela fonctionnera très bien pour nous.
Et cela indique que créé doit être une date et qu'il ya une valeur par défaut des données maintenant.
Nous pourrions donc faire la même chose pour l'image si nous voulions avoir une image par défaut.
Nous pourrions faire la chaîne de caractères, puis par défaut si l'utilisateur n'a pas saisi une image.
Nous pourrions avoir une chaîne comme l'image de placeholder et peg ou quelque chose, mais nous ne le ferons pas, mais nous pourrions facilement le faire si nous le voulions.
D'ACCORD.
Et une dernière note ici, vous verrez ce découpé parfois comme ça.
C'est juste un objet parce que c'est court.
Je ne vais pas faire ça.
Il prend trop d'espace ou effectivement oui.
Va-t-il être encombré tel qu'il est.
Alors je laisse ça comme ça.
OK image du titre du corps créé, puis l'étape suivante.
Se débarrasser de ces pour l'instant est de le compiler dans ce modèle.
Jusqu'à présent blog équivaut mongoose point le modèle log log schema.
Voilà.
Enregistrer cela et je vais ajouter dans un commentaire ici qui dit simplement mongoose slash modèle config.
Ici, je vais ajouter un autre commentaire ici.
Il s'appelle app config et ensuite nous ajouterons dans un commentaire ici des itinéraires.
Appelons ça de repos pour Rex.
Donc, c'est là que nous allons maintenant aller et ajouter notre itinéraire d'index ou de montrer l'itinéraire nouveau créer tous les sept représentants.
Et oui, ce fichier va être un peu encombré.
Encore une fois, je suis un disque cassé à ce sujet, mais nous allons être séparer cela dans des choses distinctes très bientôt.
Je vais vous montrer comment nous pouvons avoir un fichier de modèle de fichiers modèles multiples comment nous pouvons avoir des fichiers d'itinéraire et nous pouvons avoir des fichiers pour la configuration et pour middleware.
Beaucoup de choses différentes, mais pour rester simple.
Dès le début je ne veux pas vous confondre ou je pense qu'il est difficile de regarder si quelqu'un change de fichiers en permanence.
C'est difficile à suivre.
Nous allons donc le faire en un seul fichier.
Mais rappelez-vous juste que ce n'est pas nécessairement la meilleure pratique.
Si c'était une application vraiment grande et surtout si nous avions beaucoup de développeurs travaillant dessus.
Alors maintenant, nous avons commencé les enveloppes de lutte.
Rappelez-vous donc que nous commençons par l'index des noms d'index.
Ce chemin devrait être slash blogs comme une demande d'obtenir et il devrait énumérer tous les blogs.
Alors, faisons-le maintenant avant que nous fassions cela, nous allons nous assurer que les choses fonctionnent.
Si je lance mon application pas de problèmes encore.
Et faisons en fait une création unique d'un blog alors nous avons quelque chose à regarder.
Donc, nous serons vraiment simples.
Ce blog d'examen ne crée et puis nous voulons avoir le titre juste l'appeler l'image de blog de test et je vais prendre une image de ce site et splash dot com est une excellente ressource.
Je vais vous montrer dans une vidéo à venir qui a un tas d'images gratuites libres que vous pouvez faire ce que vous voulez avec.
Et donc il va prendre celui-ci d'un chien et copier que là-dedans qui peut vraiment être tout ce que vous savez que nous voulons juste avoir quelque chose à tester et puis nous aurons notre corps et notre corps sera juste salut.
Il s'agit d'un billet de blog et nous avons créé un espace vide.
Tous les viols.
Essayons donc ceci.
Nous ne ferons rien en ce qui concerne le rappel, nous allons simplement supposer que cela fonctionne et ensuite nous allons tester dans nos cons Mongo ..
Donc ne pas exécuter le fichier.
Rien ne se passe ou il semble que rien ne s'est produit.
Mais si vous allez à Mangu et nous utilisons le repos log complet, alors nous l'avons appelé juste pour vérifier et puis nous faisons D-B dot logs jusqu'à trouver nous avons notre premier blog là-bas qui est grand.
Donc, ces deux choses pour nous.
L'un prouve que notre modèle a mis en place correctement, mais une fois que nous obtenons l'index va nous voulons nous assurer que nous avons quelque chose à voir, car il est censé la liste de tous les blogs.
Si nous n'avons pas de blogs pour voir que c'est un peu underwhelming et nous ne serons pas en mesure de dire si cela fonctionne.
Donc je sors de là.
Maintenant, concentrons-nous sur notre itinéraire.
Je veux me débarrasser de ce je ne veux pas créer un nouveau blog chaque fois que je lance cette application surtout pas le même encore et encore si ce chien est vraiment adorable.
Ce que nous voulons faire, c'est créer notre itinéraire index.
Encore une fois slash blogs que vous obtenez la demande qui ressemble à apt obtenir des journaux slash ajouter dans notre demande standard de rappel de réponse et ensuite nous allons faire un redémarrage de rendu et le modèle qui rendra sera juste appelé index point Ejay nous et nous ne Besoin que Ejay Oui ou index juste.
Et c'est encore à cause de cette ligne ici nous n'avons pas besoin que Ejay nous, mais nous avons besoin est un modèle appelé indice étant un répertoire appelé vues.
Nous allons le faire maintenant.
Créer des vues de répertoires touchent l'index de slash de vues.
Et j'ai fait une petite erreur qui est indexée.
E.J. Oui.
Donc, pour un peu plus de pratique ou de supprimer ce fichier, je vais le supprimer ou au moins utiliser l'index Flash et puis le recréer.
Appuyez sur l'icône de l'index de slash.
E.J. Oui.
Ensuite, ouvrez-le et nous allons commencer cette simple page d'index H-1 et enregistrer.
Alors voyons que nous obtenons cette page d'index.
À l'heure actuelle, il ne remplit pas la fonctionnalité de la page d'index.
Maintenant, si nous allons à un aperçu que vous pouvez obtenir à partir de quelques façons, je vais juste à Web Dev Bootcamp point com tiret apprendre avec le code C9 point que vous m'enseignez ou vous pouvez aller à prévisualiser l'application en cours d'exécution.
Il sera ouvert ici, mais vous pouvez cliquer sur ce bouton pour le voir dans votre navigateur ou vous pouvez le garder ici si vous le préférez.
D'ACCORD.
Donc, nous obtenons une erreur ici et c'est parce que nous n'avons pas d'itinéraire routier donc nous avons besoin des journaux slash et nous obtenons notre itinéraire de page d'index.
Il est classique pour la page d'itinéraire la page d'accueil d'aller à l'index de quelque chose que vous pensez de Reddit ou Facebook.
Par exemple sur reddit vous allez à la page d'accueil et vous voyez un index de tous les messages Reddit sur Facebook, vous voyez un index de tous les messages et photos et tout ce qu'il ya.
Donc, faisons-le maintenant après avoir obtenu la réponse slash fonction de la demande et nous allons juste faire un redstart lire directement à slash blogs.
Maintenant, pour le redémarrage, nous actualisons.
Rien ne doit changer.
Mais si je vais au slash je finis sur les blogs slash ainsi.
D'ACCORD.
Maintenant, j'ajouterais dans la fonctionnalité d'index.
Nous devons donc récupérer tous les blogs de la base de données.
Donc, ce sera un blog à trouver sur tout trouver et puis nous aurons notre rappel avec une erreur.
Et puis nos données que j'appellerai les blogs et puis nous allons faire une erreur F et c'est juste pour venir à ce journal.
Toujours autrement nous ajouterons dans notre index de rendu de redstart sauf que nous ne voulons pas juste le maintenir comme cela.
Nous voulons rendre index avec des données.
Ainsi, nos données seront appelées les blogs ainsi que les blogs.
Donc nous passons les données revenant de la base de données de notre Dopp trouver tout ce qui revient.
Nous l'envoyons sous le nom de blogs.
Oui, c'est un peu confus, mais c'est vraiment assez conventionnel pour voir où ils ont exactement le même nom.
OK, maintenant, allons à un modèle et ajoutez un code.
Jetons un coup d'oeil sur les blogs pour commencer juste comme ça.
Assurez-vous d'y arriver.
Actualisez la page.
Et nous obtenons notre liste.
C'est un blog en ce moment, mais nous le voyons ici.
Génial.
Alors maintenant, montrez-le un peu plus agréable.
Nous ne ferons rien de fou, mais ce que nous allons faire est de boucler tous les blogs afin que les blogs pour chaque journal de fonction et puis nous avons besoin de cela ici.
Et puis ici, nous avons besoin d'autres balises le bracketing de fermeture chaque aller et puis nous avons besoin de parenthèses ainsi.
Et pour chacun, nous allons faire un div à l'intérieur de ce div.
Faisons un H 2.
Et ce serait le titre LUGG de ce titre.
Rappelez-vous que nous avons besoin du signe égal là, mais pas sur le chaque ou les crochets.
Ensuite affiche une image et la source est égale aux parenthèses Ejaz.
Lagat et j'ai oublié de le mentionner.
Si vous jetez un coup d'oeil à créé vous pouvez voir que nous avons cette belle date fou temps ici qui a été créé pour nous automatiquement parce que nous l'avons dit que la valeur par défaut afin que nous puissions afficher cela juste en dessous de l'image.
Juste faire une portée pour le moment qui a Lagat a créé et puis bien sûr nous avons besoin de notre billet de blog lui-même qui sera un paragraphe qui est corps.
D'accord.
Beaucoup de contenu là-bas.
Actualisez la page et vous pouvez voir notre premier post I est ici.
Vous aurez juste à croire que cela fonctionne pour l'instant.
Oui, il nous montre un.
Techniquement, nous ne savons pas s'il nous montre tous, car nous n'avons qu'une base de données dans la prochaine vidéo.