Πώς να δημιουργήσετε μια βάση δεδομένων εάν είστε προγραμματιστής front-end

Κάποιος με ρώτησε πρόσφατα ποιος είναι ο ευκολότερος τρόπος για έναν προγραμματιστή front-end να αποθηκεύσει τα δεδομένα των χρηστών. Έτσι θα εξηγήσω πώς να το κάνω ακριβώς αυτό.

Ρύθμιση της βάσης δεδομένων

Το πρώτο πράγμα που θα χρειαζόμαστε είναι μια πραγματική βάση δεδομένων. Μπορείτε να κατευθυνθείτε στο mlab δωρεάν. Μόλις εγγραφείτε, κάντε κλικ στη δημιουργία νέουστην καρτέλα MongoDB Deployments. Η βάση δεδομένων του sandbox είναι δωρεάν, γι 'αυτό θα χρησιμοποιήσουμε.

Μόλις δημιουργήσουμε τη βάση δεδομένων, πρέπει να δημιουργήσουμε έναν λογαριασμό ώστε να μπορούμε να κάνουμε έλεγχο ταυτότητας. Κάντε κλικ στο όνομα της βάσης δεδομένων και, στη συνέχεια, στους χρήστες,και προσθέστε χρήστη βάσης δεδομένων . Γράψτε το όνομα χρήστη και τον κωδικό πρόσβασης που επιλέξατε καθώς θα τα χρειαζόμαστε αργότερα.

Στην κορυφή της σελίδας της βάσης δεδομένων, θα πρέπει να δείτε ένα URI MongoDB. Αυτή είναι η διεύθυνση ιστού της βάσης δεδομένων μας. Το URI της βάσης δεδομένων σας είναι σαν το URL μιας ιστοσελίδας. Κατά συνθήκη, το MongoDB URI έχει ως εξής:

mongodb://:@
    
     :/
    

Το δικό μου, για παράδειγμα, είναι:

mongodb://admin:[email protected]:11885/medium

Ρύθμιση του διακομιστή

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

Ρίξτε μια ματιά στο αρχικό server.jsαρχείο που παρείχα:

Ξεκινάμε με την εισαγωγή express- είναι η βιβλιοθήκη που θα χρησιμοποιήσουμε για να χειριστούμε αιτήματα στον διακομιστή μας.

Πρέπει use(require(cors))να επιτρέψουμε αιτήματα μεταξύ τομέων. Αυτά είναι αιτήματα από έναν ιστότοπο που φιλοξενείται σε έναν τομέα σε διακομιστή άλλου τομέα.

app.use(require('body-parser').json()) αναλύει αυτόματα το αίτημα για JSON για εμάς.

Στη συνέχεια, περνάμε στη getμέθοδο τη διαδρομή που θέλουμε να χειριστούμε και την επιστροφή κλήσης που θα τη χειριστεί. Αυτό σημαίνει ότι κάθε φορά που κάποιος ανοίγει τη σελίδα /του ιστότοπού μας, το αίτημα διεκπεραιώνεται από αυτήν την επιστροφή. Ο βασικός τομέας είναι έμμεσος, οπότε αν ο τομέας σας είναι //shiny-koala.glitch.com,η διαδρομή /aboutθα είναι //shiny-koala.glitch.com/about .

Για να είμαι ακριβής, όταν λέω "ανοίξτε τη σελίδα", εννοώ ότι υποβάλλει ένα αίτημα χρησιμοποιώντας τη GETμέθοδο στον διακομιστή μας. Οι μέθοδοι Http είναι απλώς τύποι αιτημάτων που μπορείτε να κάνετε σε έναν διακομιστή. Θα χρησιμοποιήσουμε μόνο τα ακόλουθα:

  • GETΑυτή η μέθοδος χρησιμοποιείται για τη λήψη πόρων από έναν διακομιστή. Για παράδειγμα, όταν ανοίγετε το Facebook, φορτώνει τα HTML, CSS και JavaScript που απαιτούνται.
  • POSTΑυτή η μέθοδος χρησιμοποιείται για τη δημιουργία πόρων σε διακομιστή. Για παράδειγμα, όταν δημοσιεύετε κάτι στο Facebook, οι πληροφορίες που έχετε γράψει σε αυτήν την ανάρτηση αποστέλλονται στους διακομιστές του Facebook σε ένα POSTαίτημα.
  • PUTΑυτή η μέθοδος χρησιμοποιείται για την ενημέρωση πόρων σε διακομιστή. Για παράδειγμα, όταν επεξεργάζεστε μια ανάρτηση, οι τροποποιήσεις σας αποστέλλονται στον διακομιστή του Facebook σε ένα PUTαίτημα.

