node.js — визуализация HTML в nodejs, как в переполнении стека
Это кажется простым вопросом, но я не могу найти что-либо об этом в Google или StackOverflow. Возможно, я не нашел правильных ключевых слов.
В PHP вы можете написать что-то вроде этого
example.php
<?php
//a bunch of sloppy logic, or maybe some includes but for this I'll just define the variables below...
$title = "Word to your mother";
$heading = "Too legit";
$paragraph = "Extensive research has shown that people's taste in music stops changing once they are forced to earn a living. Maybe that's when they learn how dumb the lyrics really are or maybe they don't have time to waste on things that no longer matter...";
?>
<!DOCTYPE html>
<html>
<head>
<title><?=$title?></title>
</head>
<body>
<h1><?=$heading?></h1>
<p><?=$paragraph?></p>
<h2>Counting</h2>
<?php
for($x=1;$x<=10;$x++){
?>
<p><?=$x?></p>
<?php
}
?>
</body>
</html>
Есть ли какой-то эквивалент этого в nodejs?
Более широкий вопрос связан с предоставлением динамического контента с сервера nodejs, который браузер считает статическим. Решения, которые требуют какой-либо JavaScript на стороне клиента, не будут работать для меня.
Я видел ejs и vue, но у них обоих есть что-то вроде <script src='source.js'> на DOM, который именно то, что я не хочу и не могу иметь.
Если вы считаете, что это дубликат, скажите, пожалуйста, в комментариях и дайте мне возможность уточнить, прежде чем пометить его как дубликат.
Осветление / Update:
Термин «шаблон», вероятно, является отрицательным ключевым словом для функциональности, которую я пытаюсь описать. В приведенном выше примере php я мог бы вкладывать html-элемент в оператор if или цикл, сохраняя разметку сервера встроенной.
Там еще один пост Вот где вопрос в основном задавал то же самое, но ответ отдаленно не является удовлетворительным.
Решение
Используя Express, вы можете использовать шаблонизатор, такой как EJS, для обслуживания статического контента с сервера.
Во время выполнения механизм шаблонов заменяет переменные в файле шаблона фактическими значениями и преобразует шаблон в файл HTML, отправляемый клиенту.
Если вы никогда не пользовались Express, вы можете прочитать об этом здесь: https://expressjs.com/en/guide/using-template-engines.html
Другие решения
PugJS может быть быстро интегрирован в приложение Express, преобразован на стороне сервера в HTML и предоставлен клиенту без каких-либо требований к зависимостям JS на стороне клиента.
Спасибо Джозану и Остину. Я прочитал ejs.co и документы и не смог найти то, о чем я говорю, на их странице. Джозан в своем комментарии описал, что он может следовать за циклом и условно, но я не мог понять, как. Там не было никаких примеров того, что я включил ниже.
В конце концов я наткнулся Как: использовать ejs без экспресса который просто выплевывает рендеринг на консоль. Вот тот же пример php, который был у меня в исходном вопросе, но я думаю, что он полностью выполнен в node.js самым минимальным возможным способом.
server.js
const http = require('http');
var ejs = require('ejs');
var fs = require('fs');
const hostname = 'localhost';
const port = 3000;
const server = http.createServer((req, res) => {
var htmlContent = fs.readFileSync(__dirname + '/main.ejs', 'utf8');
var htmlRenderized = ejs.render(htmlContent, {filename: 'example.ejs'});
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.end(htmlRenderized);
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
example.ejs:
<%
var title = "Word to your mother";
var heading = "Too legit";
var paragraph = "Extensive research has shown that people's taste in music stops changing once they are forced to earn a living. Maybe that's when they learn how dumb the lyrics really are or maybe they don't have time to waste on things that no longer matter...";
%>
<!DOCTYPE html>
<html>
<head>
<title><%=title%></title>
</head>
<body>
<h1><%=heading%></h1>
<p><%=paragraph%></p>
<h2>Counting</h2>
<%
for(x=1;x<=10;x++){
%>
<p><%=x%></p>
<%
}
%>
</body>
</html>
Конечно, значения для заголовка, заголовка и абзаца в ejs.render метод, если он включен в передаваемый объект, это пример, который вы обычно видите при поиске примеров для ejs.