Question

我正在尝试将node.js中的变量传递给我的HTML文件。

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

Answer 1

我想通了我能够传递像这样的变量

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

Answer 2

你可以利用的是某种像帕格（以前的玉）这样的模板引擎。要启用它，您应该执行以下操作：

npm install --save pug - 将其添加到项目和package.json文件
app.set('view engine', 'pug'); - 将其注册为快递
创建一个./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

Answer 3

仅凭Node和HTML，您无法实现您的目标;它不像使用PHP，你可以做<title> <?php echo $custom_title; ?>之类的事情，而不需要安装任何其他东西。

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

两者都需要一些额外的工作;当你想要做你想做的事情时，它并不像插件那样播放。

Answer 4

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

服务器端 -

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

  var name = 'hello';

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

});

客户端（main.html） -

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

Answer 5

如果使用Express，根本不需要使用View Engine，请使用以下内容：

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

如果您之前将应用程序设置为使用HTML而不是任何View Engine

，则此方法有效

Answer 6

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

Answer 7

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

例如：API: localhost:3000/username

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

节点路由文件，

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

Answer 8

使用res.json，ajax和promises，使用localStorage可以在任何地方使用它，添加了令人难以置信的街机爱情的令牌。 PS，你可以使用cookies，但cookie可以在https上使用。

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

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

Answer 9

除了顶部的那些以外，您可以使用JavaScript从服务器中获取详细信息。 html文件

  <！DOCTYPE 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”）;
}）

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

将变量从node.js传递给html

9 个答案: