1
00:00:00,150 --> 00:00:01,250
Dar una buena acogida.

2
00:00:01,290 --> 00:00:08,310
Entonces, este video es una continuación del último video donde hicimos una descripción conceptual de esta aplicación de demostración de

3
00:00:08,310 --> 00:00:11,850
perros y hablamos sobre las rutas de solicitud TO GET.

4
00:00:12,180 --> 00:00:15,110
Así que de nuevo reiteramos la misma expectativa de aplicar.

5
00:00:15,360 --> 00:00:21,690
No necesita comprender el 99 por ciento de este código si puede tratar las cosas como bloques conceptuales y

6
00:00:21,840 --> 00:00:29,910
puede entender que este código aquí es responsable de que los perros obtengan la ruta y de alguna manera le devuelve una página que

7
00:00:29,910 --> 00:00:32,580
tiene un montón de perros en eso.

8
00:00:32,700 --> 00:00:34,660
Eso es todo lo que necesita saber por ahora.

9
00:00:34,680 --> 00:00:36,720
Lo mismo aplica para los nuevos conceptos.

10
00:00:36,720 --> 00:00:38,350
Vamos a aprender en este video.

11
00:00:38,370 --> 00:00:41,100
El foco no es la sintaxis en los conceptos.

12
00:00:41,430 --> 00:00:47,070
Entonces hay una tercera ruta aquí que no mencioné en el primer video y es ligeramente diferente

13
00:00:47,580 --> 00:00:49,450
en que es una ruta posterior.

14
00:00:49,710 --> 00:00:57,300
Entonces, este código aquí solo se ejecutará cuando un usuario haga una solicitud POST para crear un perro.

15
00:00:58,190 --> 00:01:03,870
Y solo para refrescar su memoria, un usuario no puede hacer una solicitud POST escribiendo algo en usted o en Albar.

16
00:01:04,290 --> 00:01:09,330
punto nueve nueve nueve por ciento del tiempo que van a hacer una solicitud POST es a través de un formulario.

17
00:01:09,330 --> 00:01:10,060
Noventa y nueve

18
00:01:10,290 --> 00:01:12,970
Así que vamos a ver eso en acción en un momento.

19
00:01:13,170 --> 00:01:16,880
Pero también puedo demostrar haciendo una solicitud POST a través del cartero.

20
00:01:17,370 --> 00:01:20,190
Así que publique las solicitudes para crear un perro.

21
00:01:20,370 --> 00:01:26,610
Y lo que hará es tomar el nombre en la raza que enviamos en la solicitud, que es

22
00:01:26,610 --> 00:01:33,280
lo que está sucediendo aquí. Nombre es solicitud hasta nombre del cuerpo solicitud de raza hasta excrecencia del cuerpo.

23
00:01:33,300 --> 00:01:39,720
Entonces, de alguna manera, en la solicitud hay un nombre y una raza en esta cosa llamada cuerpo y estamos usando eso

24
00:01:39,720 --> 00:01:41,020
para hacer un perro nuevo.

25
00:01:41,370 --> 00:01:46,920
Y luego estamos redireccionando al usuario de nuevo a perros granizados como una solicitud de obtención que luego ejecutará

26
00:01:46,920 --> 00:01:50,850
todo este código, que encontrará todos los perros y renderizará la página de perros.

27
00:01:51,120 --> 00:01:52,560
Así que suceden muchas cosas.

28
00:01:52,830 --> 00:01:58,910
Comencemos desde el principio enviando una simple solicitud de publicación para crear un perro.

29
00:01:59,250 --> 00:02:05,880
Así que vamos a cartero y voy a cambiar esto a la publicación y luego tenemos que cambiar

30
00:02:05,880 --> 00:02:13,380
la ruta para que sea localhost 3000 slash create dog y tenemos que asegurarnos de que el servidor siga funcionando bien

31
00:02:13,380 --> 00:02:14,230
cuando sea.

32
00:02:14,730 --> 00:02:19,860
enviar, donde no vamos a enviar un nombre y una lectura, y veremos qué sucede.

33
00:02:19,860 --> 00:02:22,090
Y luego podemos comenzar simplemente presionando

34
00:02:23,550 --> 00:02:31,010
Entonces, si nos fijamos en lo que obtuvimos, es la misma página de perros donde tiene Rustie por qué es Daisy Sitka.

35
00:02:31,200 --> 00:02:35,250
Y luego también hay un perro vacío sin nombre y sin raza.

36
00:02:35,310 --> 00:02:41,670
Y si voy a mi navegador aquí y renuevo, hago otra solicitud para recortar perros que activará el código que recupera

