آموزش مقدماتی فریم‌ورک Express.js

ساختن مسیرها routes

خوب من در فایل app.js خودم از route اولم یک کپی می گیرم و route دیگری به نام aboutme می سازم :

سروررا دوباره راه اندازی می کنم ، حالا در نوار آدرس مرورگرخود تایپ کنید localhost:3000/aboutme نتیجه باید شبیه چیزی باشد که در مرورگر من می بینید.

pic13NodeJs

ما می تونیم پارامترها را نیز مدیریت کنیم به مثال زیر دقت کنید :

می بینید که من مسیر دیگری به نام man ایجاد کردم که پارامتری به نام esm را دریافت می کند سپس متغییری به نام jj ایجاد کردم و مقدار پارامتر وروردی را درون آن قرار دادم و در آخر آن را چاپ کردم ، سرور را مجددا راه اندازی کنید ، و به آدرس http://localhost:3000/man/pouria

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

pic14NodeJs

من یک مسیر دیگر هم ایجاد می کنم این بار دو پارامتر می گیرم :

و نتیجه :

pic15NodeJs

همچنین می تونیم مشخص کنیم که اگر مسیروارد شده درست نبود چه اتفاقی بیفتد :

حالا اگر مسیر استباهی را وارد کنیم مثلا : http://localhost:3000/hello

با شکل زیر مواجه خواهیم شد :

pic16NodeJs

استفاده از template

دید که چگونه با استفاده ار res.send تونستیم کانتنت هایی ایجاد کنیم اما راه بهتری هم برای ساخت صفحات وب وجود دارد و آن استفاده از template engine است که express در اختیار ما قرار می دهد دو template engine به نام های Jade , EJS وجود دارد من از EJS استفاده می کنم می توانید با رفتن به سایت های http://jade-lang.com/ و http://www.embeddedjs.com/ اطلاعات بیشتری در مورد این دو موتور بدست آورید .

اما اگر به صورت تیمی کار می کنید من به شما EJS را پیش نهاد می دهم چون وب دیزاینرها ارتباط بهتری با EJS برقرار می کنند و کار بر روی EJS برای آنها راحت تر است.برای نصب EJS کافیست cmd را باز کنید ، وارد پوشه پروژه خود شوید و دستورnpm istall ejs –save را وارد کنید .

pic17NodeJs

من EJS را برای پروژه hooman که باهم ساختیم نصب کردم ، حالا اگر وارد package.json شوید می بینید که در قسمت dependencies ، EJS اضافه شده است هم چنین در پوشه node_module پوشه ejs را خواهید دید.

pic18NodeJs

حالا که EJS را نصب کردیم باید به نرم افزارومون هم اضافش کنیم برای این کار من دستور زیر را در app.js تایپ می کنم .

به همین راحتی بقیه کد مشابه قبل است ، حالا که engine را صدا زدیم باید template را ایجاد کنیم ، معمولا template ها در پوشه views قرار دارند، پس این پوشه را می سازم ،حالا داخل آن یک فایل به نام default.ejs قرار میدهم.

داخل این فایل یک تمپلیت ساده html ایجاد می کنم :

برای مشاهده این صفحه باید در app.js تغییراتی ایجاد کنیم و از متد render استفاده کنیم :

کافیست درون متد render نام template را وارد کنید ، خودش template را پیدا می کند .

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

pic19NodeJs

خوب از لحاظ تکنیکی چیزی که ساختیم یک template نیست ،چرا؟ چون داده ای واردش نمی شه ،ما می تونیم داده ها را به این شکل با متدر render درون template خودمون بفرستیم :

حالا به default.ejs برید ، باید داده ای که فرستادیم و یه جایی نمایش بدیم ، من می خوام پیغام man omadam در تگ h3 درون defualt.ejs قرار بگیره برای این کار محتوای درون h3 را به این شکل تغییر می دهم :

سرور را دوباره راه اندازی کنید و صفحه مرورگر خود را رفرش کنید ، دقت کنید که در مسیر localhost:3000 باشید. چیزی که می بینید باید به این شکل باشد.

pic20NodeJs

می بینید که salaaaam به man omadam تغییر کرده است .

بیاید یک for هم بنویسیم ، خوب من می خوام نام دوستانم در صفحه نمایش بدم برای این کار ابتدا در app.js قسمتی که template ، default را معرفی کردیم یک آرایه از اسامی دوستانم می سازم.

حالا به defaul.ejs میریم و یک حلقه for برای چاپ دوستان من ایجاد می کنیم :

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

pic21NodeJs

اضافه کردن بخش ها partials

بیاید template خودمونو به بخش های جزئی تری تقسیم کنیم ، در پوشه views من پوشه ای به نام partials می سازم داخل آن یک پوشه دیگر به نام page قرار می دهم و داخل page ، footer.ejs ,head.ejs,header.ejs,jsdefault.ejs را ایجاد می کنم ، خوب حالا کدهای default.ejs را ویرایش می کنم ، من این کدها را از سایت http://getbootstrap.com/getting-started/ برداشته ام ،

