Node.js mit Express und EJS

Warum EJS

Das Schöne an EJS ist, dass Sie mit EJS Teilansichten erstellen können. Sie können zum Beispiel eine gemeinsame Kopfzeile, Fußzeile und Navigation für alle Seiten haben und einfach den internen Inhalt mit EJS ändern.
Sie können auch Daten an Ansichten übergeben. Betrachten Sie beispielsweise den Benutzernamen, der für jeden Benutzer unterschiedlich ist. Mit EJS können Sie Folgendes tun:

app.get('/', function(req, res){ 
  res.render('index',{user:"John Smith"}) 
}); 

Und legen Sie jedes Mal den dynamischen Benutzernamen fest.

Wie der Name schon sagt, können Sie Javascript zum Generieren von HTML aus EJS verwenden.

<html>
  <head><title><%= title %></title></head>
  <body>
    welcome <%= user%>;
  </body>
</html>

Fertig! Sie haben Ihr erstes Template mit EJS erstellt, Sie haben <%= title %> im obigen Code gefunden. Es ist nur eine Bindung und wir werden später darüber sprechen. Jetzt möchten Sie einfach die index.ejs-Datei von Ihrem Node-Server mit der EJS-View-Engine rendern.

Rendern von EJS

  • Erstellen Sie eine server.js-Datei und installieren Sie das ejs-Modul.
  • Schreiben Sie Code für Ihre Express-App
var express = require('express'); 
var app = express();

Stellen Sie nun in server.js die Ansichts-Engine wie folgt auf ejs ein

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

Erstellen Sie eine Route für Ihre App

app.get('/', function(req, res){ 
 	res.render('index',{user: "Great User",title:"homepage"});
});

Erinnern Sie sich an unsere index.ejs-Datei, wir hatten Tags zum Binden von Titel und Benutzer in die Seite eingefügt, hier in der Renderfunktion übergeben wir die Parameter für ihre Werte

Fertig! Führen Sie Ihre server.js-Datei aus

Teilansichten erstellen

Bisher haben wir eine einzelne Ansicht mit einigen dynamischen Daten erstellt und die Ausgabe gerendert. Jetzt werden wir versuchen, einige verschachtelte Ansichten zu erstellen. dh Teilansichten.

  • Ersetzen Sie den Inhalt Ihrer index.ejs-Datei durch diesen:
<html>
  <head>
    <% include('header.ejs') %>
  </head>
  <body>
    <% include('body.ejs') %>
  </body>
</html>
  • Erstellen Sie nun zwei weitere Dateien im Views-Ordner

header.ejs

<title>
Hello World
</title>

body.ejs

<div>
Welcome, Great User
</div>
  • Starten Sie nun Ihren Server. Sie haben Teilansichten in Ihre Hauptansicht für index.ejs eingebettet.

Verwendung von JavaScript

Wie gesagt, Sie können Javascript für die Vorlagen in Ejs verwenden. Jetzt werden wir sehen, wie es gemacht wird.

  • Schreiben Sie dies in Ihre index.ejs-Datei,
<ul>
  <% users.forEach(function(user){ %>
    <%= user.name %>
  <% })%>
</ul>
  • Rendern Sie nun die Datei index.ejs und übergeben Sie ein Objektarray an die Renderfunktion, wie hier gezeigt
app.get('/', function(req, res){ 
  res.render('index',{users : [
            { name: 'John' },
            { name: 'Mike' },
            { name: 'Samantha' }
  ]});
});

Das ist es, hier haben wir in das Array iteriert, an das Renderobjekt übergeben und die Namen aller Benutzer aufgelistet, die EJS verwenden.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *