‫Instructor:
‫En este video, hablaremos e
‫implementaremos un concepto llamado enrutamiento.
‫Entonces, en este momento, el código
‫que escribimos no reacciona en absoluto a la URL que estamos solicitando.
‫Entonces, digamos que tenemos esta URL y obtenemos
‫esta respuesta, pero si tenemos, por
‫ejemplo, un producto, bueno, obtenemos exactamente la misma respuesta, ¿verdad?
‫Si echamos un vistazo al
‫ejemplo, el proyecto final, pues aquí, por
‫ejemplo, vemos Resumen.
‫Así que ahora tenemos el host, luego el puerto y / descripción general,
‫por lo que la ruta aquí es / descripción general, y luego vemos
‫esta página.
‫Pero ahora, mire lo que sucede.
‫Entonces ahora tenemos producto.
‫Y es por eso que obtenemos esta página de producto.
‫Y luego regresamos, volvemos a la descripción general,
‫y entonces vemos nuevamente la página que teníamos al principio.
‫Además, si no tenemos
‫nada, bueno, seguimos viendo esta misma página.
‫Y eso es básicamente enrutamiento.
‫Entonces, el enrutamiento básicamente significa implementar diferentes
‫acciones para diferentes URL.
‫De acuerdo, y ahora mismo no tenemos nada de eso.
‫Entonces, como dije, no importa qué URL tengamos,
‫siempre obtenemos la misma respuesta.
‫Y ahora tenemos que implementar alguna lógica
‫que cambie eso.
‫De acuerdo, y de nuevo, eso será el enrutamiento.
‫Ahora, el enrutamiento puede volverse muy complicado en una gran
‫aplicación del mundo real, por lo que, en ese
‫caso, usamos una herramienta para eso como Express, por lo que
‫lo haremos en el próximo gran proyecto de
‫este curso en el que usamos Express para hacer todo esto.
‫Pero por ahora, dado que estamos empezando a
‫aprender Node, queremos aprender a hacer
‫todo desde cero sin ninguna de estas dependencias, ¿verdad?
‫Así que implementemos un enrutamiento muy
‫simple aquí en este servidor.
‫Ahora, el primer paso
‫es poder analizar la URL.
‫Y para eso, usamos otro módulo de nodo integrado, que se
‫llama URL.
‫Y solo estoy
‫duplicando esto aquí, y luego URL.
‫Y solo como una nota al margen, seleccioné URL,
‫y luego para seleccionar
‫la siguiente, simplemente presioné Comando + D en mi teclado.
‫Bien, sé que alguien probablemente preguntará en la sesión de preguntas y
‫respuestas cómo hice
‫este truco, y por eso estoy respondiendo a eso básicamente ahora mismo
‫y diciendo cómo funciona.
‫De todos modos, en primer lugar, echemos un vistazo
‫a la solicitud. url.
‫Y, por supuesto, quiero una consola. registro de esto.
‫Detenga el servidor y ejecútelo de nuevo.
‫Y hay una herramienta para que hagamos esto automáticamente.
‫Estoy seguro de que algunos de ustedes lo sabrán.
‫Y, por supuesto, lo usaremos un
‫poco más tarde, pero por ahora quiero seguir haciéndolo así.
‫Bien, recarguemos esto.
‫Funciona igual, y aquí obtenemos la URL.
‫De acuerdo, y de hecho obtenemos dos de ellos.
‫Y lo que esto significa es que en realidad tenemos dos solicitudes
‫y, en realidad, esta función de devolución de llamada
‫aquí se ejecuta dos veces.
‫Entonces una consola. log tiene solo la
‫barra, y el segundo tiene / favicon.
‫Entonces, cuando usamos un
‫navegador, el navegador realiza automáticamente una solicitud
‫para el favicon del sitio web.
‫Muy bien, en este caso no tenemos ningún
‫favicon, y simplemente ignoramos esto, ¿de acuerdo?
‫Entonces esto realmente no importa.
‫Ahora digamos que escribimos / descripción general aquí.
‫Entonces, veamos qué obtenemos.
‫Entonces obtenemos / descripción general y / favicon, de acuerdo.
‫Así que, de nuevo, lo que importa es la / descripción general.
‫Entonces, para URL simples como
‫esta, en realidad ni siquiera necesitamos el módulo
‫de URL, pero lo necesitaremos para cosas más complejas.
‫Entonces, digamos que tenemos,
‫por ejemplo, especificando el ID 23
‫y algún otro parámetro aquí.
‫Digamos que esto es algo como esto.
‫Y estoy seguro de que ha visto este tipo de patrón
‫en una URL donde podemos especificar parámetros.
‫Entonces, si tenemos algo como esto,
‫entonces verá que la URL es esta.
‫Y lo que el módulo de URL nos
‫ayudará a hacer es básicamente analizar estos parámetros y sus
‫valores en un objeto con un formato agradable, ¿de acuerdo?
‫Así que por ahora
‫no vamos a utilizar el módulo de URL todavía.
‫Lo necesitaremos un poco más tarde.
‫Entonces, implementemos ahora realmente el enrutamiento, y es
‫muy, muy simple.
‫Así que, básicamente, todo lo que necesitamos es una gran declaración si no.
‫Bien, primero que nada voy a guardar req. url en una variable, oh,
‫lo siento,
‫en una variable llamada pathName.
‫Bien, y ahora, basándonos en ese nombre
‫de ruta, tomaremos decisiones.
‫Básicamente, envíe diferentes respuestas.
‫Entonces, si pathName es igual a descripción general o /
‫descripción general, bueno, enviemos algo al cliente.
‫Y digamos que esta es la RESUMEN.
‫De lo contrario, si el nombre de ruta es igual a producto, /
‫producto, bueno, entonces todo lo que queremos hacer es
‫enviar este es el PRODUCTO.
‫Bien, ahora en caso de que estemos en la raíz del sitio.
‫Básicamente, así, bueno, también queremos mostrar
‫la descripción general.
‫Y agreguemos eso aquí también.
‫Así que pathName es igual a y barra.
‫Y luego el o.
‫Entonces, si el nombre de ruta es la raíz o / descripción
‫general, devuélvalo como una VISTA GENERAL,
‫o si es un producto, entonces devuelva el PRODUCTO.
‫Cosas muy simples, y probémoslas ahora.
‫En realidad, podemos simplemente volver a cargar, o en
‫su lugar, en realidad, primero debemos terminar esto nuevamente y comenzar de nuevo.
‫Entonces ya está funcionando, esta es la RESUMEN.
‫Si ahora digo
‫producto, entonces este es un PRODUCTO, perfecto.
‫Ahora, solo para verificar el último, la descripción general
‫nos brinda una VISIÓN GENERAL nuevamente.
‫Bien, ahora digamos que en realidad solicitamos algo que
‫no manejamos.
‫Entonces algo como esto.
‫¿Así que lo que sucede?
‫Bueno, como puede ver, esta rueda de
‫aquí no deja de girar.
‫Entonces está tratando de enviar una respuesta, pero realmente no puede.
‫Entonces, el servidor no sabe qué hacer en esta
‫situación, porque no agregamos ningún respaldo.
‫Detengamos a este pobre
‫tipo aquí y, básicamente, agreguemos una declaración else aquí.
‫Entonces, si no es la raíz, ni la descripción general, ni el producto,
‫bueno, entonces queremos decir que no se pudo encontrar esta página.
‫Página no encontrada.
‫Ahora, muchas veces cuando en el sitio
‫web intenta abrir una página
‫que no se encuentra, ve este error 404, ¿verdad?
‫Y eso es en realidad algo llamado código de estado HTTP.
‫Y como estamos enviando una respuesta, también
‫podemos agregar el código de estado a la respuesta.
‫Y para eso, podemos usar múltiples formas de hacerlo, pero voy a usar
‫una que puede hacer más que
‫solo el código de estado,
‫y les mostraré por qué en un segundo.
‫Pero por ahora, solo
‫digo aquí, res. escribe el encabezado y luego 404, ¿de acuerdo?
‫Probemos eso ahora.
‫¿Y qué pasa aquí?
‫Ah, en esto no
‫pasa nada, porque no reinicié el servidor.
‫Entonces, página no encontrada.
‫Muy bien, ahora ¿qué pasa con el código de estado 404?
‫Bueno, podemos presionar Inspeccionar aquí para abrir las Herramientas de desarrollo, o en su
‫lugar, lo que me gusta hacer es presionar Comando + J,
‫y eso también abrirá las Herramientas de desarrollo.
‫En Windows probablemente sea Alt + Control
‫+ J, o simplemente puede ir a Ver, y luego
‫a Desarrollador y Herramientas de desarrollador como esta, ¿de acuerdo?
‫Luego dirígete a la pestaña Red,
‫pero en realidad ya puedes verlo como aquí.
‫Entonces, el servidor respondió con un código de estado 404 no encontrado.
‫Pero también puede verlo en la red, y simplemente volver a
‫cargarlo, y luego verá 404
‫aquí, y el texto rojo para mostrar que hubo algún error.
‫Bien, ahora algo más que este writeHead aquí puede hacer
‫es enviar también encabezados.
‫Y para enviar encabezados, necesitamos especificar un objeto aquí, y
‫luego allí colocamos los encabezados que queremos enviar.
‫Ahora bien, ¿qué es realmente un encabezado?
‫Bueno, un encabezado HTTP es básicamente una información sobre
‫la respuesta que estamos enviando.
‫Y nuevamente, aprenderá mucho más sobre esto
‫en una sección posterior del curso, ¿de acuerdo?
‫Por ahora, solo sepa que
‫hay muchos encabezados estándar diferentes que podemos
‫especificar para informar al navegador o cualquier
‫cliente que esté recibiendo una respuesta sobre la respuesta en sí.
‫Por ejemplo, uno de los encabezados
‫estándar es informar al navegador del tipo de contenido.
‫Entonces podemos decir
‫Content-Type y configurarlo en text / html.
‫Y así,
‫así, el navegador ahora espera algo de HTML.
‫Entonces, lo que podemos
‫hacer ahora, por ejemplo aquí, es
‫hacer un elemento h1 para enviar básicamente HTML.
‫Así que, así.
‫Y debido a
‫este encabezado aquí, el navegador ahora espera que ingrese HTML.
‫También podemos especificar nuestros propios encabezados inventados.
‫Así que digamos mi-propio-encabezado, hola-mundo, así que
‫algo como esto, ¿de acuerdo?
‫Ahora, lo que importa aquí es
‫que estos encabezados y también el código de
‫estado siempre deben configurarse antes de enviar la respuesta.
‫De acuerdo, nunca podremos enviar encabezados después
‫del contenido de la respuesta.
‫Intentémoslo de nuevo, o
‫en realidad, debería reiniciar el servidor.
‫Así que intentemos de nuevo ahora.
‫Y, de hecho, seguimos recibiendo nuestro error, pero
‫ahora se ve diferente.
‫Así que ahora tenemos un elemento h1 aquí.
‫Y si también en la pestaña Red hacemos clic en esta
‫solicitud, aumentémosla un poco aquí.
‫Así que no estoy
‫seguro de si realmente puedes ver esto, pero cuando hacemos clic en
‫esta solicitud aquí, también podemos ver los encabezados de respuesta.
‫Y aquí tenemos el tipo de contenido
‫que especificamos como texto / html, y luego el
‫otro encabezado,
‫por lo que mi propio encabezado está configurado como hello-world.
‫Y nuevamente, podemos usar esto para enviar algunos metadatos
‫sobre la respuesta en sí, ¿de acuerdo?
‫Ahora también hay algunos encabezados de solicitud, y
‫el navegador los configuró automáticamente, pero por ahora
‫no se preocupe por ellos.
‫Lo que importa es que especificamos que el contenido
‫que estamos enviando es HTML y también,
‫por ejemplo, el código
‫de estado que enviamos es 404 no encontrado, ¿de acuerdo?
‫Ahora, deshagámonos de esto.
‫Ábralo, y ahora verá, tenemos un
‫estado de 200, lo que significa OK, y estos
‫otros encabezados, en realidad se han ido.
‫Bien, ahora esta
‫respuesta no tiene estos otros dos encabezados, ¿verdad?
‫Y vemos el 200
‫OK ahora, así que sí, todo está funcionando bien ahora.
‫Implementamos el enrutamiento básico, por lo
‫que para diferentes nombres
‫de ruta, ahora tenemos diferentes acciones.
‫Solo una última cosa que quería decir sobre el enrutamiento es
‫que estas rutas que definimos aquí en nuestro código y las
‫rutas que colocamos en las URL en el navegador no tienen nada
‫que ver con los archivos y carpetas en
‫el sistema de archivos de nuestro proyecto, está bien. ?
‫Entonces, como principiante, podría pensar
‫que si abrimos / templates, por ejemplo, eso abriría
‫la carpeta de Plantillas que tenemos en
‫nuestro sistema de archivos.
‫Pero, por supuesto, ese no es el caso.
‫Entonces, si quisiéramos tener una ruta de plantillas,
‫bueno, entonces tendríamos que
‫definir eso en nuestro enrutador, básicamente,
‫y luego enviar una respuesta especial solo para esa ruta.
‫De todos modos, creo que esto es suficiente para un video.
‫Nos vemos en el próximo.