1
00:00:00,390 --> 00:00:01,300
Dar una buena acogida.

2
00:00:01,560 --> 00:00:06,300
En este video, vamos a guiarlo paso a paso para crear una aplicación simple muy

3
00:00:06,570 --> 00:00:12,150
simple y el objetivo aquí es mostrarle cómo funcionan las solicitudes POST y expresar cómo creamos rutas que

4
00:00:12,150 --> 00:00:18,810
están escuchando solicitudes posteriores, y cómo podemos probar. ellos con el cartero y luego ver cómo podemos escribir un formulario en

5
00:00:18,810 --> 00:00:24,100
una plantilla expresa diferente y hacer que ese formulario haga una solicitud POST a nuestra aplicación expresa.

6
00:00:24,180 --> 00:00:29,010
Entonces, como mencioné, vamos a hacer una aplicación simple y comenzaré desde

7
00:00:29,190 --> 00:00:31,380
cero e instalaré e incluiré Express.

8
00:00:31,380 --> 00:00:34,180
Y luego nos pondremos en marcha en la lógica de la aplicación real.

9
00:00:34,410 --> 00:00:42,990
Así que voy a comenzar ahora y simplemente crear un nuevo directorio al que llamaré CD

10
00:00:43,830 --> 00:00:56,310
de demostración post solicitud y ejecutaremos NPM en él y solo haremos clic en ingresar algunas veces para cambiar el punto de entrada.

11
00:00:56,560 --> 00:00:57,310
DE ACUERDO.

12
00:00:57,900 --> 00:00:59,310
Aquí vamos.

13
00:00:59,310 --> 00:01:07,010
Tenemos nuestro paquete que Jason ahora instale el ahorro de tablero de tablero expreso.

14
00:01:08,580 --> 00:01:14,590
Y mientras estamos aquí, vamos a instalar NPM E. J. s también y guarda eso.

15
00:01:15,080 --> 00:01:15,650
DE ACUERDO.

16
00:01:15,870 --> 00:01:17,450
Ahora vamos a crear nuestra aplicación.

17
00:01:17,510 --> 00:01:18,750
Sí.

18
00:01:19,350 --> 00:01:26,020
Y luego abriremos eso y agregaremos nuestro código expresado básico que necesitamos.

19
00:01:26,190 --> 00:01:34,470
Así que vamos a importarlo con require y luego crearemos una variable de aplicación donde ejecutaremos.

20
00:01:34,470 --> 00:01:45,650
EXPRESS Y mientras estemos aquí también haremos que la aplicación configure tu motor para que sea Ejay Yes y lo guardaré.

21
00:01:46,050 --> 00:01:52,650
Y luego también hacemos nuestro esfuerzo para escuchar en la parte inferior, en lugar de hacerlo procesar eso.

22
00:01:52,660 --> 00:01:55,630
Y lo conseguimos

23
00:01:56,010 --> 00:02:01,750
Y para procesar ENFP IP y nuestra función de devolución de llamada.

24
00:02:01,980 --> 00:02:10,110
Y, por último, haré un simple y simple inicio de sesión en el servidor de registro.

25
00:02:10,890 --> 00:02:11,180
DE ACUERDO.

26
00:02:11,190 --> 00:02:12,510
Así que tenemos esa configuración.

27
00:02:12,570 --> 00:02:14,550
Ahora vamos a crear

28
00:02:17,400 --> 00:02:26,850
nuestra ruta bruta así y simplemente renderizaremos una plantilla para el restaurante renderizado llamado home así como así

29
00:02:27,270 --> 00:02:28,460
y guardamos.

30
00:02:28,530 --> 00:02:30,020
Ahora hagamos esa plantilla.

31
00:02:30,120 --> 00:02:37,650
Por lo tanto, necesitamos un directorio usado para hacer vistas de directorios y usted necesita tocar las vistas de archivos en su página principal.

32
00:02:37,760 --> 00:02:38,490
Sí.

33
00:02:38,760 --> 00:02:47,540
Y luego abra ese archivo y dentro de allí haremos un simple H-1 que dice página de inicio así y nos

34
00:02:48,390 --> 00:02:49,850
aseguraremos de que funcione.

35
00:02:50,070 --> 00:02:58,350
Entonces, ejecutemos el nodo Apalachee. Vuelve aquí, actualiza y accedemos a la página de inicio.

36
00:02:58,790 --> 00:03:05,270
De acuerdo, tenemos el armazón básico configurado, tenemos el expreso incluido, tenemos Ejaz incluido.

37
00:03:05,340 --> 00:03:09,260
Hemos configurado el motor de vista predeterminado y tenemos nuestra ruta de ruta.

