آموزش عملیات CRUD در React.js با Node.js و MongoDB

0 481

در این مقاله قصد داریم نحوه انجام عملیات CRUD در react.js را به شما آموزش دهیم. تقریباً اکثر برنامه ها نیاز به انجام عملیات crud دارند. CRUD مخفف Create و Read ,Update ,Delete است.

به این برنامه ها MERN Stack هم گفته می شود، چون ما از تکنولوژی های MongoDB ,Express ,React ,Node.js استفاده می کنیم. در این برنامه کاربران می توانند اطلاعاتشان را ویرایش یا حذف کرده و همچنین آنها را مشاهده کنند و یا اینکه اطلاعات جدید را وارد برنامه بکنند.

سرفصل های این آموزش

  1. ری اکت چیست؟
  2. چرا باید از ری اکت استفاده کنیم؟
  3. چه کسانی از ری اکت استفاده می کنند؟
  4. آموزش MERN Stack
  5. عملیات CRUD در ری اکت
  6. نصب برنامه ری اکت
  7. پیکربندی مسیریابی در ری اکت
  8. ایجاد یک فرم بوت استرپ
  9. ارسال فرم
  10. ایجاد بک اند توسط Node.js
  11. تنظیم پایگاه داده MongoDB
  12. ساخت schema در MongoDB
  13. تعریف روت برای برنامه Node.js Express
  14. نصب کتابخانه axios و ارسال یک درخواست post
  15. نمایش داده های بک اند
  16. قابلیت های ویرایش و حذف اطلاعات
  17. حذف اطلاعات

ری اکت چیست؟

React.js یک کتابخانه مربوط به طراحی رابط کاربری بوده و یک فریم ورک کامل مانند انگولار نیست. ری اکت یک کتابخانه جاوا اسکریپت برای ساخت رابط کاربری است که توسط فیسبوک ساخته و پشتیبانی می شود. با مطالعه لینک زیر می توانید به تفاوت اساسی بین ری اکت و انگولار پی ببرید:

برای کسب اطلاع بیشتر درباره این کتابخانه به مستندات رسمی آن مراجعه کنید.

چرا باید از ری اکت استفاده کنیم؟

React.js به شما اجازه می دهد ظاهر برنامه تان را در هر نقطه از زمان مشخص کنید. به محض انجام تغییر در داده ها، ری اکت به طور خودکار تمام بروزرسانی های رابط کاربری را مدیریت می کند. هنگامی که داده ها تغییر می کند، ری اکت به طور ضمنی دکمه refresh را فشار می دهد و تنها آن بخشی که تغییر کرده را بروزرسانی می کند.

دلایل اصلی استفاده از ری اکت به شرح زیر است:

  • منحنی یادگیری سریع
  • امکان طراحی کامپوننت هایی با داشتن قابلیت استفاده مجدد از آنها
  • رندر سریع با DOM مجازی
  • انتزاع تمیز
  • Redux: یک کتابخانه مدیریت وضعیت برای رابط های کاربری پیچیده
  • ابزارهای عالی برای توسعه دهندگان
  • React Native: که می توانید برنامه های موبایل بومی مستقل از پلتفرم را برای اندروید و ios طراحی کنید.

چه کسانی از ری اکت استفاده می کنند؟

بجز فیسبوک و اینستاگرام، شرکت های زیادی از قبیل DropBox ،Paypal ،Netflix ،Airbnb و… از ری اکت استفاده می کنند.

آموزش MERN Stack

در این آموزش از تکنولوژی های زیر استفاده می کنیم.

  • Mac os Mojave
  • Node V10.11.0
  • NPM v6.4.1
  • MongoDB Shell V3.6.3
  • MongoDB V3.6.3
  • js v16.6.2

عملیات Crud در ری اکت

ترمینال را باز کرده و با دستور زیر یک برنامه جدید ری اکت ایجاد کنید.

نصب react.js

توصیه می کنیم این مطالب را هم بخوانید
1 از 16

در صورتی که هنگام کامپایل کدها با یک خطا مواجه شدید، یک فایل با نام .env در روت پروژه ایجاد کرده و کد زیر را در آن قرار دهید.

