如何將數據從nodejs傳遞到內部html腳本標簽

Question

我在 8000 端口上使用 expressjs 作為服務器。 我想從 expressjs 文件發送一個字符串值到 html 腳本標簽，並在腳本標簽中使用這個字符串值。 name 變量現在是一個空字符串。 我怎樣才能 console.log 命名變量的值？

靜態頁面-server.js：

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

索引.html：

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

編輯：我使用了 ejs，現在的問題是我應該如何描述腳本標簽中的名稱屬性？ 下面的代碼給出了語法錯誤。

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

Answer 1

Express.js 本身就是一個后端服務器。 如果您想擁有動態 HTML 文件，則需要使用模板引擎。

請按照本文檔-> https:\/\/expressjs.com\/en\/guide\/using-template-engines.html<\/a>

最終，您會意識到您將需要一個前端框架來更快地編寫高質量的代碼。 所以也推薦你看看一些框架，比如 React、Vue.js。 如果你需要單頁應用程序，你只使用 express.js 來提供 HTML 渲染。 如果您需要服務器端渲染，最好研究 Next.js、Nuxt.js。

Answer 2

您不能直接將變量注入 nodejs 中的 html 文件。 這就是為什么你在 express 中有模板引擎的原因。 查看ejs<\/a> 。

它允許您將數據直接從您的路由傳遞到您正在呈現的頁面中。

Answer 3

使用res.render()<\/code>方法通過locals<\/code>參數發送到視圖的局部變量不能直接訪問。 相反，您需要引用那些使用它的變量名包裹在雙大括號內的人。 所以如果你想在 JavaScript 函數中使用它，你需要聲明一個局部變量，並給它你name<\/code> local 的內容。

只需像這樣修改您的index.html<\/code> ：

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

Answer 4

這是答案我如何使用 HTML 作為 Express 中的視圖引擎？

您需要的是應用程序中的視圖引擎 package。 目前有許多可用的視圖引擎。

然后在 Express 應用程序中設置該視圖引擎。 就像您在上面所做的那樣，通過路由響應的調用觸發視圖渲染。
然后在您的視圖中使用視圖變量呈現 html output，如果這些變量輸出到 html，您可以在瀏覽器 JavaScript 中使用它們。您也可以在 html 中調用服務發送動態數據。

查看 esj 或 pug（ps pug 是我個人的最愛）