Node.js 通过快速渲染将参数传递给客户端答案

【问题标题】：Node.js passing parameters to client via express renderNode.js 通过快速渲染将参数传递给客户端
【发布时间】：2015-06-02 09:29:11
【问题描述】：

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

我定义快递：

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

当我在请求页面时尝试将参数传递给客户端时，该变量不包含任何数据，例如：

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

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

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

【问题讨论】：

只是在模板中传递参数
我使用车把作为我的引擎，那么我将如何访问参数？是否可以只传递客户端页面上本地可用的参数？

标签： javascript node.js express

【解决方案1】：

如果你想通过javascript在客户端获取参数，你应该做这样的模板<script>var data = data</script>，否则变量不可用

如果你使用 Jade，它会是这样的：

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

【讨论】：

【解决方案2】：

您基本上是在告诉 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" });
});

【讨论】：

【解决方案3】：

你发送给render函数的变量name只有在渲染页面时才可用，发送给客户端后就无法访问了。您必须在渲染阶段的视图中使用它。

由于您使用的是把手，您可以像这样在页面中显示它，例如：

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

如果您想在 javascript 中使用此数据，请在 script 标记中使用它：

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

【讨论】：

当我 console.log(name) 我得到 {{ name }}
去掉引号
供参考，如果有人需要，我正在使用以下链接中的示例来制作“简单模板引擎”，并且可以返回并捕获带有#my_variable# 的脚本标签中的布尔值，如图所示以上（不带引号）：expressjs.com/en/advanced/developing-template-engines.html
即使您将 .html 文件传递给 render() 并且该 html 文件使用 <script src=...> 加载另一个 .js 文件，它也可以工作

【解决方案4】：

从节点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')

【讨论】：

【解决方案5】：

res.render() 渲染模板并发送给客户端。例如，使用 res.render() 时的响应 Content-Type 标头将是 text/html。但是res.json() 以json 格式向客户端发送数据，因此响应的Content-Type 标头将是application/json. 尝试使用res.json()。

res.json({ name: "example" });

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

【讨论】：