15. استفاده از template engineها در Express

ما قبلا یک فایل html درست کردیم در مسیر view که شامل یک فرم بود. Template Engine ها به ما این امکان رو میدن که یک صفحه داینامیک درست کنیم.

اینجا با pug کار میکنیم. ابتدا به این طریق نصبش میکنیم:

npm  i  -s  pug

حالا توی برنامه pug رو به عنوان template engine به اکسپرس معرفی می کنیم. (توی فایل app.js)

app.set ('views','./views');
app.set ('view engine','pug');

به این ترتیب امکان استفاده از pug فراهم میشه. کافیه یک فایل template توی پوشه views درست کنید. (به اسم errors) ساختار پیش فرض فایل به این صورت است:

doctype html
html(lang=&quoten&quot)
head
meta(charset=&quotUTF-8&quot)
meta(http-equiv=&quotX-UA-Compatible&quot, content=&quotIE=edge&quot)
meta(name=&quotviewport&quot, content=&quotwidth=device-width, initial-scale=1.0&quot)
title Document
body

ساختارش ما رو یاد html میندازه ولی خب اون نیست و فرق داره باهاش. برای استفاده کردن از این فایلی که داریم مثلا توی میان افزار error که دیروز ساختیم میام و به عنوان پاسخ این فایل pug رو میفرستیم. فقط توجه کنید مثل فایل html لاگین نمیتونیم اون رو sendfile کنیم. چون اگر فایل pug رو بفرستیم به مرورگر متوجه اش نمیشه . پس باید این فایل pug رو رندر کنیم و ازش یه html بسازیم بعد اماده ارسال به مرورگر میشه.

پس میان افزار error به شکل زیر میشه:

app.use((error,req,res,next)=>{
res.render('error');
console.log('Error code:' + error.message);
next(); })

برنامه رو اجرا کنید ، اگر یادتون باشه ما خودمون توی مسیر /main/signin یک خطا ایجاد کرده بودیم. و الان اگر خطایی رخ بده توی برنامه ( مثلا به همین مسیر signin که برید) میان افزار error اجرا خواهد شد و صفحه رندر شده error.pug را به شما نمایش خواهد داد ، البته الان چیزی داخلش نیست و فقط tilte صفحه نوشته شده Document.

حالا اصلا به چند درد میخوره استفاده از این temp. engin ها. گفتیم که امکان ایجاد صفحات داینامیک رو فراهم میکنند برامون. به چه صورت؟

اونجایی که درخواست رندر کردن error رو دادیم ، یک متغییر هم میفرستیم براش به این شکل:

res.render('error' , {message:'There is an error on this page'});

حالا تو فایل pug میتونید از این متغییر استفاده کنید. شما حتی می تونید شی یا ارایه ای از متغییرها هم به فایل template ارسال کنید.

body
h1= message

توی قسمت body ازش استفاده میکنیم. توجه کنید حتما = باید به h1 چسبیده باشه.

حالا صفحه Error داریم و کدی که دیروز نوشتیم رو کامل کردیم امروز.