Podczas tworzenia stron internetowych programiści mają do wyboru wiele narzędzi. Wybór odpowiednich narzędzi i technologii może mieć znaczący wpływ na efektywność i funkcjonalność projektów. Jednym z popularnych narzędzi do tworzenia stron internetowych jest EJS, co oznacza Embedded JavaScript . EJS to prosty język szablonów JavaScript, który generuje HTML ze zwykłym JavaScriptem. W tym artykule omówimy, czym jest EJS, dlaczego jest potrzebny, jakie ma funkcje, jak go zainstalować i podamy przykład z wynikami.
ciąg do tablicy Java
Co to jest EJS
EJS lub Embedded JavaScript to silnik szablonów JavaScript używany do tworzenia stron internetowych, który umożliwia użytkownikom generowanie dynamicznych znaczników HTML przy użyciu kodu JavaScript w szablonach HTML. Został zaprojektowany w celu uproszczenia procesu renderowania treści dynamicznych w aplikacjach internetowych. Zawiera mieszankę HTML i JavaScript, co ułatwia generowanie dynamicznej treści na podstawie danych z aplikacji.
Cechy EJS
- Prosta składnia: EJS oferuje prostą składnię, która łączy HTML i JavaScript, dzięki czemu jest łatwa do nauki i użytkowania.
- Treść dynamiczna: EJS umożliwia dynamiczne generowanie treści HTML i JavaScript w znacznikach HTML, zwiększając elastyczność w tworzeniu treści.
- Układ i części: EJS obsługuje układy i części, umożliwiając użytkownikom dzielenie szablonów na komponenty nadające się do ponownego użycia, redukując powielanie kodu i zwiększając łatwość konserwacji.
- Obsługa błędów: EJS udostępnia komunikaty o błędach, które pomagają programistom w debugowaniu, poprawiając ogólne doświadczenie programistyczne.
Dlaczego potrzebujesz EJS?
- Dynamiczne generowanie HTML: EJS umożliwia generowanie dynamicznej treści HTML w oparciu o zmienne, warunki, pętle i inną logikę JavaScript. Jest to szczególnie przydatne do renderowania dynamicznych danych pobieranych z baz danych lub interfejsów API.
- Możliwość ponownego użycia kodu: Korzystając z szablonów EJS, można tworzyć komponenty lub części wielokrotnego użytku, które można uwzględnić na wielu stronach. Promuje to modułowość kodu i ogranicza powielanie w aplikacjach internetowych.
- Renderowanie po stronie serwera: Za pomocą EJS można renderować strony internetowe (SSR) po stronie serwera. SSR jest korzystny dla SEO (optymalizacja wyszukiwarek), ponieważ umożliwia wyszukiwarkom skuteczniejsze indeksowanie i indeksowanie treści w porównaniu z renderowaniem po stronie klienta (CSR) wykonywanym przez platformy takie jak React lub Angular.
- Łatwa integracja z Node.js i Express.js: EJS bezproblemowo integruje się z Node.js i Express.js, co czyni go popularnym wyborem dla programistów pracujących nad aplikacjami JavaScript po stronie serwera. Można go łatwo skonfigurować i używać w projekcie Express.js.
- Znana składnia: Jeśli znasz już HTML i JavaScript, nauka i korzystanie z EJS jest proste. Składnia jest podobna do HTML z osadzonym kodem JavaScript
>tagi, dzięki czemu jest dostępny dla programistów o różnych poziomach umiejętności. - Dziedziczenie szablonów i układy: EJS obsługuje dziedziczenie szablonów i układy, umożliwiając tworzenie spójnych układów stron internetowych. Możesz zdefiniować układ podstawowy i rozszerzyć go na inne szablony, co ułatwia utrzymanie spójnego wyglądu i działania w całej aplikacji.
Jak korzystać z EJS?
Krok 1: Zainstaluj EJS jako zależność w swoim projekcie
npm install ejs>
Krok 2: Utwórz folder „views” w katalogu projektu, jeśli jeszcze nie istnieje. W folderze widoków utwórz nowy plik z rozszerzeniem .ejs, na przykład indeks.ejs
Krok 3: Aby zintegrować EJS z Express w aplikacji Express.js, ustaw EJS jako silnik widoku w konfiguracji aplikacji Express. Ta konfiguracja umożliwia Expressowi używanie EJS do renderowania widoków.
app.set('view engine', 'ejs');>Krok 4: Renderuj szablon EJS. W procedurach obsługi tras ekspresowych renderujemy szablon EJS za pomocą „res.render()” i podaj niezbędne dane do przekazania do szablonu.
res.render('hello', { name: 'Geeks' });>Struktura projektu:
array.sort w Javie
Zaktualizowane zależności w pakiet.json plik będzie wyglądał następująco:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Przykład: Implementacja pokazująca użycie ejs na przykładzie.
HTML EJS Przykładowy tytuł> głowa> <body> <h1>Cześć,<%= name %>!h1> treść> 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('witaj', { nazwa: 'Geeks' }); }); app.listen(port, () => { console.log(`Serwer działa na http://localhost:${port}`); });></pre> </code> <p dir='ltr'> <b> <strong>Krok, aby uruchomić aplikację:</strong> </b> <span>Uruchom aplikację za pomocą następującego polecenia z katalogu głównego projektu</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'> <b> <strong>Wyjście:</strong> </b> <span>Twój projekt zostanie wyświetlony pod adresem URL http://localhost:3000/</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-convert-string-json-object-java">konwersja ciągu na json w Javie</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="wyjście"></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="">Kategoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/computer-science-fundamentals/">Podstawy informatyki</a> </li><li> <a href="/neural-network/">Sieć Neuronowa</a> </li><li> <a href="/backend-development/">Rozwój Backendu</a> </li><li> <a href="/maths-class-10-cat/">Zajęcia Matematyczne-10</a> </li><li> <a href="/binary-representation/">Reprezentacja Binarna</a> </li><li> <a href="/cpp-file-handling/">Obsługa Plików Cpp</a> </li><li> <a href="/c-list-function/">Funkcja Listy W C++</a> </li><li> <a href="/cpp-iterator/">Iterator Cpp</a> </li><li> <a href="/excel-basics/">Excel – Podstawy</a> </li><li> <a href="/cpp-constructor/">Konstruktor Cpp</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">10 najpopularniejszych sportów na świecie [ranking]</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Dziesięć najczęściej uprawianych sportów na Ziemi to: Miejsce 1 – Piłka nożna, Miejsce 2 – Krykiet, Miejsce 3 – Hokej na trawie, Miejsce 4 – Tenis, Miejsce 5 – Siatkówka, Miejsce 6 – Tenis stołowy</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/top-10-most-popular-sports-world"> <i class="fa fa-external-link"></i> Czytaj Więcej</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Ciekawe Artykuły</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/advanced-master-theorem">Zaawansowane twierdzenie główne o powtarzalności dziel i zwyciężaj</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ap-chemistry-syllabus-1311638">Program nauczania chemii AP: co obejmuje?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/which-is-bigger-1-lb">Co jest większe, 1 funt czy 100 gramów?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/algebra-maq/">Algebra - Maq</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/uninstall-chrome-ubuntu">Odinstaluj Chrome Ubuntu</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">Popularne Wiadomości</h2>
<div class="content">
<ul class="list"> <li><a href="/java-if-else-statement">if else instrukcja Java</a>
</li><li><a href="/latex-table">stół lateksowy</a>
</li><li><a href="/java-jlist">pole listy Java</a>
</li><li><a href="/binary-search-algorithm">wyszukiwanie binarne</a>
</li><li><a href="/difference-between-microkernel">jądro mikrolityczne</a>
</li><li><a href="/kat-timpf">waga kat timpf</a>
</li><li><a href="/edith-mack-hirsch">Edyta Mack Hirsch</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 Wszelkie Prawa Zastrzeżone | <a href="//hr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zastrzeżenie</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nas</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Polityka Prywatności</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>