如何将数据从nodejs传递到内部html脚本标签答案

【问题标题】：How to pass data from nodejs to inside html script tags如何将数据从nodejs传递到内部html脚本标签
【发布时间】：2022-02-07 21:13:20
【问题描述】：

我在 8000 端口上使用 expressjs 作为服务器。我想将 expressjs 文件中的字符串值发送到 html 脚本标签，并在脚本标签中使用此字符串值。 name 变量现在以空字符串的形式出现。如何获取 console.log 名称变量的值？

静态页面服务器.js：

 app.get('/index', function(req, res) {
        var name = "hello"; 
        res.render(__dirname + "/static-pages/journey-analize-report/index.html", {name:name});
    });

index.html:

 <script type="text/javascript">
        console.log(name);
 </script>

编辑：我使用了 ejs，现在的问题是我应该如何在脚本标签中描述 name 属性？下面的代码给出了语法错误。

<script type="text/javascript">
        console.log(<%=name%>);
 </script>

【问题讨论】：

标签： javascript html node.js express

【解决方案1】：

Express.js 本身就是一个后端服务器。如果您想拥有动态 HTML 文件，则需要使用模板引擎。

请关注本文档 -> https://expressjs.com/en/guide/using-template-engines.html

最终，您会意识到您需要一个前端框架来更快地编写高质量的代码。所以也推荐你看看一些框架，比如 React、Vue.js。如果您需要单页应用程序，您只使用 express.js 来提供数据而不是呈现 HTML。如果您需要服务器端渲染，最好研究 Next.js、Nuxt.js。

【讨论】：

【解决方案2】：

您不能直接将变量注入 nodejs 中的 html 文件。这就是为什么你在 express 中有模板引擎的原因。查看ejs。

它将允许您将数据直接从您的路由传递到您正在呈现的页面中。

【讨论】：

【解决方案3】：

使用res.render() 方法通过locals 参数发送到视图的局部变量不能直接访问。相反，您需要引用那些使用它的变量名包裹在双大括号内的人。所以如果你想在 JavaScript 函数中使用它，你需要声明一个局部变量，并给它你的 name local 的内容。

只需像这样修改您的index.html：

<script type="text/javascript">
    let name = "{{name}}";
    console.log(name);
</script>

【讨论】：

【解决方案4】：

这是答案How do I use HTML as the view engine in Express?

您需要的是应用中的视图引擎包。目前有很多视图引擎可用。

然后在 express 应用程序中设置该视图引擎。像上面所做的那样，通过路由响应中的调用触发视图渲染。
然后在您的视图中使用视图变量渲染 html 输出，如果这些变量输出到 html 中，您可以在浏览器 JavaScript 中使用它们。您也可以在 html 中调用服务来发送动态数据。

查看 esj 或 pug（ps pug 是我个人的最爱）

【讨论】：