OK, volveremos para los próximos videos.
Nos centraremos en crear la aplicación de blog que mostré en el último video.
Y va a tomar algunos videos.
Iremos por una ruta a la vez debido a la importancia de estas rutas de descanso en este
primer video.
Nos centraremos en el índice y luego iremos en orden.
Céntrese en lo nuevo y cree y luego muestre editar y actualizar.
la interfaz de usuario semántica, que es otro marco similar al de arranque para CSSA y Javascript.
Y finalmente, un video sobre destruir y junto con la creación de la aplicación y la adición de las siete rutas
que más necesitamos van a presentar
Así que de nuevo en los últimos mencioné Por qué realmente solo me gusta cómo se ve.
Esa es una razón, pero lo más importante es que quiero exponerte a otro marco para que
puedas ver qué tan similares son.
Tal vez estés pensando que es una mala idea para mí mostrarte otro marco para bombardear con toda esta
información, pero la buena noticia es que las cosas son muy similares.
ver cuánto tienen en común y que es más lo que tienen en común de lo que lo hacen de manera diferente.
Una vez que veas dos o tres comienzas a
Entonces, semánticamente por qué, pero vamos a comenzar creando nuestra aplicación.
Así que estoy dentro de un directorio llamado enrutamiento tranquilo.
Si quieres seguir adelante, ya hay una solución.
Por lo tanto, si desea hacer una referencia, puede hacerlo y si no desea realizar la creación de
la aplicación, si no desea cubrir el índice nuevo y crear porque lo ha visto antes, puede
omitirlo. .
Pero te recomiendo que revises todas las rutas conmigo a lo largo del código.
Es realmente importante que bajemos esto.
Es realmente el pan y la mantequilla de nuestras aplicaciones express.
DE ACUERDO.
Así que crearemos nuestra aplicación. Simplemente la llamaré la aplicación de blog.
En realidad, llamémoslo aplicación de blog tranquila y luego CD y luego nuestro NPM favorito y
en realidad sí es nuestro punto de entrada.
Estupendo.
Está bien.
DE ACUERDO.
Ahora instalemos algunas cosas que necesitamos para que NPM se instale y la primera, por supuesto, es express y
luego también se agregará a mongoose.
Y mientras estemos aquí haremos un analizador corporal.
Entonces esos tres guiones salven recuerden que el analizador corporal es la forma en que obtenemos los datos del formulario que el formulario envía datos al cuerpo
de la solicitud y luego analizamos el cuerpo de la solicitud usando la persona física.
Entonces eso sería en el próximo video.
Por ahora solo estamos haciendo index.
Entonces tenemos esa configuración creemos o realmente sí.
Ahora abriremos el aparato y haremos nuestra parte superior estándar del
archivo donde requerimos express express urgente y luego haremos la aplicación igual a Express y también agregaremos el analizador de Vadi justo mientras
estamos aquí porque necesitamos el analizador Dasch del cuerpo.
Y finalmente haremos
mangosta y me gusta limpiar esto.
Me gustaría ordenarlos por longitud también.
Así que terminamos con partes del cuerpo o primero si seguimos mi convención.
Pero no es tan importante, solo di que no, me gusta hacer esto.
Las partes del cuerpo son primero y luego tenemos mangosta y luego expresamos y luego a.
Y eso es solo para alinearlos por longitud y luego podemos aplicar sangría a las cosas si realmente queremos, pero este
no es el objetivo de este video, así que no pasaré demasiado tiempo haciendo esto.
OK, así que tenemos eso hecho ahora.
Asegúrese de que cada punto y coma.
A continuación, tenemos que configurar la mangosta.
Entonces, ¿nuestro modelo de blog es?
Se llamará blog, tendrá un título que tendrá una imagen Arel y luego tendremos que llamarlo cuerpo,
que será el texto del blog, el contenido de esa publicación.
Así que la imagen del título y el cuerpo son todas las cadenas y también agregan algo nuevo que no has
visto, que es una fecha así creada será una fecha.
Así que ha llegado eso.
Y antes de que podamos hacer algo de eso, tenemos que configurar la mangosta. Entonces,
necesitamos nuestra conexión de mangosta y vamos a conectarnos a Mongo divi. Cole
y slash slash, el host local cortará el nombre de nuestra aplicación y nuestra aplicación se llamará blog tranquilo.
Y otra vez eso no importa.
Lo estamos creando por primera vez.
Por lo tanto, siempre que no lo modifiquemos en el futuro, siempre se conectará a una caminata tranquila por primera vez.
Lo creará.
DE ACUERDO.
Y para que no tengamos que hacer esto más adelante.
Pero configure nuestro motor de vista del conjunto de datos para que sea sí, que también debemos instalar.
suceda, hagamos un uso de aplicaciones exprese ese directorio estático y público para que podamos servir nuestra hoja de estilos personalizada.
Y mientras esperamos que eso
Cuando lleguemos a esa buena práctica que debemos hacer al comienzo de cualquier aplicación exprés y también
agregaremos una aplicación, no use el analizador corporal, que es nuestro analizador corporal.
Todos están codificados como llamadas extendidas verdaderas y como verdaderos bocado, pero también pueden copiar estas tres líneas
de aplicaciones preexistentes.
Así que tenemos esa configuración en la parte inferior solo para asegurarnos de que nuestra aplicación expresa esté funcionando.
Hagamos la lección de desactivación donde tenemos el proceso daddy en el IP del punto del proceso del puerto y agregue la devolución de
llamada. El servidor de registro adulto del Consejo se está ejecutando.
Todo bien.
Probémoslo.
No hay problemas.
Estupendo.
Así que ahora vamos a trabajar en la mangosta.
Entonces tenemos una mangosta conectada.
Ahora tenemos que crear nuestro esquema y nuestro modelo.
Entonces comenzaremos con el esquema.
Simplemente haremos un esquema de registro var igual a la nueva mangosta ese esquema así y para que su título sea
una cadena una imagen que sea una cadena un cuerpo que también sea una cadena.
Y luego estamos creando nuestra llamada de transferencia de datos.
Y lo que podemos hacer es decir que esto no es tan conveniente porque tendremos que especificar
manualmente la fecha.
No queremos usar o escribir la fecha.
Solo queríamos tomar la fecha actual cuando este usuario creó la publicación o creó el blog.
Simplemente tome esa fecha para que podamos establecer un valor predeterminado para algo nuevo.
Especificamos el tipo como fecha, pero luego también especificamos el punto por fecha predeterminado.
Ahora y eso funcionará bien para nosotros.
Y esto dice que creado debe ser una fecha y que hay datos de valores predeterminados ahora.
Entonces, también podríamos hacer lo mismo con la imagen si quisiéramos tener una imagen predeterminada.
Podríamos escribir una cadena y luego establecerla de manera predeterminada si el usuario no ingresó una imagen.
Podríamos tener una cadena como una imagen de marcador de posición y una vinculación o algo así, pero no lo haremos,
pero podríamos hacerlo fácilmente si quisiéramos.
DE ACUERDO.
Y una última nota aquí verá esta sangría a veces como esta.
Es solo un objeto, porque es corto.
No voy a hacer esto.
Ocupa demasiado espacio o realmente sí.
Va a estar desordenado como está.
Así que lo dejo así
Aceptar el cuerpo de la imagen del título creado y luego el siguiente paso.
Deshágase de estos por ahora es compilarlo en ese modelo.
Hasta ahora, el blog es igual a mangosta dot el modelo del log log schema.
Aquí vamos.
Guárdalo y añadiré un comentario aquí que solo dice mongoose slash model config.
Aquí arriba agregaré otro comentario aquí.
Se llama configuración de la aplicación y luego agregaremos un comentario aquí rutas.
Vamos a llamarlo descanso para Rex.
Así que aquí es donde ahora vamos a agregar nuestra ruta de índice o mostrar la ruta nueva, crear las siete repeticiones.
Y sí, este archivo va a estar un poco desordenado.
De nuevo, soy un disco rayado en esto, pero lo dividiremos en cosas separadas muy pronto.
Le mostraré cómo podemos tener el archivo de un modelo de archivos de varios modelos, cómo podemos tener los
archivos de ruta y podemos tener archivos para la configuración y para el middleware.
Un montón de cosas diferentes, pero para mantenerlo simple.
Al principio no quiero confundirlo o creo que es difícil ver si alguien cambia archivos constantemente.
Es difícil hacer un seguimiento.
Así que vamos a hacerlo en un solo archivo.
Pero recuerda que esta no es necesariamente la mejor práctica.
Si esta era una aplicación realmente grande y especialmente si tuviésemos muchos desarrolladores trabajando en ello.
Así que ahora comenzamos los wrapstle wraps.
Así que recuerda que estamos comenzando con el índice de nombres de índice.
Esa ruta debería ser una barra oblicua de blogs como una solicitud de obtención y debería enumerar todos los blogs.
Así que hagámoslo ahora antes de hacer eso, asegurémonos de que las cosas funcionen.
Si ejecuto mi aplicación todavía no hay problemas.
Y hagamos una sola creación de un blog para que tengamos algo que ver.
Entonces seremos realmente simples.
Este blog de revisión crea y luego queremos que el título solo lo llame prueba de imagen de blog y tomaré una imagen de
este sitio y splash dot com es un gran recurso.
Te mostraré en un video futuro que tiene un montón de imágenes gratis gratis que puedes hacer con lo
que quieras.
Y entonces va a tomar este de un perro y copiar eso que realmente puede
ser cualquiera, solo queremos tener algo para probar y luego tendremos nuestro cuerpo y nuestro cuerpo será solo hola.
Esta es una publicación de blog y la hemos creado en blanco.
Toda violación
Así que probemos esto.
No haremos nada en cuanto a la devolución de llamada, solo asumiremos que funciona y luego lo probaremos en
nuestros contras de Mongo. Entonces, no corramos el archivo.
No pasa nada o parece que no pasó nada.
Pero si vas a Mangu y
utilizamos el registro de reposo completo, lo llamamos solo para verificarlo dos veces y luego hacemos un registro de puntos D-B. Encontramos nuestro primer blog allí, que es genial.
Entonces esas dos cosas para nosotros.
que debe enumerar todos los blogs.
Uno de ellos demuestra que nuestro modelo se configuró correctamente pero, una vez que tengamos el índice en marcha, queremos asegurarnos de que tenemos algo que ver, ya que se supone
Si no tenemos ningún blog para ver que
es un poco decepcionante y no podremos decir si funciona.
Entonces salgo de allí.
Ahora centrémonos en nuestra ruta.
Me refiero a deshacerme de esto. No
quiero crear un nuevo blog cada vez que ejecuto esta aplicación, especialmente la misma una y otra vez, aunque ese perro es realmente adorable.
Lo que queremos hacer es crear nuestra ruta de índice.
Vuelva a tachar los blogs a
medida que obtiene una solicitud que parece apta para agregar registros de barras en nuestra devolución de respuesta de solicitud estándar y luego vamos a hacer un reinicio y
la plantilla que se representará se llamará index dot Ejay us y no lo hacemos necesito ese Ejay Sí o solo un índice.
Y eso es otra vez porque de esta línea no necesitamos que nos use Ejay, pero
lo que sí necesitamos es una plantilla llamada índice que es un directorio llamado vistas.
Entonces haremos eso ahora.
Haga que las vistas de directorio toquen el índice de barras de visitas.
Y cometí un pequeño error indexado.
MI. J. Sí.
Entonces,
para practicar un poco más o eliminar ese archivo, lo eliminaré o al menos usaré el índice Flash y luego lo recrearé.
Toca el punto de índice de barra de uso.
MI. J. Sí.
Y luego ábrelo y acabaremos de iniciar esta simple página de índice H-1 y guardar.
Entonces veamos que tenemos esa página de índice.
En este momento no está cumpliendo con la funcionalidad de la página de índice.
Ahora, si vamos a una vista previa a la que puedes acceder de varias formas, solo voy al
Web Dev Bootcamp punto com dash, aprendo con el código punto C9 que me enseñas o puedes ir a la vista previa de la aplicación en ejecución.
Se abrirá aquí, pero luego puede hacer clic en este botón para
verlo en su navegador o puede guardarlo aquí si lo prefiere.
DE ACUERDO.
Entonces, recibimos
un error aquí y eso es porque no tenemos una ruta, por lo que necesitamos registros de barras y obtenemos nuestra ruta de página de índice.
piensas de Reddit o Facebook.
Es convencional que la página de ruta de la página de inicio vaya al índice de algo que
Por ejemplo, en reddit vas a la página
de inicio y ves un índice de todas las publicaciones de Reddit en Facebook, ves un índice de todas las publicaciones y fotos y cualquier otra cosa que haya.
Así que hagámoslo ahora después de obtener
la respuesta de solicitud de función de barra y vamos a hacer una lectura de entrada colirrojo directamente para recortar los blogs.
Ahora para reiniciar, actualizamos.
Nada debería cambiar.
Pero si voy a la barra también termino en blogs de barra.
DE ACUERDO.
Ahora agregaría la funcionalidad del índice.
Entonces, necesitamos recuperar todos los blogs de la base de datos.
Así que eso va a ser buscar un blog en encontrar todo y luego tendremos nuestra devolución de llamada con un error.
Y luego, nuestros datos, a los que llamaré blogs, y luego
haremos un error F y eso es solo para llegar a ese registro.
Alguna otra cosa agregaremos en nuestro índice de render de colirrojo, excepto que no queremos simplemente mantenerlo así.
Queremos mostrar el índice con datos.
Entonces, nuestros datos serán,
digamos, blogs e iguales a blogs.
Así que estamos pasando los datos que regresan de la base de datos de nuestro Dopp para encontrar lo que regrese.
Luego lo enviamos bajo los nombres de blogs.
Sí, es un poco confuso, pero esto
es bastante convencional para ver dónde tienen exactamente el mismo nombre.
Bien, ahora vamos a una plantilla y agreguemos algún código.
Echemos un vistazo a los blogs para comenzar así.
Asegúrate de que esté llegando.
Recarga la página.
Y estamos obteniendo nuestra lista.
Es un blog en este momento, pero lo estamos viendo aquí.
Estupendo.
Entonces, vamos a mostrarlo un poco mejor.
No haremos nada loco, pero lo que haremos
es recorrer todos los blogs, de modo que los blogs de cada registro de función, y luego lo necesitemos aquí.
Y luego, hacia abajo, necesitamos otras etiquetas, el paréntesis de cierre, cada una, y luego necesitamos paréntesis también.
Y para cada uno crearemos un div dentro de ese div.
Hagamos un H 2.
Y ese sería el título LUGG ese título.
Recuerde que necesitamos el signo igual allí, pero no en cada uno o los corchetes.
A continuación, se mostrará una imagen y la fuente es igual a los paréntesis Ejaz.
La imagen de Lagat y olvidé mencionar esto.
nosotros porque lo dijimos como el valor predeterminado para que podamos mostrarlo justo debajo de la imagen.
Si echas un vistazo a creado, puedes ver que tenemos este bonito momento loco aquí que se creó automáticamente para
Solo haga un lapso por ahora que ha creado Lagat y
luego, por supuesto, necesitamos nuestra publicación en el blog en sí misma, que será un párrafo que es
el cuerpo.
Todo bien.
Mucho contenido allí.
Actualiza la página y puedes ver nuestra primera publicación.
Tendrás que confiar en que esto funciona por ahora.
Sí, nos está mostrando uno.
Técnicamente, no sabemos si todavía nos
los muestra a todos porque solo tenemos una de las bases de datos en el próximo video.
Trabajaremos en lo nuevo y crearemos