Node.js通过Express渲染将参数传递给客户端

Question

Node.js通过Express渲染将参数传递给客户端

20

我正在使用Node.js，与客户端进行通信时遇到问题。

我定义了Express：

var express             = require("express");
var app                 = express();`

当我尝试在请求页面时向客户端传递参数时，变量不保存数据，例如：

app.get("/", function(req, res){
    res.render("index", { name: "example" });
});

在首页上，当我使用控制台打印变量(name)时，它返回""。

更多信息：http://expressjs.com/api.html#app.render

我是否遗漏了什么或者做错了什么？

- g571792

这只是在模板中传递参数。 - marsh

我正在使用Handlebars作为我的引擎，那么我该如何访问参数呢？是否有可能只传递参数，使其在客户端页面上成为本地可用的参数？ - g571792

4个回答

9

您基本上是告诉Express渲染您的索引页面并为“name”变量提供一个值，但这并不一定使“name”变量在客户端JavaScript中可用。您需要编辑您的索引模板以在页面中显示“name”变量。语法取决于您使用的模板引擎（jade，ejs，dustjs）。

另一种解决方案是在客户端页面的JavaScript中使用ajax调用，并在服务器上使用“res.json”发送数据。然后，您可以在控制台中评估“name”。例如使用jQuery：

index.html:

$.get( "/getvar", function( data ) {
  name = data.name;
});

server.js:

app.get("/getvar", function(req, res){
    res.json({ name: "example" });
});

- Jean-Marc S.

4

如果您想通过JavaScript在客户端获取参数，则应像此模板一样进行 <script>var data = data</script> ,否则变量将不可用。

如果您使用Jade，则应如下所示：

script(type='text/javascript').
    var name = !{name}

- marsh

1

将数据列表从Node.js传递到HTML。

server.js

var http = require('http');
var express = require('express');
var sqlite3 = require('sqlite3').verbose();
var bodyParser = require('body-parser');
var path    = require("path");

console.log('Server running at http://127.0.0.1:8081/');

var __dirname = "D:/html-files";
var app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: false })

var engine = require('consolidate');

app.engine('html', engine.mustache);
app.use(express.static('./'));

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

    res.render('index.html');   

});

app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
});

app.post('/get-user-list', urlencodedParser, function (req, res) {

    let db = new sqlite3.Database('user.db', sqlite3.OPEN_READWRITE, (err) => {
        if (err) {
            console.error(err.message);
        }
        console.log('Connected to the user database.');
        console.log("ID" + "\t" + "NAME" + "\t" + "EMAIL");
    });

    db.serialize(() => {     

        var dataList = "";

        db.each('SELECT id, name, email FROM USER ', (err, row) => {
            if (err) {
                console.error(err.message);
            }
            if(dataList != "")
            dataList = dataList + ',';

            dataList = dataList + '{"id":"' + row.ID + '","name":"' + row.NAME + '","email":"' + row.EMAIL + '"}';
            console.log("dataList : " + dataList);
        });

        db.close((err) => {
            if (err) {
                console.error(err.message);
            }
            console.log('Close the database connection.');
            response = {'username':dataList};                           
            aFunction(res, dataList);

        });

    });

});

var aFunction = function(res, dataList) {
    console.log('return to page.');
    console.log("dataList : " + dataList);
    res.render(__dirname + "/list-all-users.html", response);
};

app.listen(8081, '127.0.0.1')

- Rahamath

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- victorkt · Accepted Answer

您传递给渲染函数的变量name仅在渲染页面时可用，在发送到客户端后将无法访问。您必须在渲染阶段的视图中使用它。

由于您正在使用handlebars，例如，您可以这样在页面中显示它：

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

如果您想在JavaScript中使用此数据，请将其放在script标签内：

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