آموزش Node.js

آموزش اکسپرس و راه اندازی سرور بوسیله Express.js

آموزش نصب Express.js

برای نصب Express.js باید مراحل زیر انجام بشه:

  • اول از همه باید با استفاده از فرمان npm init فایل جیسون پروژه رو ایجاد کنیم. (اجرا در خط فرمان در پوشه اپلیکیشن)
  • بعد با استفاده از npm i express ماژول express رو در محل پروژه نصب می کنیم. (اجرا در خط فرمان در پوشه اپلیکیشن)

داکیومنت های Express.js

داکیومنت های آموزشی Express.js به زبان انگلیسی از این آدرس در دسترس هستن.

ایمپورت کردن express و اجرای فانکشن اصلی

برای ایمپورت کردن ماژول اکسپرس، باید دو مرحله کار انجام بدیم:

مرحله اول: ایمپورت کردن بوسیله دستور require

در این مرحله، مثل بقیه ماژول های node.js، اکسپرس رو بوسیله دستمور require به برنامه خودمون import می کنیم.

const express = require('express')

دستور require باعث میشه کل ماژول express به فایل ما ایمپورت بشه. در حقیقت کل این ماژول در قالب یک فانکشن بر میگرده و داخل متغیر express ریخته میشه.

مرحله دوم: اجرای فانکشن express

حالا ما وظیفه داریم این فانکشنی که برگشته و داخمل متغیر ریخته شده رو اجرا کنیم تا بتونیم ازش در برنامه خودمون استفاده کنیم.

برای این کاریک متغیر جدید (معمولا به اسم app) تعریف می کنیم و فانکشن اجرا شده ی express رو به اون نسبت میدیم.

 const app = express()

حالا با استفاده از متغیر app میتونیم به تمام متدهای express دسترسی داشته باشیم. مثلا app.get یا app.use

ایجاد سرور بوسیله Express با پورت دلخواه

سرور ایجاد کنیم که چی بشه ؟‌

ما در حالت عادی توی محیط کنسول با node.js کار می کنیم. برای اینکه بتونیم اپلیکیشن رو روی مرورگر اجرا کنیم، باید یک وب سرور داشته باشیم.

شاید قبلا با وب سرور های مختلفی از جمله apache و iis کار کرده باشین. یا لااقل اسمشونو شنیده باشین.

ما برای اجرای node.js نیازی به وب سرور های ثالث نداریم. بلکه خود node.js به صورت یک وب سرور عمل میکنه.

یکی از کارهای قشنگی که express برای ما انجام میده، ایجاد وب سرور هستش.

برای ایجاد وب سرور بوسیله express، از متد listen استفاده می کنیم:

app.listen(5000, ()=>{
    console.log('server is up on 5000 ! ') 
})

متد listen دوتا آرگومان ورودی می گیره. اولی یک عدده که پورت سرور رو مشخص میکنه،‌ و دومی یک فانکشن callback هستش که میتونیم کارهای جانبی رو توش انجام بدیم.

توی مثال بالا، ما پورت ۵۰۰۰ رو به این متد پاس دادیم. و توی فانکشن callback هم گفتیم که توی کنسول یک رشته استرینگ رو بنویسه.

روی سیستم لوکال، این سرور با آدرس localhost:5000 اجرا خواهد شد.

این رشته رو توی کنسول چاپ می کنیم که بفهمیم آیا سرور با موفقیت اجرا شده یا نه. این قسمت اجباری نیست. اما خب نوشتنش توصیه میشه.

معرفی فولدر فایلهای استاتیک به express

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

نکته ریزی که وجود داره اینه که ما باید تمام فایلها و پوشه های استاتیک خودمون رو داخل یک پوشه (معمولا اسمشو میذاریم public) بریزیم.

بعدش مسیر فایلهای استاتیک رو با استفاده از ماژول path درست می کنیم و این آدرس رو به متد static اکسپرس مسیدیم.

const path = require('path')
const express = require('express')
const app = express()

//تعریف مسیر ها برای کار کردن با اکسپرس 
const publicFolderPath = path.join(__dirname, "../public")

// ست کردن دایرکتوری برای فایلهای استاتیک
app.use(express.static(publicFolderPath))

دقت کنید که ما برای ایجاد یک مسیر، از ماژول path استفاده کردیم . گلوبال آبجکت dirname__ رو بهش پاس دادیم . از اونجا به بعد رو آدرس دادیم تا یک آدرس کامل ایجاد بشه.

ایجاد مسیر با استفاده از express و متد get

ما باید برای هر آدرسی که در سایت وجود داره یک محتوا ارائه بدیم (یعنی برای مسیر های مختلف).

مثلا فرض کنید که کاربر آدرس سایت مارو توی مرورگر وارد می کنه. mysite.com برای این آدرس باید یک محتوا به کاربر نمایش داده بشه. حالا اگر بزنیم mysite.com/about باید یک صفحه جدید به کاربر نمایش داده بشه.

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

