MongoDB, React, Node va Express (MERN) to'liq stack ilovasini tuzamiz

«Ma'badni ustunlar»

Men Front End dasturchisidan To'liq Stack Dasturchisiga aylantirmoqchi bo'lganimda, men bo'lishim uchun o'rganishim kerak bo'lgan barcha turli ko'nikmalar tushunchalarini o'z ichiga olgan maqola topishda qiynaldim.

Ma'lumotlar bazalarini bilish, zaxira tilini bilish va orqa tomonni o'zimning ilova dasturim bilan qanday bog'lash men hali bilmagan ko'nikmalar edi. Meni ushbu maqolani yaratishga undagan narsa: o'zim va boshqa dastur muhandislari uchun yordam berish uchun buni hal qilish.

Men butun kodning git-omboridagi havolasini maqolaning oxiriga qo'shdim, lekin repo-ni tekshirishdan oldin ushbu maqolani bosqichma-bosqich bajarishingizni maslahat beraman. Bu sizga darslikni yaxshiroq tushunishga yordam beradi. :)

Uni qurib bo'lganimizdan so'ng bizning dasturimiz qanday ko'rinishga ega bo'ladi.

Old qism bizning ma'lumotlar bazamizdagi joriy ma'lumotlarni ko'rishimizga imkon beradi. Shuningdek, u bizga yangi ma'lumotlarni qo'shish, mavjud ma'lumotlarni o'chirish va mavjud ma'lumotlarni yangilashga imkon beradi.

Biz uni hech narsadan quramiz. Biz o'z ma'lumotlar bazamizni o'rnatamiz, orqa uchini yerdan yaratamiz va oldingi uchini yalang'och minimal bilan o'rnatamiz.

Shunday qilib, o'zingizni bog'laning va kodlash barmoqlarini tayyorlang!

Birinchi narsalar birinchi

Loyihamizning asosiy katalogini yarataylik. Bu bizning dasturimizning old va orqa qismidagi ikkala kodni ushlab turadi.

mkdir fullstack_app && CD to'liqstack_app

Keyin, boshimizdan boshlaylik. Biz oldingi uchimizni yuklash uchun create-reaksiya-ilovadan foydalanamiz, ya'ni Webpack yoki Babel-ni sozlashdan tashvishlanmaymiz (chunki yaratish-reaktsiya-ilovalar buni barchasini sukut bo'yicha ajratadi). Agar sizda hali global miqyosda yaratish-reaktsiya qilish-ilovasi o'rnatilmagan bo'lsa, afsuslanmang, uni o'rnatish juda oson, shunchaki uni loyihamizning asosiy katalog buyruq satriga yozing.

npm i -g yaratish-reaksiya ilova

Shundan so'ng, biz hozirda reaksiya dasturini create-reaktiv-ilova (pun mo'ljallangan) yordamida yaratamiz. Buni amalga oshirish uchun buyruq satriga shunchaki yozing.

yaratish-reaktsiya ilova mijoz & & CD-mijoz

Ajax bilan so'rovlarni olish / joylashtirish uchun bizga Axios kerak bo'ladi. Shunday qilib, hozir o'rnatamiz:

npm i -S aksi

Uning tugashini kuting va keyin orqa tomonni tashkil qilish uchun davom eting, shunda keyinchalik orqa qismini qo'shib qo'yish oson bo'ladi.

Kompyuter foydalanuvchilari uchun:

del src \ App.css src \ App.test.js src \ index.css src \ logo.svg \

MAC foydalanuvchilari uchun:

rm src / App.css src / App.test.js src / index.css src / logo.svg

Bizning App.js faylimizni mijoz papkasida tahrirlashimiz va uni oddiy qilishiga imkon bering. Biz orqa tomonimiz tayyor bo'lgandan keyin ushbu faylni keyinchalik tahrirlaymiz.

Bundan tashqari, biz index.js-ni tahrirlashimiz va bitta satrdan kodni o'sha erdan olib tashlashimiz kerak. Faqat './index.css' importini olib tashlashimiz kerak; kodning bir qismi va biz endi reaktsiya dasturimizni ishga tushirishimiz mumkin.

Bosh ekranni boshlash uchun buyruq satriga shunchaki yozing.

npm boshlanishi

va brauzeringizga o'ting va http: // localhost: 3000 / ni kiriting. Endi bizning old tomonimiz ishlayotganini ko'rishingiz mumkin.

Buni zaxira qilib qo'ying

Orqamizni o'rnatish vaqti keldi. Asosiy katalogimizga qaytib boring va u erda bizning orqa katalogimizni yarataylik. Shuningdek biz ushbu katalogni ishga tushiramiz, shunda biz pack.json qurishga tayyormiz. Sizning terminalingiz pack.json uchun ba'zi ma'lumotlarni kiritishingizni so'raydi, tugallanguncha Enter tugmasini bosib turing.

mkdir & & CD disklari
n / soat start

Orqa tomon uchun bizning asosiy kodimiz bo'lib xizmat qiladigan yangi fayl yarating va uni server.js deb nomlang. Keyin unga quyidagini kiriting. Orqaga qaytish kodi juda aniq va asosiy, men buni shunchaki yaratdimki, yangi boshlanuvchilar kodning maqsadi haqida o'ylashdan ko'ra, uning murakkabligi haqida o'ylashlari shart emas. Keyin, ular boshlarini o'rab olishgandan so'ng, ularni osonlikcha boshqarish mumkin edi. Men tushunishni osonlashtirish uchun har qanday usulning yonida sharhlar qo'ydim.

