1
00:00:00,390 --> 00:00:01,300
Bem vindo de volta.

2
00:00:01,560 --> 00:00:06,300
Neste vídeo, você irá acompanhá-lo pelas etapas de criar um aplicativo simples muito simples e

3
00:00:06,570 --> 00:00:12,150
o objetivo aqui é mostrar como os pedidos de POST funcionam e expressar como criamos rotas que estão

4
00:00:12,150 --> 00:00:18,810
ouvindo pedidos de pós, então, como podemos testar eles com o carteiro e depois veja como podemos escrever um formulário em

5
00:00:18,810 --> 00:00:24,100
um modelo expresso diferente e que esse formulário faça um pedido POST para o nosso aplicativo expresso.

6
00:00:24,180 --> 00:00:29,010
Então, como mencionei, vamos fazer um aplicativo simples juntos e vou começar do

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

8
00:00:31,380 --> 00:00:34,180
E então, vamos seguir a lógica da aplicação real.

9
00:00:34,410 --> 00:00:42,990
Então eu vou começar agora e basta fazer um novo diretório que eu chamarei de CD de demonstração

10
00:00:43,830 --> 00:00:56,310
de solicitação de publicação para isso e nós vamos executar o NPM nele e nós vamos clicar em introduzir algumas vezes mudar o ponto de entrada.

11
00:00:56,560 --> 00:00:57,310
ESTÁ BEM.

12
00:00:57,900 --> 00:00:59,310
Aqui vamos nós.

13
00:00:59,310 --> 00:01:07,010
Nós temos o nosso pacote que Jason agora instala o expresso dash dash save.

14
00:01:08,580 --> 00:01:14,590
E enquanto estivermos aqui vamos NPM instalar E. J. s também e salvar isso.

15
00:01:15,080 --> 00:01:15,650
ESTÁ BEM.

16
00:01:15,870 --> 00:01:17,450
Agora vamos criar nosso aplicativo.

17
00:01:17,510 --> 00:01:18,750
Sim.

18
00:01:19,350 --> 00:01:26,020
E então abriremos isso e adicionei nosso código expresso básico que precisamos.

19
00:01:26,190 --> 00:01:34,470
Então, vamos importá-lo com exigir e, em seguida, criar uma variável de aplicativo onde executamos.

20
00:01:34,470 --> 00:01:45,650
EXPRESSE E enquanto estivermos aqui também iremos fazer o aplicativo, você configurará o mecanismo para ser Ejay Sim e eu salvarei isso.

21
00:01:46,050 --> 00:01:52,650
E então, também fazemos o nosso apt-up, escute na parte inferior em vez de aqui, você processará isso.

22
00:01:52,660 --> 00:01:55,630
E nós entendemos.

23
00:01:56,010 --> 00:02:01,750
E para processar ENFP IP e nossa função de retorno de chamada.

24
00:02:01,980 --> 00:02:10,110
E, finalmente, vou fazer um começo muito simples para o servidor de log iniciado.

25
00:02:10,890 --> 00:02:11,180
ESTÁ BEM.

26
00:02:11,190 --> 00:02:12,510
Então nós temos isso configurado.

27
00:02:12,570 --> 00:02:14,550
Agora vamos criar nossa

28
00:02:17,400 --> 00:02:26,850
rota bruta exatamente assim e nós apenas renderizaremos um modelo para agora o rendimento do restaurante chamado casa assim

29
00:02:27,270 --> 00:02:28,460
e economize.

30
00:02:28,530 --> 00:02:30,020
Agora vamos fazer esse modelo.

31
00:02:30,120 --> 00:02:37,650
Então, precisamos de um diretório usado, crie visualizações de diretório e você precisa tocar em suas visualizações de arquivos na barra de seleção.

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

33
00:02:38,760 --> 00:02:47,540
E, em seguida, abra esse arquivo e lá dentro, vamos fazer uma H-1 simples que diga home page assim e nós teremos certeza

34
00:02:48,390 --> 00:02:49,850
de que isso funciona.

35
00:02:50,070 --> 00:02:58,350
Então, vamos correr o nó Apalachee, vamos voltar aqui atualizar e chegamos à página inicial.

36
00:02:58,790 --> 00:03:05,270
OK, então, temos o conjunto de esqueleto básico, temos expressos, incluímos Ejaz incluído.

37
00:03:05,340 --> 00:03:09,260
Definimos o mecanismo de visualização padrão e temos nossa rota de rota.

38
00:03:09,690 --> 00:03:14,730
O aplicativo que vamos fazer é, basicamente, uma lista de amigos ou amigos que você pode entrar

