بسم الله الرحمن الرحیم

امروز با آموزش express.js در node در خدمت شما هستیم

چیزایی که خودم یادگرفتم و از توی سایت های مختلف خارجی و ایرانی فهمیدم رو میخوام براتون بگم

Express چیست؟

یه فریمورک برای node.js که برای ساخت وب اپلیکیشن ها و api ها توسعه داده شده (یعنی یه چیزی که میشه باهاش json گرفت و ذخیره کرد و نشون داد و...)

اگه node کار کرده باشید به احتمال خیلی قوی با این فریمورک کار کردید ولی خوب منم اینجا یه اموزشی میزارم برای کسانی که تازه دارن nodejs کار میکنن

ساخت پروژه خالی

اگه تازه دارید با nodejs کار میکنید و توی سایت های مختلف گشتید احتمالا خیلی دستور npm init و از این چیزا به چشمتون خورده پس بهتره یه توضیح بدیم درموردش:

اول یه فولدر بسازید (هرجا که دوست دارید) و برید توی فولدر

حالا اگه ویندوز دارید شیفت رو بگیرید و راست کلیک کنید و گزینه open powerShell windows here رو بزنید و دستور npm init رو تایپ کنید و اینتر بزنید

این دستور اطلاعات پروژه مثل نام و ورژن و... رو ازتون میپرسه و در نهایت یه فایل json به نام package.json میسازه. مهمترین کار این فایل یه قسمتیش هست که توش فریمورک هایی که نیازشون داریم رو مینویسم و با دستوری که چند دقیقه دیگه خدمتتون عرض میکنم نصب میکنیم

بعد از ساخته شدن فایل بالا حالا میتونیم یه فایل تکست بسازیم و اسم و فرمتش رو به index.js تغییر بدیم (این اسم رو توی همون سوالاتی که npm init میپرسه ازتون میگیره و اگه فقط اینتر کرده باشید الان اسمش باید index.js باشه)

حالا دوباره به powerShell برمیگردیم و دستور npm install رو میزنیم این دستور الان کارایی نداره ولی کلا کارش اینه که اون فریمورک هایی که اسمشون توی فایل package.json اومده رو نصب میکنه یعنی توی یه فولدر به نام node_modules میریزه

نصب Express

توی cmd یا powerShell ویندوز یا ترمینال لینوکس کافیه که دستور زیر رو بنویسید و اینتر کنید (توی همون فولدری که ساخته بودید)

npm install express --save

اگه npm و node رو هنوز نصب نکردید اول این سایت برید و node رو نصب کنید، اتوماتیک npm هم نصب میشه (npm مخصوص node هست و میتونیم پکیج های مورد نیازمون رو باهاش دانلود کنیم به سادگی!) 

اون --save آخرش برای اینه که به پروژتون اضافش کنه (یعنی توی پوشه node_modules بریزه)

شروع کار با Express

اگه فایل index.js رو تا الان ساختید میتونید وارد بشید و خط اولش کد زیر رو بنویسید

var express = require("express")

توی این خط کد، ما express رو ایمپورت کردیم

حالا با کد زیر از express یه آبجکت میسازیم تا ازش استفاده کنیم

var app = new express()

و حالا:

دستورات Express

با نوشتن کد زیر وقتی صفحه اصلی سایتتون باز بشه جمله hello world رو نشونتون میده

app.get('/', function (req, res) {
  res.send('hello world')
})

ولی این به تنهایی کافی نیست و ما باید یه آدرس بسازیم تا بتونیم سایتی که داریم میسازیم رو ببینیم (نگران نباشید همه چیز لوکال هست و نیاز به هاست و دامنه نیست)

فقط کد زیر رو به کداتون اضافه کنید

app.listen(8080)

یا هر پورت دیگه ای که دوست دارید مثلا میتونید به جای 8080 بنویسید 4000 یا هرچیز دیگه

