1
00:00:00,390 --> 00:00:01,300
Ben tornato.

2
00:00:01,560 --> 00:00:06,300
In questo video ti mostreremo come creare una semplice applicazione molto semplice e l'obiettivo qui

3
00:00:06,570 --> 00:00:12,150
è quello di mostrarti come funzionano le richieste POST ed esprimere come creiamo percorsi che ascoltano le

4
00:00:12,150 --> 00:00:18,810
richieste post e come possiamo testare con il postino e poi vedere come possiamo scrivere un modulo su un modello espresso

5
00:00:18,810 --> 00:00:24,100
diverso e fare in modo che tale modulo faccia una richiesta POST alla nostra app express.

6
00:00:24,180 --> 00:00:29,010
Quindi, come ho detto, creeremo una semplice applicazione insieme e inizierò da

7
00:00:29,190 --> 00:00:31,380
zero e installerò e includerò Express.

8
00:00:31,380 --> 00:00:34,180
E poi inizieremo la vera logica applicativa.

9
00:00:34,410 --> 00:00:42,990
Quindi inizierò ora e creerò una nuova directory che chiamerò CD demo

10
00:00:43,830 --> 00:00:56,310
post richiesta e eseguiremo l'NPM al suo interno e inseriremo appena alcune volte il punto di inserimento.

11
00:00:56,560 --> 00:00:57,310
OK.

12
00:00:57,900 --> 00:00:59,310
Eccoci.

13
00:00:59,310 --> 00:01:07,010
Abbiamo il nostro pacchetto che Jason ora installa il cruscotto rapido.

14
00:01:08,580 --> 00:01:14,590
E mentre siamo qui, installiamo NPM. J. s pure e salva quello.

15
00:01:15,080 --> 00:01:15,650
OK.

16
00:01:15,870 --> 00:01:17,450
Ora creiamo la nostra app.

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

18
00:01:19,350 --> 00:01:26,020
E poi lo apriremo e aggiungeremo il nostro codice di base di cui abbiamo bisogno.

19
00:01:26,190 --> 00:01:34,470
Quindi lo importeremo con require e quindi creeremo una variabile app dove eseguiamo.

20
00:01:34,470 --> 00:01:45,650
EXPRESS E mentre siamo qui faremo anche l'app per impostare il tuo motore come Ejay Sì e lo salverò.

21
00:01:46,050 --> 00:01:52,650
E poi facciamo anche il nostro apt ascolti in basso invece di qui, lo elaboreremo.

22
00:01:52,660 --> 00:01:55,630
E abbiamo capito.

23
00:01:56,010 --> 00:02:01,750
E per elaborare ENFP IP e la nostra funzione di callback.

24
00:02:01,980 --> 00:02:10,110
E infine farò un semplice venire al server di log avviato.

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

26
00:02:11,190 --> 00:02:12,510
Quindi abbiamo questo set up.

27
00:02:12,570 --> 00:02:14,550
Ora creiamo la nostra

28
00:02:17,400 --> 00:02:26,850
rotta bruta proprio così e ci limiteremo a rendere un template per ora il rendering del ristorante chiamato home proprio

29
00:02:27,270 --> 00:02:28,460
così e salvare.

30
00:02:28,530 --> 00:02:30,020
Ora facciamo questo modello.

31
00:02:30,120 --> 00:02:37,650
Quindi abbiamo bisogno di una directory usata per creare viste di directory e devi toccare la barra delle viste delle tue home page.

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

33
00:02:38,760 --> 00:02:47,540
E poi apri quel file e all'interno di lì faremo un semplice H-1 che dice la home page proprio così e faremo

34
00:02:48,390 --> 00:02:49,850
in modo che funzioni.

35
00:02:50,070 --> 00:02:58,350
Quindi eseguiamo il nodo Apalachee, torniamo qui, aggiorniamo e otteniamo la pagina iniziale.

36
00:02:58,790 --> 00:03:05,270
OK, quindi abbiamo impostato lo scheletro di base che abbiamo incluso, incluso Ejaz incluso.

37
00:03:05,340 --> 00:03:09,260
Abbiamo impostato il motore di visualizzazione predefinito e abbiamo la nostra rotta.

38
00:03:09,690 --> 00:03:14,730
L'app che stiamo per fare è fondamentalmente un elenco di amici o amici che puoi quindi

39
00:03:14,730 --> 00:03:18,780
inserire e attraverso un modulo puoi aggiungere un nuovo amico al tuo elenco.