متد get به صورت زیر تعریف میشه و دوتا آرگومان می گیره. آرگومان اول، مسیر نسبی هست(از دامنه سایت به بعد) و آرگومان دوم یک تایع callback هستش که خودش دوتا آرگومان request و response میگیره.

app.get('/user/:id', function (req, res) {
  res.send('salam')
})

در مثال بالا request و response به صورت خلاصه req و res نوشته شده اند. توی این تابع callback، ما میتونیم کاری که قراره در این آدرس انجام بشه رو تعیین کنیم.

مثلا یک محتوا رو به سمت کاربر بفرستیم، یا یک صفحه از سایت رو برای کاربر نمایش بدیم.

در مثال بالا، ما کلمه salam رو برای کاربر روی صفحه مرورگر چاپ می کنیم.

نحوه مسیردهی به متد get در اکسپرس

برای مسیردهی به متد get، دامنه اصلی سایت رو در نظر نمی گیریم. و مسیر نسبی رو وارد می کنیم.

مثلا اگر دامنه سایتمون mysite.com هست، برای صفحه اصلی سایت، یک استرینگ خالی به متد get میدیم. و برای mysite.com/about فقط رشته ‘about’ رو به متد get پاس میدیم. نمونه های زیر رو ببینید:

//mysite.com
app.get('', function (req, res) {
   res.send('this is my home page')
})

//mysite.com/help
app.get('help', function (req, res) {
  res.send('this is my help page')
})

//mysite.com/help/faq
app.get('help/faq', function (req, res) {
  res.send('user ' + req.params.id)
})

ارسال محتوا به کاربر از طریق متد res.send

از طریق متد res.send میتونین محتوای مورد نیاز رو برای کاربر بفرستین. این محتوا میتونه از انواع مختلفی باشه. مثلا میتونین یک آبجکت جاوااسکریپت ، یا تگ ها html و یا حتی یک فایل رو برای کاربر بفرستین.

جتی میتونین فایل html برای کاربر بفرستین و کاربر اون رو به صورت صفحه ببینه. اما یادتون باشه این کار خیلی رایج نیست. و بجای این کار از دستور res.render استفاده میشه. من res.render رو یخورده پایین تر توضیح دادم.

برای اینکه ببینید چه چیزهایی رو میشه از طریق متد res.send به کاربر فرستاد، داکیومنت های res.send رو در این صفحه بخونید.

دسترسی به پارامترهای query string از طریق req.query

یادتون نمیاد query string چیه ؟ عب نداره، یک دقیقه وقت بذارید و آموزش query string رو بخونین!

ما توی متد get، درخواستی که کاربر از طریق آدرس URL فرستاده رو می گیریم و پردازش می کنیم.

ممکنه این آدرس URL حاوی پارامترهای query string هم باشه. ما داخل بلوک app.get و از طریق req.query کوئری استرینگ ارسالی کاربر رو به صورت یک آبجکت جاوااسکریپت دریافت می کنیم.

همونطور که میدونید، فرمت query string به صورت key-value هستش. فرمت آبجکت جاوااسکریپت هم به صورت key-value هست. بنابر این براحتی اطلاعات query string داخل یک آبجکت جاوا اسکریپتی قرار می گیره.

فرض کنید کاربر یک URL به این صورت در صفحه مرورگر خودش وارد می کنه:

https://javafarsi.com/home?name=hamed&last=askarian&money=40000

ما برای مدیریت این درخواست و گرفتن مقادیر از پارامترهای query string این کارو می کنیم:

app.get('/home', (req, res)=>{
    var name = req.query.name
    var lastName = req.query.lastName
    var money = req.query.money
    var result = `your name is ${name} ${lastName}, and you have ${money}\$ money!`
    console.log(result)
    res.send({
        name:"file",
        title:"page title"
    })
})

ارسال فایل html به مرورگر کاربر از طریق متد res.render

شما میتونین فایلها و صفحه های html رو بوسیله متد res.render به کاربر نمایش بدین. برای این کار از دستور زیر استفاده می کنیم:

//mysite.com
app.get('', function (req, res) {
   res.render('index')
})

در مثال بالا، ما فایل index.html رو به متد res.render دادیم که به کاربر نمایش بده. البته اینکه این متد، آدرس index.html رو از نوی پوشه های سایت از کجا پیدا کنه، چند سطر پایین تر در قسمت view engine ها براتون توضیح دادم.

ارسال پارامتر به صفحه مقصد (به صورت آبجکت جاوااسکریپت) در متد res.render

شما میتونین همراه صفحه ای که برای رندر به متد res.render میفرستین، یکسری اطلاعات رو هم به صورت پارامتر ارسال کنین.

ما برای این کار از آبجکت جاوااسکریپت استفاده کردیم:

app.get('', (req, res) =>{
    res.render('index', {
        title: "My Home Page",
        name: "Hamed Askarian",
    })
})