Default.ejs :

همان طور که در کد بالا مشاهده می کنید من بخش head را از این فایل حذف و به فایل head.ejs که ساختیم اضافه کردم و برای آدرس از include استفاده شده.

Head.ejs :

jsdefault.ejs :

در صفحه هات header.ejs و footer.ejs فعلا کدی ننوشته ام ، خوب حالا نوبت کمی تغییر در app.js است ، app.js را به این شکل ویرایش کردم.

ساختار پوشه های من نیز به این شکل در آمده :

pic22NodeJs

می بینید که پراپرتی classname را اضافه کردم ، از این پراپرتی برای نام گذاری کلاس ها استفاده شده است به default.ejs نگاه کنید ، می بینید که body class=”<% classname %>”، خوب حالا سرور را دوباره راه اندازی کنید و صفحه مرورگر خود را رفرش کنید ، اگر همه چیز درست باشد ، باشد بدون خطا localhost:3000 و localhost:3000/about را ببینید.

برای فرستادن اطلاعاتی به تمام template ها از local variable استفاده می کنیم برای این کار در app.js این کد را می نویسم :

سپس در default.ejs تگ <h3> را به این شکل تغییر می دهم :

حالا سرور را دوباره راه اندازی کنید و صفحه مرورگر را رفرش کنید چیزی مانند تصویر زیر می بینید:

nodejspic24
اگر به یاد داشته باشید من اسم دوستام چاپ کرده بودم ، می خوام دوباره این کار را انجام بدم اما مشکلی هست ، در صفحه about من آرایه ای برای چاپ ندارم و اگر بخوام مثل کد گذشته حلقه for خودم بنویسم با خطا روبرو می شم ، پس حلقه for را به این شکل در default.ejs می نویسم:

اگر سرور را دوباره راه اندازی کنید ، و به localhost:3000 بروید ، می بینید اسامی دوستان من چاپ شده است اما در localhost:3000/about اسامی وجود ندارد ، و به خطایی هم بر نخوردیم.

وقتی پروژه بزرگتر می شه بهتره که route های خودمونو در یک فایل دیگه قرار بدیم و بعد در app.js از اون ها استفاده کنیم ، به این شکل کدهم تمیز تر و خوانا تر خواهد شد.

برای این کار من در پوشه hooman پوشه ای به نام routes می سازم ، سپس در داخل آن فایلی به نام index.js قرار می دهم بعد از آن route هایی که در app.js نوشته بودم را برداشته و در داخل index.js قرار میدهم البته با تغییری کوچک :

سپس در فایل app.js من به این شکل در می آید :

سرور را دوباره راه اندازی کنید .

استفاده از Express generator

در مثال های قبل با ساختار پوشه ها درexpress آشناشدید ، حال می خواهیم خود express برای ما پوشه ها را ایجاد کنید در واقع می خواهیم express پروژه را برای ما به صورت اولیه ایجاد کند ، برای این کاراز generator استفاده می کنیم ،برای استفاده شما باید اکسپرس را به صورت global نصب کنید ، در قسمت های قبل طریقه نصب اکسپرس را به صورت global گفیتیم ، اما برای یاد آوری من کد را یک بار دیگر می نویسم.
Cmd را یاز کنید و دستور npm install –g express-generator را وارد کنید .

pic1nodejs2

بعد از نصب اکسپرس به صورت گلوبال وقت آن رسیده که پروژه را بسازیم ، به یاد دارید که ما از EJS استفاده کردیم پس برای اینکه اکسپرس EJS را نیز به پروژه اضافه کند دستور زیر را در cmd وارد می کنم :

pic2nodejs2

می بینید اکسپرس پوشه ها را ایجاد کرده و دستورات مورد نظر برای اجرای پروژه و نصب وابستگی ها را نیز در آخر پروژه آورده است .
قبل از نصب دپندنسی ها به پوشه ایجاد شده برید ، app.js را باز کنید و users را پاک کنید ، احتیاجی بهش نیست ، همین طور در پوشه routes نیز فایلی به نام users.js وجود دارد آن را هم پاک کنید.
خوب حالا نوبت آن است که دپندنسی ها را نصب کنیم به cmd بر گردید و دستوری را که خود express به شما نشان داده است را وارد کنید .

pic3nodejs2

همان طور که می بیند بعد از وارد کردن دستور مورد نظر ، npm شروع به نصب دپندنسی ها می کند.
بعد از نصب وابستگی ها پروژه را اجرا کنید کافیست دستور npm start را وارد کنید .

pic4nodejs2

پیشنهاد می‌کنم این مقالات هم بخوانید

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

۱ ستاره۲ ستاره۳ ستاره۴ ستاره۵ ستاره 3٫00 (2)
Loading...
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on facebook