‫Instructor: En este
‫video, aprenderemos cómo analizar algunas variables de la
‫URL para poder construir la página del producto.
‫Así que recuerde cómo al
‫principio importé el módulo de URL,
‫así que este
‫aquí, para poder analizar las variables directamente de la URL.
‫Bueno. Entonces, como primer paso, vamos
‫a registrar
‫una vez más "req. url "a la consola y
‫luego otra cosa que quiero registrar es en realidad ...
‫el resultado de usar "url. analizar "en esta URL.
‫Entonces, nuevamente, analizar es básicamente analizar las variables
‫fuera de la URL.
‫Entonces, algo como esto.
‫Entonces, lo que queremos es "id = 0", correcto, porque
‫ahora mismo, el "req. url "es todo esto, por
‫lo que esta
‫URL completa y, por supuesto, no tenemos
‫ninguna ruta para eso.
‫Entonces, nada aquí en este tipo de enrutadores que tenemos aquí,
‫en realidad coincide con esta URL completa.
‫Por eso aparece el mensaje "¡Página no encontrada! "Y esa es
‫también la razón por la que tenemos que cambiar algunas cosas aquí.
‫Bien, déjeme analizar la URL aquí, para que pueda
‫ver el resultado
‫y ver qué debemos hacer a continuación.
‫También necesito pasar "verdadero" aquí en esta función de análisis
‫para analizar realmente la consulta en un objeto.
‫Entonces, con consulta, me refiero a esta parte aquí.
‫De acuerdo, esto se llama cadena de consulta,
‫de acuerdo, y eso es lo que estamos analizando efectivamente, esa
‫parte de la URL.
‫Así que reinícielo
‫y echemos un vistazo a los registros que obtenemos.
‫Entonces, primero está el "req. url "y esto
‫es lo que esperábamos, correcto, y aquí está
‫el resultado de hacer" url. parse "Entonces obtenemos
‫el objeto de consulta aquí, y
‫aquí, tenemos un objeto agradable que
‫nos dice que id es 0, correcto, así
‫que eso es hermoso.
‫Y luego, justo debajo de eso, tenemos
‫la segunda pieza que necesitamos,
‫que es solo el nombre de la ruta, está bien.
‫Entonces, nuestra ruta usa este nombre de
‫ruta, así que solo "/ producto", y luego necesitamos conocer
‫la consulta para responder en consecuencia al id de 0.
‫Entonces, en este caso, por
‫ejemplo, cargar el producto de aguacate, que es el primero.
‫Pero si fuera el
‫número dos, por ejemplo, entonces cargar este brócoli, ¿no?
‫Entonces, esta consulta y este nombre de ruta es
‫lo que usaremos para hacer eso.
‫Entonces, este ya no lo necesitamos.
‫Tampoco queremos registrar nada en la consola
‫ahora porque lo que queremos
‫hacer es crear dos variables, llamadas consulta
‫y ...
‫pathName.
‫Y podemos hacerlo usando las pilas, la estructuración.
‫Entonces, nuevamente, espero que esté
‫familiarizado con esta sintaxis aquí, y así es como funciona realmente.
‫Entonces, este objeto aquí, tiene query y pathName.
‫Entonces, al usar esta estructuración
‫de esta manera, con estos nombres de propiedad
‫exactos, en realidad tiene que ser así.
‫Entonces, con estos dos
‫nombres de propiedad exactos, creará estas
‫dos variables, una llamada consulta y otra llamada
‫nombre de ruta, con exactamente los valores que tenemos aquí.
‫Así que la consulta será esta
‫y el nombre de la ruta será "/ producto", en este caso.
‫Excelente. Ahora todo lo que
‫tengo que hacer es seguir adelante y reemplazar esto de aquí por este.
‫Está bien.
‫Eliminemos este, y
‫solo para asegurarnos, registremos la consulta en la consola en caso
‫de que estemos en la página del producto.
‫"consola. log "el objeto de consulta.
‫Y ahora, volvemos a encontrar la página
‫y también tenemos que consultar con este id 0.
‫Tan perfecto. Así que
‫ahora estamos listos para crear esta página usando nuestra plantilla.
‫Y eso debería ser
‫muy simple, en realidad mucho más simple que la página de
‫descripción general, porque aquí no
‫tenemos que hacer ninguno de estos locos
‫bucles aquí porque hay una plantilla simple,
‫todo lo que tenemos que hacer es reemplazar todo.
‫Entonces, en el primer paso, averigüemos cuál es
‫el producto que queremos mostrar.
‫Así que estoy creando una variable llamada producto,
‫que será igual al objeto de datos en la
‫posición "consulta. identificación. "Está
‫bien, ¿tiene sentido?
‫Entonces, el objeto de datos es una
‫matriz, y luego recuperaremos el elemento en la posición que
‫proviene de la consulta. identificación.
‫Entonces, si es cero, entonces es el
‫elemento cero, si es dos, es el elemento número dos.
‫De acuerdo, esta es la
‫forma más sencilla de recuperar un elemento basado en una cadena de consulta.
‫Ahora, otra cosa
‫que debemos hacer es obtener exactamente el mismo Head aquí, está
‫bien, y finalmente simplemente creamos nuestra salida.
‫Entonces, la salida es simplemente replaceTemplate,
‫y el HTML que
‫necesitamos pasar es tempOverview, o en realidad tempProduct, y
‫lo que pasamos es el producto.
‫¡Y eso es!
‫Ahora solo enviamos la salida como resultado, o como una
‫respuesta en realidad, y eso es todo.
‫Entonces esta parte aquí tiene sentido, ¿verdad?
‫Entonces, de nuevo, replaceTemplate espera que pongamos
‫una plantilla y un producto.
‫Entonces, un producto es un objeto con todas estas propiedades.
‫Y entonces ese producto viene aquí directamente desde
‫este objeto de datos.
‫Entonces, en replaceTemplate, pasamos el producto de la plantilla,
‫por lo que este, que cargamos desde
‫el archivo desde el principio, y luego el producto.
‫Como mencioné, por supuesto, el que viene de la matriz.
‫Y así debería ser realmente.
‫Entonces, si la plantilla es correcta, entonces
‫esto debería estar funcionando ahora.
‫Entonces, reiniciando el servidor,
‫volvamos a
‫cargarlo, y de hecho, aquí vamos.
‫Entonces, eso es genial, eso me
‫hace muy feliz, cuando este
‫tipo de cosas funcionan así, hermoso, todo es perfecto.
‫También este botón de retroceso, oh, eso no funciona.
‫Bueno. Entonces necesitamos cambiar la plantilla HTML aquí.
‫Entonces, ¿dónde está eso? Está en producto,
‫y este enlace aquí, dónde está eso, ah.
‫Sí, básicamente no apunta a ninguna parte,
‫y lo que queremos es volver a la descripción general, ¿no?
‫Reinicie el servidor, vuelva a cargar esta
‫página y ahora funciona.
‫Probémoslo sin el parche orgánico y, de
‫hecho, no está aquí.
‫Antes lo era y ahora se ha ido.
‫Y todas estas cosas aquí, por
‫supuesto, son dinámicas provenientes de ese archivo JSON. Sí.
‫Entonces todo esto funciona. Hermosa.
‫Eso es realmente genial.
‫Y nuestro proyecto, podemos decir ahora, está realmente terminado.
‫Solo una pequeña cosa más que quiero
‫hacer, que es solo mostrarles algo bueno que podemos hacer.
‫Pero además de eso, nuestro proyecto está funcionando.
‫Así que felicidades, acabas de terminar tu primer nodo
‫con un aspecto realmente atractivo. Proyecto js.
‫Y no fue tan difícil, ¿verdad?
‫Quiero decir, algunas de
‫las cosas que hicimos están más relacionadas con la programación de JavaScript en
‫general, y no tanto con node. js en sí, ¿verdad?
‫Así que cosas como esta aquí, que tal vez fueron un poco
‫confusas, pero nuevamente, al final del día,
‫eso es solo JavaScript normal, ¿no es así?
‫Nuevamente, la funcionalidad está ahí, solo
‫hay una pequeña cosa más que quiero
‫hacer en el siguiente video, y cuando llegues a esa,
‫te diré qué es.