Kuriant žiniatinklio svetainę, kūrėjai gali pasirinkti iš daugybės įrankių. Tinkamų įrankių ir technologijų pasirinkimas gali turėti didelės įtakos projektų efektyvumui ir funkcionalumui. Vienas iš populiariausių žiniatinklio kūrimo įrankių yra EJS, kuris reiškia Embedded JavaScript . EJS yra paprasta „JavaScript“ šablonų kalba, kuri generuoja HTML su paprastu JavaScript. Šiame straipsnyje apžvelgsime, kas yra EJS, kodėl jis reikalingas, ypatybes, kaip jį įdiegti, ir pateiksime išvesties pavyzdį.
Kas yra EJS
EJS arba Embedded JavaScript yra JavaScript šablono variklis, naudojamas žiniatinklio kūrimui, leidžiantis vartotojams generuoti dinaminį HTML žymėjimą naudojant JavaScript kodą HTML šablonuose. Jis skirtas supaprastinti dinaminio turinio pateikimo žiniatinklio programose procesą. Jame yra HTML ir „JavaScript“ derinys, kuris leidžia lengvai generuoti dinaminį turinį pagal duomenis iš programos.
EJS ypatybės
- Paprasta sintaksė: EJS siūlo paprastą sintaksę, kuri sujungia HTML ir JavaScript, todėl ją lengva išmokti ir naudoti.
- Dinaminis turinys: EJS leidžia dinamiškai generuoti HTML ir JavaScript turinį naudojant HTML žymas, taip padidindamas turinio kūrimo lankstumą.
- Išdėstymas ir dalys: EJS palaiko maketus ir dalines dalis, leidžiančias vartotojams suskaidyti šablonus į daugkartinio naudojimo komponentus, sumažinant kodo dubliavimą ir pagerinant priežiūrą.
- Klaidų tvarkymas: EJS pateikia klaidų pranešimus, kurie padeda kūrėjams derinti ir pagerinti bendrą kūrimo patirtį.
Kodėl jums reikia EJS?
- Dinaminis HTML generavimas: EJS leidžia generuoti dinaminį HTML turinį, pagrįstą kintamaisiais, sąlygomis, ciklais ir kita JavaScript logika. Tai ypač naudinga pateikiant dinaminius duomenis, gautus iš duomenų bazių arba API.
- Kodo pakartotinis naudojimas: Naudodami EJS šablonus galite sukurti daugkartinio naudojimo komponentus arba dalis, kurios gali būti įtrauktos į kelis puslapius. Tai skatina kodo moduliškumą ir sumažina jūsų žiniatinklio programų dubliavimą.
- Serverio atvaizdavimas: Naudodami EJS galite atlikti tinklalapių atvaizdavimą serverio pusėje (SSR). SSR yra naudinga SEO (Search Engine Optimization), nes leidžia paieškos sistemoms efektyviau tikrinti ir indeksuoti jūsų turinį, palyginti su kliento pusės atvaizdavimu (CSR), kurį atlieka tokios sistemos kaip „React“ arba „Angular“.
- Lengvas integravimas su Node.js ir Express.js: EJS sklandžiai integruojasi su Node.js ir Express.js, todėl tai yra populiarus pasirinkimas kūrėjams, dirbantiems su serverio JavaScript programomis. Tai lengva nustatyti ir naudoti Express.js projekte.
- Pažįstama sintaksė: Jei jau esate susipažinę su HTML ir JavaScript, išmokti ir naudoti EJS yra paprasta. Sintaksė panaši į HTML su įterptu JavaScript kodu
>žymų, todėl ji pasiekiama įvairaus lygio kūrėjams. - Šablonų paveldėjimas ir išdėstymai: EJS palaiko šablonų paveldėjimą ir maketus, leidžiančius kurti nuoseklius savo tinklalapių maketus. Galite apibrėžti pagrindinį išdėstymą ir išplėsti jį kituose šablonuose, kad būtų lengviau išlaikyti nuoseklią savo programos išvaizdą.
Kaip naudotis EJS?
1 žingsnis: Įdiekite EJS kaip priklausomybę savo projekte
kajal aggarwal
npm install ejs>
2 žingsnis: Sukurkite aplanką „Views“ savo projekto kataloge, jei jo dar nėra. Rodinių aplanke sukurkite naują failą su plėtiniu .ejs, pavyzdžiui, index.ejs
3 veiksmas: Norėdami integruoti EJS su Express programoje Express.js, nustatykite EJS kaip peržiūros variklį savo Express programos konfigūracijoje. Ši konfigūracija leidžia „Express“ naudoti EJS rodiniams pateikti.
app.set('view engine', 'ejs');>4 veiksmas: Pateikite EJS šabloną, jūsų Express maršruto tvarkytuvėse EJS šabloną pateikiame naudodami „res.render()“ ir pateikite reikiamus duomenis, kuriuos reikia perduoti į šabloną.
res.render('hello', { name: 'Geeks' });>Projekto struktūra:
Atnaujintos priklausomybės package.json failas atrodys taip:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Pavyzdys: Įdiegimas, skirtas parodyti ejs naudojimą su pavyzdžiu.
vietos dataHTML
EJS exampletitle> 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('labas', { vardas: 'Geeks' }); }); app.listen(port, () => { console.log(`Serveris veikia http://localhost:${port}`); });>></tag> <p dir='ltr'> <b> <strong>Programos paleidimo veiksmas:</strong> </b> <span>Paleiskite programą naudodami šią komandą iš projekto šakninio katalogo</span></p> <tag data-text-3='node index.js></pre> </code><p dir='ltr'> <b> <strong>Išvestis:</strong> </b> <span>Jūsų projektas bus rodomas 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="išvestis"></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="/instagram/">Instagramas</a> </li><li> <a href="/linux-networking/">Linux Tinklas</a> </li><li> <a href="/python-gui/">Python-Gui</a> </li><li> <a href="/maths/">Matematika</a> </li><li> <a href="/java-method-class/">Java Metodo Klasė</a> </li><li> <a href="/julia-dictionary-methods/">Julia-Žodynas-Metodai</a> </li><li> <a href="/quick-sort/">Greitas Rūšiavimas</a> </li><li> <a href="/physics-class-10-cat/">Fizika-10 Klasė</a> </li><li> <a href="/c-library/">C Biblioteka</a> </li><li> <a href="/java-list-methods/">Java Sąrašo Metodai</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">Linux komandos</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kompiuterių mokslo portalas, skirtas geikams. Jame yra gerai parašyti, gerai apgalvoti ir gerai paaiškinti informatikos ir programavimo straipsniai, viktorinos ir praktikos / konkurencinio programavimo / įmonės interviu klausimai.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/linux-commands"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/vector-empty-vector">vektorius::empty() ir vektorius::size() C++ STL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-interfaces/">Java Sąsajos</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/docker-copy-instruction">Docker – COPY instrukcija</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-inverse-matrix-using-numpy">Kaip apversti matricą naudojant NumPy</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ranveer-singh">Ranveeris Singhas</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">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/java-programs-java-programming-examples">Java pavyzdines programas</a>
</li><li><a href="/java-string-valueof">java eilutės vertė</a>
</li><li><a href="/how-sort-arraylist-java">masyvo sąrašas.rūšiuoti</a>
</li><li><a href="/mylivecricket-alternatives">mylivericket</a>
</li><li><a href="/java-naming-convention">Java pavadinimų konvencija</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 Visos Teisės Saugomos | <a href="//fi.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo 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>