如何不使用模板引擎（如ejs、handlebars）渲染MongoDB数据？能否直接将数据渲染至HTML？

嘿，别担心，完全不用模板引擎也能搞定MongoDB数据渲染到HTML的需求！我给你两种最实用的方法，都是新手友好的，一步步来：

这种方法是让后端（比如用Node.js + Express）先从MongoDB取出数据，然后手动把数据拼进HTML字符串里，再把整个HTML返回给浏览器。

步骤拆解： #

1. 先准备基础环境
   首先确保你装了Node.js，然后新建项目，安装依赖：

   npm init -y
   npm install express mongodb
   

2. 写后端代码（比如server.js）
   这里用MongoClient连接数据库，查询数据后拼接HTML：

   const express = require('express');
   const { MongoClient } = require('mongodb');
   const app = express();
   const port = 3000;
   
   // MongoDB连接字符串（替换成你的数据库地址和名称）
   const mongoUrl = 'mongodb://localhost:27017/your_database_name';
   
   app.get('/', async (req, res) => {
     try {
       // 连接MongoDB
       const client = await MongoClient.connect(mongoUrl);
       const db = client.db();
       // 从集合里查询数据（替换成你的集合名称）
       const data = await db.collection('your_collection_name').find().toArray();
       client.close();
   
       // 手动拼接HTML字符串
       let html = `
         <!DOCTYPE html>
         <html>
           <head>
             <title>直接渲染MongoDB数据</title>
           </head>
           <body>
             <h1>我的数据列表</h1>
             <ul>
       `;
       // 循环数据，把每个条目拼进去
       data.forEach(item => {
         // 注意：这里要转义特殊字符防止XSS！
         const safeTitle = escapeHtml(item.title); // 假设你的数据有title字段
         const safeContent = escapeHtml(item.content);
         html += `<li><strong>${safeTitle}</strong>: ${safeContent}</li>`;
       });
       html += `
             </ul>
           </body>
         </html>
       `;
   
       // 返回拼接好的HTML
       res.send(html);
     } catch (err) {
       console.error(err);
       res.status(500).send('获取数据失败');
     }
   });
   
   // 简单的HTML转义函数，防止XSS攻击
   function escapeHtml(text) {
     return text.replace(/[&<>"']/g, char => {
       const escapeChars = {
         '&': '&amp;',
         '<': '&lt;',
         '>': '&gt;',
         '"': '&quot;',
         "'": '&#039;'
       };
       return escapeChars[char];
     });
   }
   
   app.listen(port, () => {
     console.log(`服务器运行在 http://localhost:${port}`);
   });
   

3. 运行服务器，访问http://localhost:3000就能看到渲染好的页面了！

这种方法是后端只负责提供JSON格式的数据接口，前端通过JavaScript异步请求数据，然后动态把数据插到HTML里。适合需要交互的复杂页面。

步骤拆解： #

1. 后端写API接口（还是用Node.js + Express）
   修改刚才的server.js，加一个API路由：

   // 新增API接口，返回JSON数据
   app.get('/api/data', async (req, res) => {
     try {
       const client = await MongoClient.connect(mongoUrl);
       const db = client.db();
       const data = await db.collection('your_collection_name').find().toArray();
       client.close();
       res.json(data); // 返回JSON格式的数据
     } catch (err) {
       console.error(err);
       res.status(500).json({ error: '获取数据失败' });
     }
   });
   

2. 写前端HTML文件（比如public/index.html）
   先在Express里配置静态文件目录，让它能访问public文件夹：

   // 在server.js里加这一行，放在app.listen之前
   app.use(express.static('public'));
   

   然后创建public/index.html：

   <!DOCTYPE html>
   <html>
     <head>
       <title>异步渲染MongoDB数据</title>
     </head>
     <body>
       <h1>我的数据列表</h1>
       <!-- 空容器，用来放渲染的数据 -->
       <ul id="data-list"></ul>
   
       <script>
         // 页面加载完成后请求API
         window.addEventListener('load', async () => {
           try {
             // 请求后端API
             const response = await fetch('/api/data');
             const data = await response.json();
   
             // 获取容器元素
             const listContainer = document.getElementById('data-list');
   
             // 循环数据，动态创建DOM元素
             data.forEach(item => {
               // 转义特殊字符
               const safeTitle = escapeHtml(item.title);
               const safeContent = escapeHtml(item.content);
   
               const li = document.createElement('li');
               li.innerHTML = `<strong>${safeTitle}</strong>: ${safeContent}`;
               listContainer.appendChild(li);
             });
           } catch (err) {
             console.error(err);
             alert('加载数据失败');
           }
         });
   
         // 同样的HTML转义函数
         function escapeHtml(text) {
           return text.replace(/[&<>"']/g, char => {
             const escapeChars = {
               '&': '&amp;',
               '<': '&lt;',
               '>': '&gt;',
               '"': '&quot;',
               "'": '&#039;'
             };
             return escapeChars[char];
           });
         }
       </script>
     </body>
   </html>
   

3. 重启服务器，访问http://localhost:3000/index.html，就能看到前端动态渲染的数据了！

重要提醒： #

• 不管用哪种方法，一定要处理XSS风险！如果数据里包含用户输入的内容（比如评论、标题），必须转义HTML特殊字符，不然攻击者可以注入恶意代码。上面的示例里已经写了简单的转义函数，你可以直接用。
• 如果你用的是其他后端语言（比如Python/Java），思路是一样的：要么后端拼HTML字符串，要么后端提供API，前端用JS渲染。

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