حالا فقط کافیه که برید توی فولدری که ساخته بودید و دوباره powerShell رو اجرا کنید و اینبار دستور زیر رو اجرا کنید

node index.js

این دستور رو که نوشتید اگه هیچ اروری به شما داده نشد میتونید برید آدرس زیر رو توی مرورگرتون باز کنید تا شاهد شاهکار جدیدتون باشید

http://localhost:8008/

حالا از اینجا به بعدش یه خورده حرفه ای تر میشه

ما با نوشتن توابعی مثل توابع زیر داریم میگیم اگه فلان آدرس با post بهش درخواست داده شد فلان چیزو نشون بده فکر کنم قابل فهم باشه کد ها

// GET method route
app.get('/', function (req, res) {
  res.send('GET request to the homepage')
})

// POST method route
app.post('/', function (req, res) {
  res.send('POST request to the homepage')
})

اگه میخواید تست کنید بهتره که از postMan استفاده کنید(توی گوگل سرچ کنید میتونید پیدا کنید و نصب کنید روی خود کروم نصب میشه)

کد بالا رو اگه توی فایلی که دارید بریزید و با پست من یه بار post بهش درخواست بدید و یه بار get متن هاش متفاوته

همین کد رو میشه جور دیگه هم نوشت (الان اینو همینجا خوب یاد بگیرید چون بعدا فکر میکنید چیز عجیبیه)

app.route('/')
  .get(function (req, res) {
    res.send('GET request to the homepage')
  })
  .post(function (req, res) {
    res.send('POST request to the homepage')
  })

کد بالا خوبیش اینه که چون برای یه آدرس میخوایم get  و post بنویسم کارمون رو راحت میکنه پس زیاد سخت نگیرید فقط همین بود (route رو با Router قاطی نکنید)

میتونید مثل اینکه دارید از post و get استفاده میکنید از put هم استفاده کنید یه چیز دیگه هم هست به نام all که یعنی هر نوعی بود اجرا میشه و فرقی نداره get باشه یا post.

به جای "/" هم میتونید آدرس دیگه ای بنویسید مثلا اگه بنویسید "/app" این کد ها زمانی اجرا میشن که http://localhost:8080/app باز بشه

اول کد زیر رو ببینید:

app.use("/",(req,res,next) =>{
    console.log("new Request ")
    next()
})

کد بالا به نظر میرسه که کارش اینه که وقتی صفحه اول باز شد توی کنسول (اگه دستور node index.js رو توی powerShell اجرا میکنید همونجا هم کنسولتون هست و توی اونجا نشون داده میشه) نشون میده حالا فرقش با all چیه؟

فرقش اینه که در اصل این کد تمامی درخواست ها رو چک میکنه اون خط کد رو اجرا میکنه یعنی "/" توی اینجا معنی اینو میده که هرکس اول با / شروع میشد درحالی که توی all به معنای اینه که دقیقا "/" باشه یعنی فقط صفحه اول ولی اینجا یعنی همه جا یا اگه "/app" بود یعنی برای اونایی که با app آدرسشون شروع میشه مثل http://localhost:8080/app/post و هرچی که به جای post باشه use اجرا میشه پس برای all و post  و get دقیقا باید همون باشه ولی use فقط اولش باشه کافیه

اگه app.use رو هم به شکل زیر بنویسید مثل کد بالا عمل میکنه:

app.use((req,res,next) =>{
    console.log("new Request ")
    next()
})

حالا بگم req  و res و next چی هستن؟

req چیزای مربوط به درخواستی هست که از جانب کاربر اومده مثلا اگه توی درخواستش فایلی، یا اسمی یا چیزی فرستاده باشه شما باید از req بگیریدش

res مربوط به چیزی هست که میخوایم به کاربر برگردونیم پس اگه بخوایم به کاربر سلام بدیم یعنی سلام رو نشون بدیم باید اینشکلی بنویسیم 

