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

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

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

用户投稿

修复Django电商项目中AJAX过滤产品列表图片不显示问题

在Django电商项目中，当使用AJAX动态加载过滤后的产品列表时，常遇到图片无法正常显示的问题。这通常是由于前端模板中图片加载方式（如data-setbg属性结合JavaScript库）与AJAX动态内容更新机制不兼容所致。解决方案是直接在AJAX返回的HTML中使用标准的标签来渲染图片，确保浏览…

程序猿
2026年5月10日
0000
用户投稿

开源免费PHP工具 PHP开发效率提升利器

推荐开源免费PHP开发工具以提升效率：VS Code、Sublime Text轻量高效，PhpStorm专业强大；调试用Xdebug、Kint、Ray；依赖管理选Composer；代码质量工具包括PHPStan、Psalm、PHP_CodeSniffer；数据库管理可用%ignore_a_1%MyA…

程序猿
2026年5月10日
0000
Matplotlib 地图中多类型图例的创建与优化

本教程旨在解决matplotlib地图可视化中，如何在一个图例中同时展示颜色块（如区域分类）和自定义标记（如特定兴趣点）的问题。文章详细介绍了当传统`patch`对象无法正确显示标记时，如何利用`matplotlib.lines.line2d`创建标记图例句柄，并将其与颜色块图例句柄合并，从而生成一…

程序猿
2026年5月10日 • 用户投稿
3000
用户投稿

Golang JSON序列化：控制敏感字段暴露的最佳实践

本教程探讨golang中如何高效控制结构体字段在json序列化时的可见性。当需要将包含敏感信息的结构体数组转换为json响应时，通过利用`encoding/json`包提供的结构体标签，特别是`json:”-“`，可以轻松实现对特定字段的忽略，从而避免敏感数据泄露，确保api…

程序猿
2026年5月10日
0000
用户投稿

怎么在PHP代码中实现图片上传功能_PHP图片上传功能实现与安全处理教程

首先创建含enctype的HTML表单，再用PHP接收文件，检查目录、移动临时文件，验证类型与大小，生成唯一文件名，并调整php.ini限制以确保上传成功。如果您尝试在PHP项目中添加图片上传功能，但服务器无法正确接收或保存文件，则可能是由于表单配置、文件处理逻辑或安全限制的问题。以下是实现该功能…

程序猿
2026年5月10日
3000
HTML如何隐藏滚动条或去除滚动条

滚动条可以存在也可以不存在，本文主要介绍了html 隐藏滚动条和去除滚动条的方法的相关资料,大家一起来学习一下html隐藏滚动条或去除滚动条的方法吧。 1. html 标签加属性 XML/HTML Code复制内容到剪贴板 2.body中加入以下代码立即学习“前端免费学习笔记（深入）”； html…

程序猿
用户投稿 2026年5月10日
1000
用户投稿

Golang gRPC流式请求异常处理

在Golang的gRPC流式通信中，必须通过context.Context处理异常。应监听上下文取消或超时，及时释放资源，设置合理超时，避免连接长时间挂起，并在goroutine中通过context控制生命周期。在使用 Golang 和 gRPC 实现流式通信时，异常处理是确保服务健壮性的关键部分…

程序猿
2026年5月10日
0000
用户投稿

Go语言mgo查询构建：深入理解bson.M与日期范围查询的正确实践

本文旨在解决go语言mgo库中构建复杂查询时，特别是涉及嵌套`bson.m`和日期范围筛选的常见错误。我们将深入剖析`bson.m`的类型特性，解释为何直接索引`interface{}`会导致“invalid operation”错误，并提供一种推荐的、结构清晰的代码重构方案，以确保查询条件能够正确…

程序猿
2026年5月10日
1000
用户投稿

vscode上怎么运行html_vscode上运行html步骤【指南】

首先保存文件为.html格式，再通过浏览器或Live Server插件打开预览；推荐安装Live Server实现本地服务器运行与实时刷新，提升开发体验。在 VS Code 上运行 HTML 文件并不需要复杂的配置，只需几个简单步骤即可预览页面效果。VS Code 本身是一个代码编辑器，不直接运行…

程序猿
2026年5月10日
1000
用户投稿

修复点击时按钮抖动：CSS垂直对齐实践

