Node.js یک محیط زمان اجرا است که به شما امکان می دهد کد جاوا اسکریپت را در سمت سرور برای ساخت برنامه های سمت سرور اجرا کنید. برای ایجاد برنامه های سریع و مقیاس پذیر به خوبی کار می کند.

در این مقاله، من از یک برنامه مدیریت رویداد ساده به عنوان مثال استفاده خواهم کرد تا به شما نشان دهم چگونه با استفاده از Node.js، Express.js و MongoDB یک برنامه بسازید.

در پایان، می‌دانید که چگونه یک پروژه Node.js را راه‌اندازی کنید، یک سرور با Express.js ایجاد کنید، صفحات پویا را با جاوا اسکریپت جاسازی شده نشان دهید، و به یک پایگاه داده MongoDB متصل شوید تا داده‌های خود را مدیریت کنید.

آنچه شما یاد خواهید گرفت

راه اندازی یک پروژه Node.js

ایجاد سرور با Express.js

رندر کردن صفحات پویا با ejs

اتصال به پایگاه داده MongoDB

ایجاد مدل ها و طرحواره ها برای داده های شما

رسیدگی به درخواست ها و پاسخ های HTTP

فهرست مطالب

محیط توسعه خود را تنظیم کنید

سرور را تنظیم کنید

Express.js را نصب و راه اندازی کنید

یک قالب پویا ایجاد کنید

داده های خود را در MongoDB ذخیره کنید

به پایگاه داده متصل شوید

یک مدل برای ساختار سند ایجاد کنید

صفحات HTML ایجاد کنید

ایجاد جزئی

یک فایل متغیر محیطی ایجاد کنید

مراحل بعدی

نتیجه

پیش نیازها

Node.js روی سیستم شما نصب شده است.

درک خوبی از MongoDB .

ویرایشگر کدی که ترجیح می دهید، مانند Visual Studio Code یا Sublime Text .

مرحله 1: محیط توسعه خود را تنظیم کنید

Node.js و npm را نصب کنید

ابتدا باید Node.js را از nodejs.org دانلود و نصب کنید. سپس می توانید نصب را با اجرای: node -v و npm -v تأیید کنید.

راه اندازی یک پروژه جدید

یک دایرکتوری جدید برای پروژه خود ایجاد کنید. سپس پروژه را با npm: npm init -y در ترمینال خود مقداردهی کنید.

 mkdir event-app cd event-app npm init -y 

اجرای npm init -y فایل package.json را همانطور که در بالا نشان داده شده است ایجاد می کند. این فایل بسیار مهم است. تمام کتابخانه های شخص ثالث (وابستگی ها) مورد نیاز برای برنامه شما را ذخیره و ردیابی می کند.

مرحله 2: سرور را راه اندازی کنید

برای راه اندازی سرور خود، فایلی به نام server.js یا app.js ایجاد کنید. اینها اسامی رایج هستند. آنها به دلیل ماهیت توصیفی خود استفاده می شوند. اما، شما می توانید نام فایل را هر چه ترجیح می دهید.

فایل server.js برای ایجاد سروری استفاده می شود که برای مدیریت، کنترل و مسیریابی به صفحه ضروری در برنامه ما استفاده می شود.

مرحله 3: Express.js را نصب و راه اندازی کنید

Express.js یک چارچوب برنامه کاربردی وب محبوب برای Node.js و یک کتابخانه شخص ثالث است که ما در برنامه خود از آن استفاده می کنیم.

Express مدیریت و تعریف مسیرهای مختلف برای درخواست های HTTP را ساده می کند. این به شما امکان می دهد مسیریابی برنامه را مدیریت کرده و آن را به سرور متصل کنید.

برای استفاده از Express:

Express.js را با اجرای دستور زیر در ترمینال خود نصب کنید:

 npm install express

به Express در فایل server.js خود نیاز دارید.

 const express = require('express')

Express را راه اندازی کنید تا بتوانید از آن در برنامه خود استفاده کنید.

 const app = express()

یک مسیر مسیریابی برای دریافت درخواست HTTP ایجاد کنید.

 //routing path app.get('/', (req, res) => { res.send('Hello World!'); });

