Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Οι σχεσιακές βάσεις δεδομένων όπως η MySQL αποτελούσαν παραδοσιακά την καλύτερη επιλογή βάσης δεδομένων. Ωστόσο, οι βάσεις δεδομένων NoSQL όπως η MongoDB έχουν αυξηθεί σε δημοτικότητα λόγω της ευέλικτης δομής τους για αποθήκευση δεδομένων και της ικανότητάς τους να αποθηκεύουν και να ανακτούν γρήγορα δεδομένα.

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

Τι είναι μια βάση δεδομένων NoSQL;

Το NoSQL σημαίνει Όχι μόνο SQL, μια μη σχεσιακή βάση δεδομένων. Αυτός ο τύπος βάσης δεδομένων δεν βασίζεται στο παραδοσιακό μοντέλο σχεσιακής βάσης δεδομένων. Δεν έχει καθορισμένη δομή στήλης-γραμμής και μπορεί να αποθηκεύσει δεδομένα σε μια ποικιλία διαφορετικών μορφών, καθιστώντας το πιο ευέλικτο και επεκτάσιμο.

instagram viewer

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

Ρυθμίστε μια βάση δεδομένων MongoDB

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

Δείτε πώς μοιάζει μια απλή δομή εγγράφου MongoDB:

{
 Όνομα: 'Andrew',
 Ρόλος: "Backend Developer"
}

Για να ξεκινήσετε, πρέπει πρώτα δημιουργήστε μια βάση δεδομένων MongoDB. Μόλις ολοκληρώσετε τη διαμόρφωση του MongoDB, ανοίξτε την εφαρμογή MongoDB Compass. Στη συνέχεια, κάντε κλικ στο Νέα σύνδεση κουμπί για να δημιουργήσετε μια σύνδεση με τον διακομιστή MongoDB που εκτελείται τοπικά.

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

Δώστε το URI σύνδεσης και το όνομα της σύνδεσης και, στη συνέχεια, πατήστε Αποθήκευση & Σύνδεση.

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

Δημιουργήστε έναν πελάτη React

Μπορείτε να βρείτε τον κωδικό αυτής της εφαρμογής σε αυτήν Αποθετήριο GitHub.

Για να εκκινήσετε γρήγορα μια εφαρμογή React, δημιουργήστε έναν φάκελο έργου στον τοπικό σας υπολογιστή, αλλάξτε σε αυτόν τον κατάλογο και εκτελέστε αυτές τις εντολές τερματικού για να δημιουργήσετε και να περιστρέψετε τον διακομιστή ανάπτυξης:

npx create-react-app my-app
cd my-app
npm έναρξη

Στη συνέχεια, εγκαταστήστε το Axios. Αυτό το πακέτο θα σας επιτρέψει να στείλετε αιτήματα HTTP στον διακομιστή σας Express.js backend για αποθήκευση δεδομένων στη βάση δεδομένων MongoDB.

npm εγκατάσταση axios

Δημιουργήστε μια φόρμα επίδειξης για τη συλλογή δεδομένων χρήστη

Ανοιξε το src/App.js αρχείο, διαγράψτε τον κωδικό React του boilerplate και αντικαταστήστε τον με το ακόλουθο:

εισαγωγή"./App.css";
εισαγωγή React, { useState } από'αντιδρώ';
εισαγωγή Αξιος από'αξιος';
λειτουργίαApp() {
συνθ [name, setName] = useState("")
συνθ [role, setRole] = useState("")


συνθ handleΥποβολή = (μι) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/ένθετο', {
 πλήρες όνομα: όνομα,
 εταιρείαΡόλος: ρόλος
 })
 }