Το app.postκαι app.putλειτουργεί ακριβώς όπως app.get, αλλά χειριστείτε τη μέθοδο POST και PUT αντί για GET αρκετά λογικά.

Δρομολόγηση

Κατά την ανάπτυξη του διακομιστή, θα χρειαστεί να κάνετε κάποιες δοκιμές. Για να εκτελέσετε αιτήματα HTTP, μπορείτε να χρησιμοποιήσετε το εύχρηστο τεστ REST test ή την εφαρμογή Insomnia.

Για να ελέγξετε τη διεύθυνση URL της εφαρμογής Glitch, κάντε κλικ στο κουμπί εμφάνισης .

Μέχρι στιγμής, χρησιμοποιούμε μόνο τη διαδρομή /. Αλλά θέλουμε να αποθηκεύσουμε διαφορετικές πληροφορίες για διαφορετικούς χρήστες, επομένως χρειαζόμαστε μια διαφορετική διαδρομή για κάθε χρήστη.

Για παράδειγμα: /ZaninAndreaκαι/JohnGreen

Τώρα έχουμε ένα πρόβλημα: δεν μπορούμε πιθανώς να κωδικοποιήσουμε κάθε διαδρομή αφού δεν είναι μια πολύ επεκτάσιμη προσέγγιση. Αυτό που χρειαζόμαστε είναι παράμετροι διαδρομής. Θα κωδικοποιήσουμε μόνο μία διαδρομή:/:user

Το άνω και κάτω τελεία λέει στο Express να πιάσει οποιαδήποτε διαδρομή ξεκινώντας από /και μετά μόνο αλφαριθμητικούς χαρακτήρες.

Μερικά παραδείγματα:

  • /ZaninAndrea θα πιαστεί
  • /Johnny45 θα πιαστεί
  • /alex/scoreΘα δεν μπορεί να αλιευθεί

Στη συνέχεια μπορούμε να ανακτήσουμε την τιμή της userμεταβλητήςrequest.params.user

Ο διακομιστής μας ανταποκρίνεται τώρα σε κάθε ερώτημα που επαναλαμβάνει το όνομα χρήστη.

Προσθήκη δεδομένων στη βάση δεδομένων

Γνωρίζουμε ποιος είναι ο χρήστης και τώρα θέλουμε να μπορούμε να αποθηκεύουμε κάποιες πληροφορίες για αυτόν.

Για να ρωτήσετε τη βάση δεδομένων, θα χρησιμοποιήσουμε τη mongodbβιβλιοθήκη. Μπορείτε να το εγκαταστήσετε με έναν από τους δύο τρόπους:

npm install mongodb --save

ή αν χρησιμοποιείτε Glitch, μεταβείτε στο package.jsonαρχείο και κάντε κλικ στο κουμπί Προσθήκη πακέτου .

Ας φορτώσουμε τη βιβλιοθήκη και να αποθηκεύσουμε το MongoDB URI σε μια μεταβλητή:

Το URI είναι πολύ ευαίσθητες πληροφορίες - είναι το μόνο που χρειάζεται για την πρόσβαση στη βάση δεδομένων σας. Είναι καλύτερο να το βάλετε σε ένα .envαρχείο που δεν θα είναι ορατό σε άλλους.

