Tīmekļa izstrādē izstrādātājiem ir pieejami daudzi rīki, no kuriem izvēlēties. Pareizu rīku un tehnoloģiju izvēle var būtiski ietekmēt projektu efektivitāti un funkcionalitāti. Viens no populārākajiem tīmekļa izstrādes rīkiem ir EJS, kas apzīmē Embedded JavaScript . EJS ir vienkārša JavaScript veidņu valoda, kas ģenerē HTML ar vienkāršu JavaScript. Šajā rakstā mēs apskatīsim, kas ir EJS, kāpēc tas ir nepieciešams, tā funkcijas, kā to instalēt, un sniegsim piemēru ar izvadi.
Kas ir EJS
EJS jeb Embedded JavaScript ir JavaScript veidņu dzinējs, kas tiek izmantots tīmekļa izstrādei un ļauj lietotājiem ģenerēt dinamisku HTML marķējumu, izmantojot JavaScript kodu HTML veidnēs. Tas ir izstrādāts, lai vienkāršotu dinamiska satura renderēšanas procesu tīmekļa lietojumprogrammās. Tas satur HTML un JavaScript sajaukumu, kas atvieglo dinamiska satura ģenerēšanu, pamatojoties uz datiem no jūsu lietojumprogrammas.
EJS iezīmes
- Vienkārša sintakse: EJS piedāvā vienkāršu sintaksi, kas apvieno HTML un JavaScript, padarot to viegli apgūstamu un lietojamu.
- Dinamiskais saturs: EJS ļauj dinamiski ģenerēt HTML un JavaScript saturu HTML tagos, uzlabojot elastību satura veidošanā.
- Izkārtojums un daļas: EJS atbalsta izkārtojumus un daļas, ļaujot lietotājiem sadalīt veidnes atkārtoti lietojamos komponentos, samazinot koda dublēšanos un uzlabojot apkopi.
- Kļūdu apstrāde: EJS nodrošina kļūdu ziņojumus, kas palīdz izstrādātājiem veikt atkļūdošanu, uzlabojot vispārējo izstrādes pieredzi.
Kāpēc jums ir nepieciešams EJS?
- Dinamiskā HTML ģenerēšana: EJS ļauj ģenerēt dinamisku HTML saturu, pamatojoties uz mainīgajiem, nosacījumiem, cilpām un citu JavaScript loģiku. Tas ir īpaši noderīgi, lai renderētu dinamiskus datus, kas iegūti no datu bāzēm vai API.
- Koda atkārtota izmantošana: Izmantojot EJS veidnes, varat izveidot atkārtoti lietojamus komponentus vai daļas, kuras var iekļaut vairākās lapās. Tas veicina koda modularitāti un samazina dublēšanos jūsu tīmekļa lietojumprogrammās.
- Servera puses renderēšana: Izmantojot EJS, varat veikt tīmekļa lapu servera puses renderēšanu (SSR). SSR ir izdevīga SEO (Search Engine Optimization), jo ļauj meklētājprogrammām efektīvāk pārmeklēt un indeksēt jūsu saturu, salīdzinot ar klienta puses renderēšanu (CSR), ko veic tādas sistēmas kā React vai Angular.
- Vienkārša integrācija ar Node.js un Express.js: EJS nemanāmi integrējas ar Node.js un Express.js, padarot to par populāru izvēli izstrādātājiem, kuri strādā ar servera puses JavaScript lietojumprogrammām. To ir viegli iestatīt un lietot Express.js projektā.
- Pazīstama sintakse: Ja jau esat iepazinies ar HTML un JavaScript, EJS apguve un lietošana ir vienkārša. Sintakse ir līdzīga HTML ar iegultu JavaScript kodu
>tagus, padarot to pieejamu izstrādātājiem ar dažādu prasmju līmeni. - Veidņu pārmantošana un izkārtojumi: EJS atbalsta veidņu pārmantošanu un izkārtojumus, ļaujot jums izveidot konsekventus izkārtojumus jūsu tīmekļa lapām. Varat definēt pamata izkārtojumu un paplašināt to citās veidnēs, atvieglojot konsekventa izskata un darbības saglabāšanu visā lietojumprogrammā.
Kā lietot EJS?
1. darbība: Instalējiet EJS kā atkarību savā projektā
npm install ejs>
2. darbība: Izveidojiet mapi “skati” sava projekta direktorijā, ja tā vēl neeksistē. Skatu mapē izveidojiet jaunu failu ar paplašinājumu .ejs, piemēram, index.ejs
3. darbība: Lai lietojumprogrammā Express.js integrētu EJS ar Express, iestatiet EJS kā skatīšanas programmu savas Express lietojumprogrammas konfigurācijā. Šī konfigurācija ļauj Express izmantot EJS skatu renderēšanai.
app.set('view engine', 'ejs');>4. darbība: Renderējiet EJS veidni, jūsu Express maršruta apstrādātājos mēs renderējam EJS veidni, izmantojot 'res.render()' un sniedziet nepieciešamos datus, kas jānodod veidnei.
res.render('hello', { name: 'Geeks' });>Projekta struktūra:
Atjauninātās atkarības pack.json fails izskatīsies šādi:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Piemērs: Īstenošana, lai demonstrētu ejs izmantošanu ar piemēru.
HTML EJS Piemēra nosaukums> head> <body> <h1>Sveiki,<%= name %>!h1> body> html>>></tag>JavaScript<tag data-text-1='// 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(`Serveris darbojas vietnē http://localhost:${port}`); });>></tag> <p dir='ltr'> <b> <strong>Solis, lai palaistu lietojumprogrammu:</strong> </b> <span>Palaidiet lietojumprogrammu, izmantojot šo komandu no projekta saknes direktorija</span></p> <tag data-text-3='node index.js></pre> </code><p dir='ltr'> <b> <strong>Izvade:</strong> </b> <span>Jūsu projekts tiks parādīts URL http://localhost:3000/</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="izvade"></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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/mathematical/">Matemātisks</a> </li><li> <a href="/css-misc/">Css — Dažādi</a> </li><li> <a href="/cpp-map-functions/">Cpp-Map-Funkcijas</a> </li><li> <a href="/web-technologies-difference-between/">Tīmekļa Tehnoloģijas — Atšķirība Starp</a> </li><li> <a href="/directi/">Direktors</a> </li><li> <a href="/bootstrap-tutorial/">Bootstrap Apmācība</a> </li><li> <a href="/python-file-handling/">Python-Failu Apstrāde</a> </li><li> <a href="/cell-signaling/">Šūnu Signalizācija</a> </li><li> <a href="/esports-gamers/">Esporta Spēlētāji</a> </li><li> <a href="/jpa-tutorial/">Jpa Apmācība</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">Minimālās izmaksas par dotā svara iepildīšanu maisā</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Jums tiek piešķirts maiss ar izmēru W kg, un jums tiek norādītas izmaksas par dažāda svara apelsīnu paciņām masīva maksā[], kur izmaksas[i] būtībā ir “i” kg apelsīnu paciņas izmaksas. Kur izmaksas [i] = -1 nozīmē, ka "i" kg apelsīnu paciņa nav pieejama. Atrodiet minimālās kopējās izmaksas, lai iegādātos tieši W kg apelsīnu, un, ja nav iespējams iegādāties tieši W kg apelsīnu, drukājiet —1. Var pieņemt, ka ir bezgalīgs visu pieejamo pakešu veidu piedāvājums.Piezīme: masīvs sākas ar indeksu 1.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/minimum-cost-to-fill-given-weight-in-a-bag"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interesanti Raksti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/covariance-matrix">Kovariācijas matrica</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/github/">Github</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/types-exception-java">Izņēmumu veidi Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/factors-72">Faktori 72</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/stream-flatmap-java-with-examples">Straumējiet flatMap() Java ar piemēriem</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">Populārākas Posts</h2>
<div class="content">
<ul class="list"> <li><a href="/uninstall-reinstall-angular-cli">atinstalēt angular cli</a>
</li><li><a href="/kat-timpf">cik sver kat timpf</a>
</li><li><a href="/java-arraylist">masīvu saraksts</a>
</li><li><a href="/css-bold-text">css treknrakstā</a>
</li><li><a href="/bash-substring">apakšvirkne bash</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 Visas Tiesības Aizsargātas | <a href="//ko.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma Politika</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>