Abbiamo già visto l'uso delle operazioni HTTP get nei due esercizi precedenti,
dove saremo in grado di andare a recuperare i dati dal
server e utilizzarlo all'interno della nostra applicazione angolare.
Ma ci sono situazioni in cui si desidera essere in grado di pubblicare nuovi dati sul server,
o di modificare i dati esistenti sul server,
o addirittura eliminare i dati.
Quindi è qui che le
operazioni di post, put e delete di HTTP ci consentono di eseguire questo.
In questo esercizio, vedremo l'uso dell'operazione put dal
client HTTP che ci permette di modificare un piatto esistente sul lato server.
Ora, perche' dovremmo farlo?
Hai visto che in uno degli esercizi precedenti,
abbiamo permesso all'utente di pubblicare un commento su un piatto,
e poi siamo stati in grado di inserire il commento nell'oggetto Dish.
Ora, vogliamo mantenere queste informazioni piatto sul server,
il piatto modificato al server.
Questo è dove l'uso dell'operazione HTTP PUT viene in nostro soccorso.
Quindi, utilizzando l'operazione HTTP PUT,
siamo in grado di inviare il Dish modificato al server e quindi modificare
le informazioni Dish esistenti sul server in modo che
il commento appena aggiunto possa essere persistente sul lato server.
In tal modo, quando le informazioni vengono recuperate in un secondo momento,
il commento appena aggiunto sarà presente come parte delle informazioni Dish.
Quindi, questo è ciò che esploreremo in questo esercizio,
dove esamineremo il salvataggio delle modifiche al server.
Allora, come facciamo a farlo?
Esaminiamo questo nell'esercizio.
Per permetterci di essere in grado di salvare le modifiche al Dish sul server,
lasciatemi introdurre un nuovo metodo nel servizio Dish qui.
Ora, aggiungeremo un nuovo metodo chiamato come putDish al server.
Quindi, come funziona il metodo PutDish?
Quindi, lasciami introdurre il metodo putDish qui che ovviamente riceve il piatto modificato
come parametro e quindi restituirà un osservabile di tipo Dish.
Quindi, questo restituirà il piatto che è stato messo nel lato server.
Ora, una volta che il Dish è stato
modificato sul lato server, le informazioni Dish modificate verranno inviate dal server,
e quindi questo Dish modificato verrà
restituito al client in modo che il client possa integrarlo,
e quindi aggiornare l'interfaccia utente per riflettere la modifica al Dish.
Ora, ovviamente, non vogliamo riflettere la modifica all'
interfaccia utente finché le informazioni Dish non vengono salvate sul lato server.
Quindi, è lì che faremo uso del
metodo PutDish che introduciamo nel servizio Dish.
Quindi, come progettiamo il metodo PutDish?
Quindi, la prima cosa che dobbiamo fare è impostare alcune opzioni HTTP in modo da informare
il server su ciò che
viene inviato nel messaggio qui.
Quindi, imposteremo alcune informazioni sulle intestazioni qui.
Quindi, per le intestazioni, imposteremo nuovi HttpHeaders qui,
e nel nuovo HttpHeaders,
impostiamo l'intestazione come
Content-Type dell'applicazione di tipo JSON.
Quindi, stiamo specificando al nostro server che il messaggio di richiesta in arrivo
contiene le informazioni sotto forma di
un oggetto json nel corpo del messaggio di richiesta in arrivo.
Quindi, il server sarà in grado di estrarre
le informazioni Dish dal corpo del messaggio, analizzarle
e quindi essere in grado di mantenere il Dish modificato al server,
e quindi inviare indietro le informazioni Dish aggiornate dal lato server.
Ora, una volta che abbiamo impostato le opzioni qui,
allora useremo
il client HTTP e poi
fare un put che ovviamente porta il piatto nel corpo del messaggio,
e poi specificheremo BaseUrl+piatti e +dish.id.
Quindi, questo è l'URL a cui stiamo inviando l'operazione put così,
Baseurl+'dishes/ '+ dish.id
Quindi, dalla tua conoscenza API REST,
vedrai perché facciamo un'operazione put a questo punto finale.
Quindi il secondo parametro è il Dish stesso che
riceviamo come parametro in arrivo per il metodo putDish,
e quindi il terzo parametro è il httpOptions che abbiamo appena impostato poco fa.
Quindi, una volta ottenuto che,
allora saremo in grado di reindirizzare
qualsiasi errore al nostro metodo HandleError sentire, il gioco è fatto.
Quindi, questa chiamata al put sul lato server consentirà
alle informazioni Dish di essere persistenti sul lato server e quindi il server
restituirà le informazioni del piatto aggiornate a noi,
e poi lo restituiremo al nostro componente
in cui il componente può quindi usarlo per rendere il informazioni aggiornate sui piatti.
Quindi, questa è la modifica che facciamo al servizio Dish.
Ora, vai nel componente dishdetail,
nel componente dishdetail,
lasciami introdurre un'altra variabile qui
chiamata dishcopy che conterrà
una copia del Dish modificato fino a quando non verrà pubblicato sul server.
Quindi, la copia conterrà il piatto modificato.
Quindi, andando nei parametri del percorso qui.
Quindi, quello che facciamo è ogni volta che le informazioni del piatto vengono modificate qui nei parametri del percorso,
anche insieme a salvare le informazioni del piatto in this.dish,
salverò anche una copia
nella dishcopy anche in modo che sia il Dish che
la dishcopy contengano la copia esatta dello stesso piatto qui.
Quindi, questa è la modifica che faremo qui.
Ora, nel metodo onSubmit,
quindi qui abbiamo il metodo onSubmit qui,
dove stiamo modificando l'oggetto qui.
Quindi, qui, si nota che in origine stavamo spingendo il commento all'oggetto Dish qui
, invece, ora spingeremo il commento all'oggetto dishcopy.
Il motivo per cui lo sto facendo è che voglio prima modificare l'oggetto dishcopy,
quindi voglio postarlo sul server,
e poi quando il server risponde con
le informazioni del piatto modificate sul lato server,
allora persisterò tali informazioni nel Dish qui.
Quindi, dopo aver fatto il dishcopy qui,
allora diremo questo.Dishservice.Putdish,
e poi forniremo al putDish
la dishcopy come parametro
perché la dishcopy contiene la versione modificata del piatto qui.
Quindi, diremo dishcopy,
e poi quando riceviamo la risposta dal lato server, quindi,
nella sottoscrizione, diremo Dish e proprio lì,
gestiremo il piatto in arrivo qui.
Quindi, qui dentro, diremo iscriviti piatto e poi diremo,
questo.piatto uguale a piatto qui,
e per completezza,
continuerò anche le stesse informazioni nel dishcopy qui.
Ora, se c'è un errore,
allora dovrà HandleError.
Quindi, per HandleError, diremo
, errmess, e poi a quel punto,
imposteremo che this.dish su null,
e quindi il dishcopy anche su null perché in questo momento il piatto non è valido,
e poi diremo this.Errmess è
qualsiasi errore, è tutto.
Questa è la modifica che faremo al metodo onSubmit.
Quindi, usando il metodo this.dishservice.Putdish,
stiamo inviando qui il dishcopy aggiornato,
non il Dish qui,
e poi quando il server ci risponde con il Dish modificato
, a quel punto, persisteremo le informazioni nel this.dish. In
modo che a quel punto, la
nostra interfaccia utente verrà aggiornata con la versione aggiornata di Dish,
sto anche persistendo le stesse informazioni per la dishcopy,
e quindi se incontro un errore,
allora imposterò this.dish su null e this.dishcopy su null
e quindi imposterò il messaggio di errore in modo appropriato qui.
Quindi questo è tutto. Salviamo le modifiche e poi andiamo a
dare un'occhiata alla nostra applicazione nel browser.
Salvando le modifiche, torniamo al browser.
Vai nel browser, andiamo ora al menu e poi vai a un piatto specifico qui.
Per il piatto specifico,
postiamo un commento qui.
Quindi, lasciatemi postare un commento qui con una valutazione qui.
Quindi, come vedi, mentre il commento diventa valido,
l'anteprima del commento viene visualizzata lassù.
Proponiamo ora questo commento.
Quando invii il commento,
vedrai immediatamente che il commento è appena stato pubblicato nella mia lista di piatti.
Ora, prima, se aggiorni la vista,
allora questo commento scomparirebbe.
Permettetemi ora di aggiornare la vista e poi noterete che il commento
sarà ancora parte della lista dei piatti qui.
Quindi, come puoi vedere qui,
il commento esiste ancora qui.
Per mostrarti ulteriormente che in effetti il commento è stato persistito sul lato server,
andiamo a guardare il registro del server nel terminale.
Tornando ai terminali,
ora vedremo che nel registro del terminale,
si vede un nuovo metodo PUT /dishes/0.
Quindi, questo dimostra che il piatto modificato
è stato persistito sul server proprio lì e dopo,
ovviamente abbiamo ottenuto i piatti aggiornando
l'interfaccia utente e quindi è per questo che stiamo
recuperando le informazioni dei piatti dal lato server.
Quindi, questo dimostra che siamo in grado di utilizzare
l'operazione HTTP PUT per mantenere il piatto modificato sul server,
e poi quando riceviamo il piatto aggiornato,
siamo in grado di aggiornare l'interfaccia utente in modo corrispondente.
Con questo, completiamo questo esercizio.
Questo è un buon momento per fare un commit GET con il messaggio,
salvando le modifiche a questo server.