正如你可以在@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);
的意見/ 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>
公共/ JS/request.js:
$(function() {
$('#loadRequest').click(function() {
$.get('/ajax', function(res) {
$('#val').text(res);
});
});
});
希望這有助於
非常感謝,這正是我正在尋找的!謝謝謝謝,謝謝 – steke
歡迎:)順便說一句EJS與[Express框架]兼容(https://github.com/visionmedia/express) – Curious
嘿,也許你可以幫我第二次,我看看ejs文檔和我瞭解基礎知識。下一步是刷新我的變量temp,只需點擊我的index.html中的按鈕即可。在這一刻,我用我輸出的server.js中的一個函數解決了這個問題。但我只能通過console.log(temp)在控制檯讀取新的臨時變量。我無法刷新html,我知道它有點複雜。也許你有一個例子,我可以看看。非常感謝 – steke