39
00:03:14,730 --> 00:03:18,780
e através de um formulário, você pode adicionar um novo amigo à sua lista.

40
00:03:18,960 --> 00:03:24,510
cães apenas algo que vamos ter uma lista de que, então, podemos criar um novo usando um formulário.

41
00:03:24,510 --> 00:03:28,610
E isso pode ser qualquer coisa de amigos ou de fazer ou contatos ou

42
00:03:28,800 --> 00:03:37,920
Então, vamos fazer amigos e vamos adicionar no aplicativo e receber amigos e esta será a página do

43
00:03:37,920 --> 00:03:41,410
modelo que mostra uma lista de amigos.

44
00:03:42,990 --> 00:03:48,810
E, em vez de aqui, vamos fazer um redstart render e nós apenas chamaremos de amigos e agora

45
00:03:48,810 --> 00:03:50,120
precisamos criar esse modelo.

46
00:03:50,400 --> 00:04:00,430
Então, vamos tocar as vistas, cortar o amigo que nos comprime e depois abrir esse arquivo assim.

47
00:04:00,790 --> 00:04:10,460
E dentro daqui vamos adicionar outra lista de amigos da H-1 apenas aqui e vamos executar o nosso servidor, certifique-se de

48
00:04:11,250 --> 00:04:12,720
que isso funciona.

49
00:04:12,930 --> 00:04:17,290
Se vamos buscar amigos, a lista de amigos vai aqui.

50
00:04:17,610 --> 00:04:18,270
ESTÁ BEM.

51
00:04:18,270 --> 00:04:21,010
Então, o que vamos fazer é exibir uma lista de amigos.

52
00:04:21,210 --> 00:04:22,890
E então precisamos criar essa lista.

53
00:04:22,890 --> 00:04:23,970
Nós precisamos dos dados.

54
00:04:24,210 --> 00:04:32,320
Então eu vou criar uma série de nomes de amigos e será

55
00:04:33,030 --> 00:04:46,080
muito simples, apenas iguais amigos são iguais e vamos adicionar alguns nomes aqui como Tony e Justin Pierre e Lilly.

56
00:04:46,290 --> 00:04:46,860
ESTÁ BEM.

57
00:04:47,140 --> 00:04:52,450
Então, temos uma série de amigos e então vamos passar essa variedade de amigos até o modelo

58
00:04:52,450 --> 00:04:57,580
de nossos amigos, onde iremos ao longo e exibir cada amigo como um item de lista.

59
00:04:57,640 --> 00:04:59,220
Então precisamos passar.

60
00:04:59,300 --> 00:05:02,770
Lembre-se que é um objeto e temos duas coisas que fazer.

61
00:05:02,770 --> 00:05:09,340
Precisamos dar-lhe um nome ou uma propriedade que usaremos para procurá-lo na visão que eu apenas chamaria amigos

62
00:05:09,340 --> 00:05:15,040
e nossos dados que estamos passando como também amigos que é confuso quando você está apenas

63
00:05:15,040 --> 00:05:15,730
começando .

64
00:05:15,760 --> 00:05:20,800
o que você verá mais frequentemente, onde você apenas usa o mesmo nome, mas lembre-se que isso pode ser qualquer coisa.

65
00:05:20,800 --> 00:05:21,560
Mas isso é

66
00:05:21,580 --> 00:05:24,810
E isso se refere à nossa matriz de amigos aqui.

67
00:05:25,150 --> 00:05:31,560
Ok, então vamos ao gabarito de estudo do amigo e adicione nosso loop e eu vou fazer um para

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

69
00:05:32,290 --> 00:05:36,690
Então, vou escrever o javascript regular primeiro sem os colchetes sem o Ejay.

70
00:05:36,820 --> 00:05:47,380
Então, temos amigos para cada função e nossa função levará o parâmetro de amigo lá e então temos nossas

71
00:05:47,470 --> 00:05:50,760
chaves de fechamento fechadas apenas assim.

72
00:05:50,920 --> 00:05:59,230
E em vez de aqui, o que faremos é fazer um aliado para cada um que diz que eu tenho um amigo assim.

73
00:05:59,610 --> 00:06:05,870
Agora vamos voltar e adicionar as frases que não precisamos de sinal igual ou lembrar que isso é apenas por lógica.

74
00:06:06,280 --> 00:06:09,800
Não queremos que nada apareça nessas duas linhas.

75
00:06:09,970 --> 00:06:16,330
Então, nós fizemos isso e se nós salvamos e atualizamos, devemos ver um aliado que diz que eu tenho um

