将变量从 node.js 传递到 html

Posted 2023-02-22

【中文标题】将变量从 node.js 传递到 html

【英文标题】：Passing a variable from node.js to html

【发布时间】：2016-10-25 19:26:22

【问题描述】：

我正在尝试将一个变量从 node.js 传递到我的 html 文件。

app.get('/main', function(req, res) 
  var name = 'hello';
  res.render(__dirname + "/views/layouts/main.html", name:name);
);

【问题讨论】：

HTML 不是模板语言，不能发送变量。

也许你可以加载 HTML 并通过一些正则表达式运行它，但它不会是干净的。

在 html 中，使用 jquery：$("#WhatIAmLookingFor").text('name')

@JanDvorak 然后我使用该变量将其发送到 javascript 文件

***.com/questions/29328028/…

【参考方案1】：

我发现我可以像这样传递一个变量

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

【讨论】：

你用的是什么渲染引擎？

@AstemirAlmov 他肯定没有使用 HTML，他必须使用 EJS。看看这里：ejs.co。这就是我们在 nodejs 中使用的。

如何在不使用 ejs 的 html 呈现页面上使用相同的东西？？

这使用了一个引擎，你没有指定你正在使用的引擎

如何使用对象而不是字符串？

【参考方案2】：

您可以使用某种模板引擎，例如 pug（以前是玉）。要启用它，您应该执行以下操作：

npm install --save pug - 将其添加到项目和 package.json 文件中 app.set('view engine', 'pug'); - 在 express 中注册为视图引擎 创建一个./views 文件夹并添加一个简单的.pug 文件，如下所示：

html
  head
    title= title
  body
    h1= message

注意间距很重要！

创建一个返回处理后的 html 的路由：

app.get('/', function (req, res) 
  res.render('index',  title: 'Hey', message: 'Hello there!');
);

这将呈现一个 index.html 页面，将 node.js 中传递的变量更改为您提供的值。这直接取自 expressjs 模板引擎页面：http://expressjs.com/en/guide/using-template-engines.html

有关哈巴狗的更多信息，您还可以查看：https://github.com/pugjs/pug

【讨论】：

对不起，我知道这与此完全无关，但是在将变量传递给我的视图时遇到了问题，这真的很奇怪。模板渲染得非常好，但是在控制台中（并且随机地，没有清晰的模式），有时会抛出 can not read property X of undefined 的错误......但是，同时 UI 完全按照它应该的方式渲染。你对此有什么想法吗？

页面上有javascript吗？如果这样做，请检查谁/什么试图访问名为“X”的字段。它应该类似于something.X

我想通了。以前从未见过这种情况，但它仅在打开开发工具时发生，所以后来我意识到服务器正在抛出 500 错误，因为开发工具试图访问 jquery.min.map （我在供应商文件夹中没有），所以 500 错误正在中断 express，因此变量没有通过。

【参考方案3】：

我找到了可能的写作方式。

服务器端 -

app.get('/main', function(req, res) 

  var name = 'hello';

  res.render(__dirname + "/views/layouts/main.html", name:name);

);

客户端（main.html） -

<h1><%= name %></h1>

【讨论】：

你在这里使用的视图引擎是什么？

app.engine('html', require('ejs').renderFile);

【参考方案4】：

使用 res.render() 方法将 node.js 中的变量传递给 html。

例子：

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

app.use(express.static(__dirname + '/'));
app.use(bodyParser.urlencoded(extend:true));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.set('views', __dirname);

app.get('/', function(req, res)
    res.render('index.html',email:data.email,password:data.password);
);

【讨论】：

这里使用ejs视图引擎

【参考方案5】：

仅使用 Node 和 HTML，您将无法实现您的目标；这不像使用 php，您可以在没有安装任何其他东西的情况下执行 <title> <?php echo $custom_title; ?> 之类的操作。

要使用 Node 做你想做的事，你可以使用所谓的“模板”引擎（如 Jade，检查 this out）或使用 Javascript 中的一些 HTTP 请求从服务器获取数据并使用它用它替换部分 HTML。

两者都需要一些额外的工作；在做你想做的事情时，它不像 PHP 那样 plug'n'play。

【讨论】：

我认为 nodejs 中的答案是错误的，你可以使用 alert('');

@Bahgat Mashaly 那么你不介意发布一个例子并向世界其他地方展示它是如何工作的吗？因为您刚刚复制粘贴的东西不是本机 nodeJS。看起来像是您安装在 nodeJS 之上的模板引擎模块。

【参考方案6】：

如果使用 Express，则根本不需要使用视图引擎，请使用以下内容：

<h1> name  </h1>

如果您之前将应用程序设置为使用 HTML 而不是任何视图引擎，则此方法有效

【讨论】：

如何使用列表对象并在 html 页面中循环使用这个？

这在完整的代码中是如何工作的？我收到 Unexpected token < 错误。

这个答案是错误的。 表示使用了某种形式的模板引擎，很可能是把手。

这个答案是错误的

【参考方案7】：

使用 res.json、ajax 和 promises，加上 localStorage 的一个很好的转折，可以在任何地方使用它，并为这种罕见的街机爱添加了令牌。 PS，你可以使用cookies，但是cookies会咬https。

网页.js

function (idToken) 
    $.ajax(
        url: '/main',
        headers: 
            Authorization: 'Bearer ' + idToken
        ,
        processData: false,
    ).done(function (data) 
        localStorage.setItem('name', data.name);
        //or whatever you want done.
    ).fail(function (jqXHR, textStatus) 
        var msg = 'Unable to fetch protected resource';
        msg += '<br>' + jqXHR.status + ' ' + jqXHR.responseText;
        if (jqXHR.status === 401) 
            msg += '<br>Your token may be expired'
        
        displayError(msg);
    );

server.js，使用 express()

app.get('/main',
passport.authenticate('oauth2-jwt-bearer',  session: false ),
function (req, res) 
    getUserInfo(req) //get your information to use it.
        .then(function (userinfo)   //return your promise
            res.json( "name": userinfo.Name);
            //you can declare/return more vars in this res.json.
            //res.cookie('name', name); //https trouble
        )
    .error(function (e) console.log("Error handler " + e))
    .catch(function (e) console.log("Catch handler " + e));
);

【参考方案8】：

我通过http API node 请求实现了这一点，该请求从节点对象返回所需对象，用于客户端的HTML 页面，

例如：API: localhost:3000/username

通过节点 App 对象从缓存中返回登录用户。

节点路由文件，

app.get('/username', function(req, res) 
    res.json( udata: req.session.user );
    );

【参考方案9】：

除了上面的那些，您还可以使用 JavaScript 从服务器获取详细信息。 html文件

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div id="test">
      </div>
    <script type="text/javascript">
        let url="http://localhost:8001/test";
        fetch(url).then(response => response.json())
        .then( (result) => 
            console.log('success:', result)
            let div=document.getElementById('test');
            div.innerHTML=`title: $result.title<br/>message: $result.message`;
        )
        .catch(error => console.log('error:', error));
    </script>
  </body>
</html>

server.js

app.get('/test',(req,res)=>
    //res.sendFile(__dirname +"/views/test.html",);
    res.json(title:"api",message:"root");
)

app.get('/render',(req,res)=>
    res.sendFile(__dirname +"/views/test.html");
)

我在关于上述主题的堆栈溢出中找到的最佳答案，这不是我的答案。在几乎相同的问题的某个地方找到它......来源 source of answer