حال مرورگر را باز کرده و به آدرس localhost:3000 بروید.

اجرای reatc.js در مرورگر

حال با دستور زیر بوت استرپ 4 را نصب کنید.

فایل src/App.js را باز کرده و مانند زیر فایل css بوت استرپ را به آن import کنید.

پیکربندی مسیریابی ری اکت

دستورات زیر را برای نصب ماژول react-router-dom در ترمینال اجرا کنید.

در صورتی که مایل به کسب اطلاع بیشتر درباره ماژول react-router-dom هستید به مستندات رسمی آن مراجعه کنید.

فایل index.js را باز کرده و کامپوننت App.js را بین آبجکت BrowserRouter قرار دهید.

یک فولدر به نام Components داخل فولدر src ایجاد کنید و داخل این فولدر سه کامپوننت به نام های زیر قرار دهید:

  • create.compnent.js
  • edit.component.js
  • index.component.js
حال می خواهیم یک منوی پیمایشی به برنامه مان اضافه کنیم. برای اینکار کدهای زیر را در فایل App.js قرار دهید.
فایل را ذخیره کرده و به مرورگر برگردید

ساخت منوی پیمایشی در react.js

ساخت یک فرم بوت استرپ

فایل create.component.js را باز کرده و کدهای زیر را برای ساخت یک فرم بوت استرپ در آن قرار دهید.

ساخت یک فرم در بوت استرپ با React

ارسال فرم

همان طور که در بالا دیدید ما یک فرم با سه فیلد برای ورود اطلاعات ایجاد کردیم. این فیلد عبارتند از :

  1. نام شخصی (person name)
  2. نام سازمانی (business name)
  3. Gst Number

حال باید چهار متد برای بررسی تغییرات این فیلدها ایجاد کنیم و یک سری state برای آنها تنظیم کنیم.

همچنین این چهار متد یک درخواست post به سرور node express ارسال می کنند. حال ابتدا یک سازنده تعریف کرده و یک وضعیت (state) اولیه را برای آن تنظیم می کنیم، سپس این وضعیت را به رویداد های مختلف داخل سازنده متصل می کنیم.

سپس توابعی را برای بررسی تغییرات هر فیلد input تعریف می کنیم. به این ترتیب هنگامی که کاربر شروع به تایپ داخل این textbox ها بکند، state را مطابق با آن تنظیم می کنیم.

فرض کنید اگر کاربر نام شخصی اش را وارد textbox کند، آنگاه ما مقدار وضعیت مربوط به نام شخصی (person name) را تغییر می دهیم.

در نهایت هنگام ارسال فرم، مقادیر را از state گرفته و آن را توسط یک درخواست post به سرور ارسال می کنیم.

ایجاد back-end برنامه در Node.js

یک فولدر به نام api در روت پروژه ایجاد و با اجرای دستور زیر در ترمینال، فایل package.json را مقداردهی اولیه می کنیم.

حال وابستگی های Node.js را نصب می کنیم.

همچنین nodemon را به عنوان یک وابستگی توسعه (development Dependency) نصب کنید. با اینکار، با انجام هر تغییر در کدهای سمت سرور، نیازی به راه اندازی مجدد سرور نداریم.

حال داخل فولدر api یک فایل با نام server.js ایجاد کنید و کدهای زیر را در آن قرار دهید.

یک تب جدید در ترمینال باز کرده (در ویندوز، ترمینال قبلی را باز نگه داشته و یک ترمینال جدید باز کنید) و دستور زیر را در آن اجرا کنید.

همان طور که در تصویر زیر می بینید، سرور node در حال اجراست .

اجرای سرور node.js

تنظیم پایگاه داده MongoDB

من قبلاً MongoDB را روی سیستم عامل مک نصب کرده بودم. بنابراین با تایپ دستور زیر در ترمینال، سرور MongoDB را راه اندازی کنید.

در فولدر api یک فایل با نام DB.js ایجاد کرده و کدهای زیر را در آن قرار دهید.

در پایگاه داده محلی MongoDB من، username و password خالی است، اما در هنگام خروجی نهایی از برنامه، شما باید یک کاربر Admin ایجاد کرده و پایگاه داده را به آن کاربر نسبت دهید.

