Bueno, regresen en este video comenzaremos en la aplicación de campamento de Yelp en la que vamos a
trabajar durante el resto de este curso.
Comenzaremos por poner en marcha la configuración básica.
Obteniendo la aplicación express y teniendo nuestras primeras rutas y plantillas.
Pero antes de hablar de eso, solo quiero explicar el flujo de trabajo aquí y
cómo funcionará, ya que continuamente agregamos características diferentes.
Quiero que puedas ver el código en cualquier momento. No quiero que veas la solución final.
Entonces, lo que voy a hacer es trabajar en diferentes carpetas.
Así que tengo un directorio de campamento de yelp y luego, en lugar del campamento de Yelp, voy a agregar diferentes versiones.
Entonces no tienes que hacer esto.
Podrá agregar continuamente a una versión usted mismo si desea seguir y hacer
diferentes versiones.
Siempre señalaré en qué versión estamos, pero el objetivo es que, si desea que revise lo
que agregué entre la versión 2 y la versión 3, podría abrir los directorios de la versión 2 y la
versión 3 y compararlos.
OK ahora que eso está fuera del camino, empecemos aquí.
Lo que vamos a hacer es configurar la aplicación básica que instalará Express y cada Sí, obtendremos el directorio
de las vistas y luego agregaremos dos rutas diferentes.
Así que vamos a tener una página de inicio básicamente como una bienvenida al campamento de Yelp.
Aquí hay una pequeña propaganda sobre lo que hacemos.
Aquí hay un botón de registro.
Aquí hay un enlace de contacto que en realidad no funcionará todavía.
Y a partir de ahí vamos a crear la página de campings que será la página principal de nuestra aplicación que
enumerará todos los campings en nuestra base de datos y todavía no tenemos una base de datos.
Así que va a ser una selección de campamentos tal como lo hicimos en el último video con los amigos, donde tuvimos
una gran variedad de amigos.
Muy pronto migraremos a una nueva base de datos porque ahora un camping solo tendrá dos
tipos de información diferentes.
Al final del curso, los campamentos tendrán de 10 a 15 piezas diferentes, pero por ahora solo se trata
de un nombre como salmón arroyo o punto de Dewey o cualquiera que sea el nombre de nuestro campamento y luego vamos
a tener una imagen que podemos mostrar y la imagen solo será aur l.
Así que empecemos.
Comenzaré ejecutando NPM en él y luego presionaré ingresar aquí e ingresar nuevamente.
Simplemente llamaremos a esto la cámara v1.
Haré apt como mi punto de entrada.
Y ahí vamos.
Autor y presionar enter.
Una vez más.
DE ACUERDO.
Ahora ejecutemos NPM instale Express y sí.
Dash Dash Guardar.
Todavía no te he mostrado esto, pero esta es una forma mucho más sencilla
si deseas instalar varios paquetes a la vez, solo los separa por un espacio.
Y si miras el código auxiliar del paquete Jason puedes ver que tiene SJS y express.
Así que ahora vamos a crear la aplicación.
Sí, y abre eso arriba y dentro de aquí, agrega nuestra importación express básica con la que deberías estar
bastante cómodo, ahora requiere Express.
express que se está ejecutando y luego saltará y escuchará la opción de exclusión, con la que también debería estar bastante familiarizado con el proceso.
Y luego la variable de la aplicación es igual a la función
El proceso de puerto Ian VI que EMV IP y la devolución de llamada
y aquí voy a hacer un registro consular que dice que el campamento de Yelp se inició.
Hagamos el servidor de campamento así como así y ahorremos.
Y ahora regresemos y comencemos agregando nuestra página de inicio.
Y, como la mayoría de las aplicaciones, la página de destino está en el camino correcto.
y luego comenzaremos el servidor se asegura de que
hayamos comenzado el servidor del campamento y luego volvemos y solo actualizamos nuestra ruta de ruta.
Así que solo vamos a agregar una aplicación que reciba flash y comenzaremos con solo un inicio de redstart para asegurarnos de que las cosas
funcionen bien y enviaremos esta será la página de destino próximamente y la guardaremos,
DE ACUERDO.
Y obtenemos la respuesta que es todo lo que estamos buscando.
Ahora vamos a configurar nuestras plantillas, así que tenemos que crear un directorio de noticias que haga
vistas de directorio y crearemos una plantilla llamada aterrizaje que cada uno de nosotros dentro del directorio de vistas aterrizará.
Si, ahí vamos.
Y luego abriremos ese uso de barra de corte y pondremos un marcado muy simple aquí.
Página de destino y luego hecho aquí podemos poner un párrafo.
Bienvenido al campamento de Oprah.
Y, por supuesto, todo esto se cambiará y tendrá un estilo muy diferente al final del curso.
Pero por ahora solo queremos asegurarnos de que las cosas funcionen.
Entonces volvamos a APT.
Sí.
Y lo primero que haremos será cambiar esto para que sea un reposo que rinda y dejaremos el
punto.
Sí.
Y para hacer eso, necesito agregar el motor de vista del conjunto de aplicaciones para que sea J. S. Y luego no tenemos que escribir
MI. J. como aquí y vamos a guardar reiniciar el servidor.
James actualiza y obtenemos nuestra plantilla de página de destino.
Estupendo.
A continuación, trabajemos en la ruta del campamento.
Así que vamos a tener una aplicación para obtener y
tu auroral debería ser un campamento de corte y esto debería mostrar todos los campamentos que tenemos, que en este momento no tenemos nada.
Pero en breve solicitaremos y responderemos de la misma manera.
Y luego tenemos que definir la matriz de campgrounds que recuerde que solo será una matriz temporalmente.
El siguiente gran cambio que va a hacer es agregar una base de datos y hacer que nuestros campamentos se guarden en
la base de datos, por ahora es una matriz y cada campamento tiene un nombre y una imagen.
Entonces se verá así.
O tenemos una matriz y luego cada elemento de la matriz es un objeto.
Y cada uno tiene un nombre y luego digamos que el nombre es Salmon Creek, en algún
lugar acabo de acampar recientemente y luego la imagen y luego será una URL de una imagen como HTP, cualquiera que sea la imagen GWW puntocom.
Aquí vamos.
Y luego tendremos una variedad de estos.
Entonces podríamos tener 10 campamentos diferentes 100 al final del curso.
Y cada uno de ellos tiene un nombre y una imagen y
luego, con el tiempo, tendrán cosas como latitud y longitud, ciudad y
estado, capacidad de la dirección, estacionalidad, todos estos atributos diferentes, pero estamos comenzando un nombre e imagen simples.
Volvamos a Apter Sí.
es igual a una matriz.
Y lo que vamos a hacer es encontrar esa matriz y podemos comenzar simplemente haciéndolo aquí hasta ahora, lo llamaremos campings,
Y luego, dentro de la matriz, y
formateemos esto un poco mejor a medida que ingresemos en la matriz, tendremos algunos objetos iniciales.
Y el primero tendrá nombre y yo solo iré con Semon creek.
Puedes hacer cualquier cosa y tendrás una imagen y yo regresaré y completaré las imágenes.
Y luego, el siguiente hará que este
sea otro sitio, lo llamaremos Granites Hill y luego una patrulla más llamará cabras montesas.
Todo bien.
Así que tres campings tres nombres totalmente ficticios y para imágenes.
De hecho, voy a usar algunas fotos de creative commons para no tener problemas.
Estos no van a corresponder a ninguno de los sitios de campamento
que he visitado, pero solo voy a elegir algunas imágenes aquí.
Vamos con este para comenzar.
Así que voy a copiar la imagen que tú o yo volveremos aquí y que será el descanso de las cabras montesas.
Por qué no.
Y luego volveremos y tomaré este aquí.
Cópialo en RL Y este será Salmon Creek.
Y luego necesitamos uno más y voy a tomar este.
Por supuesto, esto no es realmente un sitio para acampar, pero eso no viene al caso aquí.
Le recomiendo que use los nombres reales de un campamento en las imágenes reales de los campamentos si lo desea.
Si no es así, si odias el campamento, que es algo en lo que
pensé, me preocupaba que esto pudiera alejar a algunas personas, pero si odias
el campamento, lo que supongo que es comprensible, podrías cambiar fácilmente esta aplicación a otra cosa.
las diferentes variables que tenemos.
Una vez que lo terminemos, podría convertirlo en una aplicación de evento, en una aplicación para fiestas, en un sitio de reseñas de restaurantes, pero
le recomiendo que espere hasta el final del curso para no confundirse con el nombramiento y
Así que campground Today's Para ahora, los
campings falsos y se guardarán asegúrese de agregar o comas entre los diferentes elementos de la matriz.
Ahí vamos y comenzaremos por renderizar
una plantilla de redstart render y se llamará campgrounds y no vamos a pasar los datos todavía.
Solo nos aseguraremos de que la plantilla funcione correctamente.
Ahora tenemos que dejar que el servidor toque una nueva vista de archivo de slash camping ups que E. J. a abrir eso.
nosotros y luego vamos
Es así y aquí agregaremos un H1.
Esta es la página del camping y guarde
y asegurémonos de que veamos esa página cuando iniciemos el servidor, podemos actualizar y vamos a cortar los campamentos y lo conseguiremos.
Esta es la página de campings.
Y mientras estemos aquí, sería bueno agregar algunos parpadeos.
y necesito ir a la plantilla de préstamos y justo
en la parte inferior de una etiqueta anclada en el atributo de referencia y la ATF debe ser slash camping.
Así que voy a agregar un enlace a la página de destino que dice Ver todos los campamentos y para hacer eso
Y voy a decir que todos
los campamentos y guardar reiniciar la vista de actualización del servidor de los campamentos ahora nos lleva a la página del camping.
Muy bien, ahora vamos y asegurémonos
de pasar los datos a través de nuestro campamento al resto de la llamada de renderizado y luego podemos
recorrer todo y mostrar cada imagen y cada nombre en nuestra plantilla comenzará al actualizarnos y agregando ese segundo argumento aquí
que es un objeto de todos los datos que queremos pasar y pasaremos en campings bajo el nombre de campgrounds.
Así que recuerda que estos son los datos que estamos transmitiendo y este es el nombre que queremos darle.
Podríamos llamar a esto lo que quisiéramos, pero es común verles nombrar lo mismo.
Así que ahorraremos ahora y volveremos a nuestra
plantilla y comenzaremos por hacer estos campamentos y, si vemos algo, se verá como objeto objeto.
Si lo hicimos correctamente, sabremos que
hemos pasado los datos reiniciando el servidor o refrescando Rigaud con tres objetos.
Así que ahora revisemos y visualicemos cada título o cada nombre e imagen.
Así que voy a mantener estos corchetes aquí, pero me desharé del signo de igual y haremos un para cada uno.
corchetes y luego aquí abajo tenemos que adjuntar esto con cada nosotros también.
Entonces ese será un campamento para cada uno y luego pasará esa función anónima a la devolución de llamada y lo llamaremos campamento y
haremos clic aquí y luego tenemos que regresar y asegurarnos de agregar el cierre correcto Ejay us
DE ACUERDO.
Así que
eso debería recorrer los campamentos y luego lo que queremos hacer para cada uno, simplemente mostraremos el nombre primero.
Entonces comenzaremos con un aliado.
Por qué no.
Y haremos nuestro E. J. ver lo que está sucediendo.
s con el signo igual y todos hacen un poco de espacio para que sea un poco más fácil
Y solo vamos a mostrar dentro del campamento de Y.
Dot name y guarda todo el espacio que está fuera.
Ahora carguemos la página y actualicemos esto y obtenemos tres nombres de camping.
Lo último que quiero hacer es asegurarme de mostrar las imágenes.
Así que volveremos aquí y en lugar
de un aliado vamos a cambiar esto para que tengamos una etiqueta div para cada campamento.
Y en la etiqueta div se mostrará una h.
Hagamos un 4 con el nombre del camping y luego debajo pondremos una etiqueta de imagen.
Y lo que tenemos que hacer es darle a la imagen una fuente y dentro de
las comillas, en lugar de hacerlo así, sea lo que sea que elijas, ELAS va
a poner la imagen del campamento y no podemos simplemente acampar esa imagen.
Necesitamos esos Ejay como corchetes.
Entonces, tenemos que hacerlo dentro de las comillas,
lo cual es un poco confuso para algunos de mis alumnos al principio porque el campamento de esa imagen ya es una cadena.
a la plantilla, las citas no aparecen.
Y puede verlo aquí, pero recuerde que cuando tomamos esto y lo agregamos
Se acaba de agregar como texto.
Así que se vería como este HTP colon slash, lo que sea que necesitemos comillas a su alrededor.
Así que tenemos que asegurarnos de que estamos agregando las etiquetas Ejaz dentro de las citas así como así.
DE ACUERDO.
Entonces, lo que queremos hacer es imagen del campamento, asegúrese de que usemos la imagen.
Aquí vamos.
Soy A-G y escribimos eso exactamente de la misma manera y detendré el reinicio del servidor.
Volvamos y refresquemos la página y obtenemos los tres campamentos con las tres imágenes.
Está bien, genial.
Así que eso es todo lo que quiero hacer en este video fue obtener la estructura básica de nuestras dos rutas.
Volvamos para asegurarnos de que hicimos todas las cosas que nos propusimos hacer.
Entonces en la página de aterrizaje sí lo hicimos en la página del camping que enumera todo el campamento.
También hicimos que cada campamento tenga un nombre y una imagen.
Todo bien