40
00:03:18,960 --> 00:03:24,510
contatti o cani, solo qualcosa che avremo una lista di quella che possiamo quindi creare una nuova usando un modulo.

41
00:03:24,510 --> 00:03:28,610
E questo potrebbe essere qualsiasi cosa di amici o di cose da fare o

42
00:03:28,800 --> 00:03:37,920
Quindi faremo degli amici e aggiungeremo in app e otterremo amici slash e questa sarà la pagina del

43
00:03:37,920 --> 00:03:41,410
modello che mostra una lista di amici.

44
00:03:42,990 --> 00:03:48,810
E invece di qui faremo un rendering redstart e lo chiameremo semplicemente amici e ora abbiamo bisogno

45
00:03:48,810 --> 00:03:50,120
di creare quel modello.

46
00:03:50,400 --> 00:04:00,430
Quindi faremo touch views slash friend che ci fanno Ejay e quindi apriamo quel file proprio così.

47
00:04:00,790 --> 00:04:10,460
E all'interno di qui aggiungeremo un altro H-1 elenco di amici giusti va qui e noi eseguiremo il nostro server

48
00:04:11,250 --> 00:04:12,720
assicurarsi che funzioni.

49
00:04:12,930 --> 00:04:17,290
Se andiamo a tagliare amici, la lista degli amici va qui.

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

51
00:04:18,270 --> 00:04:21,010
Quindi quello che faremo è visualizzare un elenco di amici.

52
00:04:21,210 --> 00:04:22,890
E quindi abbiamo bisogno di creare quella lista.

53
00:04:22,890 --> 00:04:23,970
Abbiamo bisogno dei dati.

54
00:04:24,210 --> 00:04:32,320
Quindi creerò una serie di nomi di amici e sarà molto

55
00:04:33,030 --> 00:04:46,080
semplice, solo che amici lontani sono uguali e aggiungeremo solo alcuni nomi qui come Tony, Justin Pierre e Lilly.

56
00:04:46,290 --> 00:04:46,860
OK.

57
00:04:47,140 --> 00:04:52,450
Quindi abbiamo una schiera di amici e poi passeremo quella serie di amici al

58
00:04:52,450 --> 00:04:57,580
nostro modello di amici, dove passeremo e visualizzeremo ogni amico come elemento della lista.

59
00:04:57,640 --> 00:04:59,220
Quindi dobbiamo passarlo.

60
00:04:59,300 --> 00:05:02,770
Ricorda che è un oggetto e abbiamo due cose da fare.

61
00:05:02,770 --> 00:05:09,340
Abbiamo bisogno di dargli un nome o una proprietà che useremo per cercarlo nella vista che chiamerei semplicemente amici e

62
00:05:09,340 --> 00:05:15,040
i nostri dati che stiamo trasmettendo come anche amici che è fonte di confusione quando stai appena

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

64
00:05:15,760 --> 00:05:20,800
quello che vedrai più spesso dove usi lo stesso nome ma ricorda che questo può essere qualsiasi cosa.

65
00:05:20,800 --> 00:05:21,560
Ma questo è

66
00:05:21,580 --> 00:05:24,810
E questo si riferisce alla nostra serie di amici qui.

67
00:05:25,150 --> 00:05:31,560
OK, quindi ora andiamo al modello di studio genio amico e aggiungere nel nostro ciclo e ho intenzione di fare un

68
00:05:31,560 --> 00:05:32,070
per ciascuno.

69
00:05:32,290 --> 00:05:36,690
Quindi scriverò il javascript normale senza parentesi senza l'Ejay.

70
00:05:36,820 --> 00:05:47,380
Quindi abbiamo amici per ogni funzione e la nostra funzione avrà parametri di amici lì e quindi avremo le parentesi graffe

71
00:05:47,470 --> 00:05:50,760
di chiusura di apertura proprio così.

72
00:05:50,920 --> 00:05:59,230
E invece di qui, quello che faremo è un alleato per ognuno che dice che ho un amico proprio così.

73
00:05:59,610 --> 00:06:05,870
Ora torniamo indietro e aggiungiamo le frasi che non abbiamo bisogno di un segno di uguale o ricordiamo che è solo per la logica.

74
00:06:06,280 --> 00:06:09,800
Non vogliamo che nulla si presenti su queste due linee.

75
00:06:09,970 --> 00:06:16,330
Così abbiamo fatto e se salviamo e aggiorniamo dovremmo vedere un alleato che dice che ho un amico per

76
00:06:16,330 --> 00:06:21,640
ogni amico in quella lista e proviamo a fare in modo di non avere errori.

