如何在HTML模板中渲染Node.js数据？无需Express实现方案

我懂你现在的需求：不想依赖Express和EJS，纯靠Node.js原生能力把数据库里的增删改查结果渲染到.html文件里。下面给你几个实用的落地方案，都是基于Node.js核心模块或者轻量工具实现的：

方法1：手动替换HTML模板占位符（最直接无依赖） #

这个思路非常直观：先写一个带自定义占位符的HTML模板，用Node.js的fs模块读取它，把占位符替换成实际的数据库数据，最后输出成完整的HTML文件或者直接响应给客户端。

具体步骤： #

1. 创建HTML模板文件（比如list-template.html）
   用类似{{recordsTableRows}}的标记来预留数据插入位置：

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>我的记录列表</title>
       <style>table {border-collapse: collapse;} th,td {border:1px solid #ddd; padding:8px;}</style>
   </head>
   <body>
       <h2>记录列表</h2>
       <table>
           <thead>
               <tr>
                   <th>ID</th>
                   <th>内容</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               {{recordsTableRows}}
           </tbody>
       </table>
   </body>
   </html>
   

2. 在server.js中完成数据渲染逻辑
   假设你已经有了数据库查询函数，拿到记录数组后生成对应的HTML行，再替换模板里的占位符：

   const fs = require('fs').promises;
   const path = require('path');
   
   // 模拟你的数据库查询逻辑（替换成你实际的DB操作）
   async function fetchRecords() {
       return [
           { id: 1, content: "用户提交的第一条记录" },
           { id: 2, content: "第二条测试记录" }
       ];
   }
   
   // 转义HTML特殊字符，防止XSS攻击（必须加，尤其是用户输入的数据）
   function escapeHtml(str) {
       return str.replace(/[&<>"']/g, match => {
           const escapes = { '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#039;' };
           return escapes[match];
       });
   }
   
   async function renderRecordsToHtml() {
       // 1. 获取数据库数据
       const records = await fetchRecords();
   
       // 2. 生成数据对应的HTML表格行
       const rowsHtml = records.map(record => `
           <tr>
               <td>${record.id}</td>
               <td>${escapeHtml(record.content)}</td>
               <td>
                   <a href="/edit/${record.id}">编辑</a> | 
                   <a href="/delete/${record.id}">删除</a>
               </td>
           </tr>
       `).join('');
   
       // 3. 读取模板文件
       const template = await fs.readFile(path.join(__dirname, 'list-template.html'), 'utf8');
   
       // 4. 替换占位符生成最终HTML
       const finalHtml = template.replace('{{recordsTableRows}}', rowsHtml);
   
       // 5. 输出：可以写入静态文件，或者在HTTP服务中直接返回
       await fs.writeFile(path.join(__dirname, 'records.html'), finalHtml);
       console.log("静态HTML文件已生成！");
   }
   
   // 执行渲染
   renderRecordsToHtml().catch(err => console.error("渲染失败：", err));
   

3. HTTP服务场景下的直接响应
   如果用Node.js原生HTTP模块搭服务，不用写文件，直接把生成的HTML返回给客户端：

   const http = require('http');
   
   const server = http.createServer(async (req, res) => {
       if (req.url === '/') {
           const records = await fetchRecords();
           const rowsHtml = records.map(...).join(''); // 同上逻辑
           const template = await fs.readFile(...);
           const finalHtml = template.replace(...);
           
           res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
           res.end(finalHtml);
       }
       // 处理编辑、删除等其他路由...
   });
   
   server.listen(3000, () => console.log("服务运行在 http://localhost:3000"));
   

方法2：用轻量级模板引擎（简化渲染逻辑） #

如果觉得手动替换占位符太繁琐，可以用不需要依赖Express的轻量模板库，比如handlebars或者nunjucks，它们能帮你更优雅地处理循环、条件判断等逻辑。

以Handlebars为例：

1. 安装依赖

   npm install handlebars
   

2. 修改模板文件（比如list-template.hbs，也可以用.html后缀）
   用Handlebars的语法写循环：

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>我的记录列表</title>
       <style>table {border-collapse: collapse;} th,td {border:1px solid #ddd; padding:8px;}</style>
   </head>
   <body>
       <h2>记录列表</h2>
       <table>
           <thead>
               <tr>
                   <th>ID</th>
                   <th>内容</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               {{#each records}}
               <tr>
                   <td>{{id}}</td>
                   <td>{{content}}</td> <!-- Handlebars会自动转义HTML，防XSS -->
                   <td>
                       <a href="/edit/{{id}}">编辑</a> | 
                       <a href="/delete/{{id}}">删除</a>
                   </td>
               </tr>
               {{/each}}
           </tbody>
       </table>
   </body>
   </html>
   

3. 在server.js中使用Handlebars渲染

   const fs = require('fs').promises;
   const path = require('path');
   const handlebars = require('handlebars');
   
   async function renderWithHandlebars() {
       const records = await fetchRecords();
       // 读取并编译模板
       const templateSource = await fs.readFile(path.join(__dirname, 'list-template.hbs'), 'utf8');
       const compiledTemplate = handlebars.compile(templateSource);
       // 传入数据渲染
       const finalHtml = compiledTemplate({ records: records });
       // 输出到文件或HTTP响应
       await fs.writeFile(path.join(__dirname, 'records.html'), finalHtml);
   }
   
   renderWithHandlebars().catch(err => console.error(err));
   

关键注意点 #

• XSS防护：如果数据包含用户输入，一定要转义HTML特殊字符！手动替换时要自己写转义函数，用模板引擎的话大部分会自动处理。
• 性能优化：如果请求频繁，可以缓存编译后的模板或者读取后的模板内容，避免重复IO操作。

内容的提问来源于stack exchange，提问作者Anand Choudhary