الـExpressJS Templating Using Pug

AbdullaScriptمنذ 7 سنوات

السلام عليكم و رحمة الله و بركاته..

في هذا الموضوع سنتحدث عن عن علاقة إطار العمل ExpressJS مع الباترن NodeJS و كيفية عمل Pug as template engine

اولا: حتى لا تكون هناك امور مبهمه و ابعاد الغيوم التي تدور حول اذهان الكثير من يريد العمل او التوجه لهذا الباترن يجب عرض بعض من الحقائق:

الـNodeJS ليست لغة جديدة .. انما بيئة مبرمجة بالـJS.
هذه البيئه تعمل في جهة السيرفر.
ان كنت مبرمج AngularJS or ReactJS ليس هناك سطر محدد تربط فيه بين تطبيقك الNode مع الفريموورك الذي تعمل به.
طريقة الربط تكون من خلال HTTP requests.
تستطيع التعامل مع قواعد البيانات المختلفه مباشره بالـNode مثل MySQL, MariaDB و اشهرهم في هذا المجال هي MongoDB.

نعود مرة اخرى للـExpressJS الذي هو يعتبر فريم وورك ابعد مما ان يقال عنه "مساعد" في تطبيقات الـNode.

بإستخدام هذا الفريم وورك الذي يعمل كذلك في السيرفر، يتم تسهيل العمل و كمية الكود في تطبيق الـNode بشكل كبير جدا.

مثال على تطبيق Node بإستخدام فريم وورك ExpressJS وسيتم شرح اجزائه جميعها


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

app.get('/', function (req, res) {
 res.send('Hello World!')
});

app.listen(3000, function () {
 console.log('Example app listening on port 3000!')
});

اول سطرين استدعاء موديول الاكسبرس و من ثم دالة الاكسبرس في المتغير app الذي استخدمناه في صنع التطبيق.

اقتباس

app.get

الشطر الثاني get هو عبارة عن نوع الـhttp request قد يكون GET, POST, DELETE, UPDATE etc ….

بعد ذلك يأتي المسار - لتفاصيل اكثر حول هذا الجزء الرجاء زيارة الدرس السابق.

نننقل الآن الى امر اخر في الـExpressJS وهو الـtemplating ( عمل الواجهات UI و استقبال البيانات المرسلة من الـNode )

لعمل الواجهات الديناميكيه يفضل استخدام محركات التمبليت التي تتوافق مع الاكسبرس وهي

و في هذا الدرس سنستخدم المحرك الاول لعمل صفحة ويب اعتيادية و اخرى ديناميكية, لصنع واجهة بمحرك التمبليت pug يجب عليك ان تتقن او ان تاخذ فكره عن هذا المحرك لتعرف كيفية كتابه الكود ومثال على ذلك


doctype html
html(lang='en')
  head
    title Jade
    script(type='text/javascript').
      foo = true;
      bar = function () {};
      if (foo) {
      bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      p You are amazing
      p
        | Jade is a terse and simple
        | templating language with a
        | strong focus on performance
        | and powerful features.

يعادل في الHTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      foo = true;
      bar = function () {};
      if (foo) {
      bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html>

لمعلومات اكثر حول اللغة اطلع على موقعهم الرسمي

وبذلك سنقوم بإنشاء مجلدات ومستندات بهذه الطريقة

img1.png.bfd1811069fbafe2baedde26a966b24d.png

حمل الـbootstrap وانقل كل من bootstrap.min.css إلى مجلد css , انقل bootstrap.min.js إلى مجلد js

بعد ذلك إبدأ بتثبيت الـpackages التي سنعمل بها من خلال فتح الـterminal في مجلد myapp من خلال الاوامر التالية


$ npm install express --save
$ npm install cookie-parser --save
$ npm install body-parser --save
$ npm install mysql --save

افتح ملف التطبيق app.js وقم بإستدعاء هذه البكجات


var express = require('express');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mysql = require('mysql');

الآن نبدأ بإعداد config فريم وورك الـExpressJS مع cookie-parser body-parser ( سنستخدمهم لاحقا )


var router = express.Router();
var app = express();
app.use(bodyParser.json({limit: "50mb"}));
app.use(cookieParser());
var urlencodedParser = bodyParser.urlencoded({
    extended: true,
    parameterLimit:50000
});
app.use("/", router);

نضيف امكانية استخدام ملفات الـcss, js , images etc من خلال استخدام الـmiddleware ـexpress static بإعطاء مسار وهمي لهذه الملفات


app.use('/css', express.static(__dirname + '/public/css'));
app.use('/js', express.static(__dirname + '/public/js'));

نرى وجود ملفات الـcss and js في مجلد public/css ولكن المسار الذي سنكتبه في الكود هو فقط css/ وليس بالضرورة ان يكون اسم المسار الوهمي ذو علاقه بالمسار الاساسي .. تستطيع ان تسميه مثلا sambosa/ و في الحقيقة هو public/css/

تحديد نوع الـtemplate engine الذي سنستخدمه في هذا التطبيق مع تحديد مسار مجلد الـviews الذي يحتوي على صفحات الموقع او التطبيق


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

بعد إنشاء ملفات الـpug في إحدى الخطوات السابقه , انسخ والصق كود الصفحتين index.pug and layout.pug details.pug كلن على حدى


//layout.pug
doctype html
html
  head
    title= title
    script(src='https://code.jquery.com/jquery-3.2.1.min.js')
    link(rel='stylesheet', href='/css/bootstrap.min.css')
    script(src='/js/bootstrap.min.js')
  body
    nav.navbar.navbar-default
      .container
        .navbar-header
          button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='/') NodeJS
        #navbar.navbar-collapse.collapse
          ul.nav.navbar-nav
            li.active
              a(href='/') Home
            li
              a(href='/details') details
            li.dropdown
              a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-haspopup='true', aria-expanded='false')
                | Dropdown
                span.caret
              ul.dropdown-menu
                li
                  a(href='#') Action
                li
                  a(href='#') Another action
                li
                  a(href='#') Something else here
                li.divider(role='separator')
                li.dropdown-header Nav header
                li
                  a(href='#') Separated link
                li
                  a(href='#') One more separated link
    block content


