Question

使用NodeJ（在服务器端）和ejs模板（在前端）来处理前端和后端。使用ejs scriplets显示加载页面时从服务器发送的数据时遇到了一个功能。

在ejs上使用<%console.log()%>，认为此日志将在检查元素日志中看到，但是在服务器终端上收到了消息。如何将这些信息发送到服务器而无需任何表单提交或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脚本片段如何与服务器而非浏览器进行通信？

有没有其他人尝试过或观察过它。

Answer 1

您的问题是关于ejs模板如何工作的。这是该问题的答案。我认为您的快速设置可能还会出现一些问题，从而导致问题。

EJS是服务器端渲染系统。它的工作是在将html发送到客户端之前完成的，因此它与浏览器无关。

<% %>中的scriptlet在服务器上运行，以在将内容发送到客户端之前将其插入模板。

如果要在浏览器控制台上打印出某些内容，请不要将其放入scriptlet中，只需将其放入<script>标签中即可，如下所示：

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

如果希望浏览器控制台打印服务器生成的内容，则可以使用ejs将message的值放入其生成的内容中：

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

服务器会将message的值放入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>

如何在浏览器中加载ejs模板？前端如何与后端交互？

1 个答案: