القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

لطالما كانت قواعد البيانات العلائقية مثل MySQL خيار الانتقال إلى قاعدة البيانات. ومع ذلك ، فقد نمت شعبية قواعد بيانات NoSQL مثل MongoDB بسبب هيكلها المرن لتخزين البيانات وقدرتها على تخزين البيانات واستردادها بسرعة.

توفر قواعد البيانات هذه لغة استعلام بديلة يمكنك دمجها بسلاسة مع تطبيقات الويب والأجهزة المحمولة الحديثة. تابع القراءة لمعرفة كيفية تخزين بيانات React في قاعدة بيانات MongoDB.

ما المقصود بقاعدة بيانات NoSQL؟

NoSQL تعني ليس فقط SQL ، وهي قاعدة بيانات غير علائقية. لا يعتمد هذا النوع من قواعد البيانات على نموذج قاعدة البيانات العلائقية التقليدية. لا يحتوي على هيكل محدد لصف الأعمدة ويمكنه تخزين البيانات في مجموعة متنوعة من التنسيقات المختلفة ، مما يجعلها أكثر مرونة وقابلية للتوسع.

يتمثل الاختلاف الرئيسي بين NoSQL وقواعد البيانات العلائقية في أنه بدلاً من وجود صفوف وأعمدة ، تقوم قواعد بيانات NoSQL بتخزين البيانات في مستندات ذات بنية ديناميكية.

قم بإعداد قاعدة بيانات MongoDB

instagram viewer

MongoDB هي قاعدة بيانات NoSQL الأكثر شيوعًا. إنها قاعدة بيانات مفتوحة المصدر تخزن البيانات في مستندات تشبه JSON (جداول) داخل مجموعات (قواعد بيانات).

إليك ما تبدو عليه بنية مستند MongoDB البسيطة:

{
 الاسم الأول: "أندرو" ،
 الدور: "Backend Developer"
}

للبدء ، عليك أولاً إنشاء قاعدة بيانات MongoDB. بمجرد الانتهاء من تكوين MongoDB ، افتح تطبيق MongoDB Compass. ثم ، انقر فوق اتصال جديد لإنشاء اتصال بخادم MongoDB الذي يعمل محليًا.

إذا لم يكن لديك حق الوصول إلى أداة MongoDB Compass GUI ، فيمكنك استخدام ملف أداة MongoDB shell لإنشاء قاعدة بيانات والمجموعة.

أدخل عنوان URI للاتصال واسم الاتصال ، ثم اضغط على حفظ والاتصال.

أخيرًا ، انقر فوق الزر "إنشاء قاعدة بيانات" ، واملأ اسم قاعدة البيانات ، وقم بتوفير اسم مجموعة لمجموعة تجريبية.

قم بإنشاء عميل React

يمكنك العثور على رمز هذا التطبيق في ملف مستودع جيثب.

لتشغيل تطبيق React بسرعة ، قم بإنشاء مجلد مشروع على جهازك المحلي ، وقم بالتغيير إلى هذا الدليل ، وقم بتشغيل أوامر المحطة الطرفية هذه لإنشاء خادم التطوير وتشغيله:

npx إنشاء التطبيق الخاص بي
cd بلدي التطبيق
بدء npm

بعد ذلك ، قم بتثبيت Axios. ستمكنك هذه الحزمة من إرسال طلبات HTTP إلى خادم Express.js الخلفي لتخزين البيانات في قاعدة بيانات MongoDB.

npm تثبيت أكسيوس

قم بإنشاء نموذج عرض لتجميع بيانات المستخدم

افتح ال src / App.js ملف ، احذف كود React boilerplate ، واستبدله بما يلي:

