קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

מסדי נתונים יחסיים כמו MySQL היו באופן מסורתי בחירת מסד הנתונים. עם זאת, מסדי נתונים של NoSQL כמו MongoDB גדלו בפופולריותם בשל המבנה הגמיש שלהם לאחסון נתונים והיכולת שלהם לאחסן ולאחזר נתונים במהירות.

מסדי נתונים אלה מציעים שפת שאילתה חלופית שתוכל לשלב בצורה חלקה עם אפליקציות אינטרנט וניידים מודרניות. המשך לקרוא כדי ללמוד כיצד לאחסן נתוני React במסד נתונים של MongoDB.

מהו מסד נתונים NoSQL?

NoSQL מייצג לא רק SQL, מסד נתונים לא יחסי. סוג זה של מסד נתונים אינו מסתמך על מודל מסד הנתונים היחסי המסורתי. אין לו מבנה עמודות-שורות מוגדר והוא יכול לאחסן נתונים במגוון פורמטים שונים, מה שהופך אותו לגמיש וניתן להרחבה יותר.

ההבדל העיקרי בין NoSQL לבין מסדי נתונים יחסיים הוא שבמקום להחזיק שורות ועמודות, מסדי נתונים של NoSQL מאחסנים נתונים במסמכים, בעלי מבנה דינמי.

הגדר מסד נתונים של MongoDB

MongoDB הוא מסד הנתונים הפופולרי ביותר של NoSQL. זהו מסד נתונים בקוד פתוח המאחסן נתונים במסמכים דמויי JSON (טבלאות) בתוך אוספים (מסדי נתונים).

instagram viewer

כך נראה מבנה מסמכי MongoDB פשוט:

{
 שם פרטי: 'אנדרו',
 תפקיד: 'מפתח אחורי'
}

כדי להתחיל, אתה צריך קודם כל הגדר מסד נתונים 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 שלך כדי לאחסן נתונים במסד הנתונים MongoDB שלך.

npm להתקין אקסיות

צור טופס הדגמה לאיסוף נתוני משתמש

פתח את ה src/App.js קובץ, מחק את קוד ה-boilerplate React, והחלף אותו בקוד הבא:

יְבוּא'./App.css';
יְבוּא תגובה, { useState } מ'לְהָגִיב';
יְבוּא אקסיוס מ'אקסיות';
פוּנקצִיָהאפליקציה() {
const [name, setName] = useState("")
const [role, setRole] = useState("")


const handleSubmit = (ה) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/הכנס', {
 שם מלא: שם,
 חברה תפקיד: תפקיד
 })
 }