در نهایت، باید اطمینان حاصل کنیم که اتصال به سرور به درستی تنظیم شده است. وقتی سرور را در ترمینال راه اندازی می کنیم، در مرورگر باز می شود.

برای این کار از متد listen() استفاده کنید.

 // Start the server app.listen(3000, () => { console.log('Server started on port 3000'); });

این متد به درخواست های سرور listen() می دهد.

در اینجا فرآیند کد کامل است:

 const express = require('express'); // Next initialize the application const app = express(); // routing path app.get('/', (req, res) => { res.send('Hello World!'); }); // Start the server app.listen(3000, () => { console.log('Server started on port 3000'); });

توجه: مسیر مسیریابی بالا فقط برای مقاصد آزمایشی برای تأیید کار و اتصال سرور بود. ما یک فایل متفاوت برای برنامه رویدادی که ایجاد می کنیم ارائه خواهیم کرد.

با نصب Express.js در برنامه شما، اکنون می توانید سروری ایجاد کنید که تمام مسیریابی و اتصالات شما را مدیریت کند.

برای راه اندازی سرور، به ترمینال خود بروید.

از کلیدواژه node استفاده کنید، سپس --watch را تایپ کنید، یک پرچم برای شروع و هر زمان که تغییراتی ایجاد کردید سرور را به طور خودکار راه اندازی مجدد کنید:

 node --watch server.js

یا می توانید nodemon برای همین منظور نصب کنید. Nodemon تغییرات دایرکتوری را شناسایی کرده و برنامه شما را مجددا راه اندازی می کند.

 npm install -g nodemon

سپس سرور خود را با استفاده از:

 nodemon server.js

مرحله 4: یک الگوی پویا ایجاد کنید

برای ارائه کد HTML در مرورگر با استفاده از Node.js به یک موتور قالب نیاز داریم. ما از ejs (جاوا اسکریپت جاسازی شده) برای این آموزش استفاده خواهیم کرد، اما موارد دیگری مانند Pug (که قبلا به عنوان Jade شناخته می شد) و Express Handlebar وجود دارند که HTML را نیز بر روی سرور ارائه می دهند.

ejs به شما امکان می دهد جاوا اسکریپت را در HTML برای ایجاد صفحات وب پویا جاسازی کنید.

برای نصب ejs ، اجرا کنید:

 npm install ejs

برای راه اندازی ejs در server.js ، ejs به عنوان موتور قالب مورد نیاز و تنظیم کنید:

به الگوی ejs در برنامه ما" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/07/image-51.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2024/07/image-51.png 1000w, https://www.freecodecamp.org/news/content/images/size/w1600/2024/07/image-51.png 1600w, https://www.freecodecamp.org/news/content/images/2024/07/image-51.png 1920w" sizes="(min-width: 1200px) 1200px" width="1920" height="1079" loading="lazy">

 const express = require('express'); const app = express(); app.set('view engine', 'ejs');

با این تنظیمات، اکنون می توانید رندر پویا کد HTML را در برنامه Node.js خود فعال کنید.

مرحله 5: داده های خود را در MongoDB ذخیره کنید

برای ذخیره داده هایی که برای برنامه خود ایجاد می کنید، از MongoDB استفاده خواهید کرد.

MongoDB یک پایگاه داده "نه فقط SQL" (NoSQL) است که برای ذخیره مجموعه اسناد طراحی شده است. پایگاه داده های سنتی SQL داده ها را در جداول سازماندهی می کنند، اما MongoDB برای مدیریت حجم زیادی از داده ها بهینه شده است.

برای مطالعه بیشتر در این مورد، این مقاله را تحلیل کنید .

مرحله 6: به پایگاه داده متصل شوید

اکنون باید به پایگاه داده ای که MongoDB برای این آموزش خواهد بود متصل شویم.

استفاده از MongoDB یک منبع یاب یکنواخت (URL) را برای اتصال به برنامه در اختیار شما قرار می دهد. این URL شما را به هم متصل می کند و به عنوان یک ارتباط بین پایگاه داده و برنامه شما عمل می کند.

