One place for hosting & domains

      EJS

      Cara Menggunakan EJS untuk Membuat Templat Aplikasi Node


      Pengantar

      Saat membuat aplikasi Node secara cepat, kadang-kadang diperlukan cara mudah dan cepat untuk membuat templat aplikasi kita.

      Jade hadir sebagai mesin tampilan untuk Express secara asali, tetapi sintaks Jade dapat menjadi terlalu rumit untuk banyak kasus penggunaan. EJS adalah satu alternatif yang melakukan pekerjaan itu dengan baik dan sangat mudah disiapkan. Mari kita lihat cara membuat aplikasi sederhana dan menggunakan EJS untuk memasukkan bagian situs kita yang dapat diulang (potongan) dan menyalurkan data ke tampilan.

      Menyiapkan Aplikasi Demo

      Kita akan membuat dua halaman untuk aplikasi, satu halaman dengan lebar penuh dan yang satu lagi dengan bilah samping.

      Dapatkan kode: Anda dapat menemukan git repo kode demo lengkap di GitHub, di sini

      Struktur Berkas

      Inilah berkas yang akan kita perlukan untuk aplikasi kita. Kita akan membuat templat dari dalam folder tampilan dan selebihnya adalah praktik Node yang cukup standar.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json akan menyimpan informasi aplikasi Node dan dependensi yang kita perlukan (express dan EJS). server.js akan menyimpan konfigurasi dan penyiapan server Express. Kita akan mendefinisikan rute ke halaman kita di sini.

      Penyiapan Node

      Mari kita masuk ke berkas package.json dan menyiapkan proyek kita di sana.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Kita cuma perlu Express dan EJS. Sekarang kita harus menginstal dependensi yang baru saja kita definisikan. Lanjutkan dan jalankan:

      Dengan semua dependensi yang telah diinstal, mari kita konfigurasi aplikasi untuk menggunakan EJS dan menyiapkan rute untuk dua halaman yang kita perlukan: halaman indeks (lebar penuh) dan halaman about (bilah samping). Kita akan melakukannya semua dalam berkas server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Di sini kita mendefinisikan aplikasi dan mengaturnya untuk ditampilkan di porta 8080. Kita juga harus menjadikan EJS sebagai mesin tampilan untuk aplikasi Express menggunakan app.set('view engine','ejs;. Perhatikan cara kita mengirim tampilan kepada pengguna dengan res.render(). Perlu diperhatikan bahwa res.render() akan mencari tampilan di folder tampilan. Jadi kita hanya perlu mendefinisikan pages/index karena jalur lengkapnya adalah views/pages/index.

      Memulai Server kita

      Lanjutkan dan mulai server menggunakan:

      Sekarang kita dapat melihat aplikasi dalam browser di http://localhost:8080 dan http://localhost:8080/about. Aplikasi kita sudah siap dan kita harus mendefinisikan berkas tampilan dan melihat cara kerja EJS di sana.

      Buat Potongan EJS

      Seperti banyak aplikasi yang kita buat, akan ada banyak kode yang digunakan kembali. Kita akan memanggil potongan itu dan mendefinisikan tiga berkas yang akan kita gunakan di seluruh bagian situs kita: head.ejs, header.ejs, dan footer.ejs. Mari kita buat berkas-berkas itu sekarang.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Menambahkan Potongan EJS ke Tampilan

      Sekarang potongan kita telah didefinisikan. Kita tinggal memasukkannya dalam tampilan. Mari kita masuk ke dalam index.ejs dan about.ejs serta menggunakan sintaks include untuk menambahkan potongan tersebut.

      Sintaks untuk Memasukkan Potongan EJS

      Gunakan <%- include('RELATIVE/PATH/TO/FILE') %> untuk menyematkan potongan EJS di berkas lain.

      • Tanda hubung <%- daripada cuma <% untuk memberi tahu EJS agar merender HTML mentah.
      • Jalur ke potongan itu relatif terhadap berkas saat ini.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Sekarang kita dapat melihat tampilan yang didefinisikan dalam browser di http://localhost:8080. node-ejs-templating-index

      Untuk halaman about, kita juga menambahkan bilah samping bootstrap guna memeragakan cara menstrukturkan potongan untuk digunakan kembali di seluruh bagian templat dan halaman yang berbeda.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Jika kita mengunjungi http://localhost:8080/about, kita dapat melihat halaman about dengan bilah samping! node-ejs-templating-about

      Sekarang kita dapat mulai menggunakan EJS untuk menyalurkan data dari aplikasi Node ke tampilan kita.

      Menyalurkan Data ke Tampilan dan Potongan

      Mari kita definisikan beberapa variabel dasar dan daftar yang harus disalurkan ke halaman beranda kita. Kembalilah ke berkas server.js dan tambahkan yang berikut ini di dalam rute app.get("https://www.digitalocean.com/").

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Kita telah membuat daftar bernama mascots dan string sederhana bernama tagline. Mari kita masuk ke berkas index.ejs dan menggunakannya.

      Merender Variabel Tunggal di EJS

      Untuk menggemakan variabel tunggal, kita cukup menggunakan <%= tagline %>. Mari kita tambahkan ini ke berkas index.ejs:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Mengulang-ulang Data di EJS

      Untuk mengulang-ulang data, kita akan menggunakan .forEach. Mari kita tambahkan ini ke berkas tampilan:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Sekarang kita dapat melihat informasi baru yang telah ditambahkan di browser!

      node-ejs-templating-rendered

      Menyalurkan Data ke Potongan di EJS

      Potongan EJS memiliki akses ke semua data yang sama seperti tampilan induk. Namun, berhati-hatilah: Jika Anda merujuk variabel di potongan, perlu didefinisikan di setiap tampilan yang menggunakan potongan atau akan dihasilkan kesalahan.

      Anda juga dapat mendefinisikan dan menyalurkan variabel ke potongan EJS dalam sintaks include seperti ini:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Namun, sekali lagi, Anda perlu berhati-hati ketika berasumsi variabel telah didefinisikan.

      Jika Anda ingin merujuk variabel di potongan yang mungkin tidak selalu didefinisikan, dan memberinya nilai asali, Anda dapat melakukannya seperti ini:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      Dalam baris di atas, kode EJS merender nilai variant jika telah didefinisikan, dan default jika tidak.

      Kesimpulan

      EJS memungkinkan kita untuk menjalankan aplikasi secara cepat saat kita tidak membutuhkan sesuatu yang terlalu rumit. Dengan menggunakan potongan dan memiliki kemampuan menyalurkan variabel ke tampilan, kita dapat membuat aplikasi yang bagus dengan cepat.

      Untuk referensi lainnya tentang EJS, lihat dokumentasi resmi di sini.



      Source link

      Verwenden von EJS zur Vorlagenerstellung Ihrer Node-Anwendung


      Einführung

      Bei der Erstellung von schnellen, spontanen Node-Anwendungen ist manchmal eine einfache und schnelle Methode zur Erstellung von Vorlagen unserer Anwendung erforderlich.

      Jade wird standardmäßig als Ansichts-Engine für Express bereitgestellt, doch kann die Jade-Syntax für viele Anwendungsfälle übermäßig komplex sein. EJS ist eine Alternative, die diese Aufgabe gut erfüllt und sehr einfach einzurichten ist. Sehen wir uns an, wie wir eine einfache Anwendung erstellen und EJS verwenden können, um wiederholbare Teile unserer Website (Teilbereiche oder Partials) einzubinden und Daten an unsere Ansichten zu übergeben.

      Einrichten der Demo-Anwendung

      Wir werden für unsere Anwendung zwei Seiten erstellen, wobei eine Seite eine volle Breite und die andere eine Seitenleiste hat.

      Holen Sie sich den Code: Ein git-Repo des vollständigen Demo-Codes auf Github finden Sie hier.

      Dateistruktur

      Hier sind die Dateien, die wir für unsere Anwendung benötigen. Wir werden unsere Vorlage im Ansichten-Ordner „views“ vornehmen und der Rest ist ganz normale Node-Praxis.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json enthält unsere Node-Anwendungsinformationen und die Abhängigkeiten, die wir benötigen (express und EJS). server.js enthält die Einrichtung und Konfiguration unseres Express-Servers. Hier definieren wir unsere Routen zu unseren Seiten.

      Node-Einrichtung

      Gehen wir in unsere Datei package.json und richten dort unser Projekt ein.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Wir benötigen lediglich Express und EJS. Jetzt müssen wir die Abhängigkeiten installieren, die wir gerade definiert haben. Fahren Sie fort und führen Sie aus:

      Nach der Installation aller unserer Abhängigkeiten konfigurieren wir unsere Anwendung für die Verwendung von EJS und richten unsere Routen für die beiden Seiten ein, die wir benötigen: die Index-Seite (volle Breite) und die Info- oder About-Seite (Seitenleiste). Dies führen wir alles in unserer Datei server.js aus.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Hier definieren wir unsere Anwendung und stellen sie so ein, dass sie auf Port 8080 angezeigt wird. Außerdem müssen wir EJS als Anzeige-Engine für unsere Express-Anwendung mit app.set('view engine', 'ejs'); festlegen. Beachten Sie, wie wir mit res.render() eine Ansicht an den Benutzer senden. Es ist wichtig zu beachten, dass res.render() in einem Ansichten-Ordner nach der Ansicht sucht. Wir müssen also nur pages/index definieren, da der vollständige Pfad views/pages/index lautet.

      Starten unseres Servers

      Fahren Sie fort und starten Sie den Server mit:

      Jetzt können wir unsere Anwendung im Browser unter http://localhost:8080 und http://localhost:8080/about sehen. Unsere Anwendung ist eingerichtet und wir müssen unsere View-Dateien definieren und sehen, wie EJS dort funktioniert.

      Erstellen der EJS-Teilbereiche

      Wie bei vielen von uns erstellten Anwendungen gibt es viel Code, der wiederverwendet wird. Wir nennen diese Teilbereiche oder Partials und definieren drei Dateien, die wir auf allen Seiten verwenden: head.ejs, header.ejs und footer.ejs. Lassen Sie uns diese Dateien jetzt erstellen.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Hinzufügen der EJS Partials zu Ansichten

      Wir haben unsere Partials nun definiert. Wir müssen sie nur in unsere Ansichten einbinden. Gehen wir in index.ejs und about.ejs und verwenden die Syntax include zum Hinzufügen der Partials.

      Syntax für das Einbinden eines EJS-Partials

      Verwenden Sie <%- include('RELATIVE/PATH/TO/FILE') %>, um ein EJS-Partial in eine andere Datei einzubinden.

      • Der Bindestrich <%- anstatt nur <% weist EJS an, rohes HTML zu rendern.
      • Der Pfad zu dem Partial ist relativ zur aktuellen Datei.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Jetzt können wir unsere definierte Ansicht im Browser unter http://localhost:8080 sehen. node-ejs-templating-index

      Für die Info- oder About-Seite fügen wir auch eine Bootstrap-Seitenleiste hinzu, um zu zeigen, wie Partials für die Wiederverwendung über verschiedene Vorlagen und Seiten strukturiert werden können.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Wenn wir http://localhost:8080/about besuchen, können wir unsere About-Seite mit einer Seitenleiste sehen! node-ejs-templating-about

      Jetzt können wir damit beginnen, EJS für die Datenübergabe von unserer Node-Anwendung an unserer Ansichten zu verwenden.

      Übergeben von Daten an Ansichten und Partials

      Definieren wir einige grundlegende Variablen und eine Liste, die an unsere Startseite übergeben werden sollen. Gehen Sie zurück in Ihre Datei server.js und fügen Sie Folgendes in Ihrer Route app.get("https://www.digitalocean.com/") ein.

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Wir haben eine Liste namens mascots und eine einfache Zeichenfolge namens tagline erstellt. Gehen wir in unsere Datei index.ejs und verwenden sie.

      Rendern einer einzelnen Variable in EJS

      Um eine einzelne Variable zu wiederholen, verwenden wir einfach <%= tagline %>. Fügen wir dies unserer Datei index.ejs hinzu:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Überschleifen von Daten in EJS

      Um unsere Daten überzuschleifen verwenden wir .forEach. Fügen wir dies unserer View-Datei hinzu:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Jetzt können wir in unserem Browser die neu hinzugefügten Informationen sehen!

      node-ejs-templating-rendered

      Übergeben von Daten an ein Partial in EJS

      Das EJS-Partial hat Zugriff auf dieselben Daten wie die übergeordnete Ansicht. Seien Sie jedoch vorsichtig: Wenn Sie eine Variable in einem Partial referenzieren, muss sie in jeder Ansicht definiert werden, die das Partial verwendet, da sonst ein Fehler ausgelöst wird.

      Sie können Variablen auch wie folgt in der Include-Syntax definieren und an ein EJS-Partial übergeben:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Sie müssen jedoch wieder vorsichtig sein, wenn Sie annehmen, dass eine Variable definiert wurde.

      Wenn Sie in einer Partial auf eine Variable verweisen, die eventuell nicht immer definiert ist, und ihr einen Standardwert geben möchten, können Sie dies folgendermaßen tun:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      In der obigen Zeile rendert der EJS-Code den von variant, wenn er definiert ist, und default, wenn er nicht definiert ist.

      Zusammenfassung

      EJS ermöglicht uns das schnelle Erstellen von Anwendungen, wenn wir nichts allzu Komplexes benötigen. Durch Verwendung von Partials und die Möglichkeit, Variablen einfach an unsere Ansichten zu übergeben, können wir schnell einige großartige Anwendungen erstellen.

      Weitere Informationen zu EJS finden Sie in den offiziellen Dokumenten hier.



      Source link

      Cómo usar EJS para crear una plantilla de su aplicación Node


      Introducción

      Cuando se crean aplicaciones Node rápidas en el momento, a veces es necesario una forma fácil y rápida de crear plantillas de nuestra aplicación.

      Jade llega como el motor de visualización para Express por defecto, pero la sintaxis de Jade puede ser demasiado compleja para muchos casos de uso. EJS es una alternativa que hace bien el trabajo y es fácil de configurar. Veamos cómo podemos crear una aplicación sencilla y usar EJS para incluir las partes repetibles de nuestro sitio (parciales) y pasar los datos a nuestras vistas.

      Configurar la aplicación demo

      Crearemos dos páginas para nuestra aplicación: una página con ancho completo y la otra con una barra lateral.

      Obtenga el código: puede encontrar un repositorio de git del código de demostración completo en GitHub aquí.

      Estructura del archivo

      Aquí están todos los archivos que necesitaremos para nuestra aplicación. Crearemos nuestra plantilla dentro de la carpeta de vistas y el resto son prácticas de Node bastante estándares.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json albergará la información de nuestra aplicación de Node y las dependencias que necesitamos (express y EJS). server.jso albergará los ajustes de nuestro servidor Express, configuración. Definiremos nuestras rutas para nuestras páginas aquí.

      Configuración de Node

      Vamos a entrar en nuestro archivo package.json y configurar nuestro proyecto ahí.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Todo lo que necesitaremos es Express y EJS. Ahora tenemos que instalar las dependencias que acabamos de definir. Ejecute:

      Con todas nuestras dependencias instaladas, ahora configuraremos nuestra aplicación para que utilice EJS y fijaremos nuestras rutas para las dos páginas que necesitamos: la página “Índice” (ancho completo) y la página “Acerca de” (barra lateral). Haremos todo esto dentro de nuestro archivo server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Aquí definimos nuestra aplicación y la configuramos para que se muestre en el puerto 8080. También debemos configurar EJS como el motor de visualización de nuestra aplicación Express usando app.set('view engine', 'ejs');. Observe cómo enviamos una vista al usuario usando res.render(). Es importante tener en cuenta que res.render() buscará en una carpeta de vistas la vista. Solo tenemos que definir pages/index, ya que la ruta completa es views/pages/index.

      Iniciar nuestro servidor

      Inicie el servidor usando:

      Ahora podemos ver nuestra aplicación en el navegador en http://localhost:8080 y http://localhost:8080/about. Nuestra aplicación está configurada y tenemos que definir nuestros archivos de vista y ver cómo EJS funciona ahí.

      Cree los parciales de EJS

      Igual que muchas aplicaciones que creamos, hay mucho código que se reutiliza. A esos códigos los llamamos parciales y definen tres archivos que usaremos en todo nuestro sitio: head.ejs, header.ejs y footer.ejs. Vamos a crear esos archivos ahora.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Añada los parciales de EJS a Vistas

      Ahora tenemos nuestros parciales definidos. Lo único que debemos hacer es incluirlos en nuestras vistas. Ahora veremos index.ejs y about.ejs y usaremos la sintaxis include para añadir los parciales.

      Sintaxis para incluir un parcial de EJS

      Utilice <%- include('RELATIVE/PATH/TO/FILE') %> para integrar un parcial de EJS en otro archivo.

      • El guion <%- en vez de solo <% para indicar a EJS que renderice HTML sin formato.
      • La ruta al parcial es relativa al archivo actual.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Ahora podemos ver nuestra vista definida en el navegador en http://localhost:8080. node-ejs-templating-index

      Para la página de acerca de, también añadimos una barra lateral de bootstrap para demostrar cómo pueden estructurarse los parciales para que se reutilicen en diferentes plantillas y páginas.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Si visitamos http://localhost:8080/about, podemos ver nuestra página de acerca de con una barra lateral node-ejs-templating-about

      Ahora podemos empezar a usar EJS para pasar datos desde nuestra aplicación Node a nuestras vistas.

      Pasar datos a Vistas y Parciales

      Vamos a definir algunas variables básicas y una lista para pasar a nuestra página de inicio. Vuelva a su archivo server.js y añada lo siguiente dentro de su ruta app.get("https://www.digitalocean.com/")

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Hemos creado una lista llamada mascots y una cadena sencilla llamada tagline. Vamos a entrar en nuestro archivo index.ejs para usarlas.

      Renderizar una variable única en EJS

      Para hacer eco de una variable, acabamos de usar <%= tagline %>. Vamos a añadir esto a nuestro archivo index.ejs:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Hacer bucle sobre los datos en EJS

      Para hacer bucle sobre nuestros datos usaremos .forEach. Vamos a añadir esto a nuestro archivo:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Ahora podemos ver en nuestro navegador la nueva información que hemos añadido.

      node-ejs-templating-rendered

      Pasar datos a un parcial en EJS

      El parcial EJS tiene acceso a todos los mismos datos que la vista principal. Pero tenga cuidado: si hace referencia a una variable en un parcial, debe definirse en cada vista que utilice el parcial o arrojará un error.

      También puede definir y pasar variables a un parcial EJS en la sintaxis include, de esta forma:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Pero de nuevo, debe tener cuidado y no asumir que una variable ha sido definida.

      Si desea referenciar una variable en un parcial que puede no definirse siempre, y darle un valor predeterminado, puede hacerlo de esta forma:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      En la línea anterior, el código EJS se renderiza el valor de variant, si está definido, y de default si no lo está.

      Conclusión

      EJS nos permite generar aplicaciones rápidas cuando no necesitamos algo demasiado complejo. Al usar parciales y tener la capacidad de pasar variables fácilmente a nuestras vistas, podemos crear algunas aplicaciones geniales rápidamente.

      Para obtener más información sobre EJS, consulte los documentos oficiales aquí.



      Source link