本教程详细讲解了如何在node.js、express和ejs环境下，从多个mongodb集合中获取数据（如图片和文本），并将其动态地渲染到独立的html卡片中。文章涵盖了后端数据获取与传递、前端ejs模板循环渲染技巧，以及如何确保数据正确配对，最终实现结构清晰、内容独立的网页展示。
在Node.js和EJS中动态渲染独立HTML卡片
在构建现代Web应用时，从多个数据源获取信息并将其以结构化、独立的方式呈现在用户界面上是一个常见需求。本教程将以一个具体的案例——从两个不同的MongoDB数据库（或集合）中获取图片和文本数据，并分别渲染到独立的HTML卡片中——来详细阐述如何在Node.js、Express和EJS技术栈下实现这一功能。
1. 技术栈概述
我们将使用的核心技术包括：
- Node.js: 服务端JavaScript运行环境。
- Express: 快速、开放、极简的Node.js Web框架。
- Mongoose: 用于MongoDB的ODM（对象数据模型）库，简化数据操作。
- EJS: 嵌入式JavaScript模板引擎，用于将后端数据渲染到HTML页面。
- MongoDB: NoSQL文档数据库，用于存储数据。
- Multer: Node.js中间件，用于处理multipart/form-data，主要用于文件上传。
2. 后端数据准备与传递 (app.js)
首先，我们需要在后端（app.js）设置Mongoose连接、定义数据模型，并处理数据的存储和检索。
2.1 MongoDB连接与Schema定义
为了将图片和文本分别存储，我们为它们定义了独立的Mongoose Schema和模型。
立即学习“前端免费学习笔记（深入）”；
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const mongoose = require("mongoose");
const multer = require("multer"); // 用于文件上传
const app = express();
app.set('view engine', 'ejs');
app.use(express.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
mongoose.set('strictQuery', true);
// 连接到不同的数据库或集合
// 假设 SiteofAds 存储用户数据，Images 存储图片，Content 存储文本
const db1 = mongoose.createConnection("mongodb://127.0.0.1:27017/SiteofAds"); // 用户数据库
const db2 = mongoose.createConnection("mongodb://127.0.0.1:27017/Images"); // 图片数据库
const db3 = mongoose.createConnection("mongodb://127.0.0.1:27017/Content"); // 内容数据库
// 图片 Schema
const ImageSchema = new mongoose.Schema({
image: {
data: Buffer, // 存储图片二进制数据
contentType: String // 存储图片MIME类型
}
});
const Image = db2.model("Image", ImageSchema); // 在Images数据库中创建Image模型
// 内容 Schema
const ContentSchema = new mongoose.Schema({
text: String // 存储文本内容
});
const Content = db3.model("Content", ContentSchema); // 在Content数据库中创建Content模型
// Multer配置：将文件存储在内存中
const storage = multer.memoryStorage();
const upload = multer({storage: storage});2.2 数据存储 (/secrets 路由)
当用户上传图片和文本时，我们将它们分别保存到对应的MongoDB集合中。
// ... (之前的代码) ...
// 处理图片和文本上传的 POST 请求
app.post("/secrets", upload.single("image"), async (req, res) => {
try {
// 创建新的图片文档
const image = new Image({
image: {
data: req.file.buffer,
contentType: req.file.mimetype
}
});
// 创建新的文本内容文档
const content = new Content({
text: req.body.myTextArea
});
// 异步保存图片和文本
await image.save();
await content.save();
res.render('home'); // 保存成功后渲染首页
} catch (error) {
console.error("Error saving data:", error);
res.status(500).send("Error saving data.");
}
});
// ... (其他路由) ...注意事项:
- 这里假设每次上传的图片和文本是相互关联的，并且通过顺序插入来保持这种关联。在实际生产环境中，更健壮的方法是为图片和文本数据引入一个共同的adId或其他关联字段，以便在检索时能够精确配对。
- 将图片直接存储为Buffer在MongoDB中适用于小文件。对于大文件，建议将图片存储到文件系统或对象存储服务（如AWS S3），然后在数据库中只存储其URL。
2.3 数据获取与传递 (/ 路由)
在首页 (/) 路由中，我们从各自的集合中获取所有图片和文本数据，并将它们传递给EJS模板进行渲染。
// ... (之前的代码) ...
// 首页路由：获取并渲染所有图片和内容
app.get("/", async (req, res) => {
try {
// 从Images数据库获取所有图片，按_id降序排列（最新在前）
const images = await Image.find().sort({_id: -1});
// 从Content数据库获取所有文本，按_id降序排列（最新在前）
const contents = await Content.find().sort({_id: -1});
// 将获取到的图片和内容数据传递给 home.ejs 模板
res.render("home", {images: images, contents: contents});
} catch (error) {
console.error("Error fetching data:", error);
res.status(500).send("Error fetching data.");
}
});
// ... (其他路由和app.listen) ...关键点:
- Image.find().sort({_id: -1}) 和 Content.find().sort({_id: -1}) 确保我们获取到的数据是按最新创建的顺序排列的。
- 通过 res.render("home", {images: images, contents: contents}); 将两个独立的数据数组传递给 home.ejs 模板。
3. 前端EJS模板渲染 (home.ejs)
现在，我们来修改 home.ejs 文件，使其能够正确地遍历 images 和 contents 数组，并为每一对图片和文本生成一个独立的HTML卡片。
3.1 原始问题的EJS代码分析
原始的 home.ejs 代码尝试在单个卡片内迭代图片和文本，导致所有图片堆叠在一起，所有文本也堆叠在一起，而不是每个图片和文本形成一个独立的卡片。
<!-- 原始问题的EJS代码片段 -->
<div class="grid">
<div class="grid-item">
<div class="card">
<% if (images.length> 0) { %>
<% images.forEach((image)=> { %>
<div class="card"> <!-- 错误：在这里创建了嵌套卡片 -->
<img src="data:<%= image.image.contentType %>;base64,<%= image.image.data.toString('base64') %>" />
</div>
<% }); %>
<% } else { %>
<p>No images uploaded yet.</p>
<% } %>
<div class="card-content">
<h1 class="card-header">Oglas br.1</h1>
<p slass="card-text">
<% if (contents.length> 0) { %>
<% contents.forEach((content)=> { %>
<div> <!-- 错误：在这里将所有内容堆叠在同一卡片内 -->
<h2>
<%= content.text %>
</h2>
</div>
<% }); %>
<% } else { %>
<p>No content yet.</p>
<% } %>
<button class="button2"> Detalji</button>
</div>
</div>
</div>
</div>问题在于 images.forEach 和 contents.forEach 循环都发生在同一个 <div class="card"> 内部，并且它们是独立的循环。这会导致所有图片和所有文本都显示在同一个卡片中。为了创建独立的卡片，我们需要在循环的每次迭代中创建一个新的卡片结构。
3.2 改进后的EJS代码示例
为了确保每个图片和对应的文本都显示在一个独立的卡片中，我们需要在一个循环中同时访问图片和文本数据，并为每次迭代生成一个完整的卡片结构。由于后端我们是按相同顺序（_id:-1）获取图片和文本的，我们可以假设 images[i] 和 contents[i] 是相互对应的。
<%- include("partials/header") %>
<div class="grid">
<% // 确保 images 和 contents 数组都有数据，并且长度至少为1 %>
<% if (images.length > 0 && contents.length > 0) { %>
<% // 遍历数组，使用索引 i 来同时访问 images[i] 和 contents[i] %>
<% // 循环次数取两者中较短的长度，以避免索引越界 %>
<% for (let i = 0; i < images.length && i < contents.length; i++) { %>
<div class="grid-item">
<div class="card">
<% // 渲染图片 %>
<img class="card-img"
src="data:<%= images[i].image.contentType %>;base64,<%= images[i].image.data.toString('base64') %>"
alt="Ad Image">
<div class="card-content">
<h1 class="card-header">Ad No.<%= i + 1 %></h1> <%-- 可以根据需要显示更具体的ID --%>
<p class="card-text">
<%= contents[i].text %>
</p>
<button class="button2"> Details</button>
</div>
</div>
</div>
<% } %>
<% } else { %>
<p>No ads uploaded yet.</p>
<% } %>
</div>
<%- include("partials/footer") %>代码解释:
- 外部条件判断: if (images.length > 0 && contents.length > 0) 确保只有当两个数组都有数据时才进行渲染，避免空数组导致的错误。
- 单循环遍历: 我们使用一个 for 循环，通过索引 i 同时访问 images[i] 和 contents[i]。循环条件 i < images.length && i < contents.length 确保不会访问到超出任一数组边界的元素。
- 独立卡片结构: 在循环的每次迭代中，我们都创建了一个完整的 <div class="grid-item"> 和 <div class="card"> 结构。这意味着每次循环都会生成一个新的独立卡片。
-
图片渲染: <img> 标签的 src 属性通过 data: URI 方案直接嵌入图片的Base64编码数据。
- data:<%= images[i].image.contentType %>;base64,<%= images[i].image.data.toString('base64') %>
- 文本渲染: <p> 标签内直接显示 contents[i].text。
通过这种方式，每个从数据库中获取的图片和其对应的文本都将被正确地组合并显示在一个独立的HTML卡片中。
4. 关键考量与最佳实践
4.1 数据关联性
当前方案依赖于图片和文本在数据库中的插入顺序和检索顺序来保持其关联性。这在小型或演示项目中可能有效，但在生产环境中并不健壮。 推荐做法: 在 ImageSchema 和 ContentSchema 中添加一个共同的字段，例如 adId。在保存数据时，为图片和文本生成相同的 adId。
// 修改后的 Schema 示例
const ImageSchema = new mongoose.Schema({
adId: String, // 用于关联的 ID
image: { data: Buffer, contentType: String }
});
const ContentSchema = new mongoose.Schema({
adId: String, // 用于关联的 ID
text: String
});
// 在保存数据时
app.post("/secrets", upload.single("image"), async (req, res) => {
const newAdId = new mongoose.Types.ObjectId().toString(); // 生成一个唯一的ID
const image = new Image({ adId: newAdId, image: { ... } });
const content = new Content({ adId: newAdId, text: req.body.myTextArea });
await image.save();
await content.save();
});
// 在获取数据时
app.get("/", async (req, res) => {
const images = await Image.find().sort({ _id: -1 });
// 遍历 images，为每个 image 查找对应的 content
const ads = await Promise.all(images.map(async img => {
const content = await Content.findOne({ adId: img.adId });
return { image: img, content: content };
}));
res.render("home", { ads: ads }); // 将组合好的数据传递给模板
});然后，EJS模板就可以直接遍历 ads 数组，每个 ad 对象都包含 image 和 content。
4.2 错误处理与健壮性
- 数组长度不匹配: 如果 images 和 contents 数组长度不一致，当前的 for 循环会以较短的数组为准。如果数据关联性很重要，并且数组长度可能不一致，应采用上述的 adId 关联方案，或在EJS中添加更详细的逻辑来处理缺失数据。
- 空数据: 在EJS中添加 if (data.length > 0) 判断，可以优雅地处理没有数据的情况，显示友好的提示信息。
4.3 性能优化
-
图片大小: 直接在数据库中存储图片二进制数据并以Base64形式嵌入HTML，会增加页面大小，尤其是在图片数量多或图片尺寸大的情况下。这会显著影响页面加载速度和用户体验。
- 推荐方案: 将图片文件存储到文件系统、CDN（内容分发网络）或专门的对象存储服务（如AWS S3、七牛云等），数据库中只存储图片的URL。然后EJS直接使用图片URL作为 src 属性。
- 数据库查询: 避免在循环中进行数据库查询（N+1问题），尽量一次性获取所有必要数据。
4.4 代码模块化
对于复杂的卡片结构，可以考虑使用EJS partials（局部模板）来提高代码的可维护性和复用性。
<!-- partials/adCard.ejs -->
<div class="grid-item">
<div class="card">
<img class="card-img"
src="data:<%= ad.image.contentType %>;base64,<%= ad.image.data.toString('base64') %>"
alt 
