Node.js服务器和客户端之间的变量

一尘不染

Node.js服务器和客户端之间的变量

node.js

我用Node.js运行一个简单的http服务器：

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
var sensor = require('ds18x20');
var temp = sensor.get('sensorID');

http.createServer(function(req,res) {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end(index);
}).listen(80);

console.log(temp);

我的index.html文件：

<html>
   <head>
   </head>
<body>
My temperature:
//space for variable: temp
</body>
</html>

现在，我想在我的index.html文件中打印服务器端变量：temp。但是我不知道该怎么做。

也许有人可以帮助我从服务器到客户端交换变量。

阅读 180

2020-07-07

共1个答案

一尘不染

正如您可以在@WebServer的答案中看到的那样，节点中有多种模板引擎。
我想给你一个使用其中一个的例子-EJS：

首先安装它：

npm install ejs

server.js：

var http = require('http');
var ejs = require('ejs');
var fs = require('fs');

http.createServer(function(req,res) {
  res.writeHead(200, {'Content-Type': 'text/html'});

  //since we are in a request handler function
  //we're using readFile instead of readFileSync
  fs.readFile('index.html', 'utf-8', function(err, content) {
    if (err) {
      res.end('error occurred');
      return;
    }
    var temp = 'some temp';  //here you assign temp variable with needed value

    var renderedHtml = ejs.render(content, {temp: temp});  //get redered HTML code
    res.end(renderedHtml);
  });
}).listen(80);

您的视图可能如下所示：

<html>
   <head>
   </head>
<body>
My temperature: <%= temp %>
</body>
</html>

EJS还会temp为您转义（以及传递给视图的其他变量），因此您不必担心XSS攻击。

编辑

如果您不想在每个请求中读取文件，也可以编译模板：

var http = require('http');
var ejs = require('ejs');
var fs = require('fs');

//we are not in a request handler so we may use readFileSync
var content = fs.readFileSync('index.html', 'utf-8');
var compiled = ejs.compile(content);

http.createServer(function(req,res) {
    var temp = 'some temp';

    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(compiled({temp: temp}));
}).listen(80);

编辑2（回答您的评论问题）

这是使用Express和AJAX的简单示例：

server.js：

var http = require('http');
var express = require('express');
var app = express();

app.configure(function() {
    app.set('view engine', 'ejs');  //tell Express we're using EJS
    app.set('views', __dirname + '/views');  //set path to *.ejs files
    app.use(app.router);
    //put your static files (js, css, images) into /public directory
    app.use('/public', express.static(__dirname + '/public'));
});

//get some server data for sending it to the client
var getData = function() {
    return Math.random().toString();
}

app.get('/', function(req, res) {
    //render index.ejs file
    res.render('index', {val: getData()});
});

app.get('/ajax', function(req, res) {
    res.send(getData());
});

http.createServer(app).listen(80);

views / index.ejs：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/public/js/request.js"></script>
</head>
<body>

    <h1>Val: <span id="val"><%=val%></span></h1>

    <button id="loadRequest">Refresh</button>

</body>
</html>

public / js / request.js：

$(function() {
    $('#loadRequest').click(function() {
        $.get('/ajax', function(res) {
            $('#val').text(res);
        });
    });
});

希望这可以帮助

2020-07-07