37
00:02:41,670 --> 00:02:46,800
todos los perros de la base de datos y hace un poco de vida para cada uno.

38
00:02:46,950 --> 00:02:53,100
De hecho, puede ver que tenemos un perro vacío en la base de datos y eso se debe a que no enviamos ningún dato.

39
00:02:53,130 --> 00:02:56,630
No enviamos un nombre y una raza para hacer nuestro nuevo perro.

40
00:02:56,670 --> 00:03:01,300
Entonces estaban vacíos y nuestro código acaba de hacer un perro vacío y lo guardó en la base de datos.

41
00:03:01,500 --> 00:03:09,090
Entonces, para enviar la información con el cartero, podemos pasar al cuerpo y luego podemos escribir algunas cosas para agregar

42
00:03:09,090 --> 00:03:09,870
al cuerpo.

43
00:03:10,080 --> 00:03:19,900
Entonces queremos que un nombre sea Charlie y que lo lea, y el valor para Breede será laboratorio así.

44
00:03:19,920 --> 00:03:25,830
Esto es todo lo que tenemos que hacer a través del cartero para hacer una solicitud posterior que tenga nombre y raza dentro de

45
00:03:25,830 --> 00:03:26,430
su cuerpo.

46
00:03:26,760 --> 00:03:28,210
Y presionaré enviar.

47
00:03:28,770 --> 00:03:30,630
Ahora verás la respuesta que obtenemos.

48
00:03:30,660 --> 00:03:34,150
Son todos los perros otra vez esta vez al final.

49
00:03:34,170 --> 00:03:36,090
Tenemos a Charlie como laboratorio.

50
00:03:36,270 --> 00:03:41,400
Y si renuevo aquí hago otra petición, obtengo todos los perros.

51
00:03:41,700 --> 00:03:43,100
Charlie ha sido agregado.

52
00:03:43,530 --> 00:03:46,090
Repasemos todo eso en 30 segundos aquí.

53
00:03:46,290 --> 00:03:51,310
Entonces solicito una solicitud por correo para crear otro tipo de solicitud.

54
00:03:51,540 --> 00:03:57,450
Y en la solicitud del cuerpo que está aquí, estoy agregando nombre y criando a Charlie y al laboratorio.

55
00:03:57,840 --> 00:04:05,040
Y luego presiono enviar y luego en mi código en el servidor está escuchando una solicitud de publicación para cortar el perro.

56
00:04:05,510 --> 00:04:11,370
alguien no nombra y solicita a alguien que se exceda, que son esas dos cosas que enviamos con el cartero.

57
00:04:11,370 --> 00:04:13,730
Y crea un perro con la petición que

58
00:04:14,220 --> 00:04:21,420
Y luego, después de que crea el perro, nos redirige a cortar perros para que no nos envíe una página ni ninguna

59
00:04:21,420 --> 00:04:22,310
edad para él.

60
00:04:22,470 --> 00:04:29,670
En realidad, ejecuta el código en barras diagonales justo aquí, que luego encuentra todos los perros, incluido el nuevo

61
00:04:29,670 --> 00:04:31,260
que acabamos de crear.

62
00:04:31,380 --> 00:04:35,870
Charlie o en el caso anterior era un perro vacío sin nombre y sin raza.

63
00:04:36,000 --> 00:04:40,500
Los recupera a todos y luego renderiza la plantilla de ese perro que vimos.

64
00:04:40,680 --> 00:04:43,740
Y para cada uno nos hace poco aliados.

65
00:04:44,640 --> 00:04:46,330
Así que suceden muchas cosas.

66
00:04:46,440 --> 00:04:48,060
Está escuchando una solicitud POST.

67
00:04:48,270 --> 00:04:52,650
Está agregando un nuevo perro a una base de datos y nos está redirigiendo a perros de corte.

68
00:04:52,650 --> 00:04:56,170
Ahora hablemos de cómo podríamos hacer esto con un formulario.

69
00:04:56,220 --> 00:05:01,920
Recuerde que no podemos hacer una solicitud POST presionando Enter en la barra, pero podemos hacer una utilizando un formulario.

70
00:05:02,010 --> 00:05:05,630
Así que voy a agregar un formulario solo a mis perros.

71
00:05:05,770 --> 00:05:06,240
Sí.

72
00:05:06,290 --> 00:05:07,330
En la parte inferior.

73
00:05:07,410 --> 00:05:14,680
Solo vamos a hacer una etiqueta de formulario y hay dos partes para un formulario que ahora tiene más sentido. Hablamos de

74
00:05:14,680 --> 00:05:19,180
ellas cuando introduje los formularios originalmente pero no tenía mucho contexto para entender lo