ΕΠΙΣΤΡΟΦΗ (


"Εφαρμογή">
"Επικεφαλίδα εφαρμογής"> 
"Σύνδεση-φόρμα">


Όνομα</p>


 Όνομα κλάσης = "Ονομα"
 τύπος="κείμενο"
 placeholder="Ονομα ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Ρόλος Εταιρείας</p>


 Όνομα κλάσης = "Ρόλος"
 τύπος="κείμενο"
 κράτημα θέσης = "Ρόλος..."
 onChange={(e) => {setRole (e.target.value)}}
 />








εξαγωγήΠροκαθορισμένο Εφαρμογή?

Ας το αναλύσουμε:

  • Δηλώστε δύο καταστάσεις, ένα όνομα και μια κατάσταση ρόλου, για να διατηρήσετε τα δεδομένα χρήστη που συλλέγονται από τα πεδία εισαγωγής χρησιμοποιώντας το άγκιστρο useState.
  • ο onChange Η μέθοδος κάθε πεδίου εισαγωγής εκτελεί μια επανάκληση που χρησιμοποιεί τις μεθόδους κατάστασης για τη λήψη και αποθήκευση δεδομένων που υποβάλλει ο χρήστης μέσω της φόρμας.
  • Για την υποβολή των δεδομένων στον διακομιστή υποστήριξης, η συνάρτηση χειριστή onSubmit χρησιμοποιεί το Axios.post μέθοδος για την υποβολή των δεδομένων που διαβιβάζονται από τις καταστάσεις ως αντικείμενο στο τελικό σημείο του API υποστήριξης.

Για να δημιουργήσετε στυλ στη φόρμα που αποδόθηκε, προσθέστε τον ακόλουθο κώδικα στο αρχείο App.css.

* {
υλικό παραγεμίσματος: 0;
περιθώριο: 0;
μέγεθος κουτιού: περίγραμμα-κουτί;
}
σώμα {
γραμματοσειρά-οικογένεια: 'Πόπινς', Σανς σέριφ;
χρώμα του φόντου: #8EC1D6;
}


.logIn-form {
περιθώριο: 100pxαυτο;
πλάτος: 200px;
ύψος: 250px;
χρώμα του φόντου: #fff;
σύνορα-ακτίνα: 10px; 
}


.logIn-formΠ {
στοίχιση κειμένου: κέντρο;
μέγεθος γραμματοσειράς: 12px;
βάρος γραμματοσειράς: 600;
χρώμα: #B8BFC6;
υλικό παραγεμίσματος: 10px 10px;
}


.logIn-formεισαγωγή {
απεικόνιση: ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ;
πλάτος: 80%;
ύψος: 40px;
περιθώριο: 10pxαυτο;
σύνορο: 1pxστερεός#cccc;
σύνορα-ακτίνα: 5px;
υλικό παραγεμίσματος: 0 10px;
μέγεθος γραμματοσειράς: 16px;
χρώμα: μαύρος;
}
.logIn-formκουμπί {
χρώμα του φόντου: #8EC1D6;
χρώμα: #fff;
δρομέας: δείκτης;
μέγεθος γραμματοσειράς: 15px;
σύνορα-ακτίνα: 7 px;
υλικό παραγεμίσματος: 5px 10px;
σύνορο: κανένας;
}

Τώρα, περιστρέψτε τον διακομιστή ανάπτυξης για να ενημερώσετε τις αλλαγές και μεταβείτε σε αυτόν http://localhost: 3000 στο πρόγραμμα περιήγησής σας για προβολή αποτελεσμάτων.

Δημιουργήστε ένα Backend Express.js

Ένα backend Express λειτουργεί ως ενδιάμεσο λογισμικό μεταξύ του προγράμματος-πελάτη React και της βάσης δεδομένων MongoDB. Από τον διακομιστή, μπορείτε να ορίσετε τα σχήματα δεδομένων σας και να δημιουργήσετε τη σύνδεση μεταξύ του πελάτη και της βάσης δεδομένων.

Δημιουργήστε έναν διακομιστή ιστού Express και εγκαταστήστε αυτά τα δύο πακέτα:

npm εγκατάσταση mongoose cors

Το Mongoose είναι μια βιβλιοθήκη Object Data Modeling (ODM) για MongoDB και Node. Παρέχει μια απλοποιημένη μέθοδο βασισμένη σε σχήμα, για να μοντελοποιήσετε τα δεδομένα της εφαρμογής σας και να τα αποθηκεύσετε σε μια βάση δεδομένων MongoDB.

Το πακέτο CORS (Cross-Origin Resource Sharing) παρέχει έναν μηχανισμό για τον διακομιστή υποστήριξης και έναν πελάτη διεπαφής να επικοινωνούν και να διαβιβάζουν δεδομένα μέσω των τελικών σημείων API.

Δημιουργήστε ένα σχήμα δεδομένων

Δημιουργήστε έναν νέο φάκελο στον ριζικό κατάλογο του φακέλου του έργου του διακομιστή σας και ονομάστε τον μοντέλα. Σε αυτόν τον φάκελο, δημιουργήστε ένα νέο αρχείο: dataSchema.js.

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

Προσθέστε τον ακόλουθο κώδικα στο dataSchema.js:

συνθ μαγκούστα = απαιτώ('μαγκούστα');
συνθ ReactFormDataSchema = νέος μαγκούστα. Σχήμα({
 όνομα: {
 τύπος: Σειρά,
 απαιτείται: αληθής
 },
 ρόλος: {
 τύπος: Σειρά,
 απαιτείται: αληθής
 }
});
συνθ Χρήστης = mongoose.model('Χρήστης', ReactFormDataSchema);
μονάδα μέτρησης.exports = Χρήστης;

Αυτός ο κώδικας δημιουργεί ένα σχήμα Mongoose για ένα μοντέλο χρήστη. Αυτό το σχήμα καθορίζει τη δομή δεδομένων για τα δεδομένα χρήστη, συμπεριλαμβανομένου του ονόματος και του ρόλου του χρήστη. Στη συνέχεια, το σχήμα χρησιμοποιείται για τη δημιουργία ενός μοντέλου για τον χρήστη. Αυτό επιτρέπει στο μοντέλο να αποθηκεύει δεδομένα σε μια συλλογή MongoDB σύμφωνα με τη δομή που ορίζεται στο σχήμα.

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

Στη συνέχεια, ανοίξτε το index.js αρχείο στο φάκελο του έργου διακομιστή και προσθέστε αυτόν τον κώδικα:

συνθ εκφράζω = απαιτώ('εξπρές');
συνθ μαγκούστα = απαιτώ('μαγκούστα');
συνθ κορς = απαιτώ('κορς');
συνθ app = express();
συνθ Χρήστης= απαιτώ('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mongoose.connect('mongodb://localhost: 27017/reactdata', { useNewUrlParser: αληθής });


app.post('/εισάγετε', ασυγχρονισμός(απαιτ., ανταπ.) => {
συνθ FirstName = req.body.firstName
συνθ CompanyRole = req.body.companyRole


συνθ formData = νέος Χρήστης({
 Όνομα: Όνομα,
 ρόλος: Εταιρικός ρόλος
 })


δοκιμάστε {
αναμένω formData.save();
 res.send("εισαχθέντα δεδομένα..")
 } σύλληψη(λάθος) {
κονσόλα.log (σφάλμα)
 }
});


συνθ port = διεργασία.env. ΛΙΜΑΝΙ || 4000;
app.listen (port, () => {
κονσόλα.κούτσουρο(`Ο διακομιστής ξεκίνησε στη θύρα ${port}`);
});

Ας το αναλύσουμε:

  • Εκκινήστε τα Express, mongoose και CORS στον διακομιστή.
  • Το πακέτο Mongoose δημιουργεί τη σύνδεση με τη βάση δεδομένων MongoDB χρησιμοποιώντας το συνδέω-συωδεομαι μέθοδο που δέχεται τον τομέα URI και ένα αντικείμενο. Το URI είναι μια συμβολοσειρά σύνδεσης που χρησιμοποιείται για τη δημιουργία σύνδεσης με τη βάση δεδομένων MongoDB. Το αντικείμενο καθορίζει τη διαμόρφωση. Σε αυτήν την περίπτωση, περιέχει μια ρύθμιση για χρήση της πιο πρόσφατης μορφής αναλυτή URL.
  • Ο διακομιστής web ανταποκρίνεται κυρίως στα αιτήματα που προέρχονται από διαφορετικές διαδρομές με την κατάλληλη λειτουργία χειριστή. Για αυτήν την περίπτωση, ο διακομιστής έχει μια διαδρομή POST που λαμβάνει δεδομένα από τον πελάτη React, τα αποθηκεύει σε μια μεταβλητή και τα μεταβιβάζει στο εισαγόμενο μοντέλο δεδομένων.
  • Στη συνέχεια, ο διακομιστής χρησιμοποιεί ένα μπλοκ try-and-catch για να αποθηκεύσει και να αποθηκεύσει τα δεδομένα στη βάση δεδομένων MongoDB και αποσυνδέει τυχόν σφάλματα, εάν υπάρχουν.

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

Χρήση της στοίβας MERN για τη δημιουργία εφαρμογών

Η στοίβα MERN παρέχει ένα αποτελεσματικό και ισχυρό σύνολο εργαλείων για την κατασκευή εφαρμογών. Μπορείτε να δημιουργήσετε πλήρεις εφαρμογές πραγματικού κόσμου χρησιμοποιώντας MongoDB, Express, React και Node.js,

Το οικοσύστημα React παρέχει επίσης πακέτα για να σας βοηθήσει να εργαστείτε με φόρμες ιστού. Μερικά από τα πιο δημοφιλή είναι τα Formik, KendoReact Form και React Hook Form.