从node.js传递变量到html

Question

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

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

- vic-3

---

HTML不是一个模板语言，它无法发送变量。 - John Dvorak

@Destrif，这不是问题，甚至远非如此，你为什么认为提问者使用jQuery？ - John Dvorak

@vic-3，我在这里看不到任何客户端JavaScript文件，只有一个内联标签。虽然它们可以访问全局范围，但是它们也不能发送变量。它们可以生成以设置JavaScript变量，但您也没有这样做。 - John Dvorak

https://dev59.com/1l0b5IYBdhLWcg3wUP0X - Destrif

你正在发送一个带有一些模板标记的脚本标记，但服务器不知道它应该修改这些标记，也不知道如何修改。 - John Dvorak

Answer 1

我解决了这个问题，可以像这样传递一个变量：

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

- vic-3

---

你使用了哪个渲染引擎？ - Astemir Almov

他肯定不是在使用HTML，他一定在使用EJS。请看这里：http://ejs.co/。这就是我们在nodejs中使用的东西。 - c-chavez

如何在HTML渲染页面中使用相同的东西，而不是使用EJS？ - SPnL

使用了引擎，但您没有指定正在使用的引擎。 - Ayyash

这个怎么用对象代替字符串来实现呢？ - Pablo Johnson

@vic-3 你知道是否有一种使用hbs而不是ejs来完成这件事的方法吗？ - NoProg

Answer 2

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

服务器端 -

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

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

  var name = 'hello';

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

});

客户端（main.html） -

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

- Pritam Jana

---

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

应用程序引擎('html', require('ejs').renderFile); - Pritam Jana

Answer 3

你可以使用一些模板引擎，比如pug(以前叫做jade)。要启用它，你需要执行以下步骤:

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

html
  head
    title= title
  body
    h1= message

请注意，间距非常重要！

4. 创建一个返回处理后的HTML的路由：

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

这将使用node.js中传递的变量值渲染一个index.html页面。此内容来自expressjs模板引擎页面：http://expressjs.com/en/guide/using-template-engines.html

有关Pug的更多信息，您也可以查看：https://github.com/pugjs/pug

- Vasil Dininski

---

抱歉，我知道这完全与此无关，但是当我将变量传递到我的视图时，我遇到了一个非常奇怪的问题。模板渲染得非常好，但是在控制台中（而且随机出现，没有明显的模式），有时会抛出“无法读取未定义属性X”的错误...但是，同时UI的呈现方式完全正确。你有任何想法吗？ - Cynthia Sanchez

你的网页上有任何Javascript吗？如果有，检查试图访问名为“X”的字段的人/事物是谁/什么。它应该类似于 something.X。 - Vasil Dininski

我找到了解决方法。之前从未遇到过这种情况，但只有在打开开发工具时才会出现。后来我意识到，服务器因为开发工具试图访问jquery.min.map（我在供应商文件夹中没有该文件）而抛出500错误，因此500错误中断了express，导致变量无法传递。 - Cynthia Sanchez

Answer 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});
});

- Codemaker

---

这使用ejs视图引擎。 - Ayyash

Answer 5

只用Node和HTML是无法实现你所需的功能的；这与使用PHP不同，你可以像这样编写代码 <title> <?php echo $custom_title; ?> 而不需要安装其他东西。

要使用Node来实现你想要的功能，你可以使用被称为 "模板" 引擎的东西（像Jade，查看这个）或者在Javascript中使用一些HTTP请求从服务器获取数据，并将其用于替换HTML的部分。

这两种方法都需要一些额外的工作；与使用PHP时所需的插件不同，你需要自行完成。

- Tudor Leustean

---

我认为答案是错误的。 在Node.js中，您可以使用<%= %>。警告（'<%= myVar％>'）; - Bahgat Mashaly

@Bahgat Mashaly请您不介意提供一个示例，向全世界展示它的工作原理？因为您刚复制粘贴的东西并不是原生的nodeJS，看起来像是您在nodeJS上安装的模板引擎模块。 - Rheijn

Answer 6

使用res.json、ajax和promises，加上localStorage的巧妙运用，让数据可以在任何地方使用，并添加令牌以实现稀有的街机游戏之爱。顺便说一句，你也可以使用cookies，但是在https上，cookies可能会有问题。

webpage.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);
    });

使用express()的server.js

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)});
});

- Patrick Knott

Answer 7

我通过向http API node发送请求来实现此功能，该请求从节点对象中返回所需的对象以供客户端的HTML页面使用。

例如：API: localhost:3000/username将从节点应用程序对象中缓存的已登录用户返回。

节点路由文件：

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

- Sainudheen Sahib

Answer 8

我使用了 cookies 来解决这个问题，如果您不想将任何敏感信息传递给客户端，并且只使用 VanillaJS 和 Node.js with Express，这可能会对您有帮助。 我在请求函数中使用 res 对象的 cookie 方法将值设置为 cookies：

app.post('/app/login',(req, res) { // (POST, '/app/login')   
    const user = req.body.user;
    sessions.push({ sessionId, user});
    res.cookie('user', user);
    res.sendFile('inicio.html');
});

重要的是要注意，我向客户发送了一个HTML文件，随后，在与之链接的JavaScript文件中，我创建了这个函数：

document.addEventListener("DOMContentLoaded", ()=> {
    const username = document.cookie.slice(5);
    document.querySelector("#user_h3").innerHTML += username;
});

选择器“#user_h3”指的是可以使用QuerySelector的innerHTML属性更改其内容的h3标签。 HTML如下：

<h3 id="user_h3" >Welcome, user: </h3>

- Edgar Israel Cano

Answer 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");
})

在Stack Overflow上，我找到了关于这个问题的最佳答案，这不是我的答案。我在某个地方找到了一个几乎相同的问题的来源...答案来源

- zaffar

Answer 10

如果使用Express，完全不需要使用视图引擎，可以像这样使用：

<h1>{{ name }} </h1>

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

- Bryam42

---

我该如何在HTML页面中使用列表对象和循环？ - SPnL

完整的代码应该是怎样的？我遇到了一个“Unexpected token <”错误。 - William Jones

这个答案是错误的。{{}} 表示使用某种模板引擎，很可能是 handlebars。 - cguy

这个答案是错误的。 - Lying_cat