//index.pug
extends layout

block content
  .container
    h1 #{msg}
    p #{username} , welcome to the first templating tutorial


//details.pug
extends layout

block content
  .container
    .table-responsive
      h2 user table
      p This is all users we have so far
      table.table.table-bordered#example
        thead
          tr
            th Firstname
            th Lastname
            th Email
        tbody
          tr
            td John
            td Doe
            td john@example.com
          tr
            td Mary
            td Moe
            td mary@example.com
          tr
            td July
            td Dooley
            td july@example.com
  link(rel='stylesheet', type='text/css', href='https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css')
  script(type='text/javascript', src='https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js')
  script().
    $(document).ready(function() {
      $('#example').DataTable();
    });

ملاحظة: نستخدم extends layout لكي لا نكرر الـhead في الصفحات الاخرى , مثل include في الـPHP ( في هذا الدرس ) - الاستخدام الحقيقي للـlayout هو تصميم شكل معين لصفحات معينه .. كـtemplate خاص مثلا - معلومات اكثر من خلال الرابط هنا

الأن تم تجهيز المستوى الأول من التطبيق وهو الـconfigurations , ننتقل إلى النص الآخر وهو الـroutes . اولا route الصفحة الرئيسية سيكون كالتالي


app.get('/', function(req, res) {
    res.render('index', {
        title: 'Pug ExpressJS NodeJS Tutorial',
        username: 'abdulla',
        msg: 'Hey There!'
    })
});

نلاحظ ان مسار الـroute هو مجرد slash للامام .. بذلك يتم تحديد المسار الرئيسي للتطبيق, بعد ذلك res.render اي تعني response render حيث يقوم تطبيق الـNode بالأجابة من بعد عمل طلب request من طرف المستخدم , للتوضيح اكثر الـHTTP هو عباره عن بروتوكول طلب و اجابة وبذلك request and response - req, res فعند طلب العميل امر ما يجب عليه ان يحصل على شي ما في المقابل.

و كما موضع في الدالة اعلاه ان الـresponse هو عباره عن عمل render لملف index.pug الموجود في مجلد views مع ارسال ثلاث متغيرات title, username and msg , و طريقة استقبال البيانات في الـpug هي كالتالي ( يوجد اكثر من طريقة )


  h1 #{username}
  p Welcome to #{title}

خطوة اخيره لتشغيل التطبيق يجب تحديد بورت معين ولنفترض 3000


app.listen(3000, function() {
    console.log('The app is running http://localhost:3000');
});

افتح الـterminal داخل مجلد التطبيق myapp واكتب الامر التالي لتشغيل التطبيق


node app.js

افتح المتطفح على المسار

اقتباس

http://localhost:3000

انتهى الدرس الاول .. تم من خلاله

عمل configuration لتطبيق الـnode الذي سنستخدمه في الدروس القادمة
تثبيت template engine و توصيله مع تطبيق الـNode
ارسال بيانات من الـNode إلى pug

الدرس القادم سيكون هناك سنعرض لكم كيفية التعامل مع قواعد البيانات وإرسال المعلومات الى pug

للحصول على ملفات العمل تجدونهم في المرفقات, بعد تحميل الملف قم بفك الضغط انتقل إلى داخل المجلد واكتب الأمر التالي لتثبيت جميع الـpackages دفعة واحده