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

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

0 голосов
/ 27 октября 2018

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

Использовал <%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 Ответ

0 голосов
/ 28 октября 2018

Ваш вопрос о том, как работают шаблоны 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>
...