1 00:00:01,680 --> 00:00:06,690 Lo primero que haremos es averiguar cómo sacamos los datos del formulario del formulario y tenemos 2 00:00:06,690 --> 00:00:13,890 que volver a nuestro formulario y cambiar una pequeña cosa que está en la entrada que necesitamos para ingresar y nombrar el nombre. 3 00:00:14,850 --> 00:00:20,130 que demos la información aquí será la clave que miraremos hacia arriba dentro de la ruta. 4 00:00:20,130 --> 00:00:24,720 Y creo que un buen nombre sería solo nombre, pero creo que es un poco confuso. 5 00:00:24,810 --> 00:00:27,680 Entonces, hagamos un nuevo amigo. 6 00:00:28,350 --> 00:00:35,100 Entonces el valor de esto en este caso Bob se enviará en el cuerpo de la solicitud y dentro del 7 00:00:35,100 --> 00:00:38,520 cuerpo la solicitud habrá una sola propiedad llamada nuevo amigo. 8 00:00:38,640 --> 00:00:42,660 Y será igual a Bob para hacer esto un poco más fácil de ver. 9 00:00:42,870 --> 00:00:51,960 Vayamos a los EE. UU. En la publicación de ADD friend y cancelemos el cuerpo de punto de solicitud de registro y solicitemos que 10 00:00:51,960 --> 00:00:57,430 body sea un objeto que contendrá todos los datos del cuerpo de la solicitud. 11 00:00:57,600 --> 00:01:03,060 Y recuerde que cuando tenemos un formulario que está realizando una solicitud posterior, todos los datos del formulario se colocan en el 12 00:01:03,150 --> 00:01:08,280 cuerpo de la solicitud y luego se envían a nuestro EP expreso y queremos sacarlo si el cuerpo de la solicitud. 13 00:01:08,280 --> 00:01:12,880 Entonces, si imprimo el cuerpo de la solicitud, deberíamos ver que el nuevo amigo es igual a Bob. 14 00:01:13,200 --> 00:01:18,780 Sin embargo, eso no va a funcionar porque nos falta una pequeña pieza y te mostraré que no 15 00:01:18,780 --> 00:01:19,130 funciona. 16 00:01:19,160 --> 00:01:23,660 Primero, agreguemos en Billie que hice un nuevo amigo. 17 00:01:23,850 --> 00:01:30,210 Consigamos que hayas llegado a la ruta postal y obtenemos un registro constante aquí, el cuerpo de solicitud no está definido. 18 00:01:30,330 --> 00:01:35,790 Y eso es porque Express out of the box en realidad no crea el cuerpo de solicitud para nosotros. 19 00:01:35,820 --> 00:01:41,190 Necesitamos decirle explícitamente que tome el cuerpo de la solicitud y lo convierta en un objeto de JavaScript para 20 00:01:41,190 --> 00:01:43,360 que usemos la solicitud de cuerpo llamada. 21 00:01:43,650 --> 00:01:48,550 Entonces, para hacer eso, necesitamos instalar un paquete llamado Body Parser. 22 00:01:48,660 --> 00:01:57,060 Por lo tanto, NPM instaló el dash parser dash dash save y la postura del cuerpo entró y salió de express donde en 23 00:01:57,290 --> 00:02:00,040 un momento se incluyó con el expreso. 24 00:02:00,060 --> 00:02:02,010 No tienes que instalarlo por separado. 25 00:02:02,010 --> 00:02:05,210 Ahora lo haces es algo que usaremos en cada aplicación. 26 00:02:05,220 --> 00:02:10,920 Prácticamente en cualquier momento tenemos un formulario en el que un usuario ingresa datos en los que queremos extraer los datos desde 27 00:02:10,950 --> 00:02:12,120 el lado del servidor. 28 00:02:12,120 --> 00:02:13,770 Necesitamos usar un analizador corporal. 29 00:02:14,090 --> 00:02:16,740 De acuerdo, entonces no es suficiente solo instalarlo. 30 00:02:16,800 --> 00:02:19,420 Entonces necesitamos requerirlo aquí. 31 00:02:19,980 --> 00:02:28,020 aquí vamos a escribir extendido, es cierto y no quiero empantanar este video al entrar en demasiados detalles, pero con esto es Si tiene preguntas, 32 00:02:28,020 --> 00:02:37,410 puede ir a las partes del cuerpo o a los documentos y leer acerca de qué es lo que hace el no revestido y qué hace la verdad extendida. 33 00:02:37,410 --> 00:02:43,770 Así que solo tu analizador corporal requiere un analizador Adi Dasch y luego lo siguiente que debemos hacer es decirle 34 00:02:44,700 --> 00:02:51,840 a express que use un analizador corporal para que se vea así. Necesitamos hacer un analizador corporal de aplicación que es una 35 00:02:51,840 --> 00:02:56,730 variable que acabamos de crear al importar el analizador corporal. partes del cuerpo de un 36 00:02:56,730 --> 00:03:01,420 paquete y luego tenemos que puntear la URL codificada y luego, en lugar de 37 00:03:01,440 --> 00:03:06,730 Es una de esas líneas que se verá todo el tiempo y, honestamente, simplemente copie y pegue la mayor parte del tiempo. 38 00:03:06,750 --> 00:03:13,140 Así que ahora que tenemos esa configuración si reiniciamos el servidor ahora sin cambiar nuestro código, tenemos 39 00:03:13,140 --> 00:03:17,850 que añadir un amigo y estamos sacando constantemente las solicitudes de nuestro cuerpo. 40 00:03:17,850 --> 00:03:25,790 Ahora si actualizamos Oops! Volvamos al formulario para recortar amigos y agregar a una amiga llamada Linda. 41 00:03:26,130 --> 00:03:33,540 Hice un nuevo amigo y buscamos en el estafa. Vemos que solicitar Adi ahora es un objeto y viene del 42 00:03:33,540 --> 00:03:34,610 analizador de fiestas. 43 00:03:34,770 --> 00:03:40,680 Así que el analizador Buddy tomó el cuerpo de la solicitud y lo analizó en un objeto javascript que tiene un nuevo 44 00:03:40,680 --> 00:03:41,860 amigo igual a Linda. 45 00:03:42,180 --> 00:03:46,660 Entonces, lo que realmente queremos hacer es solicitar un nuevo amigo de Datt. 46 00:03:46,770 --> 00:03:50,370 Y eso nos dará el valor de lo que haya dentro de la forma. 47 00:03:50,820 --> 00:03:56,760 Y recuerde que un nuevo amigo es debido a la propiedad del nombre. El atributo de nombre que establecemos en la entrada 48 00:03:57,050 --> 00:04:01,650 sea lo que sea que pongamos aquí es lo que necesitaríamos para buscarlo dentro de la ruta. 49 00:04:01,920 --> 00:04:06,750 No solo queremos cancelar ese registro, aunque lo que queremos hacer es agregarlo 50 00:04:06,840 --> 00:04:09,540 a la matriz de amigos que definimos aquí. 51 00:04:09,540 --> 00:04:15,840 Entonces, lo primero que hay que hacer es crear una nueva variable y lo llamaremos nuevo amigo y almacenaremos 52 00:04:15,930 --> 00:04:22,590 la solicitud del nuevo amigo del cuerpo y luego queremos agregarlo a este conjunto, pero desafortunadamente no podemos simplemente hacer 53 00:04:22,590 --> 00:04:30,180 amigos. deja de presionar a un nuevo amigo porque hay un problema de alcance en el que nuestro amigo solo se define en 54 00:04:30,180 --> 00:04:31,430 lugar de esta función. 55 00:04:31,740 --> 00:04:34,570 Y aquí no hay amigos. 56 00:04:34,620 --> 00:04:35,430 Es un mundo muy triste. 57 00:04:35,430 --> 00:04:36,240 No hay amigos 58 00:04:36,450 --> 00:04:44,960 Entonces, tenemos que copiar esto y moverlo hacia algún lugar donde sea visible para todas nuestras rutas. 59 00:04:45,900 --> 00:04:50,760 Y esto es algo que no haremos por mucho tiempo porque es solo una variedad de 60 00:04:50,760 --> 00:04:56,650 amigos y podemos agregar nuevos amigos, pero tan pronto como el servidor se detenga, desaparecerán y se restablecerán para desvalorizarse. 61 00:04:57,120 --> 00:05:00,630 Pronto usaremos una base de datos y no tendremos que preocuparnos por el problema del alcance. 62 00:05:00,660 --> 00:05:05,300 Por ahora solo tenemos que moverlo fuera de las rutas para que podamos acceder a él en todas las rutas. 63 00:05:05,490 --> 00:05:08,990 Así que ahora los amigos dejan de presionar, el nuevo francés debería funcionar y te mostraré eso. 64 00:05:08,990 --> 00:05:14,780 Ahora reinicie el servidor regrese a nuestro formulario aquí. 65 00:05:15,090 --> 00:05:19,370 Renueve la página y agreguemos en Jeanne. 66 00:05:20,330 --> 00:05:22,920 Hice un nuevo amigo y llegamos a esta ruta. 67 00:05:22,930 --> 00:05:28,950 Ahora, si volvemos a amigos, veo que Jean ha sido agregado. 68 00:05:29,490 --> 00:05:34,520 Entonces eso significa que esto está funcionando donde estamos extrayendo las solicitudes para formar un nuevo amigo. 69 00:05:34,680 --> 00:05:39,560 Y también lo estamos empujando hacia la matriz de frenesí y luego estamos enviando esta respuesta. 70 00:05:39,650 --> 00:05:44,760 Sin embargo, es bastante raro que deseemos tener algún tipo de respuesta como esta después de agregar un nuevo amigo. 71 00:05:46,020 --> 00:05:47,950 La mayoría de las veces no queremos ver esto. 72 00:05:47,970 --> 00:05:53,700 lugar de enviar o en lugar de renderizar, podemos usar otro método en rez llamado redirigir y redirigir. 73 00:05:53,730 --> 00:06:02,070 Por lo general, solo queremos volver a esta página y ver al nuevo amigo, y para hacer eso, lo que podemos hacer es enviar en 74 00:06:02,400 --> 00:06:03,750 Bueno, toma el nombre de una ruta. 75 00:06:03,990 --> 00:06:10,140 Y en nuestro caso, recortar a amigos y ellos redirigirán a esta ruta y ejecutarán el código dentro de 76 00:06:10,170 --> 00:06:16,860 la ruta de los amigos de barra diagonal, y todo lo que hace es renderizar la plantilla francesa y pasar el 77 00:06:17,010 --> 00:06:18,290 valor de los amigos. 78 00:06:18,600 --> 00:06:26,240 Entonces, si volvemos a iniciar el servidor y volvemos a actualizar la página, agreguemos un nuevo amigo aquí. 79 00:06:26,610 --> 00:06:31,180 Tina y golpeé, hice un nuevo amigo y puedes ver que se ha agregado Tina. 80 00:06:31,260 --> 00:06:34,000 Recuerda que no solo nos quedamos en esta página todo el tiempo. 81 00:06:34,050 --> 00:06:36,790 Si miran esto aquí, déjenme hacerlo de nuevo. 82 00:06:36,880 --> 00:06:38,210 Vamos a agregar en Jeanne. 83 00:06:38,530 --> 00:06:40,840 Golpeé hice un nuevo amigo. 84 00:06:40,910 --> 00:06:45,690 Puede ver que la página se renueva momentáneamente y eso se debe a que estamos enviando una solicitud 85 00:06:45,690 --> 00:06:49,440 postal en otro lugar, ya que las solicitudes de publicación se están volviendo demasiado complicadas. 86 00:06:49,440 --> 00:06:52,090 Ad friend está haciendo algo de lógica aquí. 87 00:06:52,260 --> 00:06:56,640 Y luego nos redirige rápidamente a la misma página, la misma ruta en la que ya estamos. 88 00:06:56,970 --> 00:07:04,080 parpadear la página por un segundo y verá que este pequeño icono es el obsequio que la página está revocando. 89 00:07:04,080 --> 00:07:06,360 Por lo tanto, apenas se nota, verá 90 00:07:06,360 --> 00:07:12,820 Pero como mencioné si reinicio el servidor, el valor de la matriz de amigos vuelve a esto. 91 00:07:12,840 --> 00:07:16,890 Perdemos a todos esos amigos y no tenemos permanencia en nuestros datos. 92 00:07:16,890 --> 00:07:20,190 Lo arreglaremos una vez que lleguemos a las bases de datos en algunos de nosotros. 93 00:07:20,530 --> 00:07:20,860 DE ACUERDO. 94 00:07:20,880 --> 00:07:24,160 Repasemos brevemente todo lo que hemos cubierto aquí. 95 00:07:24,180 --> 00:07:30,390 Lo primero que hablamos fue configurar una ruta de publicación y todo lo que teníamos que hacer era la publicación de la aplicación 96 00:07:30,390 --> 00:07:35,740 y funciona igual que apt get, excepto que solo se desencadena por las solicitudes posteriores a esa fila en particular. 97 00:07:36,570 --> 00:07:43,950 Y luego lo sabes y luego vimos cómo podemos enviar una solicitud postal con un cartero que funciona y luego vimos que podemos 98 00:07:43,950 --> 00:07:47,390 enviar una solicitud a una solicitud posterior usando el cartero. 99 00:07:47,400 --> 00:07:49,070 Y luego también usando un formulario. 100 00:07:49,290 --> 00:07:55,740 Y cuando enviamos un formulario, necesitamos proporcionar acción y método, y lo presento muy pronto cuando hablamos acerca de la edad 101 00:07:55,740 --> 00:08:01,170 para mis formularios y mencioné que más adelante en el curso sabría más acerca de qué significan la 102 00:08:01,170 --> 00:08:05,460 acción y el método, y qué publicación solicitud es contra una solicitud de obtención. 103 00:08:05,460 --> 00:08:09,990 sola entrada y sobre eso entrada agregamos el atributo de nombre y este atributo de nombre 104 00:08:09,990 --> 00:08:15,630 que hemos establecido como nuevo amigo es la forma en que los datos se agregan al cuerpo de la solicitud. 105 00:08:15,630 --> 00:08:22,290 Así que este es el momento en el que están empezando a comprender un poco más la diferencia entre obtener publicaciones y qué significa 106 00:08:22,290 --> 00:08:27,200 esta acción y qué rutas son de todos modos, así que tenemos un foro y no tiene una 107 00:08:27,210 --> 00:08:33,390 Entonces, cuando presentemos este sea cual sea el valor de esta forma, digamos Tina, se enviará con 108 00:08:33,390 --> 00:08:35,130 el nombre de nuevo amigo. 109 00:08:35,400 --> 00:08:42,090 Y luego, dentro de nuestro aparato, podemos extraerlo con el nuevo amigo de la lista de pedidos solamente si incluimos el analizador 110 00:08:42,300 --> 00:08:48,600 corporal, que teníamos que instalar el administrador del cuerpo de la instalación de NPM y luego teníamos que decirle a nuestra 111 00:08:48,600 --> 00:08:49,810 aplicación que lo usara. 112 00:08:49,800 --> 00:08:56,070 analizador tomará el cuerpo de la solicitud y lo analizará en un objeto javascript que podemos usar y acceder como lo hicimos aquí. 113 00:08:56,070 --> 00:09:02,100 Así que es conveniente usar el analizador y toda esta línea es una que se verá todo el tiempo y cuando lo 114 00:09:02,100 --> 00:09:02,720 hagamos, el 115 00:09:02,820 --> 00:09:08,640 Y la última novedad que vimos fue la redirección de redstart, que llevará un amigo conocido como barra oblicua y que activará 116 00:09:09,030 --> 00:09:13,890 esa ruta de nuevo y ejecutará todo el código dentro de la ruta de los amigos barra oblicua. 117 00:09:13,890 --> 00:09:15,280 Está bien, te veré en la próxima lección.