نحوه دریافت URL

برای دریافت URL، این مراحل ساده را دنبال کنید:

ثبت نام/ورود به سیستم : به وب سایت MongoDB بروید و برای یک حساب ثبت نام کنید یا اگر قبلاً دارید وارد شوید.

ایجاد یک خوشه : پس از ورود به سیستم، یک خوشه جدید ایجاد کنید. با این کار پایگاه داده شما راه اندازی می شود.

اتصال به خوشه خود : پس از ایجاد خوشه، روی دکمه «اتصال» کلیک کنید.

یک روش اتصال را انتخاب کنید : "Connect your application" را انتخاب کنید.

رشته اتصال را کپی کنید : MongoDB یک رشته اتصال (URL) مانند زیر ارائه می دهد:

 mongodb+srv://<username>:<password>@cluster0.mongodb.net/<dbname>?retryWrites=true&w=majority

6. Placeholders را جایگزین کنید : <username> ، <password> و <dbname> را با نام کاربری، رمز عبور و نام پایگاه داده واقعی خود جایگزین کنید.

اکنون که URL را دارید، می توانید به راحتی به پایگاه داده خود متصل شوید.

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

Mongoose چیست؟

Mongoose یک کتابخانه جاوا اسکریپت است که کار با MongoDB را در محیط Node.js آسان‌تر می‌کند. این یک راه ساده برای مدل سازی داده های شما ارائه می دهد. می‌توانید طرحواره‌ها را تعریف کنید، اعتبارسنجی داده‌ها را انجام دهید و کوئری‌ها را نیز بسازید.

چگونه یک ارتباط برقرار کنیم

MongoDB قبلاً یک URL برای اتصال به شما ارائه کرده است. اکنون از Mongoose برای ارسال اسناد خود به پایگاه داده استفاده خواهید کرد.

برای استفاده از Mongoose در پروژه خود، این مراحل را دنبال کنید:

Mongoose را با استفاده از npm نصب کنید.

 npm i mongoose

در فایل server.js خود، باید از Mongoose به عنوان یک اتصال دهنده به پایگاه داده استفاده کنید.

 const mongoose = require('mongoose');

پس از نیاز به Mongoose، باید URl اتصال ارائه شده در فایل server.js خود را تعریف کنید.

server.js :

 const mongoose = require('mongoose'); // Replace <username>, <password>, and <dbname> with your actual credentials const dbURL = 'mongodb+srv://<username>:<password>@cluster0.mongodb.net/<dbname>?retryWrites=true&w=majority'; mongoose .connect(process.env.dbURL) .then((result) => { console.log('Connected to MongoDB'); app.listen(3000, () => { console.log('Server started on port 3000'); }); }) .catch((err) => { console.error('Could not connect to MongoDB:', err); });

این تنظیمات تضمین می کند که Mongoose به عنوان رابط عمل می کند. این برنامه شما را به پایگاه داده MongoDB متصل می کند.

مرحله 7: ایجاد مدل برای ساختار سند

در مرحله بعد، ما باید یک سند مدل به نام Schema ایجاد کنیم تا زمانی که داده ها را در پایگاه داده خود ارسال می کنید، مطابق با آن ذخیره شوند.

برای ایجاد این مدل:

یک پوشه با نام models ایجاد کنید تا برنامه خود را سازماندهی کنید.

در داخل پوشه model's ، فایلی به نام event.js ایجاد کنید.

در فایل event.js ، از Mongoose برای تعریف طرح اسناد رویداد استفاده خواهید کرد. شما ساختار و انواع داده ها را برای اسنادی که به پایگاه داده خود ارسال می کنید، مشخص می کنید.

فایل event.js در پوشه model ایجاد شده است:

 const mongoose = require('mongoose'); // Schema const EventSchema = new mongoose.Schema( { title: { type: String, required: true, }, date: { type: Date, required: true, }, organizer: { type: String, required: true, }, price: { type: String, required: true, }, time: { type: String, required: true, }, location: { type: String, required: true, }, description: { type: String, required: true, }, }, { timestamps: true } ); const Event = mongoose.model('event', EventSchema); module.exports = Event;

