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

موضوع: تاریخ انتشار: 1 سال قبل

استفاده از 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 یا بخش ها صحبت خواهیم کرد.

اشتراک گذاری:
http://darkoobweb.com/?p=303

درباره نویسنده پوریا

سلام. من پوریا هستم. به برنامه نویسی علاقه مندم. حدود دو سال است در سامانه‌ی آموزشی خدماتی دارکوب وب فعالیت می‌کنم. امیدوارم آموزش‌هایی که در وب‌سایت قرار می‌دهم برای شما مفید باشد. موفق باشید. {^}

پاسخ دهید

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