77
00:06:21,880 --> 00:06:26,890
Aggiorna la pagina e otteniamo 5 voci di elenco che dicono che ho un amico.

78
00:06:27,530 --> 00:06:32,130
Ora torneremo di nuovo e invece di dire che ho un amico, in realtà stampiamo il

79
00:06:32,140 --> 00:06:32,690
nome dell'amico.

80
00:06:32,950 --> 00:06:39,110
bisogno del segno di uguale perché vogliamo che il valore valutato sia aggiunto al team stesso qui.

81
00:06:39,250 --> 00:06:40,620
Quindi questa volta abbiamo

82
00:06:40,750 --> 00:06:47,570
Vogliamo che sia sostituito con il valore di un amico che viene da qui nel nostro per ciascuno.

83
00:06:47,740 --> 00:06:49,140
Di nuovo questo può essere qualsiasi cosa.

84
00:06:49,140 --> 00:06:50,620
Chiamalo come vuoi x.

85
00:06:50,720 --> 00:06:54,010
E se mettesse X qui funzionerà.

86
00:06:54,430 --> 00:07:01,300
Quindi lascia che ti mostri questo aggiornamento e riceviamo i nostri cinque amici e poiché X è un

87
00:07:01,300 --> 00:07:07,090
nome di variabile terribile molti tornano ad un amico proprio così per riavviare il server.

88
00:07:07,120 --> 00:07:10,690
Ancora una volta e non vedi nulla cambia.

89
00:07:10,690 --> 00:07:12,910
OK, quindi abbiamo questa lista di amici.

90
00:07:13,060 --> 00:07:16,880
Ora quello che faremo è parlare dell'impostazione del percorso postale.

91
00:07:17,110 --> 00:07:22,840
L'obiettivo alla fine è avere un modulo in fondo a questa pagina e possiamo digitare un nome in

92
00:07:22,840 --> 00:07:27,760
quel modulo e premere il pulsante di invio e aggiungerà un nuovo amico alla nostra lista.

93
00:07:27,790 --> 00:07:33,340
Quindi inseriremo un nuovo nome nell'array Friends e quindi renderizzeremo di nuovo questo modello che aggiungerà un nuovo

94
00:07:33,340 --> 00:07:37,250
punto elenco e una nuova voce di elenco per l'amico appena aggiunto.

95
00:07:37,390 --> 00:07:43,000
dati e vogliamo aggiungerli al database se stiamo registrando un utente o stiamo creando un nuovo commento o

96
00:07:43,000 --> 00:07:47,770
creando un nuovo post o in questo caso un nuovo amico un percorso postale.

97
00:07:47,770 --> 00:07:53,800
Dobbiamo iniziare impostando un post-road e ricordare che utilizziamo un post Strout ogni volta che aggiungiamo dati a qualcosa

98
00:07:54,540 --> 00:07:55,400
quando inviamo i

99
00:07:55,420 --> 00:07:59,390
È ciò che ha più senso anche se non è l'unica opzione.

100
00:07:59,530 --> 00:08:02,120
Per ora lo tratteremo come se fosse l'unica opzione.

101
00:08:02,140 --> 00:08:08,260
Quindi, è solo per il recupero delle informazioni e un post è per l'invio di nuovi dati da aggiungere o

102
00:08:08,260 --> 00:08:10,810
da utilizzare in qualche modo sul lato server.

103
00:08:11,140 --> 00:08:18,790
E tutto ciò che dobbiamo scrivere è apt up post e il nome della route chiamiamolo aggiungere friend

104
00:08:18,790 --> 00:08:26,290
proprio così e sembra lo stesso con la richiesta e la risposta e lo lasceremo per ora.

105
00:08:26,410 --> 00:08:31,770
E dentro faremo solo un riposino send Non faremo un template solo con punti RES.

106
00:08:32,080 --> 00:08:41,040
Hai raggiunto la rotta postale proprio così.

107
00:08:41,080 --> 00:08:46,930
Quindi ora vediamo se possiamo attivarlo se riusciamo a colpirlo aggiungendo un amico come post richiesta usando il postino.

108
00:08:47,950 --> 00:08:55,090
Quindi ho intenzione di prendere questo URL e copiarlo su postino e dove vogliamo fare una richiesta.

109
00:08:55,090 --> 00:09:00,880
Possiamo iniziare semplicemente facendo amicizia con sosh come richiesta di ottenere e vedremo che torneremo a far parte di ogni

110
00:09:00,880 --> 00:09:02,270
squadra con i cinque amici.

