📅 最后修改于: 2023-12-03 15:03:15.606000 🧑 作者: Mango
Node.js 是一个开源的 JavaScript 运行时环境，能够在服务端运行 JavaScript 代码。通过 Node.js 能够轻松地构建可扩展的网络应用程序。本文将介绍如何通过 Node.js 快速渲染页面并将参数传递给客户端。
Node.js 可以通过模板引擎来渲染页面，常见的模板引擎有 Handlebars、EJS、Pug 等。下面以 Handlebars 为例说明如何使用 Node.js 渲染页面。
安装 Handlebars 可以通过 npm 进行全局安装，命令如下：
npm install -g handlebars
在项目目录中新建一个模板文件，如 index.handlebars，并编写页面结构和样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<h1>Welcome to {{title}}</h1>
<p>{{content}}</p>
</body>
</html>
注意，模板文件中使用 {{}} 来表示变量，这些变量将在渲染页面时动态替换。
在 Node.js 中，使用 handlebars 模块来渲染模板文件。
const http = require('http');
const fs = require('fs');
const handlebars = require('handlebars');
const server = http.createServer((req, res) => {
const title = 'Node.js Demo';
const content = 'Hello, Node.js!';
fs.readFile('./index.handlebars', 'utf-8', (err, data) => {
if (err) {
res.writeHead(500, {'Content-Type': 'text/plain'});
res.end('Internal Server Error');
} else {
const template = handlebars.compile(data);
const html = template({title, content});
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
}
});
});
server.listen(3000);
console.log('Server running at http://localhost:3000/');
在上述代码中，先定义了一个 HTTP 服务器，并在请求处理函数中读取模板文件，将模板文件编译为模板函数，并传递参数进行渲染，最后将渲染后的页面返回给客户端。
在渲染页面时，可以将参数放在 HTML 元素的属性中，在客户端通过 JavaScript 获取。以 Handlebars 模板为例，假设我们要将一个对象传递给客户端，可以在模板文件中定义一个隐藏的 data 元素，将对象序列化后赋值给 data 元素的 value 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<h1>Welcome to {{title}}</h1>
<p>{{content}}</p>
<div id="data" style="display: none" value="{{data}}"></div>
<script src="app.js"></script>
</body>
</html>
然后在客户端的 JavaScript 中获取 data 元素的 value 属性，解析成对象。
const dataEl = document.getElementById('data');
const data = JSON.parse(dataEl.getAttribute('value'));
console.log(data);
这样就可以将参数传递给客户端了。
本文介绍了如何使用 Node.js 快速渲染页面并将参数传递给客户端。通过模板引擎可以轻松地实现页面渲染，通过在 HTML 元素中设置属性来传递参数给客户端，可以让客户端与服务器端更加紧密地集成。