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

程序猿 • 2025年12月21日 00:10:15 • 好文分享 • 阅读 0

本教程详细讲解了如何在%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

关于作者

程序猿签约作者

414.1K 文章

0 评论

2 粉丝

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

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

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

JavaScript WebGL三维可视化开发

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

好文分享

为什么多年的经验让我选择全栈而不是平均栈

在全栈和平均栈开发方面工作了 6 年多，我可以告诉您，虽然这两种方法都是流行且有效的方法，但它们满足不同的需求，并且有自己的优点和缺点。这两个堆栈都可以帮助您创建 Web 应用程序，但它们的实现方式却截然不同。如果您在两者之间难以选择，我希望我在两者之间的经验能给您一些有用的见解。在这篇文章中，我…

程序猿
2025年12月24日
0000
好文分享

为什么前端固定定位会发生移动问题？

前端固定定位为什么会出现移动现象？在进行前端开发时，我们经常会使用CSS中的position属性来控制元素的定位。其中，固定定位（position: fixed）是一种常用的定位方式，它可以让元素相对于浏览器窗口进行定位，保持在页面的固定位置不动。然而，有时候我们会遇到一个问题：在使用固定定位时…

程序猿
2025年12月24日
0000
好文分享

学会从头开始学习CSS，掌握制作基本网页框架的技巧

从零开始学习CSS，掌握网页基本框架制作技巧前言：在现今互联网时代，网页设计和开发是一个非常重要的技能。而学习CSS（层叠样式表）是掌握网页设计的关键之一。CSS不仅可以为网页添加样式和布局，还可以为用户呈现独特且具有吸引力的页面效果。在本文中，我将为您介绍一些基本的CSS知识，以及一些常用的代…

程序猿
2025年12月24日
2000
好文分享

从初学到专业：掌握这五种前端CSS框架

CSS是网站设计中重要的一部分，它控制着网站的外观和布局。前端开发人员为了让页面更加美观和易于使用，通常使用CSS框架。这篇文章将带领您了解这五种前端CSS框架，从入门到精通。 Bootstrap Bootstrap是最受欢迎的CSS框架之一。它由Twitter公司开发，具有可定制的响应式网格系统、…

程序猿
2025年12月24日
2000
好文分享

揭秘Web标准涵盖的语言：了解网页开发必备的语言范围

在当今数字时代，互联网成为了人们生活中不可或缺的一部分。作为互联网的基本构成单位，网页承载着我们获取和分享信息的重要任务。而网页开发作为一门独特的技术，离不开一些必备的语言。本文将揭秘Web标准涵盖的语言，让我们一起了解网页开发所需的语言范围。首先，HTML（HyperText Markup La…

程序猿
2025年12月24日
0000
好文分享

克服害怕做选择的恐惧症：这五个前端CSS框架将为你解决问题

选择恐惧症？这五个前端CSS框架能帮你解决问题近年来，前端开发者已经进入了一个黄金时代。随着互联网的快速发展，人们对于网页设计和用户体验的要求也越来越高。然而，要想快速高效地构建出漂亮的网页并不容易，特别是对于那些可能对CSS编码感到畏惧的人来说。所幸的是，前端开发者们早已为我们准备好了一些CSS…

程序猿
2025年12月24日
2000
好文分享

揭开Web开发的语言之谜：了解构建网页所需的语言有哪些？

Web标准中的语言大揭秘：掌握网页开发所需的语言有哪些？随着互联网的快速发展，网页开发已经成为人们重要的职业之一。而要成为一名优秀的网页开发者，掌握网页开发所需的语言是必不可少的。本文将为大家揭示Web标准中的语言大揭秘，介绍网页开发所需的主要语言。 HTML（超文本标记语言）HTML是网页开发的…

程序猿
2025年12月24日
4000
好文分享

常用的网页开发语言：了解Web标准的要点

了解Web标准的语言要点：常见的哪些语言应用在网页开发中？随着互联网的不断发展，网页已经成为人们获取信息和交流的重要途径。而要实现一个高质量、易用的网页，离不开一种被广泛接受的Web标准。Web标准的制定和应用，涉及到多种语言和技术，本文将介绍常见的几种语言在网页开发中的应用。首先，HTML（H…

程序猿
2025年12月24日
0000
好文分享

网页开发中常见的Web标准语言有哪些？

探索Web标准语言的世界：网页开发中常用的语言有哪些？在现代社会中，互联网的普及程度越来越高，网页已成为人们获取资讯、娱乐、交流的重要途径。而网页的开发离不开各种编程语言的应用和支持。在这个虚拟世界的网络，有许多被广泛应用的标准化语言，用于为用户提供优质的网页体验。本文将探索网页开发中常用的语言，…

程序猿
2025年12月24日
0000
好文分享

深入探究Web标准语言的范围，涵盖了哪些语言？

