【问题标题】：node js render post data and raw html节点 js 渲染发布数据和原始 html
【发布时间】：2020-12-10 09:36:08
【问题描述】：

我今天刚开始学习 node.js，我正在尝试使用 EJS 模板引擎呈现帖子数据和原始 html。

我正在尝试根据 stats 中的 if else if 语句来呈现帖子数据和原始 html。

我不确定这是否可以做到，所以我希望有人能告诉我是否可以？

app.js：

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

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json({ extended: true }));
app.set('view engine', 'ejs');

app.get("/", (req, res) => {  
  res.render(__dirname + "/views/index");
});

app.post('/stats', (req, res) => {
  var first_name = req.body.firstname;
  var last_name = req.body.lastname;
  
  if (!first_name) {
    var html_code = "<b>You didn't add a first name</b>";
    
    res.render(__dirname + "/views/stats", {
      htmlcode: html_code
    });
    
  } else if (!last_name) {
    var html_code = "<b>You didn't add a last name</b>";
    
    res.render(__dirname + "/views/stats", {
      htmlcode: html_code
    });
    
  } else if (first_name && last_name) {
    var html_code = "<b>First name is </b><%= first_name %> <br> <b>Last name is </b><%= last_name %>";
    
    res.render(__dirname + "/views/stats", {
      htmlcode: html_code,
      firstname: first_name,
      lastname: last_name
    });
    
  } 
});

const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});

views/index.ejs:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Stats</title>
  </head>
  <body>
    <form action="https://server.com/stats" method="POST">
      firstname: <input type="text" name="firstname" /><br/>
      lastname: <input type="text" name="lastname" /><br/>
      <button type="submit">Send</button>
    </form>
  </body>
</html>

views/stats.ejs：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>name stats</title>
  </head>
  <body>
    <div><%= htmlcode %></div>
  </body>
</html>

输出：

<b>First name is </b><%= first_name %> <br> <b>Last name is </b><%= last_name %>

【问题讨论】：

看起来不错。你测试过服务器了吗？
是的，我已经在服务器上对其进行了测试，上面的输出就是我所看到的。

标签： javascript node.js

【解决方案1】：

改变

var html_code = "<b>First name is </b><%= first_name %> <br> <b>Last name is </b><%= last_name %>";

到

var html_code = `<b>First name is </b>${first_name} <br> <b>Last name is </b>${last_name}`;

更新

您可以使用 usr <%- 而不是 <%=，这不会转义字符，但会使代码容易受到 code injection 的攻击。相反，通过更改 views/stats.ejs 将变量传递给模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>name stats</title>
  </head>
  <body>
    <div><b>First name is </b><%= first_name %> <br> <b>Last name is </b><%= last_name %></div>
  </body>
</html>

要了解更多信息，请阅读string literals in JS

【讨论】：

哦，谢谢！但是现在的输出看起来像：First name is John
Last name is 我还能看到 html 标签吗？
使用<%= 会转义字符，因此浏览器会看到&gt。检查stackoverflow.com/a/10330401/1231844。 <%- 不会逃跑……尽管这通常不是一个好主意。