يستورد"./App.css";
يستورد رد فعل ، {useState} من'تتفاعل';
يستورد أكسيوس من"أكسيوس";
وظيفةبرنامج() {
مقدار ثابت [name، setName] = useState ("")
مقدار ثابت [role، setRole] = useState ("")


مقدار ثابت مقبض (ه) => {
 e.preventDefault () ؛


 Axios.post (' http://localhost: 4000 / إدراج ', {
 الاسم الكامل: الاسم ،
 الشركة الدور: الدور
 })
 }


يعود (


"برنامج">
"عنوان التطبيق"> 
"نموذج تسجيل الدخول">


الاسم الاول </p>


 className = "اسم"
 اكتب ="نص"
 نائب ="الاسم الأول ..."
 onChange = {(e) => {setName (e.target.value)}}
 />




 دور الشركة </p>


 className = "دور"
 اكتب ="نص"
 نائب = "دور..."
 onChange = {(e) => {setRole (e.target.value)}}
 />








يصدّرتقصير برنامج؛

دعنا نقسمها:

  • قم بتعريف حالتين ، اسم وحالة دور ، للاحتفاظ ببيانات المستخدم التي تم جمعها من حقول الإدخال باستخدام الخطاف useState.
  • ال على التغيير تقوم طريقة كل حقل إدخال بتشغيل رد اتصال يستخدم أساليب الحالة لالتقاط وتخزين البيانات التي يرسلها المستخدم عبر النموذج.
  • لإرسال البيانات إلى خادم الواجهة الخلفية ، تستخدم وظيفة معالج onSubmit الامتداد Axios.post طريقة لإرسال البيانات التي تم تمريرها من الحالات ككائن إلى نقطة نهاية واجهة API الخلفية.

لتصميم النموذج الذي تم تقديمه ، أضف التعليمات البرمجية التالية إلى ملف App.css.

* {
حشوة: 0;
هامِش: 0;
تحجيم الصندوق: مربع الحدود;
}
جسم {
خط العائلة: 'بوبينز', بلا الرقيق;
لون الخلفية: # 8EC1D6;
}


.نموذج تسجيل الدخول {
هامِش: 100مقصفآلي;
عرض: 200مقصف;
ارتفاع: 250مقصف;
لون الخلفية: #fff;
نصف قطر الحد: 10مقصف; 
}


.نموذج تسجيل الدخولص {
محاذاة النص: مركز;
حجم الخط: 12مقصف;
وزن الخط: 600;
لون: # B8BFC6;
حشوة: 10مقصف 10مقصف;
}


.نموذج تسجيل الدخولمدخل {
عرض: حاجز;
عرض: 80%;
ارتفاع: 40مقصف;
هامِش: 10مقصفآلي;
حدود: 1مقصفصلب#ccc;
نصف قطر الحد: 5مقصف;
حشوة: 0 10مقصف;
حجم الخط: 16مقصف;
لون: أسود;
}
.نموذج تسجيل الدخولزر {
لون الخلفية: # 8EC1D6;
لون: #fff;
المؤشر: المؤشر;
حجم الخط: 15مقصف;
نصف قطر الحد: 7 بكسل;
حشوة: 5مقصف 10مقصف;
حدود: لا أحد;
}

الآن ، قم بتدوير خادم التطوير لتحديث التغييرات والانتقال إلى http://localhost: 3000 على متصفحك لعرض النتائج.

إنشاء خلفية Express.js

تعمل Express backend كبرنامج وسيط بين عميل React وقاعدة بيانات MongoDB. من الخادم ، يمكنك تحديد مخططات البيانات الخاصة بك وإنشاء اتصال بين العميل وقاعدة البيانات.

قم بإنشاء خادم ويب سريع وقم بتثبيت هاتين الحزمتين:

npm تثبيت كور النمس

Mongoose هي مكتبة نمذجة بيانات الكائن (ODM) لـ MongoDB والعقدة. يوفر طريقة مبسطة تعتمد على المخطط ، لنمذجة بيانات التطبيق وتخزينها في قاعدة بيانات MongoDB.

توفر حزمة CORS (Cross-Origin Resource Sharing) آلية لخادم الواجهة الخلفية وعميل الواجهة الأمامية للاتصال وتمرير البيانات عبر نقاط نهاية API.

قم بإنشاء مخطط بيانات

قم بإنشاء مجلد جديد في الدليل الجذر لمجلد مشروع الخادم الخاص بك وقم بتسميته عارضات ازياء. في هذا المجلد ، قم بإنشاء ملف جديد: dataSchema.js.

يمثل المخطط ، في هذه الحالة ، البنية المنطقية لقاعدة البيانات الخاصة بك. يحدد المستندات (السجلات) والحقول (الخصائص) التي تشكل المجموعات داخل قاعدة البيانات.

أضف الكود التالي إلى dataSchema.js:

مقدار ثابت النمس = يتطلب('النمس');
مقدار ثابت ReactFormDataSchema = جديد النمس. مخطط({
 اسم: {
 يكتب: خيط,
 مطلوب: حقيقي
 },
 دور: {
 يكتب: خيط,
 مطلوب: حقيقي
 }
});
مقدار ثابت المستخدم = mongoose.model ('مستخدم'، ReactFormDataSchema) ؛
وحدة.exports = المستخدم ؛

ينشئ هذا الرمز مخطط النمس لنموذج المستخدم. يحدد هذا المخطط بنية البيانات لبيانات المستخدم ، بما في ذلك اسم المستخدم ودوره. ثم يتم استخدام المخطط لإنشاء نموذج للمستخدم. يسمح هذا للنموذج بتخزين البيانات في مجموعة MongoDB وفقًا للبنية المحددة في المخطط.

قم بإعداد الخادم السريع

بعد ذلك ، افتح ملف index.js ملف في مجلد مشروع الخادم ، وأضف هذا الرمز:

مقدار ثابت صريح = يتطلب('يعبر');
مقدار ثابت النمس = يتطلب('النمس');
مقدار ثابت كور = يتطلب("كورس");
مقدار ثابت التطبيق = صريح () ؛
مقدار ثابت المستخدم = يتطلب("./models/ReactDataSchema")
app.use (express.json ()) ؛
app.use (cors ()) ؛


mongoose.connect ("mongodb: // localhost: 27017 / رد بيانات", { useNewUrlParser: حقيقي });


app.post ('/إدراج', غير متزامن(مطلوب ، الدقة) => {
مقدار ثابت الاسم الأول = req.body.firstName
مقدار ثابت CompanyRole = req.body.companyRole


مقدار ثابت FormData = جديد مستخدم({
 سمى الاسم الاول،
 الدور: دور الشركة
 })


يحاول {
انتظر formData.save () ،
 res.send ("البيانات المدرجة ..")
 } يمسك(يخطئ) {
وحدة التحكم.log (يخطئ)
 }
});


مقدار ثابت المنفذ = process.env. بورت || 4000;
app.listen (المنفذ ، () => {
وحدة التحكم.سجل(بدأ الخادم في المنفذ $ {منفذ}`);
});

دعنا نقسمها:

  • تهيئة Express و mongoose و CORS في الخادم.
  • تنشئ حزمة Mongoose الاتصال بقاعدة بيانات MongoDB باستخدام ملحق يتصل الطريقة التي تأخذ في مجال URI وكائن. URI عبارة عن سلسلة اتصال تستخدم لإنشاء اتصال بقاعدة بيانات MongoDB. يحدد الكائن التكوين ؛ في هذه الحالة ، يحتوي على إعداد لاستخدام أحدث شكل من محلل URL.
  • يستجيب خادم الويب بشكل أساسي للطلبات الواردة من طرق مختلفة بوظيفة المعالج المناسبة. في هذه الحالة ، يحتوي الخادم على مسار POST يستقبل البيانات من عميل React ، ويخزنها في متغير ، ويمررها إلى نموذج البيانات المستوردة.
  • يستخدم الخادم بعد ذلك كتلة try-and-catch لتخزين البيانات وحفظها في قاعدة بيانات MongoDB ، وتسجيل أي أخطاء ، إن وجدت.

أخيرًا ، قم بتدوير خادم التطوير لتحديث التغييرات والتوجه إلى عميل React في متصفحك. اكتب أي بيانات في النموذج ، واعرض النتائج في قاعدة بيانات MongoDB.

استخدام مكدس MERN لإنشاء التطبيقات

يوفر مكدس MERN مجموعة أدوات فعالة وقوية لبناء التطبيقات. يمكنك إنشاء تطبيقات واقعية كاملة باستخدام MongoDB و Express و React و Node.js ،

يوفر نظام React البيئي أيضًا حزمًا لمساعدتك في العمل مع نماذج الويب. ومن أشهرها Formik و KendoReact Form و React Hook Form.