În dezvoltarea web, există multe instrumente disponibile din care dezvoltatorii pot alege. Alegerea instrumentelor și tehnologiilor potrivite poate avea un impact semnificativ asupra eficienței și funcționalității proiectelor. Unul dintre instrumentele populare în dezvoltarea web este EJS, care înseamnă Embedded JavaScript . EJS este un limbaj de șablon JavaScript simplu care generează HTML cu JavaScript simplu. În acest articol, vom acoperi ce este EJS, de ce este necesar, caracteristicile sale, cum să-l instalăm și vom oferi un exemplu cu rezultate.
Ce este EJS
EJS sau Embedded JavaScript este un motor de șablon pentru JavaScript care este utilizat pentru dezvoltarea web, care permite utilizatorilor să genereze markup HTML dinamic folosind codul JavaScript în șabloanele HTML. Este conceput pentru a simplifica procesul de redare a conținutului dinamic în aplicațiile web. Conține un amestec de HTML și JavaScript care facilitează generarea de conținut dinamic bazat pe datele din aplicația dvs.
Caracteristicile EJS
- Sintaxă simplă: EJS oferă o sintaxă simplă care combină HTML și JavaScript, făcându-l ușor de învățat și utilizat.
- Conținut dinamic: EJS permite generarea de conținut HTML și JavaScript în mod dinamic în cadrul etichetelor HTML, sporind flexibilitatea în crearea de conținut.
- Aspect și parțiale: EJS acceptă layout-uri și parțiale, permițând utilizatorilor să descompună șabloanele în componente reutilizabile, reducând duplicarea codului și îmbunătățind mentenabilitatea.
- Eroare de manipulare: EJS oferă mesaje de eroare care ajută dezvoltatorii să depaneze, îmbunătățind experiența generală de dezvoltare.
De ce ai nevoie de EJS?
- Generare HTML dinamică: EJS vă permite să generați conținut HTML dinamic bazat pe variabile, condiții, bucle și altă logică JavaScript. Acest lucru este util în special pentru redarea datelor dinamice preluate din baze de date sau API-uri.
- Reutilizarea codului: Folosind șabloane EJS, puteți crea componente sau părți parțiale reutilizabile care pot fi incluse în mai multe pagini. Acest lucru promovează modularitatea codului și reduce dublarea în aplicațiile dvs. web.
- Redare pe partea serverului: Cu EJS, puteți efectua randarea pe server (SSR) a paginilor web. SSR este benefic pentru SEO (Search Engine Optimization), deoarece permite motoarelor de căutare să vă acceseze cu crawlere și să indexeze conținutul mai eficient în comparație cu randarea la nivelul clientului (CSR) realizată de cadre precum React sau Angular.
- Integrare ușoară cu Node.js și Express.js: EJS se integrează perfect cu Node.js și Express.js, ceea ce îl face o alegere populară pentru dezvoltatorii care lucrează pe aplicații JavaScript pe server. Este ușor de configurat și utilizat în cadrul unui proiect Express.js.
- Sintaxă familiară: Dacă sunteți deja familiarizat cu HTML și JavaScript, învățarea și utilizarea EJS sunt simple. Sintaxa este similară cu HTML, cu cod JavaScript încorporat inclus
>etichete, făcându-l accesibil dezvoltatorilor cu diferite niveluri de calificare. - Moștenirea șablonului și aspectul: EJS acceptă moștenirea șabloanelor și machetelor, permițându-vă să creați machete coerente pentru paginile dvs. web. Puteți defini un aspect de bază și îl puteți extinde în alte șabloane, făcând mai ușor să mențineți un aspect și un aspect coerent în aplicația dvs.
Cum se utilizează EJS?
Pasul 1: Instalați EJS ca dependență în proiectul dvs
npm install ejs>
Pasul 2: Creați un folder „vizualizări” în directorul proiectului, dacă nu există deja. În folderul vizualizări, creați un fișier nou cu extensia .ejs, de exemplu, index.ejs
actrița indiană rani mukerji
Pasul 3: Pentru a integra EJS cu Express într-o aplicație Express.js, setați EJS ca motor de vizualizare în configurația aplicației Express. Această configurație permite Express să utilizeze EJS pentru redarea vizualizărilor.
app.set('view engine', 'ejs');>Pasul 4: Redați șablonul EJS, în gestionatorii de rute Express redăm șablonul EJS folosind „res.render()” și furnizați datele necesare pentru a fi transmise șablonului.
vârsta dharmendra
res.render('hello', { name: 'Geeks' });>Structura proiectului:
Dependențe actualizate în pachet.json fișierul va arăta astfel:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Exemplu: Implementare pentru a prezenta utilizarea ejs cu un exemplu.
HTML EJS Exemplu titlu> cap> <body> <h1>Buna ziua,<%= 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', { nume: 'Geeks' }); }); app.listen(port, () => { console.log(`Serverul rulează pe http://localhost:${port}`); });>>></tag> <p dir='ltr'> <b> <strong>Pasul pentru rularea aplicației:</strong> </b> <span>Rulați aplicația folosind următoarea comandă din directorul rădăcină al proiectului</span></p> <tag data-text-3='node index.js></pre> </code><p dir='ltr'> <b> <strong>Ieșire:</strong> </b> <span>Proiectul dvs. va fi afișat în adresa URL http://localhost:3000/</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/strsep-function-c">strsep</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt="ieșire"></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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/classroom-resources/">Resurse Pentru Clasă</a> </li><li> <a href="/javascript-tutorial/">Tutorial Javascript</a> </li><li> <a href="/python-list-programs/">Lista-Programe Python</a> </li><li> <a href="/node-js-fs-module/">Node.js-Fs-Module</a> </li><li> <a href="/digital-electronics/">Electronică Digitală</a> </li><li> <a href="/sql-clauses-operators/">Sql-Clause-Operatori</a> </li><li> <a href="/java-networking/">Rețea Java</a> </li><li> <a href="/c-dynamic-memory-allocation/">C-Alocarea Memoriei Dinamice</a> </li><li> <a href="/linux-system-admin/">Administrator De Sistem Linux</a> </li><li> <a href="/linux-files/">Fișiere Linux</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">range() vs xrange() în Python</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal de informatică pentru tocilari. Conține articole de informatică și programare bine scrise, bine gândite și bine explicate, chestionare și întrebări practice/programare competitivă/interviu pentru companie.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/range-vs-xrange-python"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-convert-list-set">Cum se transformă List în Set?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/jquery-submit">jQuery trimite()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/mrbeast-net-worth-2023">Valoarea netă MrBeast 2023, nume real, vârstă, număr de abonați</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/informatica-powercenter">Informatica PowerCenter</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/excel-formulas/">Formule Excel</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/how-iterate-map-java">iterator hartă java</a>
</li><li><a href="/how-read-csv-file-java">fișier csv citiți java</a>
</li><li><a href="/python-programs-python-programming-examples">exemple de programare python</a>
</li><li><a href="/java-string-equals">java este egal</a>
</li><li><a href="/react-table">tabel în reacție</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 Toate Drepturile Rezervate | <a href="//es.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>