حال فایل DB.js را به فایل server.js، اضافه یا import کنید.

ساخت یک Mongoose Schema

در مرحله بعد، می خواهیم یک schema برای پایگاه داده MongoDB ایجاد کنیم.

برای اینکار یک فایل با نام business.model.js داخل فولدر api ایجاد کرده و کدهای زیر را در آن قرار دهید.

تعریف روت برای برنامه Node.js Express

کدهای زیر که مربوط به عملیات Crud است را در فایل business.model.js قرار دهید.

در بالا عملیات Crud را برای MongoDB تعریف کردیم، بنابراین هنگامی که درخواستی به سرور برسد، سرور آن درخواست را به منبع مناسب هدایت می کند. و با متد بالا عملیات مربوط به پایگاه داده اجرا شده و پاسخ به کلاینت ارسال می شود.

در اینجا ما از Mongoose ORM برای ذخیره، بروزرسانی و حذف داده ها از پایگاه داده ها استفاده می کنیم.

Mongoose یک ORM برای کار با پایگاه داده MongoDB است. حال باید این فایل را به فایل Server.js، اضافه یا import کنیم.در نهایت فایل Server.js ما باید مطابق زیر باشد:

نصب کتابخانه Axios و ارسال یک درخواست post

کتابخانه Axios را برای ارسال درخواست post در برنامه، نصب میکنیم.

حال یک درخواست post که شامل داده های فرم است را به سرور Node.js ارسال می کنیم. در اینجا داده ها به عنوان یک آبجکت ارسال می شوند، چون در بخش بک اند از یک تجزیه کننده بدنه (body parser) برای تجزیه داده ها از درخواست و ذخیره آن در پایگاه داده استفاده کرده ایم.

کدهای زیر را در فایل create.component.js قرار دهید.

حال مرورگر را باز کنید. یک سری اطلاعات در فرم وارد کرده و فرم را ارسال کنید. نتیجه را در محیط console مرورگر می بینید.

ساخت یک فرم برای درج اطلاعات در react

برای دیدن تصاویر ذخیره شده در پایگاه داده، باید یک Mongoshell را اجرا کنیم.

نمایش اطلاعات ذخیره شده درپایگاه داده mongoDB

نمایش داده های Back-End

کدهای زیر را در فایل index.component.js قرار دهید.

در بالا ما یک درخواست Get برای بازیابی داده ها از سرور Node.js ارسال کردیم.

همچنین کامپوننت TableRow.js را به فایل فوق import کردیم. حال کدهای زیر را در آن قرار دهید.

این کامپوننت مسئول نمایش سطرهای بازیابی شده از پایگاه داده است. فایل را ذخیره کرده و به آدرس localhost:3000/index بروید.

بازخوانی اطلاعات از MongoDB با Nodejs

قابلیت ویرایش و بروزرسانی

ابتدا یک Link به فایل TableRow.js اضافه می کنیم.

سپس کدهای زیر را به فایل edit.component.js اضافه کنید.

کاری که ما در اینجا انجام دادیم استفاده از متد چرخه حیات کامپوننت ها برای بازیابی داده ها از Api است.

داده های بازیابی شده باید برای انجام ویرایش روی آنها، وارد textbox ها شوند. فایل را ذخیره کنید و به صفحه edit مراجعه کنید.

اگر داده ها نمایش داده نمی شوند، اطمینان حاصل کنید که سرور Node.js در حال اجرا باشد.

فرم ویرایش اطلاعات در react.js

در بالا کدهای مربوط به بروزرسانی را هم نوشتیم. در این کدها توسط یک متدی که تعریف کردیم، با ارسال یک درخواست به سرور Node.js، داده هایی که توسط یک id مشخص شده اند را بروزرسانی می کنیم.

حذف داده ها

در این قسمت، قابلیت حذف داده ها را پیاده سازی می کنیم. برای اینکار متد delete را در فایل TableRow.js تعریف خواهیم کرد.

به این ترتیب آموزش انجام عملیات Crud در ری اکت یا آموزش MERN Stack مان به پایان رسید.

سورس کدهای این مقاله را می توانید از این آدرس گیت هاب دریافت کنید.

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.