Siz ma'lumotlar bazasi havolasi bizning orqa kodimizda allaqachon ishlatilganligini payqagan bo'lishingiz mumkin. Xavotir olmang, bu bizning maqolamizdagi keyingi qadam. Uni o'rnatish, shuningdek, o'tgan bir necha qadamlar kabi oson bo'ladi. Birinchidan, MongoDB atlasiga o'ting va u erda hisob yarating. MongoDB Atlas bizga 500 MB bepul MongoDB ma'lumotlar bazasidan foydalanish va masofadan turib foydalanishga imkon beradi. Shuningdek, u bulutda joylashgan. Bu bizning sanoatimizning hozirgi tendentsiyasi va bulutli ma'lumotlar bazasidan foydalanishga imkon beradigan ko'nikmalarga ega bo'lish bugungi kunda haqiqiy narsadir.

Hisob qaydnomangizni o'rnatganingizdan so'ng, hisobingizga kiring. O'zingizning klasteringiz va klasteringiz / ma'lumotlar bazangiz foydalanuvchilarini yaratishda veb-sayt tomonidan talab qilinadigan amallarni bajaring. O'zingizning mongoDB ma'lumotlar bazangizni yaratish uchun ro'yxat yoki qadamlar.

  1. Birinchi klasteringizni yarating.
  2. Birinchi ma'lumotlar bazasi foydalanuvchisini yarating.
  3. IP manzilingizni oq ro'yxatga oling (bizning holda, localhost: 3001)
  4. O'zingizning klasteringizni ulang.

Ma'lumotlar bazamizning ulanish satrini olishimiz kerak, shuning uchun 4-qadam uchun biz quyida ko'rsatilgan tarzda yaratilgan klasterimizning ulanish tugmasini bosishimiz kerak.

klaster aloqasi

Keyin modalning pastki qismida "ulanish usulini tanlang" ni bosing, "Ilovangizni ulang" -ni tanlang. Keyin, modal tomonidan string show nusxa ko'chiring.

ulanish qatori

Ushbu satr urini server.js faylingizga qo'ying. DbRoute o'zgaruvchisini toping va havolangizni ishonchli ma'lumot bilan bog'lang.

Endi bizning orqa tomonimiz manba kodiga qaytamiz. Endi biz ma'lumotlar bazamizni sozlaymiz, buni amalga oshirish uchun data.js. nomli fayl yaratamiz. Uning ichida quyidagi kod bo'lishi kerak.

Biz deyarli Bajarildi! Keling, bizning orqa qismimiz paketlarini va modullarini o'rnatamiz va biz borishga tayyormiz Bu satrni faqat buyruq satriga o'tkazing.

npm i -S mongoose express body-parser morgan korsalari

Endi biz orqa tomonimizdan foydalanishni boshlasak

tugun server.js

Konsolimizdan u tayyor va 3001 portni tinglayotganini ko'rishimiz mumkin. Keling, oldingi tomonga qaytib, MongoDB + Node.JS + Express.JS tizimimizga harakatlar yuborish uchun zarur bo'lgan foydalanuvchi interfeyslarini yaratishni boshlaymiz.

Hoy, ha !!!!

/Client/src/App.js sahifasiga qayting va quyidagi o'zgarishlarni qo'llang.

Va nihoyat, biz orqa tomonimizdagi pack.json-ni tahrirlaymiz va proksi-server qo'shib, orqa tomonimiz joylashgan portga ishora qilamiz.

Esda tuting, bu bizning oldingi paketimiz.json, shuning uchun u mijozlar katalogiga kiritilgan. U erda tahrirla.

Bu erda biz orqamizni va old tomonimizni bir vaqtning o'zida boshlashimiz uchun qilishimiz kerak bo'lgan narsa bor.

Buning uchun bizning loyihamizning asosiy katalogiga qayting va quyidagilarni kiriting:

ngm tashabb -y
npm i -S bir vaqtning o'zida

Bizning asosiy loyihamiz katalogidagi pack.json-ni tahrirlash. Uni quyidagicha o'zgartiring.

Bu erda siz "skriptlar" tugmachasini ko'rishingiz mumkin, "boshlash" tugmachasi biz o'rnatgan paketni, ayni paytda bir vaqtda ishlatiladigan paketdan foydalanadi. Ushbu to'plam bizga orqaga qaytish kodini quyidagi usullardan foydalanishga imkon beradi:

tugun server.js

Va oldingi tugatish kodi:

npm boshlanishi

Buni amalga oshirish uchun kaput ostida juda ko'p narsa sodir bo'ladi, ammo hozircha biz buni shunchaki tark etamiz va u ishlayotganidan xursandmiz! Endi bizning ilovamizni ishga tushirish uchun loyihamizning asosiy katalogiga o'ting va quyidagilarni kiriting:

npm boshlanishi

Bizning ilova va voila mavjud brauzer ochiladi! Biz o'zimizning MERN (FULL STACK) dasturini noldan yaratdik! U bilan o'ynash uchun bepul his eting. Ikkala tomonning turli xil tushunchalarini tushunish uchun uni qum qutisi sifatida ishlating.

Oh va yana bir narsa. Brauzeringizda CORS-ni yoqib qo'yganingizga ishonch hosil qiling, chunki biz o'z shaxsiy kompyuterimiz orqali o'z API-larimizga qo'ng'iroq qilmoqdamiz. Mana buni amalga oshirish uchun ajoyib plagin.

Va'da qilinganidek, bu erda git repo.

Bularning barchasi xalq, olqishlar!

Men aniq ko'rsatmalar berdim va iloji boricha ko'proq bilimlarni sizga, o'quvchiga etkazishga muvaffaq bo'ldim deb umid qilaman.

Agar siz buni foydali deb bilsangiz, bir oz chapak chalishni unutmang! Oh, uni ijtimoiy platformalarda ham ulashing! :)