res.send("Salam")

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

next رو بهتره خودتون حدس بزنید ولی شاید به ذهنتون نرسه

اگه توی همین کد ها use رو بالای post و get بنویسید و همه آدرسشون یکی باشه یعنی همه "/" باشن میبینید که فقط use کار میکنه و دیگه به get نمیرسه و باعث میشه کنه سایت اصلا نتونه درست کار کنه شاید شما توی get بخواید چیزی رو نشون کاربر بدید ولی اصلا نمیشه و توی همون use میمونه ولی وقتی از next() استفاده میکنید بعد از اینکه use اجرا شد میره تابع بعدی که باهاش هم آدرس باشه (یعنی ادرسش یکی باشه) پس خیلی کاربردیه

Router کارش چیه؟

چیزی که من فهمیدم اینه که اگه یه وقت یه برنامه بزرگی نیاز داشتید نباید دیگه همه رو با اون app.get و app.post و این چیزا پیش ببرید بلکه جور دیگه ای باید عمل کنید

فرض کنید شما سایتی دارید که دارای دو بخش Birds  و Animals هست و میخواید سایتتون این شکلی بشه

http://localhost:8080/Animals
http://localhost:8080/Animals/Dog

http://localhost:8080/Birds
http://localhost:8080/Birds/canary

پس حالا میایم یه فایلی به نام birds.js و یه فایل دیگه ای به نام animals.js میسازیم

کد birds.js این شکلیه:

var express = require('express')
var router = express.Router()

// middleware that is specific to this router
router.use(function timeLog (req, res, next) {
  console.log('Time: ', Date.now())
  next()
})
// define the home page route
router.get('/', function (req, res) {
  res.send('Birds home page')
})
// define the about route
router.get('/canary', function (req, res) {
  res.send('About canary')
})

module.exports = router

این use ی که شما میبینید کارش اینه که هر درخواستی که به سرور میشه تایم اون لحظه رو توی لاگ میزنه و بعد با تابع next() ادامه کار رو دنبال میکنه

express.Router() کارش چیه؟

اصلی ترین موضوع همین بود که الان توضیح میدم

ما با get و post و use این روتر رو پر میکنیم و بعد اینو با moudle.export میدیم به هرکس که فایل birds.js رو صدا بزنه یعنی خودمون اومدیم یه روتر ساختیم و چیزامون رو توی اون تنظیم کردیم توابعش دقیقا عین همون app ی هست که قبلا باهاش کار کردیم ولی یه روتر از اون express هست (ادامه که بدیم بیشتر متوجه میشید)

module.export کارش چیه؟

وقتی اینو بخوایم جای دیگه ایمپورت یا require کنیم مقدار این قسمت توی متغییری که توش require مینویسم قرار میگیره (اگه متوجه نشدید اشکالی نداره ادامه میدیم دوباره توضیح میدیم)

فایل animals هم یه چیزی توی همین مایه ها میشه که خودتون بسازیدش

حالا میریم فایل index.js اصلی و اول از همه چیز

var birds = require('./birds')

این دقیقا همون چیزی هست که توی module.export عرض کردم خدمتتون، یعنی الان اون router توی متغییر birds ریخته میشه

و حالا هم

app.use('/birds', birds)

این کد خیلی جالبه

داره میگه اون آدرس هایی که اولشون birds هست رو router بردز مدیریت کنه یعنی الان ما آدرس canary رو توی routerی که توی فایل birds.js بود ساختیم و الان آدرس این شکلی میشه localhost:8080/birds/canary

دیدید چقدر کاربردی بود اون Router() و امیدوارم با route قاطیش نکنید (اصلا مثل هم نیستن)

خب دیگه طولانی شد 

اگه سوالی بود توی گوگل سرچ کنید پیدا کنید چون منم تازه کارم و دارم تازه یاد میگیرم

موفق باشید

یاعلی