Web标准是指互联网上的各个网页所需遵循的一系列规范，确保网页在不同的浏览器和设备上能够正确地显示和运行。这些标准包括HTML、CSS和JavaScript等语言。本文将深入解析Web标准涵盖的语言范围。首先，HTML（HyperText Markup Language）是构建网页的基础语言。它使…

程序猿
2025年12月24日
0000
好文分享

深入理解CSS框架与JS之间的关系

深入理解CSS框架与JS之间的关系在现代web开发中，CSS框架和JavaScript (JS) 是两个常用的工具。CSS框架通过提供一系列样式和布局选项，可以帮助我们快速构建美观的网页。而JS则提供了一套功能强大的脚本语言，可以为网页添加交互和动态效果。本文将深入探讨CSS框架和JS之间的关系，…

程序猿
2025年12月24日
0000
好文分享

项目实践：如何结合CSS和JavaScript打造优秀网页的经验总结

项目实践：如何结合CSS和JavaScript打造优秀网页的经验总结随着互联网的快速发展，网页设计已经成为了各行各业都离不开的一项技能。优秀的网页设计可以给用户留下深刻的印象，提升用户体验，增加用户的黏性和转化率。而要做出优秀的网页设计，除了对美学的理解和创意的运用外，还需要掌握一些基本的技能，如…

程序猿
2025年12月24日
2000
好文分享

CSS 超链接属性解析：text-decoration 和 color

CSS 超链接属性解析：text-decoration 和 color 超链接是网页中常用的元素之一，它能够在不同页面之间建立连接。为了使超链接在页面中有明显的标识和吸引力，CSS 提供了一些属性来调整超链接的样式。本文将重点介绍 text-decoration 和 color 这两个与超链接相关的…

程序猿
2025年12月24日
0000
好文分享

is与where选择器：提升前端编程效率的秘密武器

is与where选择器：提升前端编程效率的秘密武器在前端开发中，选择器是一种非常重要的工具。它们用于选择文档中的元素，从而对其进行操作和样式设置。随着前端技术的不断发展，选择器也在不断演化。而其中，is与where选择器成为了提升前端编程效率的秘密武器。 is选择器是CSS Selectors L…

程序猿
2025年12月24日
0000
好文分享

前端技巧分享：使用CSS3 fit-content让元素水平居中

前端技巧分享：使用CSS3 fit-content让元素水平居中在前端开发中，我们常常会遇到需要将某个元素水平居中的情况。使用CSS3的fit-content属性可以很方便地实现这个效果。本文将介绍fit-content属性的使用方法，并提供代码示例。 fit-content属性是一个相对于元素父…

程序猿
2025年12月24日
0000
好文分享

前端技术分享：利用fit-content实现页面元素的水平对齐效果

前端技术分享：利用fit-content实现页面元素的水平对齐效果在前端开发中，实现页面元素的水平对齐是一个常见的需求。尤其在响应式布局中，我们经常需要让元素根据设备的屏幕大小自动调整位置，使页面更加美观和易读。在本文中，我将分享一种利用CSS属性fit-content来实现页面元素的水平对齐效果…

程序猿
2025年12月24日
0000
好文分享

学完HTML和CSS之后我应该做什么？

网页开发是一段漫长的旅程，但是掌握了HTML和CSS技能意味着你已经赢得了一半的战斗。这两种语言对于学习网页开发技能来说非常重要和基础。现在不可或缺的是下一个问题，学完HTML和CSS之后我该做什么呢？对这些问题的答案可以分为2-3个部分，你可以继续练习你的HTML和CSS编码，然后了解在学习完H…

程序猿
2025年12月24日
0000
聊聊怎么利用CSS实现波浪进度条效果

本篇文章给大家分享css 高阶技巧，介绍一下如何使用css实现波浪进度条效果，希望对大家有所帮助！本文是 CSS Houdini 之 CSS Painting API 系列第三篇。现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！在上两篇中，我们…

程序猿
2025年12月24日 • 好文分享
2000
好文分享

13 个实用CSS技巧，助你提升前端开发效率！

本篇文章整理分享13 个前端可能用得上的 css技巧，包括修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色等，希望对大家有所帮助！修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景！前端开发者几乎每天都会和它们打交道，本文收集 13 个CSS技巧，…

程序猿
2025年12月24日
0000
巧用距离、角度及光影制作炫酷的 3D 文字特效

如何利用 css 实现3d立体的数字？下面本篇文章就带大家巧用视觉障眼法，构建不一样的 3d 文字特效，希望对大家有所帮助！最近群里有这样一个有意思的问题，大家在讨论，使用 CSS 3D 能否实现如下所示的效果：这里的核心难点在于，如何利用 CSS 实现一个立体的数字？CSS 能做到吗？不是特…

程序猿
2025年12月24日 • 好文分享
0000