Î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="/neural-network/">Retea Neurala</a> </li><li> <a href="/c-macro/">C Macro</a> </li><li> <a href="/git-tutorial/">Tutorial Git</a> </li><li> <a href="/jfreechart-tutorial/">Tutorial Jfreechart</a> </li><li> <a href="/java/">Java</a> </li><li> <a href="/ruby-basics/">Ruby-De Bază</a> </li><li> <a href="/linux-filters/">Filtre Linux</a> </li><li> <a href="/privacy-policy/">Politica De Confidențialitate</a> </li><li> <a href="/science-gk/">Știința Gk</a> </li><li> <a href="/gradle-tutorial/">Tutorial Gradle</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">Algoritmul DFS (Depth First Search).</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Algoritm DFS cu introducere, analiză asimptotică, matrice, indicator, structură, listă legată unic, listă dublu legată, listă circulară legată, căutare binară, căutare liniară, sortare, sortare găleată, sortare pieptene, sortare shell, sortare heap, sortare îmbinare, selecție Sortare, Sortare de numărare, Stivă, Qene, Quene circulară, Grafic, Arbore, Arbore B, Arbore B+, Arbore Avl etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/dfs-algorithm"> <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="/100-best-car-names-funny">100+ cele mai bune nume de mașini (nume amuzante, cool și sportive pentru mașini)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-drx">Care este forma completă a DRX</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-streamwriter">C# StreamWriter</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/tee-command-linux-with-examples">comanda tee în Linux cu exemple</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/pixels-inches-converter-free-online-converter">Convertor pixeli în inchi – Convertor online gratuit</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="/javascript-comment">comentariu javascript</a>
</li><li><a href="/linux-which-command">comenzi linux care</a>
</li><li><a href="/how-open-json-file">cum se deschide un fișier json</a>
</li><li><a href="/factory-method-pattern">model de proiectare din fabrică</a>
</li><li><a href="/binary-search-tree">exemplu de arbore binar de căutare</a>
</li><li><a href="/shell-sort-algorithm">sortarea cochiliei</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="//ro.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>