آموزش NodeJs+Express – قسمت ششم

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

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

Default.ejs :

<!DOCTYPE html>
<html lang="en">
<head>
 <% include partials/page/head.ejs %>
</head>
<body class="<%= classname %>">
<% include partials/page/header.ejs %>
<div class="container">
 <h3><%= title %></h3>
 <p>Lorem ipsum dolor sit amet, magnis ac volutpat quam vitae sodales in. Mattis diam at dignissim massa lectus
 occaecat,
 massa luctus in. Fusce placerat augue dolor et, sem curae autem, morbi eget feugiat. Vel ut lacus, dui senectus
 urna, ut potenti quisque mauris mauris aliquam quis, sit proin facilisi, interdum dictumst justo mi iaculis.
 Nisl
 accumsan suscipit purus eu ligula, nisl arcu quia nec rutrum tristique.</p>

</div><!-- container -->
<% include partials/page/footer.ejs %>
<% include partials/page/jsdefaults.ejs %>
</body>
</html>

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

Head.ejs :


 <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= title %></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
 integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

jsdefault.ejs :


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
 integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
 crossorigin="anonymous"></script>

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


var express = require("express");
var app = express();

app.set("view engine", "ejs");

app.get("/", function (req, res) {
 res.render("default", {
 title: "Man Omadam",
 classname:"home",
 fri:["Hooman","Ashkan","shabbo"]
 });
});

app.get("/about",function (req, res) {
 res.render("default", {
 title: "About Us",
 classname:"about"
 });
});

app.get("*", function (req, res) {

 res.send("Eshtebah rafti.");
});


var server = app.listen(3000, function () {
 console.log("Hame chiz moratabe , Va porte 3000 amadast");
});

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

pic22NodeJs

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

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


app.locals.pagetitle = "Darkoobweb";

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


<h3><%= title %> <%= pagetitle %></h3>

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

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


<% if(typeof(fri) != "undefined" ){ %>
<ul>
 <% for(var i = 0; i < fri.length; i++){ %>
 <li>
 <%= fri[i] %>
 </li>
 <% } %>
</ul>

<% } %>


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

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

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


exports.index = function (req, res) {
 res.render("default", {
 title: "Man Omadam",
 classname: "home",
 fri: ["Hooman", "Ashkan", "shabbo"]
 });
};

exports.about = function (req, res) {
 res.render("default", {
 title: "About Us",
 classname: "about"
 });
};

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


var express = require("express");
var app = express();
var routs = require("./routes");

app.set("view engine", "ejs");

app.locals.pagetitle = "Darkoobweb";

app.get("/", routs.index);
app.get("/about", routs.about);

app.get("*", function (req, res) {
 res.send("Eshtebah rafti");
});


var server = app.listen(3000, function () {
 console.log("Hame chiz moratabe , Va porte 3000 amadast");
});

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

در قسمت بعد می بینیم که چگونه از express بخواهیم پروژه ای برای ما ایجاد کند.

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

پوریا

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

نظر دهید

Click here to post a comment

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