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

استفاده از 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 تایپ می کنم .

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

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

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

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

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Darkoobweb Default</title>
</head>
<body>
<h3>Salaaaaaam</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
 scelerisque etiam erat wisi egestas, sem pede posuere suspendisse, pede nec mauris ac iaculis augue neque, velit
 vitae. Fusce erat. Pellentesque id, turpis in nec ac, vivamus dui. Per luctus tincidunt ac scelerisque in, lacinia
 sapien ligula ullamcorper nibh eu. Urna tincidunt dolor, nulla nibh a nec auctor, in feugiat cras ac senectus semper
 aliquam. Sapien elementum risus quis. Ridiculus ornare, id fusce magna, condimentum adipiscing ut ut nulla pretium,
 accumsan suscipit purus eu ligula, nisl arcu quia nec rutrum tristique.</p>
</body>
</html>

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


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

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

app.get("/", function (req, res) {
 res.render("default");
});

app.get("/aboutme", function (req, res) {
 res.send("&lt;h3&gt;darkoobweb.com&lt;/h3&gt;");
});

app.get("/man/:esm?", function (req, res) {
 var jj = req.params.esm;
 res.send("&lt;h3&gt;darkoobweb.com&lt;/h3&gt;&lt;br&gt;man " + jj + " hastam");
});

app.get("/man/:esm?/:keshvar?", function (req, res) {
 var jj = req.params.esm;
 var kk = req.params.keshvar;
 res.send("&lt;h3&gt;darkoobweb.com&lt;/h3&gt;&lt;br&gt;man " + jj + " hastam&lt;br&gt;Keshvare man " + kk + " ast");
});

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

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


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

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

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

pic19NodeJs

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


app.get("/", function (req, res) {
 res.render("default", {title: "Man omadam"});
});

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

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

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

pic20NodeJs

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

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

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

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

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Darkoobweb Default</title>
</head>
<body>
<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>

<ul>
 <% for(var i = 0; i < fri.length; i++){ %>

 <li><%= fri[i] %></li>

 <% } %>
</ul>

</body>
</html>

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

 

pic21NodeJs

درقسمت بعد در مورد partials یا بخش ها صحبت خواهیم کرد.

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

پوریا

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

نظر دهید

Click here to post a comment

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