Bei der Webentwicklung stehen Entwicklern viele Tools zur Auswahl. Die Wahl der richtigen Tools und Technologien kann einen erheblichen Einfluss auf die Effizienz und Funktionalität von Projekten haben. Eines der beliebtesten Tools in der Webentwicklung ist EJS, was für Embedded steht JavaScript . EJS ist eine einfache JavaScript-Vorlagensprache, die generiert HTML mit einfachem JavaScript. In diesem Artikel erklären wir, was EJS ist, warum es benötigt wird, welche Funktionen es hat, wie man es installiert und ein Beispiel mit Ausgabe bereitstellt.
Was ist EJS?
EJS oder Embedded JavaScript ist eine Vorlagen-Engine für JavaScript, die für die Webentwicklung verwendet wird und es Benutzern ermöglicht, dynamisches HTML-Markup mithilfe von JavaScript-Code in HTML-Vorlagen zu generieren. Es soll den Prozess der Darstellung dynamischer Inhalte in Webanwendungen vereinfachen. Es enthält eine Mischung aus HTML und JavaScript, die es einfach macht, dynamische Inhalte basierend auf Daten aus Ihrer Anwendung zu generieren.
Funktionen von EJS
- Einfache Syntax: EJS bietet eine unkomplizierte Syntax, die HTML und JavaScript kombiniert und so das Erlernen und Verwenden erleichtert.
- Dynamischer Inhalt: EJS ermöglicht die dynamische Generierung von HTML- und JavaScript-Inhalten innerhalb von HTML-Tags und erhöht so die Flexibilität bei der Inhaltserstellung.
- Layout und Teiltexte: EJS unterstützt Layouts und Partials, sodass Benutzer Vorlagen in wiederverwendbare Komponenten aufteilen können, wodurch Codeduplizierungen reduziert und die Wartbarkeit verbessert werden.
- Fehlerbehandlung: EJS stellt Fehlermeldungen bereit, die Entwicklern beim Debuggen helfen und so das Entwicklungserlebnis insgesamt verbessern.
Warum brauchen Sie EJS?
- Dynamische HTML-Generierung: Mit EJS können Sie dynamische HTML-Inhalte basierend auf Variablen, Bedingungen, Schleifen und anderer JavaScript-Logik generieren. Dies ist besonders nützlich für die Darstellung dynamischer Daten, die aus Datenbanken oder APIs abgerufen werden.
- Wiederverwendbarkeit des Codes: Mithilfe von EJS-Vorlagen können Sie wiederverwendbare Komponenten oder Teilkomponenten erstellen, die in mehrere Seiten eingebunden werden können. Dies fördert die Codemodularität und reduziert Duplikate in Ihren Webanwendungen.
- Serverseitiges Rendering: Mit EJS können Sie ein serverseitiges Rendering (SSR) von Webseiten durchführen. SSR ist für SEO (Suchmaschinenoptimierung) von Vorteil, da es Suchmaschinen ermöglicht, Ihre Inhalte effektiver zu crawlen und zu indizieren als beim clientseitigen Rendering (CSR), das von Frameworks wie React oder Angular durchgeführt wird.
- Einfache Integration mit Node.js und Express.js: EJS lässt sich nahtlos in Node.js und Express.js integrieren und ist daher eine beliebte Wahl für Entwickler, die an serverseitigen JavaScript-Anwendungen arbeiten. Die Einrichtung und Verwendung innerhalb eines Express.js-Projekts ist einfach.
- Vertraute Syntax: Wenn Sie bereits mit HTML und JavaScript vertraut sind, ist das Erlernen und Verwenden von EJS unkompliziert. Die Syntax ähnelt HTML mit eingebettetem JavaScript-Code
>Tags, die es Entwicklern mit unterschiedlichem Erfahrungsniveau zugänglich machen. - Vorlagenvererbung und Layouts: EJS unterstützt die Vererbung von Vorlagen und Layouts, sodass Sie konsistente Layouts für Ihre Webseiten erstellen können. Sie können ein Basislayout definieren und es in anderen Vorlagen erweitern, wodurch es einfacher wird, ein einheitliches Erscheinungsbild in Ihrer gesamten Anwendung beizubehalten.
Wie verwende ich EJS?
Schritt 1: Installieren Sie EJS als Abhängigkeit in Ihrem Projekt
npm install ejs>
Schritt 2: Erstellen Sie in Ihrem Projektverzeichnis einen Ordner „Ansichten“, falls dieser noch nicht vorhanden ist. Erstellen Sie im Ordner „views“ eine neue Datei mit der Erweiterung „.ejs“, zum Beispiel „index.ejs“.
Schritt 3: Um EJS mit Express in eine Express.js-Anwendung zu integrieren, legen Sie EJS als Ansichts-Engine in Ihrer Express-App-Konfiguration fest. Diese Konfiguration ermöglicht es Express, EJS zum Rendern von Ansichten zu verwenden.
app.set('view engine', 'ejs');>Schritt 4: EJS-Vorlage rendern: In Ihren Express-Routenhandlern rendern wir die EJS-Vorlage mithilfe von „res.render()“ und stellen Sie die erforderlichen Daten bereit, die an die Vorlage übergeben werden sollen.
res.render('hello', { name: 'Geeks' });>Projektstruktur:
Die aktualisierten Abhängigkeiten in package.json Die Datei sieht folgendermaßen aus:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Beispiel: Implementierung zur Veranschaulichung der Verwendung von EJS anhand eines Beispiels.
HTML EJS-Beispieltitel> Kopf> <body> <h1>Hallo,<%= name %>!h1> body> html>></pre> </code>JavaScript<code class='hljs'> <pre class='hljs'>// index.js const express = require('express'); const app = express(); const port = 3000; app.set('view engine', 'ejs'); app.get('/', (req, res) =>{ res.render('hello', { name: 'Geeks' }); }); app.listen(port, () => { console.log(`Server läuft auf http://localhost:${port}`); });></pre> </code> <p dir='ltr'> <b> <strong>Schritt zum Ausführen der Anwendung:</strong> </b> <span>Führen Sie die Anwendung mit dem folgenden Befehl aus dem Stammverzeichnis des Projekts aus</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> <span>Ihr Projekt wird unter der URL http://localhost:3000/ angezeigt.</span></p> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt="Ausgabe"></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/algebra-maq/">Algebra - Maq</a> </li><li> <a href="/csharp-generic-list/">Csharp-Generic-List</a> </li><li> <a href="/log4j-tutorial/">Log4J-Tutorial</a> </li><li> <a href="/object-oriented-design/">Objektorientiertes Design</a> </li><li> <a href="/java-new-features/">Neue Java-Funktionen</a> </li><li> <a href="/installation-mac/">Installation Auf Mac</a> </li><li> <a href="/java-operators/">Java-Operatoren</a> </li><li> <a href="/cbse-class-11-cat/">Cbse – Klasse 11</a> </li><li> <a href="/javascript-es/">Javascript-Es</a> </li><li> <a href="/all-interview/">Alle Interviews</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Rufen Sie eindeutige Werte aus einer Spalte in Pandas DataFrame ab</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Ein Informatikportal für Geeks. Es enthält gut geschriebene, gut durchdachte und gut erklärte Informatik- und Programmierartikel, Quizfragen und Fragen zu Übungs-/Wettbewerbsprogrammier-/Firmenvorstellungsgesprächen.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/get-unique-values-from-column-pandas-dataframe"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikel</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/args-kwargs-python">*args und **kwargs in Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-array-structures">C Array von Strukturen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-yearmonth-class">Java YearMonth-Klasse</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/covariance-matrix">Kovarianzmatrix</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/pandas-dataframe-describe">Pandas DataFrame.describe()</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Beliebte Beiträge</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-format">Java-String mit Format</a>
</li><li><a href="/gamepigeon-android">Wie bekomme ich eine Wildtaube auf Android?</a>
</li><li><a href="/add-elements-array-java">Array zum Hinzufügen von Elementen Java</a>
</li><li><a href="/random-function-c">c Zufallszahl</a>
</li><li><a href="/gimp-deselect">Gimp, wie man die Auswahl aufhebt</a>
</li><li><a href="/npm-install-command">npm-Installationsbefehl</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Alle Rechte Vorbehalten | <a href="//techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>