75
00:05:19,180 --> 00:05:19,730
que significaban.

76
00:05:19,750 --> 00:05:24,170
Entonces esos dos atributos son acción y método.

77
00:05:24,520 --> 00:05:26,150
Entonces comenzaré con Method.

78
00:05:26,230 --> 00:05:30,780
Estamos haciendo una solicitud posterior y a menudo también se ve esto en mayúsculas.

79
00:05:30,790 --> 00:05:31,750
No importa.

80
00:05:31,990 --> 00:05:38,870
Y luego, la acción es donde estamos haciendo una solicitud de publicación que es simplemente crear perro.

81
00:05:39,120 --> 00:05:45,760
Entonces, cuando se envía este formulario, enviaremos una solicitud de envío para crear un perro, que es lo que esperamos

82
00:05:45,750 --> 00:05:46,130
aquí.

83
00:05:46,150 --> 00:05:50,080
La solicitud POST crear perro ejecutará este código.

84
00:05:50,290 --> 00:05:52,210
Luego tenemos que agregar nuestras entradas.

85
00:05:52,270 --> 00:05:54,020
Entonces vamos a tener dos entradas.

86
00:05:54,190 --> 00:06:01,720
Escriba igual a texto en ambos igual que ese y el titular fuera de lugar para este que solo

87
00:06:01,720 --> 00:06:02,360
diga nombre.

88
00:06:02,500 --> 00:06:05,270
Y luego el próximo será para la raza.

89
00:06:05,860 --> 00:06:14,770
Y lo último que haremos es hacer que un tipo de entrada se llame enviar, que será nuestro botón

90
00:06:14,760 --> 00:06:20,520
y si actualizamos la página, ahora tenemos un formulario, pero hay un problema.

91
00:06:20,590 --> 00:06:21,620
Si llené esto.

92
00:06:21,730 --> 00:06:30,760
Así que agregamos otro perro aquí Skittles, que puede ser un poodle cuando presiono Enviar, enviará una solicitud de publicación

93
00:06:31,120 --> 00:06:32,870
para crear un perro.

94
00:06:33,190 --> 00:06:37,450
Pero cuidado cuando lo hago, terminamos con un perro vacío.

95
00:06:37,810 --> 00:06:44,350
Y eso es porque aunque tengo dos entradas, no le he dicho al navegador cuál es el nombre de

96
00:06:44,350 --> 00:06:44,940
esas entradas.

97
00:06:45,400 --> 00:06:53,140
Y este debe llamarse nombre, que es un nombre un poco confuso, porque el nombre y este deben

98
00:06:53,130 --> 00:06:56,870
criarse, y también lo hace un marcador de posición.

99
00:06:56,880 --> 00:07:03,250
Entonces, ahora lo que hemos hecho es agregar este atributo de nombre que le dijimos al navegador cuando el

100
00:07:03,250 --> 00:07:08,600
usuario envió este formulario, enviar una solicitud de publicación para crear un perro con dos datos.

101
00:07:08,920 --> 00:07:14,920
El nombre debe ser igual a lo que esté en esta entrada y la raza es igual a lo que esté en esta entrada también.

102
00:07:15,490 --> 00:07:19,040
Pasaremos toneladas de tiempo escribiendo formularios y tratando con los diferentes atributos.

103
00:07:19,240 --> 00:07:20,760
Así que no te pongas demasiado atrapado en eso.

104
00:07:20,920 --> 00:07:24,810
Pero lo importante ahora es que estamos agregando datos al cuerpo.

105
00:07:24,820 --> 00:07:33,310
Y si actualizo y agrego Skittles, que es un poodle y ahora tuve el envío, puede ver que envió una solicitud

106
00:07:33,310 --> 00:07:39,260
de publicación y puede ver que aquí mismo se publica para crear un perro.

107
00:07:39,880 --> 00:07:46,410
Y luego, lo que sucedió es que en lugar de crear perro aquí creó un perro con los datos de la

108
00:07:46,420 --> 00:07:48,370
forma, el nombre y la raza.

109
00:07:48,820 --> 00:07:54,060
Y luego de crear ese perro y guardar la base de datos en realidad no importa cómo funciona.

110
00:07:54,070 --> 00:07:56,460
Pero solo funciona.

111
00:07:56,470 --> 00:08:03,210
Luego redireccionamos para cortar perros, razón por la cual en realidad hay una segunda pequeña cosa impresa que dice que

112
00:08:03,220 --> 00:08:08,370
se hizo una solicitud para cortar perros a pesar de que en realidad no presioné enter.