111
00:09:02,270 --> 00:09:08,970
Ma ora facciamo una richiesta per posta e ce la stiamo facendo per tagliare l'aggiunta di un amico.

112
00:09:09,550 --> 00:09:15,130
E ora se inviamo una richiesta di posta, otteniamo un messaggio che non è possibile aggiungere un amico e questo è per un motivo sciocco.

113
00:09:15,400 --> 00:09:18,490
Abbiamo bisogno di riavviare il server ogni volta che aggiungiamo una nuova rotta.

114
00:09:18,850 --> 00:09:22,770
E ora se torniamo indietro e mandiamo di nuovo la richiesta, riceviamo un messaggio.

115
00:09:22,930 --> 00:09:24,740
Hai raggiunto il percorso postale.

116
00:09:24,820 --> 00:09:29,380
Quindi stiamo inviando richieste post e lo stiamo facendo tramite postino piuttosto che usare un modulo

117
00:09:29,380 --> 00:09:31,010
ma è la stessa idea esatta.

118
00:09:31,030 --> 00:09:32,130
Funziona allo stesso modo.

119
00:09:32,170 --> 00:09:36,650
Inviamo una richiesta di posta elettronica e questo codice viene eseguito proprio qui.

120
00:09:36,710 --> 00:09:42,300
OK, la prossima cosa che vogliamo fare è usare un modulo per inviare quella richiesta.

121
00:09:42,430 --> 00:09:48,960
Quindi andrò dagli amici a studiare ogni pagina e in fondo un sacco di moduli e questo

122
00:09:48,970 --> 00:09:51,320
modulo si sottometterà a quella rotta.

123
00:09:51,670 --> 00:09:54,390
Quindi ricorda che ci sono due attributi importanti.

124
00:09:54,440 --> 00:09:57,900
C'è azione e quindi metodo.

125
00:09:58,540 --> 00:09:59,790
Quindi iniziamo con il metodo.

126
00:09:59,920 --> 00:10:06,780
Vogliamo inviare una richiesta di posta e l'azione è che tu sei un tutto che è slash e amico.

127
00:10:07,420 --> 00:10:10,700
E ancora questo deve corrispondere a questo tasso qui.

128
00:10:10,990 --> 00:10:13,440
Slash aggiungi un amico come post.

129
00:10:13,910 --> 00:10:14,620
Tutto ok.

130
00:10:14,620 --> 00:10:22,330
E invece di qui avremo un singolo tipo di input uguale al testo e quindi vogliamo anche avere un segnaposto che

131
00:10:22,330 --> 00:10:25,880
dice il nome o qualunque cosa vogliamo mettere lì.

132
00:10:25,900 --> 00:10:31,540
Questo è solo il testo segnaposto e poi aggiungeremo anche un pulsante alla fine

133
00:10:32,260 --> 00:10:37,180
e questo dirà solo che ho creato un nuovo amico e l'ho salvato.

134
00:10:37,890 --> 00:10:40,320
E così questo creerà per noi un modulo in questo momento.

135
00:10:40,690 --> 00:10:46,930
il server e torno indietro e aggiorno la pagina ora ho un modulo qui e se lo

136
00:10:46,930 --> 00:10:54,430
ispezioniamo ha quei due attributi in cui abbiamo azione è il metodo ADD amico è post e ha un singolo input.

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

138
00:10:55,420 --> 00:11:00,150
E se scrivo qualcosa qui ho fatto un nuovo amico oggi chiamato Bob e loro cliccano.

139
00:11:00,160 --> 00:11:02,500
Ho fatto un nuovo amico.

140
00:11:02,770 --> 00:11:04,560
Puoi vedere che stiamo ricevendo quella risposta.

141
00:11:04,570 --> 00:11:09,070
Hai raggiunto la rotta postale, il che significa che stiamo inviando una richiesta di posta e che la stiamo

142
00:11:09,070 --> 00:11:09,980
inviando nel posto giusto.

143
00:11:10,030 --> 00:11:14,140
Slash aggiungi un amico ma non stiamo facendo nulla in quel percorso.

144
00:11:14,140 --> 00:11:19,570
messaggio e ciò che in realtà vogliamo fare è prendere i dati dal modulo che vuoi portare a Bob.

145
00:11:19,920 --> 00:11:21,240
Oltre a rispondere con questo

146
00:11:21,430 --> 00:11:25,990
E poi vogliamo aggiungerlo alla serie di amici e poi vogliamo che l'utente torni a questa pagina

147
00:11:26,080 --> 00:11:28,060
dove possono vedere Bob come nuovo punto elenco