Υποενότητα 15.3: Αποστολή δεδομένων στον διακομιστή

Εισαγψγή

Σε αυτήν την υποενότητα, θα μάθετε να στέλνετε και να αποθηκεύετε τις τιμές φόρμας στο db.json, έτσι ώστε να είναι διαθέσιμες ανά πάσα στιγμή.

Θα μάθετε πώς να διατηρείτε τις αλλαγές στα δεδομένα πίσω στο διακομιστή. Θα χρησιμοποιήσετε τη μέθοδο HttpClient.post που είναι διαθέσιμη σε αντικείμενα για να αποθηκεύσετε τα σχόλια που υποβάλλουν οι χρήστες στο διακομιστή.

Ενημέρωση feedback.service.ts

Ενημερώστε το αρχείο feedback.service.ts:

 addFeedbacks(fb: Feedback): Observable<Feedback[]> {
  return this.http.post<Feedback[]>(baseURL + 'feedback', fb);
 }

Το HttpClient.post κατασκευάζει ένα παρατηρήσιμο Observable με προρυθμισμένο αίτημα POST και όταν στιγμιότυπο του Observable εγγραφεί -subscribed, το αίτημα POST εκτελείται στο διακομιστή.

Στη μέθοδο HttpClient.post πρέπει να περάσουμε τη διεύθυνση URL, το σώμα αίτησης και τις προαιρετικές επιλογές http, όπως κεφαλίδες, τύπος απόκρισης κ.λπ.

Η μέθοδος addFeedbacks είναι παρόμοια με αυτά που χρησιμοποιήσαμε στα getFeedbacks (). Η διαφορά είναι ότι εδώ χρησιμοποιούμε το post αντί get. Χρησιμοποιώντας αυτό μπορούμε να αποθηκεύσουμε την fb form group στο αρχείο JSON ως νέο μέλος της array.

Ενημέρωση contact.component.ts

Ενημερώστε το contact.component.ts file:

this.feedBackService.addFeedbacks(this.fb).subscribe(fb => this.feedbacks.push(this.fb));

Σημειώστε ότι εδώ χρησιμοποιούμε push. Το κάνουμε αυτό επειδή δεν παίρνουμε μόνο τις υπάρχουσες τιμές του αρχείου JSON αλλά προσθέτουμε καινούργιες.

Τα αποτελέσματα

Με τον προηγούμενο κώδικα ολοκληρωμένο, ανοίξτε το τερματικό σας και  μεταβείτε στον υποφακέλο jsonServer  και τρέξτε json-server --watch db.json -d 2000. Αυτό θα προκαλέσει καθυστέρηση 2 δευτερολέπτων προτού ο διακομιστής στείλει την απάντηση για το αίτημα. Ο διακομιστής θα εμφανίσει το αρχείο db.json για την εφαρμογή σας. Μπορείτε να παρακολουθήσετε το διακομιστή στη διεύθυνση URL του προγράμματος περιήγησης localhost:3000 

Ανοίξτε νέο παράθυρο στο τερματικό σας και  μεταβείτε στον υποφακέλο angularChocoYourname   και τρέξτε ng serve για να εκτελέσετε την εφαρμογή σας. Στο πρόγραμμα περιήγησης περιηγηθείτε στο URL localhost:4200 

Η σελίδα contact page έχει ανοίξει από τον json-server. 

Έχουμε αποθηκεύσει τα δεδομένα στο αρχείο db.json και μπορούμε να έχουμε πρόσβαση σε αυτά κάθε φορά!

Κάντε μια  Git commit με το μήνυμα "Angular storing data".

• See more about the HttpClient.get method
• See more about the CRUD acronym