38
00:03:09,690 --> 00:03:14,730
La aplicación que vamos a hacer es básicamente una lista de amigos o amigos que luego puede

39
00:03:14,730 --> 00:03:18,780
ingresar y mediante un formulario puede agregar un nuevo amigo a su lista.

40
00:03:18,960 --> 00:03:24,510
simplemente algo de lo que vamos a tener una lista de eso, entonces podemos crear uno nuevo usando un formulario.

41
00:03:24,510 --> 00:03:28,610
Y esto podría ser cualquier cosa de amigos o para hacer o contactos o perros

42
00:03:28,800 --> 00:03:37,920
Así que haremos amigos y vamos a agregar una aplicación y obtener amigos de corte y esta será la página de

43
00:03:37,920 --> 00:03:41,410
la plantilla que muestra una lista de amigos.

44
00:03:42,990 --> 00:03:48,810
Y en lugar de aquí vamos a hacer un render de colirrojo y lo llamaremos amigos y ahora tenemos

45
00:03:48,810 --> 00:03:50,120
que crear esa plantilla.

46
00:03:50,400 --> 00:04:00,430
Así que haremos visitas táctiles para reducir el tamaño del amigo que nos usa y luego abriremos ese archivo así.

47
00:04:00,790 --> 00:04:10,460
Y dentro de aquí agregaremos otra H-1, la lista de amigos correcta aquí y ejecutaremos nuestro servidor para asegurarnos

48
00:04:11,250 --> 00:04:12,720
de que funcione.

49
00:04:12,930 --> 00:04:17,290
Si vamos a recortar amigos conseguimos que la lista de amigos vaya aquí.

50
00:04:17,610 --> 00:04:18,270
DE ACUERDO.

51
00:04:18,270 --> 00:04:21,010
Entonces, lo que vamos a hacer es mostrar una lista de amigos.

52
00:04:21,210 --> 00:04:22,890
Y entonces tenemos que crear esa lista.

53
00:04:22,890 --> 00:04:23,970
Necesitamos los datos.

54
00:04:24,210 --> 00:04:32,320
Así que voy a crear una serie de nombres de amigos y va

55
00:04:33,030 --> 00:04:46,080
a ser muy simple, solo amigos lejanos igualarán y solo agregaremos algunos nombres aquí, como Tony y Justin Pierre y Lilly.

56
00:04:46,290 --> 00:04:46,860
DE ACUERDO.

57
00:04:47,140 --> 00:04:52,450
Así que tenemos una serie de amigos y luego vamos a pasar ese conjunto de amigos a través de

58
00:04:52,450 --> 00:04:57,580
la plantilla de nuestros amigos, donde luego recorreremos y mostraremos a cada amigo como un elemento de la lista.

59
00:04:57,640 --> 00:04:59,220
Entonces tenemos que pasar eso.

60
00:04:59,300 --> 00:05:02,770
Recuerda que es un objeto y tenemos dos cosas que hacer.

61
00:05:02,770 --> 00:05:09,340
Necesitamos darle un nombre o una propiedad que usaremos para buscarlo en la vista que simplemente llamaría amigos

62
00:05:09,340 --> 00:05:15,040
y nuestros datos que estamos pasando como también amigos, lo cual es confuso cuando recién estás

63
00:05:15,040 --> 00:05:15,730
empezando. .

64
00:05:15,760 --> 00:05:20,800
lo que verá con más frecuencia donde solo usa el mismo nombre, pero recuerde que esto puede ser cualquier cosa.

65
00:05:20,800 --> 00:05:21,560
Pero esto es

66
00:05:21,580 --> 00:05:24,810
Y esto se refiere a nuestro conjunto de amigos aquí mismo.

67
00:05:25,150 --> 00:05:31,560
Bien, ahora vamos al genio de estudio de amigos de plantilla y agreguemos en nuestro ciclo y voy a hacer un para

68
00:05:31,560 --> 00:05:32,070
cada uno.

69
00:05:32,290 --> 00:05:36,690
Así que solo escribiré el javascript normal primero sin los corchetes sin el Ejay us.

70
00:05:36,820 --> 00:05:47,380
Así que tenemos amigos para cada función y nuestra función tomará el parámetro de amigo allí y luego tendremos nuestras llaves

71
00:05:47,470 --> 00:05:50,760
de cierre de apertura así como así.

72
00:05:50,920 --> 00:05:59,230
Y en lugar de aquí, lo que haremos será crear un aliado para cada uno que diga que tengo un amigo así.

73
00:05:59,610 --> 00:06:05,870
Ahora regresemos y agreguemos en las frases que no necesitamos ningún signo igual o recuerde que esto es solo por lógica.