وقتی این کار انجام شد، صادر کنید تا بتوانید با استفاده از کلیدواژه مورد نیاز از آن در فایل server.js خود استفاده کنید.

با طرح ایجاد شده، اکنون می توان آن را به فایل server.js صادر کرد.

server.js شما به شکل زیر خواهد بود:

 const express = require('express'); const ejs = require('ejs'); const mongoose = require('mongoose'); const Event = require('../models/Events');// the event.js file

مرحله 8: صفحات HTML ایجاد کنید

همانطور که قبلاً در مورد آن صحبت کردیم، در مرحله 4 از ejs برای ارائه کد HTML استفاده می کنیم که به ما امکان می دهد کد را در مرورگر مشاهده کنیم.

صفحه فرم

ابتدا بیایید یک صفحه فرم ایجاد کنیم. با ایجاد صفحه فرم، می‌توانید درخواست‌های POST را انجام دهید که به شما امکان می‌دهد داده‌ها را به پایگاه داده MongoDB خود ارسال کنید.

برای ایجاد یک فرم اولیه، مطمئن شوید که شامل موارد زیر است:

یک ویژگی action که مسیر ارسال داده ها را مشخص می کند.

یک ویژگی method که روش درخواست HTTP را مشخص می کند - در این مورد، درخواست POST.

یک فرم اولیه:

 <form action="/submit-event" method="POST"> <h2>Event Creation Form</h2> <label for="title">Title</label> <input type="text" id="title" name="title" required> <label for="date">Date</label> <input type="date" id="date" name="date" required> <label for="organizer">Organizer</label> <input type="text" id="organizer" name="organizer" required> <label for="price">Price</label> <input type="text" id="price" name="price" required> <label for="time">Time</label> <input type="text" id="time" name="time" required> <label for="location">Location</label> <input type="text" id="location" name="location" required> <label for="description">Description</label> <textarea id="description" name="description" rows="4" required></textarea> <button type="submit">Submit</button> </form>

توجه: مطمئن شوید که ویژگی نام را به هر ورودی اضافه کنید، در غیر این صورت پست نخواهد شد.

فرم ایجاد شده در بالا به شما امکان می دهد داده ها را به مسیر مشخص شده ارسال کنید. سپس آن را پردازش و در پایگاه داده خود ذخیره خواهید کرد.

نتیجه این است:

پس از ایجاد صفحه فرم، باید به server.js file برگردیم و یک درخواست POST برای رسیدگی به ارسال فرم ایجاد کنیم.

فایل server.js :

 // posting a data app.post('/submit-event', (req, res) => { const event = new Event(req.body); event.save() .then((result) => { res.redirect('/'); }) .catch((err) => { console.error(err); }); });

صفحه اصلی

اکنون که فرم می تواند داده ها را به پایگاه داده ارسال کند، می توانیم صفحه اصلی برای نمایش رویدادهای ایجاد شده در مرورگر ایجاد کنیم.

ابتدا در فایل server.js خود باید یک تابع ایجاد کنید. تمام رویدادهای ارسال شده از فرم و ذخیره شده در پایگاه داده را واکشی می کند.

در اینجا نحوه تنظیم آن آمده است:

این تابعی است که در server.js برای واکشی همه داده ها از پایگاه داده ایجاد شده است:

 // To get all the event router.get('/', (req, res) => { Event.find() .then((result) => { res.render('index', { title: 'All event', events: result }) }) .catch((err) => { console.error(err); }) })

در مرحله بعد، با استفاده از یک حلقه forEach در فایل صفحه اصلی، هر قسمت را به صورت پویا حلقه می کنیم. از آنجایی که ما از ejs استفاده می کنیم، پسوند فایل HTML .ejs خواهد بود.

 <div> <h2>All events</h2> <div> <% if (events.length > 0) { %> <% events.forEach(event => { %> <div> <h3><%= event.title %></h3> <p><%= event.description %></p> <a href="/event/<%= event.id %>"> Read More </a> </div> <% }) %> <% } else { %> <p>No events available at the moment.</p> <% } %> </div> </div>