113
00:08:08,380 --> 00:08:14,290
Lo que sucedió es que cuando hice una solicitud para crear un perro como una publicación al final de

114
00:08:14,290 --> 00:08:17,190
eso, en realidad me pide otra vez que corte perros.

115
00:08:17,440 --> 00:08:23,970
Y luego eso encuentra a todos los perros y luego representa la plantilla de perros que vemos aquí y luego obtenemos la

116
00:08:23,980 --> 00:08:26,750
forma en la parte inferior y todo el perro miente.

117
00:08:26,830 --> 00:08:28,830
Y es por eso que vemos esto aquí.

118
00:08:28,890 --> 00:08:35,580
Entonces, si prestas mucha atención a este ícono aquí mismo, lo verás en otro perro llamado

119
00:08:35,590 --> 00:08:42,530
Snicker, que sigue el tema de los caramelos y los snickers también pueden ser un laboratorio.

120
00:08:42,750 --> 00:08:44,230
Cuando presiono enviar.

121
00:08:44,230 --> 00:08:46,180
Mire esto muy de cerca.

122
00:08:46,170 --> 00:08:47,390
Va a ser realmente rápido.

123
00:08:47,800 --> 00:08:49,900
Pero cambió por solo un instante.

124
00:08:50,200 --> 00:08:54,900
Y eso es importante porque muestra que cuando realizo una solicitud, en realidad me aleja

125
00:08:54,900 --> 00:09:00,180
de esta página y luego nos redireccionan aquí de nuevo, así que no solo nos quedamos en

126
00:09:00,190 --> 00:09:06,370
esta página todo el tiempo que realmente nos aleja. por un instante y luego nos redirecciona y nos muestra este

127
00:09:06,370 --> 00:09:08,980
contenido y eso es lo que está sucediendo aquí.

128
00:09:08,980 --> 00:09:14,000
Cuando haces una solicitud para crear un perro, entonces nos redirige para cortar perros.

129
00:09:14,160 --> 00:09:19,980
Y luego dentro de los perros nos da la plantilla del perro, que es la forma en que vemos todo esto en el navegador.

130
00:09:20,670 --> 00:09:20,930
DE ACUERDO.

131
00:09:20,950 --> 00:09:22,350
Así que cubrimos mucho allí.

132
00:09:22,360 --> 00:09:24,850
Permítanme señalar las partes importantes.

133
00:09:24,850 --> 00:09:31,480
Una es que dentro de nuestro código de servidor podemos distinguir entre una solicitud de obtención y una solicitud de publicación

134
00:09:31,480 --> 00:09:37,500
y podemos hacer un código diferente dependiendo de lo que sucedió cuando y recordar que un obtener es recuperar

135
00:09:37,570 --> 00:09:42,250
información y una publicación es agregar o enviar información, que es lo que estamos usando para.

136
00:09:42,390 --> 00:09:46,010
Slash crear perro como una publicación es cómo puedes crear un nuevo perro.

137
00:09:46,240 --> 00:09:50,860
Y hay dos cosas que deben estar en el cuerpo de la solicitud, el nombre y la raza.

138
00:09:50,980 --> 00:09:53,710
Y si no están allí, será un perro vacío.

139
00:09:54,000 --> 00:10:00,100
Pero sea cual sea el tipo de perro que lo haga, entonces nos redirige para cortar perros, que luego ejecuta todo este código.

140
00:10:00,550 --> 00:10:05,680
Y la otra cosa importante es que cuando enviamos esto, hay una actualización instantánea.

141
00:10:05,670 --> 00:10:10,890
Es realmente muy rápido, pero sigue siendo una actualización en la que hacemos una solicitud en otro lugar.

142
00:10:11,020 --> 00:10:15,250
Al igual que si hiciera esto y presioné Enter, en realidad estamos haciendo otra solicitud.

143
00:10:15,280 --> 00:10:16,500
La misma idea aquí.

144
00:10:16,680 --> 00:10:17,880
Cuando presiono enviar.

145
00:10:18,100 --> 00:10:21,060
Sigue mirando aquí hace una solicitud cada vez.

146
00:10:21,310 --> 00:10:28,440
Así que eso es todo de lo que quiero hablar en torno a esta introducción de dos servidores y dos rutas y HTP.

147
00:10:28,620 --> 00:10:29,890
Hemos terminado por ahora.

148
00:10:29,880 --> 00:10:35,220
Entonces, vamos a centrarnos en configurar nuestro entorno de desarrollador e instalar todas las herramientas que necesita

149
00:10:35,230 --> 00:10:38,230
para que podamos comenzar a escribir código como este.