76
00:06:16,330 --> 00:06:21,640
amigo para cada amigo nessa lista e vamos tentar isso, certifique-se de que não temos nenhum erro.

77
00:06:21,880 --> 00:06:26,890
Atualize a página e obtemos 5 itens da lista que dizem que eu tenho um amigo.

78
00:06:27,530 --> 00:06:32,130
Agora vamos voltar novamente e ao invés de apenas dizer que eu tenho um amigo, vamos realmente imprimir o nome

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

80
00:06:32,950 --> 00:06:39,110
do sinal de igual, porque queremos que o valor que avaliou seja adicionado ao próprio time.

81
00:06:39,250 --> 00:06:40,620
Então, desta vez, precisamos

82
00:06:40,750 --> 00:06:47,570
Queremos que seja substituído pelo valor de um amigo que está vindo aqui mesmo no nosso para cada um.

83
00:06:47,740 --> 00:06:49,140
Mais uma vez isso pode ser qualquer coisa.

84
00:06:49,140 --> 00:06:50,620
Nomeie o que quisermos x.

85
00:06:50,720 --> 00:06:54,010
E se colocar X aqui vai funcionar.

86
00:06:54,430 --> 00:07:01,300
Então, deixe-me apenas mostrar-lhe que atualizar e nós recebemos nossos cinco amigos e porque X é um

87
00:07:01,300 --> 00:07:07,090
nome de variável terrível, muitos voltam para o amigo assim como para reiniciar o servidor.

88
00:07:07,120 --> 00:07:10,690
Mais uma vez e você não consegue ver nada mudar.

89
00:07:10,690 --> 00:07:12,910
Ok, então temos essa lista de amigos.

90
00:07:13,060 --> 00:07:16,880
Agora, o que vamos fazer é falar sobre a configuração da rota de publicação.

91
00:07:17,110 --> 00:07:22,840
O objetivo no final é ter um formulário na parte inferior desta página e podemos digitar um nome nesse

92
00:07:22,840 --> 00:07:27,760
formulário e clicar no botão enviar e, em seguida, adicionará um novo amigo à nossa lista.

93
00:07:27,790 --> 00:07:33,340
Então, estaremos empurrando um novo nome para a matriz Friends e depois renderizando esse modelo novamente, o que irá adicionar um

94
00:07:33,340 --> 00:07:37,250
novo ponto de marcação e um novo item de lista para aquele amigo recém-adicionado.

95
00:07:37,390 --> 00:07:43,000
dados e queremos adicioná-lo ao banco de dados se estamos registrando um usuário ou estamos criando um novo comentário

96
00:07:43,000 --> 00:07:47,770
ou criando uma nova postagem ou neste caso um novo amigo uma rota de publicação.

97
00:07:47,770 --> 00:07:53,800
Precisamos começar configurando um post-road e lembre-se de que usamos um post Strout sempre que estamos adicionando dados a algo

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

99
00:07:55,420 --> 00:07:59,390
É o que faz mais sentido, embora não seja a única opção.

100
00:07:59,530 --> 00:08:02,120
Por enquanto, vamos tratá-lo como se fosse a única opção.

101
00:08:02,140 --> 00:08:08,260
Então, obtenha apenas para obter informações e uma publicação é para enviar novos dados a serem adicionados ou ser

102
00:08:08,260 --> 00:08:10,810
usado de alguma forma no lado do servidor.

103
00:08:11,140 --> 00:08:18,790
E tudo o que precisamos escrever é apt up post e o nome da rota, vamos chamá-lo de adicionar um

104
00:08:18,790 --> 00:08:26,290
amigo assim e parece o mesmo com o pedido e a resposta e vamos deixá-lo como este por enquanto.

105
00:08:26,410 --> 00:08:31,770
E dentro, vamos apenas fazer um restante para enviar. Nós não vamos fazer um modelo apenas para enviar o RES.

106
00:08:32,080 --> 00:08:41,040
Você alcançou a rota do post assim.

107
00:08:41,080 --> 00:08:46,930
Então, agora, vamos ver se podemos desencadear isso se pudermos acertá-lo adicionar amigo como uma solicitação de publicação usando o postar.

108
00:08:47,950 --> 00:08:55,090
Então, eu vou levar esse URL e copiá-lo para o carteiro e onde queremos fazer um pedido.

109
00:08:55,090 --> 00:09:00,880
Nós podemos começar por apenas fazer amigos do sosh como um pedido de get e você vê que voltamos cada