در اینجا توضیح داده شده است که هر قسمت از کد چه کاری انجام می دهد:

عنوان ( <h2>All events</h2> ) : "همه رویدادها" را به عنوان عنوان نمایش می دهد.

فهرست رویدادها ( <div> ) : ظرفی برای نمایش فهرستی از رویدادها.

بررسی شرطی ( <% if (events.length > 0) { %> ... <% } else { %> ... <% } %> ) : تحلیل می کند که آیا رویدادی وجود دارد ( events.length > 0 ). اگر رویدادها وجود داشته باشند، از طریق هر رویداد ( events.forEach ) حلقه می زند تا جزئیات آن را نمایش دهد.

برای هر رویداد، یک <div> حاوی عنوان رویداد ( event.title ) در تگ <h3> ، توضیحات رویداد ( event.description ) در تگ <p> و یک پیوند ( <a> ) به ایجاد می کند. مشاهده جزئیات بیشتر در مورد این رویداد ( Read More ). پیوند به /event/event.id هدایت می شود، جایی که event.id شناسه منحصر به فرد رویداد است.

پیام بدون رویداد ( <% } else { %> ... <% } %> ) : اگر هیچ رویدادی وجود نداشته باشد ( events.length <= 0 ) پیامی با مضمون "هیچ رویدادی در حال حاضر موجود نیست" را نمایش می دهد.

مرحله 9: جزئی ایجاد کنید

به یاد داشته باشید که ejs در برنامه خود نصب کرده اید تا مؤلفه های پویا تر را تسهیل کنید. این به شما امکان می دهد کد خود را بیشتر تجزیه کنید تا پویاتر باشد.

برای سازماندهی بیشتر کد خود، از چیزی به نام جزئی استفاده خواهید کرد.

جزئی به شما امکان می دهد کد خود را به بخش های مقیاس پذیر، مدولار و قابل مدیریت تقسیم کنید و HTML خود را سازماندهی کنید.

ابتدا بیایید یک جزئی برای نوار ناوبری ایجاد کنیم.

نحوه ایجاد یک جزئی:

در پوشه views خود، یک پوشه جدید به نام partials ایجاد کنید

در داخل پوشه partials ، یک فایل جدید به نام nav.ejs ایجاد کنید.

کد ناوبری را از فایل صفحه اصلی خود جدا کرده و در nav.ejs قرار دهید.

مثال:

ابتدا پوشه و فایل Partials را ایجاد کنید:

از دستور <%- include() %> از ejs استفاده کنید تا قسمتی از nav.ejs را در صفحاتی در برنامه خود درج کنید که می خواهید نوار ناوبری ظاهر شود.

از ()" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/07/include.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2024/07/include.png 1000w, https://www.freecodecamp.org/news/content/images/2024/07/include.png 1367w" sizes="(min-width: 1200px) 1200px" width="1367" height="787" loading="lazy">

این هم کد:

 <!DOCTYPE html> <html lang="en"> <%- include('./partial/head.ejs') %> <body> <%- include('./partial/nav.ejs') %> <main> hello </main> <%- include('./partial/footer.ejs') %> </body> </html>

با این تنظیمات، کد HTML شما سازماندهی می شود. مدیریت و به روز رسانی اجزایی مانند نوار ناوبری در صفحات مختلف آسان خواهد بود. شما می توانید از این روش در قسمت های دیگر برنامه خود استفاده کنید. به عنوان مثال، تگ head، تگ فوتر و سایر اجزای قابل استفاده مجدد.

مرحله 10: ایجاد یک فایل متغیر محیطی (.Env)

در این آموزش، پروژه را در GitHub آپلود می کنیم. شماره پورت و URL MongoDB خود را با فضای ذخیره‌سازی ایمن محافظت خواهید کرد. شما همچنین از یک فایل متغیر محیطی، یک فایل پیکربندی به نام .env استفاده خواهید کرد. این فایل اطلاعات حساس را ایمن نگه می دارد. این شامل گذرواژه ها و URL های API است و از قرار گرفتن در معرض آن جلوگیری می کند.

