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

اضافه کردن بخش ها 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 بخواهیم پروژه ای برای ما ایجاد کند.

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

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

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

پاسخ دهید

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