本文探讨了在Web开发中，交互式按钮（如播放/暂停按钮）在点击时发生意外垂直位移的问题。通过分析CSS样式变化对元素布局的影响，我们发现这是由于按钮不同状态下的边框样式和内边距改变，以及默认的垂直对齐行为共同作用所致。核心解决方案是利用CSS的vertical-align属性，将其设置为middle…

程序猿
2026年5月10日
1000
用户投稿

Golang goroutine与channel调试技巧

使用go run -race检测数据竞争，结合runtime.NumGoroutine监控协程数量，通过pprof分析阻塞调用栈，利用select超时避免永久阻塞，有效排查goroutine泄漏、死锁和数据竞争问题。 Go语言的goroutine和channel是并发编程的核心，但它们也带来了调试上…

程序猿
2026年5月10日
0000
用户投稿

页面中文本域的值怎么设置

标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。注释：在文本输入区内的文本行间，用 …

程序猿
2026年5月10日
0000
用户投稿

使用 Jupyter Notebook 进行探索性数据分析

Jupyter Notebook通过单元格实现代码与Markdown结合，支持数据导入（pandas）、清洗（fillna）、探索（matplotlib/seaborn可视化）、统计分析（describe/corr）和特征工程，便于记录与分享分析过程。 Jupyter Notebook 是进行探索性…

程序猿
2026年5月10日
0000
《魔兽世界》将于6月11日开启国服回归技术测试

《%ign%ignore_a_1%re_a_1%》官方宣布，将于6月11日开启国服回归技术测试，时间为7天，并称可以在6月内正式开服，玩家们可以访问官网下载战网客户端并预下载“巫妖王之怒”客户端，技术测试详情见下图。 WordAi WordAI是一个AI驱动的内容重写平台 53 查看详情以上就是《…

程序猿
2026年5月10日 • 用户投稿
2000
用户投稿

如何在HTML中插入表单元素_HTML表单控件与输入类型使用指南

HTML表单通过标签构建，包含action和method属性定义数据提交目标与方式，常用input类型如text、password、email等适配不同输入需求，配合label、required、placeholder提升可用性，结合textarea、select、button等控件实现完整交互，是…

程序猿
2026年5月10日
1000
用户投稿

前端缓存策略与JavaScript存储管理

根据数据特性选择合适的存储方式并制定清晰的读写与清理逻辑，能显著提升前端性能；合理运用Cookie、localStorage、sessionStorage、IndexedDB及Cache API，结合缓存策略与定期清理机制，可在保证用户体验的同时避免安全与性能隐患。前端缓存和JavaScript存…

程序猿
2026年5月10日
2000
用户投稿

HTML5网页如何实现手势操作 HTML5网页移动端交互的处理技巧

首先利用原生touch事件实现滑动判断，再通过preventDefault解决滚动冲突，接着引入Hammer.js处理复杂手势，最后通过优化点击区域、避免事件冲突和增加视觉反馈提升体验。在移动端浏览器中，HTML5网页可以通过触摸事件实现手势操作，提升用户体验。虽然原生JavaScript提供了基…

程序猿
2026年5月10日
0000
用户投稿

深入理解 Express.js 中 next() 参数的作用与中间件机制

本文深入探讨 express.js 中间件函数中的 `next()` 参数。它负责将控制权传递给请求-响应周期中的下一个中间件或路由处理程序。文章将详细解释 `next()` 的工作原理、中间件的注册与执行顺序，以及不正确使用 `next()` 可能导致请求挂起的风险，并通过代码示例和实际应用场景，…

程序猿
2026年5月10日
0000
用户投稿

创建指定大小并填充特定数据的Golang文件教程

本文将介绍如何使用Golang创建一个指定大小的文件，并用特定数据填充它。我们将使用 `os` 包提供的函数来创建和截断文件，从而实现快速生成大文件的目的。示例代码展示了如何创建一个10MB的文件，并将其填充为全零数据。掌握这些方法，可以方便地在例如日志系统或磁盘队列等场景中，预先创建测试文件或初始…

程序猿
2026年5月10日
0000
用户投稿

PHP动态生成表单输入与POST数据获取实践指南

本教程详细阐述了如何在php中根据动态数据源（如数据库值）生成多个表单输入框，并演示了如何通过post方法准确无误地获取这些动态生成的输入值。文章强调了正确的输入框命名策略，避免了常见的命名误区，并提供了完整的代码示例，确保开发者能够高效处理动态表单数据。动态生成表单输入在Web开发中，我们经常…

程序猿
2026年5月10日
0000