在Node.js和EJS中从多个MongoDB数据库动态渲染独立HTML卡片

程序猿 • 2025年12月21日 00:10:15 • 用户投稿

本教程详细讲解了如何在%ignore_a_1%、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"); // 内容数据库// 图片 Schemaconst ImageSchema = new mongoose.Schema({    image: {        data: Buffer,      // 存储图片二进制数据        contentType: String // 存储图片MIME类型    }});const Image = db2.model("Image", ImageSchema); // 在Images数据库中创建Image模型// 内容 Schemaconst 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 代码尝试在单个卡片内迭代图片和文本，导致所有图片堆叠在一起，所有文本也堆叠在一起，而不是每个图片和文本形成一个独立的卡片。

                         0) { %>                 { %>                                             @@##@@;base64," />                    
                                                No images uploaded yet.
                                        Oglas br.1
                                     0) { %>                         { %>                            
                                                                                                     
                            
                                                                    No content yet.

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

内部，并且它们是独立的循环。这会导致所有图片和所有文本都显示在同一个卡片中。为了创建独立的卡片，我们需要在循环的每次迭代中创建一个新的卡片结构。

3.2 改进后的EJS代码示例

为了确保每个图片和对应的文本都显示在一个独立的卡片中，我们需要在一个循环中同时访问图片和文本数据，并为每次迭代生成一个完整的卡片结构。由于后端我们是按相同顺序（_id:-1）获取图片和文本的，我们可以假设 images[i] 和 contents[i] 是相互对应的。

         0 && contents.length > 0) { %>                        <% for (let i = 0; i < images.length && i                                                                     @@##@@;base64,"                        alt="Ad Image">                                            Ad No.
                                                                             
                                            
                
            
                    No ads uploaded yet.

代码解释:

外部条件判断: if (images.length > 0 && contents.length > 0) 确保只有当两个数组都有数据时才进行渲染，避免空数组导致的错误。单循环遍历: 我们使用一个 for 循环，通过索引 i 同时访问 images[i] 和 contents[i]。循环条件 i 独立卡片结构: 在循环的每次迭代中，我们都创建了一个完整的

和

结构。这意味着每次循环都会生成一个新的独立卡片。图片渲染: <img src="data:%20%E6%A0%87%E7%AD%BE%E7%9A%84%20src%20%E5%B1%9E%E6%80%A7%E9%80%9A%E8%BF%87%20data:%20URI%20%E6%96%B9%E6%A1%88%E7%9B%B4%E6%8E%A5%E5%B5%8C%E5%85%A5%E5%9B%BE%E7%89%87%E7%9A%84Base64编码数据。data:;base64,文本渲染:

标签内直接显示 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（局部模板）来提高代码的可维护性和复用性。

            @@##@@;base64,"            alt

<img class="card-img" src="data:

以上就是在Node.js和EJS中从多个MongoDB数据库动态渲染独立HTML卡片的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532957.html

a go html java javascript js json mongodb node node.js 前端编码

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

React中useRef管理数组的正确过滤与长度判断

上一篇 2025年12月21日 00:10:10

JavaScript WebGL三维可视化开发

下一篇 2025年12月21日 00:10:23

DLL攻击漫谈

动态链接库（dll）可以作为执行任意代码的接口，并帮助恶意行为者实现其目标。dll是microsoft共享库的实现方式，通常以dll为文件扩展名，并且它们也是pe文件，与exe文件结构相同。 DLL可以包含PE文件支持的任何类型的内容，这些内容可能包括代码、资源或数据的任意组合。DLL的主要用途是在…

程序猿
2026年9月28日 • 用户投稿
1000
pr怎么看视频是什么序列号？pr视频序列号可以改吗？

开头：在Premiere Pro（简称PR）中，序列是编辑工作的核心。了解如何查看和管理序列的设置，是保证项目流畅、输出正确的基础。本文将简单介绍如何查看序列号及修改序列设置。一、pr怎么看视频是什么序列号？在PR中，“序列号”通常不是指一个单独的数字编码，而是指“序列设置”的各项参数。这些参数…

程序猿
2026年9月28日 • 用户投稿
0000
REST API设计原则：理解无状态性与持久化数据管理

在REST API设计中，跨不同API调用维护服务器端变量（如用户列表）的内存状态与REST的无状态原则相悖。RESTful服务应将每个请求视为独立的事务，不依赖服务器端会话状态。对于需要持久化的数据，应采用数据库、文件系统等外部存储机制，而非在内存中直接维护，以确保系统的可伸缩性、可靠性和一致性。…

程序猿
2026年9月28日 • 用户投稿
1000
sublime怎么在侧边栏中隐藏特定的文件类型_侧边栏文件过滤设置

要隐藏Sublime Text侧边栏中的特定文件类型，需修改用户或项目设置中的”folder_exclude_patterns”和”file_exclude_patterns”数组。首先在全局设置中添加如”.git”、&#822…

程序猿
2026年9月28日 • 用户投稿
1000
使用单个循环优化 Java 代码：替代多个循环的策略

本文旨在帮助开发者优化 Java 代码，特别是当遇到需要多次遍历同一数据集以查找不同类型数据时。我们将探讨如何使用单个循环和标志变量来替代多个循环，从而提高代码的效率和可读性，并提供多种优化策略，包括使用布尔标志、数组和辅助类，以及性能考量。在处理数据时，经常会遇到需要从同一数据集中提取不同类型的…

程序猿
2026年9月28日 • 用户投稿
0000
sublime怎么设置字体大小和样式_Sublime字体大小及样式配置方法

调整Sublime Text字体大小和样式需修改用户设置文件，通过添加或修改font_size和font_face实现个性化配置，保存后实时生效。1. 打开Preferences -> Settings，编辑右侧用户设置；2. 添加”font_size”: 14、&#8…

程序猿
2026年9月28日 • 用户投稿
1000
用户投稿

Laravel Artisan 命令执行机制与自定义命令的最佳实践

本文深入探讨Laravel Artisan命令的执行机制，重点指出在运行任意Artisan命令时，所有自定义命令的__construct方法都会被初始化。为避免潜在的意外行为，如不必要的数据库操作，教程强调应将所有业务逻辑和操作放置在命令的handle()方法中，以确保命令的按需执行和应用程序的稳定…

程序猿
2026年9月28日
0000
第五代高通骁龙8至尊版正式发布：全球最快移动SoC

在今日举行的骁龙峰会上，高通正式发布了其最新旗舰移动平台——第五代骁龙 8 至尊版（Snapdragon 8 Elite Gen 5），并宣称该芯片为“全球速度最快的移动 SoC”。此次发布的芯片基于台积电最新的第三代3nm N3P工艺打造，在CPU架构上采用了全新的Oryon核心设计，延续了2+…

程序猿
2026年9月28日 • 用户投稿
0000
Java中ArrayList引用传递陷阱：避免数据意外修改的策略

本文探讨了Java中ArrayList作为引用类型在对象构造时可能导致的数据意外修改问题。当将同一个ArrayList实例传递给多个对象后，对该列表的后续操作（如清空或添加元素）会影响所有引用它的对象。核心解决方案是为每个需要独立数据副本的对象，实例化一个新的ArrayList，从而确保数据隔离和一…

程序猿
2026年9月28日 • 用户投稿
0000
sublime怎么处理gbk编码的文件不乱码_Sublime正确打开GBK编码文件不乱码的设置

安装ConvertToUTF8插件可解决Sublime Text打开GBK文件乱码问题，该插件能自动识别并转换编码，确保文件正确显示且保存时保留原编码，同时建议设置默认编码为UTF-8、备用编码为GBK，并通过项目配置或团队规范统一编码，避免后续乱码。 Sublime Text在处理GBK编码文件时…

程序猿
2026年9月28日 • 用户投稿
2000
Android动态复选框状态持久化：SharedPreferences实践指南

本教程详细阐述了如何在Android应用中持久化动态创建的复选框状态。通过利用SharedPreferences这一轻量级数据存储机制，我们能够确保用户在勾选或取消勾选动态生成的复选框后，其状态即使在应用重启或Activity重建后也能得以保留。文章将提供具体的代码示例和实现步骤，帮助开发者构建更具…

程序猿
2026年9月28日 • 用户投稿
0000
sublime怎么配置go语言环境_Sublime Text搭建Go语言开发环境指南

答案是安装Go工具链并配置环境变量，再通过Sublime Text安装插件实现开发环境搭建。需先安装Go并设置GOPATH、GOROOT及bin目录到PATH，再在Sublime中安装如GoSublime等插件以支持自动补全、语法检查与编译运行功能。在Sublime Text中配置Go语言开发环境…

程序猿
2026年9月28日 • 用户投稿
0000
Safari浏览器无法播放视频怎么回事_Safari浏览器网页视频播放问题排查与修复

首先检查网络连接，确保Wi-Fi信号良好或切换至蜂窝数据；清除Safari缓存与网站数据；关闭内容拦截器；调整隐私设置如关闭“阻止跨站跟踪”；确认网站使用https/http协议且视频格式兼容；必要时重置网络设置以解决深层配置问题。如果您在使用 Safari 浏览器时遇到网页视频无法播放的问题，可…

程序猿
2026年9月28日 • 用户投稿
0000
Java集合引用管理：确保对象创建时内部列表状态独立的策略

本教程探讨Java中将集合作为参数传递给构造函数时，如何避免因引用共享导致的内部数据意外更改问题。当多个对象共享同一个可变集合实例，并在外部修改该集合时，所有引用该集合的对象都会受影响。文章将详细介绍通过创建新集合实例或进行防御性复制两种有效策略，确保每个对象拥有独立且稳定的内部数据状态。问题背景…

程序猿
2026年9月28日 • 用户投稿
1000
Android RecyclerView优化：通过DiffUtil实现增量更新

本教程旨在解决RecyclerView在数据更新时（尤其是新增数据）出现的全量刷新和闪烁问题。通过详细介绍Android DiffUtil机制，我们将学习如何高效地进行列表项的增量更新，从而提升用户体验，避免不必要的UI重绘，特别适用于实时聊天等频繁数据变动的场景。在开发Android应用时，Re…

程序猿
2026年9月28日 • 用户投稿
1000
sublime怎么配置clangd进行c++代码补全_Clangd插件C++环境配置

配置Clangd实现C++智能补全，需安装LSP插件和Clangd服务器，并通过compile_commands.json告知编译信息，从而获得语义级代码补全、实时诊断与重构支持，显著提升Sublime Text的C++开发体验。在Sublime Text里配置Clangd来搞定C++代码补全，说…

程序猿
2026年9月28日 • 用户投稿
0000
Win7资源管理器总是提示已停止工作的解决方法

使用电脑过程中难免会遇到各种问题，近期有不少win7用户向小编反映，在操作电脑时频繁出现“windows资源管理器已停止工作”的提示。这种情况通常由误操作或某些恶意软件、病毒篡改系统设置所引起。那么应该如何有效解决这一故障呢？接下来，黑鲨小编将为大家详细介绍win7系统中资源管理器频繁崩溃的应对方法…

程序猿
2026年9月28日 • 用户投稿
0000
将Java或Groovy中的字符串转换为JSON对象

将Java或Groovy中的字符串转换为JSON对象，需要根据实际情况进行分析。如果字符串是标准的JSON格式，可以直接使用JSON解析库进行转换。但如果字符串不是标准的JSON格式，则需要自定义解析器。理解JSON格式首先，我们需要明确标准的JSON格式。一个JSON对象是由键值对组成的，键和…

程序猿
2026年9月28日 • 用户投稿
0000
sublime代码提示不出来怎么办_解决Sublime代码自动补全失效问题

代码提示失效多因插件未安装、语法识别错误或auto_complete被关闭。检查设置中是否启用auto_complete，安装Emmet、Anaconda等语言插件，确认文件语法正确，必要时清除缓存重建索引，可恢复补全功能。 Sublime Text 代码提示（自动补全）失效是不少用户在开发过程中遇…

程序猿
2026年9月28日 • 用户投稿
4000
AutoRDPwn v4.8：一款功能强大的隐蔽型攻击框架

今天给大家介绍的是一款名叫autordpwn的隐蔽型攻击框架，实际上autordpwn是一个powershell脚本，它可以实现对windows设备的自动化攻击。这个漏洞允许远程攻击者在用户毫不知情的情况下查看用户的桌面，甚至还可以通过恶意请求来实现桌面的远程控制。环境要求 PowerShell4…

程序猿
2026年9月28日 • 用户投稿
1000