74
00:06:06,280 --> 00:06:09,800
No queremos que aparezca nada en estas dos líneas.

75
00:06:09,970 --> 00:06:16,330
Así que tenemos eso hecho y si guardamos y renovamos deberíamos ver a un aliado que dice que tengo un

76
00:06:16,330 --> 00:06:21,640
amigo para cada amigo en esa lista y probémoslo para asegurarnos de que no tengamos ningún error.

77
00:06:21,880 --> 00:06:26,890
Actualiza la página y obtenemos 5 elementos de la lista que dicen que tengo un amigo.

78
00:06:27,530 --> 00:06:32,130
Ahora volveremos y, en lugar de solo decir que tengo un amigo, realmente imprimiremos el nombre de

79
00:06:32,140 --> 00:06:32,690
un amigo.

80
00:06:32,950 --> 00:06:39,110
sí necesitamos el signo de igual porque queremos que el valor que se evaluó se agregue al equipo mismo aquí.

81
00:06:39,250 --> 00:06:40,620
Así que esta vez

82
00:06:40,750 --> 00:06:47,570
Queremos que sea reemplazado con el valor de un amigo que viene de aquí en nuestro para cada uno.

83
00:06:47,740 --> 00:06:49,140
De nuevo, esto puede ser cualquier cosa.

84
00:06:49,140 --> 00:06:50,620
Nómbralo como quieras x.

85
00:06:50,720 --> 00:06:54,010
Y si pone X aquí, funcionará.

86
00:06:54,430 --> 00:07:01,300
Así que déjame mostrarte esa actualización y obtenemos a nuestros cinco amigos, y como X es

87
00:07:01,300 --> 00:07:07,090
un nombre de variable terrible, muchos vuelven a ser amigos para reiniciar el servidor.

88
00:07:07,120 --> 00:07:10,690
Una vez más y puedes ver que nada cambia.

89
00:07:10,690 --> 00:07:12,910
OK, entonces tenemos esta lista de amigos.

90
00:07:13,060 --> 00:07:16,880
Ahora lo que vamos a hacer es hablar sobre la configuración de la ruta postal.

91
00:07:17,110 --> 00:07:22,840
El objetivo final es tener un formulario en la parte inferior de esta página y podemos escribir un nombre en

92
00:07:22,840 --> 00:07:27,760
ese formulario y presionar el botón de enviar y luego agregará un nuevo amigo a nuestra lista.

93
00:07:27,790 --> 00:07:33,340
Por lo tanto, introduciremos un nuevo nombre en la matriz Amigos y luego volveremos a mostrar esta plantilla, que luego agregará un

94
00:07:33,340 --> 00:07:37,250
nuevo punto de viñeta y un nuevo elemento de lista para ese amigo recién agregado.

95
00:07:37,390 --> 00:07:43,000
datos y queremos agregarlo a la base de datos ya sea que estemos registrando un usuario o estamos creando un

96
00:07:43,000 --> 00:07:47,770
nuevo comentario o creando una nueva publicación o, en este caso, un nuevo amigo una ruta postal.

97
00:07:47,770 --> 00:07:53,800
Necesitamos comenzar configurando un post-road y recordar que utilizamos un Strout de publicación cada vez que estamos agregando datos a algo

98
00:07:54,540 --> 00:07:55,400
cuando estamos enviando

99
00:07:55,420 --> 00:07:59,390
Es lo que tiene más sentido, aunque no es la única opción.

100
00:07:59,530 --> 00:08:02,120
Por ahora vamos a tratarlo como si fuera la única opción.

101
00:08:02,140 --> 00:08:08,260
Así que es solo para recuperar información y una publicación es para enviar datos nuevos que se agregarán o se

102
00:08:08,260 --> 00:08:10,810
usarán de alguna manera en el lado del servidor.

103
00:08:11,140 --> 00:08:18,790
Y todo lo que tenemos que escribir es apto para publicación y el nombre de la ruta vamos a

104
00:08:18,790 --> 00:08:26,290
llamarlo agregar amigo así y se ve igual con la solicitud y respuesta y lo dejaremos así por ahora.

105
00:08:26,410 --> 00:08:31,770
Y dentro haremos un descanso envíenos No haremos una plantilla simplemente RES dot enviar.

106
00:08:32,080 --> 00:08:41,040
Usted ha llegado a la ruta de correos así como así.

107
00:08:41,080 --> 00:08:46,930
Entonces, veamos si podemos desencadenar esto si podemos presionar agregar amigo como una solicitud posterior usando cartero.

108
00:08:47,950 --> 00:08:55,090
Así que voy a tomar esta URL y copiar esto al cartero y donde queremos hacer una solicitud.

