موضوع: تاریخ انتشار: 12 ماه قبل

اضافه کردن بخش ها 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

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

سلام ، من پوریا هستم با جاوا آشنایی دارم به هوش مصنوعی و امنیت علاقه مندم و امید وارم آموزش هایی که در وب سایت قرار می دم برای شما مفید باشه ، موفق باشید {^}

پاسخ دهید

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