Το Glitch θα φορτώσει αυτόματα τις μεταβλητές από το .envαρχείο στη process.envμεταβλητή.

Η σύνδεση με τη βάση δεδομένων είναι μια ασύγχρονη λειτουργία, επομένως πρέπει να ολοκληρώσουμε όλες τις ρυθμίσεις του διακομιστή σε μια επιστροφή κλήσης όπως αυτή:

Οι βάσεις δεδομένων οργανώνονται σε συλλογές και οι συλλογές περιέχουν έγγραφα (βασικά αρχεία JSON). Ας συνδεθούμε λοιπόν με τη userσυλλογή (θα δημιουργηθεί την πρώτη φορά που θα έχουμε πρόσβαση).

Πρώτον, θα χειριστούμε τη POSTδιαδρομή. Αυτό θα το χρησιμοποιήσουμε όταν προσθέτουμε δεδομένα για έναν χρήστη για πρώτη φορά. Στη συνέχεια, θα χρησιμοποιήσουμε τη PUTδιαδρομή για να την ενημερώσουμε.

Η collection.insertOneμέθοδος προσθέτει ένα νέο έγγραφο στη συλλογή. Στην περίπτωσή μας, κάθε χρήστης θα έχει το δικό του έγγραφο.

{ ...request.body, user : request.params.user } αξιοποιεί τον φορέα εκμετάλλευσης για τη συγχώνευση των δεδομένων που παρέχονται μέσω του σώματος του αιτήματος και του χρήστη που παρέχεται μέσω της διεύθυνσης URL

Το αποτέλεσμα είναι το έγγραφο που θα αποθηκευτεί στη συλλογή.

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

Λήψη δεδομένων από τη βάση δεδομένων

Τώρα που έχουμε κάποια δεδομένα στο διακομιστή, θέλουμε να μπορούμε να τα διαβάζουμε. Χρησιμοποιούμε τη GETμέθοδο για να το κάνουμε αυτό.

Αυτή τη φορά, το πρώτο επιχείρημα είναι ένα φίλτρο που λέει στη βάση δεδομένων να μας στείλει μόνο τα έγγραφα με τη σωστή ιδιότητα χρήστη.

Τα έγγραφα επιστρέφονται στον χρήστη σε έναν πίνακα, επειδή θεωρητικά θα μπορούσαν να υπάρχουν περισσότερα από ένα έγγραφα με αυτήν την ιδιότητα χρήστη. Εναπόκειται σε εμάς να διασφαλίσουμε ότι αυτό δεν θα συμβεί.

Ενημέρωση δεδομένων στη βάση δεδομένων

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

Το πρώτο όρισμα είναι ένα φίλτρο, όπως αυτό που χρησιμοποιήσαμε στη GETμέθοδο.

Το δεύτερο επιχείρημα είναι ένα έγγραφο ενημέρωσης - μπορείτε να διαβάσετε περισσότερα γι 'αυτά εδώ. Στην περίπτωσή μας, λέμε στη βάση δεδομένων να συγχωνεύσει τα δεδομένα που διαβίβασε ο χρήστης με τα ήδη υπάρχοντα δεδομένα.

Προσοχή όμως, επειδή οι ένθετες παράμετροι θα αντικατασταθούν και δεν θα συγχωνευτούν.

Αποχαιρετισμός

Αυτό απέχει πολύ από το να είναι ένας πλήρης οδηγός για βάσεις δεδομένων και προγραμματισμό back-end, αλλά αρκεί για να ξεκινήσετε και να τροφοδοτήσετε προσωπικά έργα.

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

Μπορείτε να παίξετε με το πλήρες έργο εδώ, θα χρειαστείτε τη δική σας βάση δεδομένων σκληρή, εάν δεν τη δημιουργήσατε ακόμη, επιστρέψτε στην ενότητα Ρύθμιση της βάσης δεδομένων .

Αν σας άρεσε αυτό το άρθρο, παρακαλώ δώστε μερικά χειροκρότημα, ώστε να το βλέπουν περισσότεροι. Ευχαριστώ!