حالا توی صفحه index.html میتونیم از پارامترهای ارسالی استفاده کنیم و اونها رو به کاربر نمایش بدیم. برای نمایش این پراپرتی ها، در صفحه html باید اونها رو بین دو جفت آکولاد قرار بدیم:

<h1>this is my page title: {{title}} </h1>   
<p>this is my name: {{name}}</p>

از همین طریق میتونیم آدرس تصاویر و فایلها رو هم به صفحه بفرستیم و توی اتریبیوت های src و href و اینها قرار بدیم. فقط دو جفت اکولاد {{}} رو فراموش نکنید.

حتما وقت بذارید و داکیومنت های متد res.render رو هم مطالعه کنید.

view engine چیست؟

ویو انجین (به انگلیسی: view engine) یا تمپلیت انجین (به انگلیسی: template engine) یک فریم ورک است. وظیفه این نوع از فریمورک ها، جداکردن قسمتهای مختلف صفحه های وب از یکدیگه هستش. و این کار باعث صرفه جویی خیلی زیادی در کدنویسی و حجم سایت میشه. و از کپی-پیست کردن های مداوم ما رو نجات میده. همچنین باعث میشه ایجاد تغییرات روی سایت بسیار سریع تر و آسون تر انجام بشه.

اما خب یه view engine دقیقا چیکار میکنه؟

یک view engine میاد و قسمتهای مختلف صفحه (مثل header و footer و سایدبارها) رو از هم جدا میکنه و در فایلهای مجزا ذخیره می کنه.

توی اکثر سایتها، header و footer بین تمام صفحات مشترک هستش. بنابر این ما در صفحات html استاتیک که برای سایت میسازیم، کدهای footer و header رو کپی-پیست می کنیم.

اما با استفاده از یک view engine میتونیم یک فایل footer و یک فایل header بسازیم و این فایلها رو در تمام صفحات مورد نیاز ادد کنیم.

برای سایر بخشهای ثابت هم میتونیم این کارو انجام بدیم. مثلا sidebar و menu و غیره رو هم میتونیم به همین صورت درست کنیم و توی هر صفحه ای که هر کدوم از اونها لازم بود، اون رو ادد کنیم.

معرفی view engine به اکسپرس با استفاده از متد app.set

ما در اکسپرس میتونیم از view engine های مختلف استفاده کنیم. برای اینکه یک view engine رو به اکسپرس معرفی کنیم تا باهاش کار کنه، از متد app.set استفاده می کنیم:

app.set('view engine', 'hbs')

در مثال بالا، view engine کلمه کلیدی هست و دقیقا باید به همین شکل نوشته بشه. آرگومان دوم هم اسم vbiew engine مورد نظر ماست. که در اینجا ما چون از hbs استفاده کردیم، اسمش رو بدون کم و کاست و پس و پیش داخل کوتیشن می نویسیم.

اینجوری اکسپرس میفهمه که باید از ماژول hbs بعنوان view engine استفاده کنه.

حالا اینکه ماژول hbs چیه رو هم چند سطر پایین تر توضیح دادم .

معرفی مسیر پوشه view ها به اکسپرس با استفاده از متد app.set

اکسپرس یک مسیر برای view ها در نظر می گیره. ویو ها همون فایلهای html ما هستن. (البته در تمپلیت انجین های مختلف پسوند این فایلها فرق می کنه)

به صورت پیشفرض، این مسیر، فولدر views در روت سایت هستش. اما ما معمولا فولدر مورد نظر خودمون رو تعریف می کنیم و آدرسش رو برای استفاده به اکسپرس میدیم.

فرض کنید که ما یک فولدر به اسم templates ساختیم و فولدر views رو هم داخل اون ساختیم.

ابتدا باید یک مسیر کامل از فولدر views بسازیم. برای این کار از ماژول path استفاده می کنیم.

const viewsPath = path.join(__dirname, '../templates/views')
app.set('views', viewsPath)

و با استفاده از متد app.set اکسپرس، آدرس مسیر فولدر views خودمون رو به ماژول اکسپرس معرفی می کنیم.

ماژول handlebars برای ایجاد تمپلیت ها

داکیومنت های تمپلیت ساز handlebars.js از این آدرس قابل دسترس است.

همچنین، در سایت npm هم در این صفحه قابل دسترس است.

ماژول hbs برای استفاده از handlebars در اکسپرس

ما برای کار با handlebars.js با اکسپرس (بعنوان یک view engine) بجای استفاده از خود ماژول handlebars، از ماژول hbs استفاده می کنیم. ماژول hbs مخنص هماهنگ کردن ماژول Express با ماژول handlebars میباشد.

داکیومنت ها و نحوه کار با hbs رو در این صفحه میتونید بخونید.

البته من هم بزودی نحوه کار با ماژول hbs رو در یک مطلب جداگانه بهتون آموزش میدم.

حامد عسکریان

برنامه نویس و عاشق تکنولوژی

دیدگاهتان را بنویسید

دکمه بازگشت به بالا
بستن
بستن