本教程详细讲解了如何在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 代码尝试在单个卡片内迭代图片和文本，导致所有图片堆叠在一起，所有文本也堆叠在一起，而不是每个图片和文本形成一个独立的卡片。

SlidesAI

使用SlidesAI的AI在几秒钟内创建演示文稿幻灯片

下载

    

        

            <% if (images.length> 0) { %>
                <% images.forEach((image)=> { %>
                    
 
                        @@##@@;base64,<%= image.image.data.toString('base64') %>" />
                    
                <% }); %>
            <% } else { %>
                    
No images uploaded yet.
            <% } %>

            

                
Oglas br.1
                

                    <% if (contents.length> 0) { %>
                        <% contents.forEach((content)=> { %>
                            
 
                                

                                    <%= content.text %>
                                
                            
                        <% }); %>
                    <% } else { %>
                        
No content yet.
                    <% } %>
                     Detalji
            
        
    

问题在于 images.forEach 和 contents.forEach 循环都发生在同一个

<%- include("partials/header") %>


    <% // 确保 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++) { %>
            

                

                    <% // 渲染图片 %>
                    @@##@@;base64,<%= images[i].image.data.toString('base64') %>"
                        alt="Ad Image">
                    

                        
Ad No.<%= i + 1 %>
 <%-- 可以根据需要显示更具体的ID --%>
                        

                            <%= contents[i].text %>
                        
                         Details
                    
                
            
        <% } %>
    <% } else { %>
        
No ads uploaded yet.
    <% } %>


<%- include("partials/footer") %>