110
00:09:00,880 --> 00:09:02,270
time com os cinco amigos.

111
00:09:02,270 --> 00:09:08,970
Mas agora vamos fazer uma solicitação de publicação e estamos fazendo isso para cortar adicionar amigo.

112
00:09:09,550 --> 00:09:15,130
E agora, se enviarmos uma solicitação de publicação, recebemos uma mensagem, não podemos adicionar amigos e isso é por um motivo bobo.

113
00:09:15,400 --> 00:09:18,490
Precisamos reiniciar o servidor sempre que adicionar uma nova rota.

114
00:09:18,850 --> 00:09:22,770
E agora, se voltarmos e enviarmos o pedido de novo, recebemos uma mensagem.

115
00:09:22,930 --> 00:09:24,740
Você alcançou a rota de publicação.

116
00:09:24,820 --> 00:09:29,380
Então estamos enviando solicitação de publicação e estamos fazendo isso através do posutor, em vez de usar um

117
00:09:29,380 --> 00:09:31,010
formulário, mas é a mesma idéia exata.

118
00:09:31,030 --> 00:09:32,130
Funciona da mesma maneira.

119
00:09:32,170 --> 00:09:36,650
Nós enviamos uma solicitação de publicação e este código está sendo executado aqui.

120
00:09:36,710 --> 00:09:42,300
OK, então a próxima coisa que queremos fazer é usar um formulário para enviar essa solicitação de publicação.

121
00:09:42,430 --> 00:09:48,960
Então eu vou para os amigos estudar cada página e na parte inferior muito formulário e este

122
00:09:48,970 --> 00:09:51,320
formulário irá enviar a essa rota.

123
00:09:51,670 --> 00:09:54,390
Então lembre-se de que existem dois atributos importantes.

124
00:09:54,440 --> 00:09:57,900
Há ação e, em seguida, método.

125
00:09:58,540 --> 00:09:59,790
Então vamos começar com o método.

126
00:09:59,920 --> 00:10:06,780
Queremos enviar uma solicitação de publicação e a ação é que você é um todo que é barra e amigo.

127
00:10:07,420 --> 00:10:10,700
E novamente isso precisa combinar esta taxa aqui.

128
00:10:10,990 --> 00:10:13,440
Slash adiciona amigo como uma publicação.

129
00:10:13,910 --> 00:10:14,620
Tudo bem.

130
00:10:14,620 --> 00:10:22,330
E, em vez de aqui, vamos ter um único tipo de entrada igual ao texto e também queremos ter um espaço reservado que

131
00:10:22,330 --> 00:10:25,880
diga o nome ou o que quer que desejemos colocar lá.

132
00:10:25,900 --> 00:10:31,540
Esse é apenas o texto do espaço reservado e, em seguida, também adicionaremos um botão no

133
00:10:32,260 --> 00:10:37,180
final e isso só vai dizer que fiz um novo amigo e salvar isso.

134
00:10:37,890 --> 00:10:40,320
E assim isso vai criar um formulário para nós agora.

135
00:10:40,690 --> 00:10:46,930
reiniciar o servidor e voltei e atualizei a página, agora tenho um formulário aqui e se

136
00:10:46,930 --> 00:10:54,430
inspecionarmos isso, esses dois atributos, onde temos ação, é o método ADD friend é post e tem uma única entrada.

137
00:10:54,430 --> 00:10:55,090
Se eu

138
00:10:55,420 --> 00:11:00,150
E se eu digitar algo aqui, fiz um novo amigo hoje chamado Bob e eles clicam.

139
00:11:00,160 --> 00:11:02,500
Eu fiz um novo amigo.

140
00:11:02,770 --> 00:11:04,560
Você pode ver que estamos recebendo essa resposta.

141
00:11:04,570 --> 00:11:09,070
Você alcançou a rota da publicação, o que significa que estamos enviando uma solicitação de publicação e que a enviamos

142
00:11:09,070 --> 00:11:09,980
para o lugar certo.

143
00:11:10,030 --> 00:11:14,140
Slash adiciona amigo, mas não estamos fazendo nada nessa rota.

144
00:11:14,140 --> 00:11:19,570
esta mensagem e o que realmente queremos fazer é tirar os dados do formulário que quer levar Bob.

145
00:11:19,920 --> 00:11:21,240
Além de responder com

146
00:11:21,430 --> 00:11:25,990
E então queremos adicioná-lo à matriz de amigos e então queremos que o usuário volte para esta página onde eles

147
00:11:26,080 --> 00:11:28,060
podem ver Bob como novo ponto de bala