Как шаблон ejs загружается в браузере? Как интерфейс взаимодействует с бэкэндом?

Работа над внешним и внутренним интерфейсом с использованием NodeJ для серверной части и шаблона ejs для внешнего интерфейса. Наткнулся на функцию при использовании скриптов ejs для отображения данных, отправленных с сервера во время загрузки страницы.

Используемый <%console.log()%> через ejs думал, что этот журнал будет виден в журналах проверки элементов, однако получил сообщение через серверный терминал. Как эта информация отправляется на сервер без отправки формы или вызова API?

Сервер app.js:

  /*jshint multistr: true, node: true, esversion: 6, undef: true, unused: true, varstmt: true*/
  "use strict";

  // NPM Modules
  const express                     = require('express'),
        path                        = require('path');

  const app                         = express();

  // Setup views directory, file type and public filder.
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.use(express.static(path.join(__dirname, 'public')));

  app.get('/', (req, res) => {
      res.render('index', {message:'Welcome'});
  });

  const port = process.env.PORT || 3000;

  console.log('server listening at http://127.0.0.1 over port: ', port);

  app.listen(port);

Шаблон EJS index.ejs:

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <!-- All these CSS files are in plublic directory, as we had made all the content of public directory available for anyone from app.js -->
        <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/css/app.css" />
        <link rel="shortcut icon" href="logo.jpg" />
        <title>Sign-Up/Login Form</title>
    </head>
    <body>
        <%console.log(message)%>
        <%=message%>
        <%console.log("anything")%>
    </body>
</html>

Как можно все <%console.log()%> отправляются через серверный терминал и <%=message%> отображается в браузере. Четное <%console.log("anything")%> отображается через серверный терминал, хотя это не имеет ничего общего с сервером. Как скрипты ejs взаимодействуют с сервером, а не с браузером?

Кто-нибудь еще пробовал это раньше или наблюдал за этим.

Источник

1 ответ

Ваш вопрос о том, как работают шаблоны ejs. Это ответ на этот вопрос. Я думаю, что у вас также может быть что-то нехорошее в вашей экспресс-настройке, вызывающее проблемы.

EJS - это система рендеринга на стороне сервера. Его работа выполняется до того, как HTML отправляется клиенту, поэтому он не имеет ничего общего с браузером.

Скриплеты внутри <% %> запустить на сервере, чтобы вставить содержимое в шаблон перед отправкой клиенту.

Если вы хотите распечатать что-то на консоли браузера, не помещайте это в скриптлет, просто поместите это в <script> тег, как это:

<script>
    console.log("foo");
</script>

Если вы хотите, чтобы консоль браузера печатала что-то, сгенерированное сервером, вы можете использовать ejs, чтобы поместить значение сообщения в то, что оно генерирует:

<script>
    console.log("<%=message%>");
</script>

Сервер поместит значение сообщения в оператор console.log(), который доставляется в браузер.

Этот пример выводит "Wellcomes" на консоль браузера:

сервер:

const bodyParser = require('body-parser'),
    express = require('express'),
    path = require('path');

const app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.render('index', { message: 'Wellcomes' });
});

const port = process.env.PORT || 3000;

const listener = app.listen(port, function() {
    console.log('platform listening on', listener.address().port);
});

index.ejs:

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>Sign-Up/Login Form</title>
    </head>
    <body>
        <script>
            console.log("<%=message %>");
        </script>
    </body>
</html>

Если вы показываете источник страницы в вашем браузере, вы должны увидеть:

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>Sign-Up/Login Form</title>
    </head>
    <body>
        <script>
            console.log("Wellcomes");
        </script>
    </body>
</html>
Источник
Другие вопросы по тегам