109
00:08:55,090 --> 00:09:00,880
Podemos comenzar simplemente haciendo amigos sosh como una solicitud de obtención y verá que recuperamos cada equipo

110
00:09:00,880 --> 00:09:02,270
con los cinco amigos.

111
00:09:02,270 --> 00:09:08,970
Pero ahora hagamos una solicitud por correo postal y lo estamos haciendo para agregar un amigo.

112
00:09:09,550 --> 00:09:15,130
Y ahora, si enviamos una solicitud postal, recibimos un mensaje que no permite publicar y agrega un amigo por una razón tonta.

113
00:09:15,400 --> 00:09:18,490
Necesitamos reiniciar el servidor cada vez que agreguemos una nueva ruta.

114
00:09:18,850 --> 00:09:22,770
Y ahora, si volvemos y enviamos la solicitud nuevamente, recibimos un mensaje.

115
00:09:22,930 --> 00:09:24,740
Has llegado a la ruta postal.

116
00:09:24,820 --> 00:09:29,380
Por lo tanto, enviamos una solicitud postal y lo hacemos a través de un cartero en lugar de utilizar

117
00:09:29,380 --> 00:09:31,010
un formulario, pero es la misma idea.

118
00:09:31,030 --> 00:09:32,130
Funciona de la misma manera.

119
00:09:32,170 --> 00:09:36,650
Enviamos una solicitud posterior y este código se está ejecutando aquí.

120
00:09:36,710 --> 00:09:42,300
OK, entonces lo siguiente que queremos hacer es usar un formulario para enviar esa solicitud de publicación.

121
00:09:42,430 --> 00:09:48,960
Así que voy a ir a los amigos a estudiar cada página y en la parte inferior un montón de formularios

122
00:09:48,970 --> 00:09:51,320
y este formulario se enviará a esa ruta.

123
00:09:51,670 --> 00:09:54,390
Entonces recuerda que hay dos atributos importantes.

124
00:09:54,440 --> 00:09:57,900
Hay acción y luego método.

125
00:09:58,540 --> 00:09:59,790
Así que comencemos con el método.

126
00:09:59,920 --> 00:10:06,780
Queremos enviar una solicitud de publicación y la acción es que usted es un todo que es barra y amigo.

127
00:10:07,420 --> 00:10:10,700
Y de nuevo, eso tiene que coincidir con esta tasa aquí.

128
00:10:10,990 --> 00:10:13,440
Slash agregar amigo como una publicación.

129
00:10:13,910 --> 00:10:14,620
Todo bien.

130
00:10:14,620 --> 00:10:22,330
Y en lugar de aquí vamos a tener un solo tipo de entrada igual a texto y luego también queremos tener un marcador de posición

131
00:10:22,330 --> 00:10:25,880
que diga nombre o lo que sea que queramos poner ahí.

132
00:10:25,900 --> 00:10:31,540
Es solo el texto del marcador de posición y luego también agregaremos un botón al

133
00:10:32,260 --> 00:10:37,180
final y esto solo indicará que hice un nuevo amigo y lo guardaré.

134
00:10:37,890 --> 00:10:40,320
Y entonces esto creará una forma para nosotros ahora mismo.

135
00:10:40,690 --> 00:10:46,930
el servidor y vuelvo y actualizo la página, ahora tengo un formulario aquí y si lo inspeccionamos

136
00:10:46,930 --> 00:10:54,430
tiene esos dos atributos en los que tenemos acción, el método ADD friend es post y tiene una sola entrada.

137
00:10:54,430 --> 00:10:55,090
Si reinicio

138
00:10:55,420 --> 00:11:00,150
Y si escribo algo aquí hice un nuevo amigo hoy llamado Bob y hacen clic.

139
00:11:00,160 --> 00:11:02,500
Hice un nuevo amigo.

140
00:11:02,770 --> 00:11:04,560
Puedes ver que estamos obteniendo esa respuesta.

141
00:11:04,570 --> 00:11:09,070
Has llegado a la ruta postal, lo que significa que estamos enviando una solicitud postal y que la estamos

142
00:11:09,070 --> 00:11:09,980
enviando al lugar correcto.

143
00:11:10,030 --> 00:11:14,140
Slash agrega amigo pero no estamos haciendo nada en esa ruta.

144
00:11:14,140 --> 00:11:19,570
este mensaje y lo que realmente queremos hacer es tomar los datos del formulario que desea tomar Bob.

145
00:11:19,920 --> 00:11:21,240
Además de responder con

146
00:11:21,430 --> 00:11:25,990
Y luego queremos agregarlo a la matriz de amigos y luego queremos que el usuario regrese a esta página donde

147
00:11:26,080 --> 00:11:28,060
pueden ver a Bob como un nuevo punto