در اینجا نحوه تنظیم آن با استفاده از Node.js آمده است:

ابتدا بسته dotenv نصب کنید.

 npm i dotenv

سپس یک فایل .env ایجاد کنید. در داخل آن، شماره PORT و URL MongoDB خود را اضافه کنید. باید چیزی شبیه این باشد:

 PORT=3000 dbURl='mongodb+srv://<username>:<password>@cluster0.mongodb.net/<dbname>?retryWrites=true&w=majority';

سپس فایل .gitignore خود را به روز کنید:

 /node_modules .env

گفت ن .env به gitignore شما تضمین می کند که در مخزن GitHub شما گنجانده نشده است. این به Git او میگوید که هنگام آپلود کد شما، فایل .env را نادیده بگیرد.

سپس در فایل server.js خود، به بسته dotenv نیاز دارید. متغیرها را با این خط در بالای فایل بارگذاری کنید:

برای نیاز به آن، به سادگی تایپ کنید:

 require('dotenv').config();

به این ترتیب، نیازی نیست که شماره PORT و URL MongoDB را در فایل server.js خود کدگذاری کنید. در عوض، می توانید با استفاده از process.env.PORT و process.env.dbURl به آنها دسترسی داشته باشید.

پس فایل server.js شما تمیزتر و نامرتب خواهد بود 😵‍💫

 require('dotenv').config(); const express = require('express'); const ejs = require('ejs'); const mongoose = require('mongoose'); mongoose .connect(process.env.dbURL) .then((result) => { console.log('Connected to MongoDB'); app.listen(3000, () => { console.log('Server started on port 3000'); }); }) .catch((err) => { console.error('Could not connect to MongoDB:', err); });

مراحل بعدی

برای گسترش این برنامه اصلی، اضافه کردن ویژگی هایی مانند:

احراز هویت کاربر

قابلیت جستجو و فیلتر رویداد

ویرایش و حذف رویداد

اطلاعیه برای رویدادهای آینده

نحوه استایل دادن به برنامه

اگر می خواهید استایلی به برنامه خود اضافه کنید، این مراحل را دنبال کنید:

ابتدا یک پوشه public ایجاد کنید. در داخل این پوشه، یک فایل style.css ایجاد کنید که در آن CSS سفارشی خود را بنویسید.

سپس در فایل HTML خود، فایل style.css را در تگ <head> پیوند دهید، همانطور که معمولاً انجام می دهید:

 <link rel="stylesheet" href="/style.css">

برای اطمینان از اینکه فایل CSS شما به درستی ارائه می شود، خط زیر را به فایل server.js خود اضافه کنید:

 app.use(express.static('public'));

این برنامه از Tailwind CSS برای یک ظاهر طراحی شده استفاده می کند. اما استفاده از Tailwind اختیاری است. می توانید از هر فریم ورک CSS استفاده کنید یا CSS سفارشی بنویسید تا به طرح بندی دلخواه خود برسید.

نحوه گنجاندن تصاویر

همه تصاویر باید در پوشه public ذخیره شوند و در فایل های HTML شما ارجاع داده شوند. همچنین باید مطمئن شوید که پوشه public به درستی در فایل server.js شما برای ارائه فایل‌های استاتیک تنظیم شده است.

در اینجا نمونه ای از نحوه ارائه فایل های استاتیک در server.js آورده شده است:

 const express = require('express'); const app = express(); // Serve static files from the 'public' folder app.use(express.static('public'));

نتیجه

تبریک می گویم! شما یک برنامه ساده با استفاده از Node.js، Express.js، ejs و MongoDB ساخته اید. با استفاده از این اصول، می توانید برنامه خود را برای رفع نیازها و ویژگی های خاص تر گسترش و ارتقا دهید.

اگر با مشکلی مواجه شدید، می توانید پیشرفت خود را به اشتراک بگذارید یا سؤال بپرسید.

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

با دنبال کردن من در توییتر ، لینکدین و گیت هاب، از پروژه های من به روز بمانید

ممنون که خواندید 💖 .

کد نویسی مبارک!

خبرکاو