לַחֲזוֹר (


"אפליקציה">
"כותרת אפליקציה"> 
"טופס כניסה">


שם פרטי</p>


 className = "שֵׁם"
 סוג="טֶקסט"
 מציין מיקום="שם פרטי ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 תפקיד החברה</p>


 className = "תַפְקִיד"
 סוג="טֶקסט"
 מציין מיקום = "תַפְקִיד..."
 onChange={(e) => {setRole (e.target.value)}}
 />








יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בוא נפרק את זה:

  • הכריז על שני מצבים, שם ומצב תפקיד, כדי להחזיק את נתוני המשתמש שנאספו משדות הקלט באמצעות ה-useState hook.
  • ה בשינוי שיטה של ​​כל שדה קלט מפעילה התקשרות חוזרת המשתמשת בשיטות המדינה כדי ללכוד ולאחסן נתונים שהמשתמש שולח באמצעות הטופס.
  • כדי לשלוח את הנתונים לשרת הקצה העורפי, פונקציית המטפל onSubmit משתמשת ב- Axios.post שיטה להגשת הנתונים המועברים מהמדינות כאובייקט לנקודת הקצה של ממשק API.

כדי לסגנן את הטופס המעובד, הוסף את הקוד הבא לקובץ App.css.

* {
ריפוד: 0;
שולים: 0;
גודל קופסא: תיבת גבול;
}
גוּף {
משפחת גופן: 'פופינס', פונט סאנס סריף;
צבע רקע: #8EC1D6;
}


.login-form {
שולים: 100פיקסליםאוטומטי;
רוֹחַב: 200פיקסלים;
גוֹבַה: 250פיקסלים;
צבע רקע: #fff;
גבול-רדיוס: 10פיקסלים; 
}


.login-formע {
יישור טקסט: מֶרְכָּז;
גודל גופן: 12פיקסלים;
משקל גופן: 600;
צֶבַע: #B8BFC6;
ריפוד: 10פיקסלים 10פיקסלים;
}


.login-formקֶלֶט {
לְהַצִיג: לַחסוֹם;
רוֹחַב: 80%;
גוֹבַה: 40פיקסלים;
שולים: 10פיקסליםאוטומטי;
גבול: 1פיקסליםמוצק#ccc;
גבול-רדיוס: 5פיקסלים;
ריפוד: 0 10פיקסלים;
גודל גופן: 16פיקסלים;
צֶבַע: שָׁחוֹר;
}
.login-formלַחְצָן {
צבע רקע: #8EC1D6;
צֶבַע: #fff;
סַמָן: מַצבִּיעַ;
גודל גופן: 15פיקסלים;
גבול-רדיוס:7 פיקסלים;
ריפוד: 5פיקסלים 10פיקסלים;
גבול: אף אחד;
}

כעת, סובב את שרת הפיתוח כדי לעדכן את השינויים ולנווט אליו http://localhost: 3000 בדפדפן שלך כדי לצפות בתוצאות.

צור Backend של Express.js

קצה אחורי של Express פועל כתווך בין לקוח React שלך למסד הנתונים של MongoDB. מהשרת, אתה יכול להגדיר את סכימות הנתונים שלך וליצור את החיבור בין הלקוח למסד הנתונים.

צור שרת אינטרנט אקספרס והתקן את שתי החבילות האלה:

npm להתקין Mongoose Cors

Mongoose היא ספריית Object Data Modeling (ODM) עבור MongoDB ו-Node. הוא מספק שיטה פשוטה מבוססת סכימה, למודל של נתוני היישום שלך ולאחסן אותם במסד נתונים MongoDB.

חבילת CORS (Cross-Origin Resource Sharing) מספקת מנגנון לשרת הקצה האחורי וללקוח החזיתי לתקשר ולהעביר נתונים דרך נקודות הקצה של ה-API.

צור סכימת נתונים

צור תיקיה חדשה בספריית השורש של תיקיית פרויקט השרת שלך ושמה לה דגמים. בתיקייה זו, צור קובץ חדש: dataSchema.js.

סכימה, במקרה זה, מייצגת את המבנה הלוגי של מסד הנתונים שלך. הוא מגדיר את המסמכים (רשומות) והשדות (מאפיינים) המרכיבים את האוספים בתוך מסד הנתונים.

הוסף את הקוד הבא ל-dataSchema.js:

const נמיה = לִדרוֹשׁ('נְמִיָה');
const ReactFormDataSchema = חָדָשׁ נְמִיָה. סכֵימָה({
 שם: {
 סוּג: חוּט,
 נדרש: נָכוֹן
 },
 תפקיד: {
 סוּג: חוּט,
 נדרש: נָכוֹן
 }
});
const משתמש = mongoose.model('מִשׁתַמֵשׁ', ReactFormDataSchema);
מודול.exports = משתמש;

קוד זה יוצר סכימת Mongoose עבור מודל משתמש. סכימה זו מגדירה את מבנה הנתונים עבור נתוני המשתמש, כולל השם והתפקיד של המשתמש. לאחר מכן, הסכימה משמשת ליצירת מודל עבור המשתמש. זה מאפשר למודל לאחסן נתונים באוסף MongoDB לפי המבנה המוגדר ב- Schema.

הגדר את שרת האקספרס

לאחר מכן, פתח את index.js קובץ בתיקיית פרויקט השרת, והוסף את הקוד הזה:

const express = לִדרוֹשׁ('אֶקְסְפּרֶס');
const נמיה = לִדרוֹשׁ('נְמִיָה');
const cors = לִדרוֹשׁ('קורס');
const app = express();
const משתמש= לִדרוֹשׁ('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mongoose.connect('mongodb://localhost: 27017/reactdata', { השתמש ב-NewUrlParser: נָכוֹן });


app.post('/לְהַכנִיס', אסינכרון(req, res) => {
const FirstName = req.body.firstName
const CompanyRole = req.body.companyRole


const formData = חָדָשׁ מִשׁתַמֵשׁ({
 שם: שם פרטי,
 תפקיד: תפקיד חברה
 })


לְנַסוֹת {
לְהַמתִין formData.save();
 res.send("נתונים הוכנסו..")
 } לתפוס(שגיאה) {
לְנַחֵם.log (שגיאה)
 }
});


const port = process.env. PORT || 4000;
app.listen (פורט, () => {
לְנַחֵם.עֵץ(`השרת התחיל ביציאה ${port}`);
});

בוא נפרק את זה:

  • אתחול אקספרס, נמייה ו-CORS בשרת.
  • החבילה Mongoose מייצרת את החיבור למסד הנתונים MongoDB באמצעות לְחַבֵּר שיטה שלוקחת את תחום ה-URI ואובייקט. ה-URI הוא מחרוזת חיבור המשמשת ליצירת חיבור עם מסד הנתונים של MongoDB. האובייקט מציין תצורה; במקרה זה, הוא מכיל הגדרה לשימוש בצורה החדשה ביותר של מנתח URL.
  • שרת האינטרנט מגיב בעיקר לבקשות המגיעות ממסלולים שונים עם פונקציית המטפל המתאימה. במקרה זה, לשרת יש מסלול POST שמקבל נתונים מלקוח React, מאחסן אותם במשתנה ומעביר אותם למודל הנתונים המיובאים.
  • לאחר מכן, השרת משתמש בבלוק נסיון ותפוס כדי לאחסן ולשמור את הנתונים במסד הנתונים של MongoDB, ומתנתק כל שגיאה, אם בכלל.

לבסוף, סובב את שרת הפיתוח כדי לעדכן את השינויים ועבור ללקוח React שלך בדפדפן שלך. הקלד נתונים כלשהם בטופס, והצג את התוצאות במסד הנתונים של MongoDB.

שימוש בערימת MERN לבניית יישומים

מחסנית MERN מספקת ערכת כלים יעילה ועוצמתית לבניית יישומים. אתה יכול ליצור יישומים מלאים בעולם האמיתי באמצעות MongoDB, Express, React ו-Node.js,

המערכת האקולוגית של React מספקת גם חבילות שיעזרו לך לעבוד עם טפסי אינטרנט. כמה מהפופולריים ביותר הם Formik, KendoReact Form ו-React Hook Form.