
本文详细介绍了如何利用express框架、Ejs模板引擎和Mongoose,从多个MongoDB数据库(或集合)中获取数据,并通过建立数据关联,在前端页面中以独立的html卡片形式动态展示图文结合的内容。重点在于后端的数据建模、关联查询以及前端EJS模板中循环渲染的正确实践。
理解需求:多源数据与独立卡片展示
在构建动态网站时,将不同类型的数据(例如图片和文本)存储在不同的数据库或集合中是常见的做法。然而,当需要在前端页面上将这些相关联的数据作为单个逻辑单元(如一个广告、一篇帖子)展示在独立的HTML卡片中时,就需要一套有效的数据处理和渲染策略。
原问题中,用户成功将图片和文本分别存储在Images和Content两个集合中,但在EJS模板中尝试渲染时遇到了困难:所有图片被集中显示,所有文本也被集中显示,未能实现“每个输入(即每组图片+文本)对应一个独立卡片”的效果。这主要是由于前端模板中循环结构的使用不当,以及后端数据缺乏明确的关联关系所致。
核心概念:数据关联与统一模型
为了将分散存储的图片和文本作为一对展示在同一个卡片中,最健壮的方法是在数据库层面建立它们之间的关联。简单地依靠检索顺序(如_id排序)来尝试配对是不可靠的。
我们将引入一个新的Mongoose模型——AdSchema(广告模型),它将作为图片和文本的“桥梁”,存储它们各自的引用(_id)。通过这种方式,我们可以清晰地定义一个“广告”单元,其中包含一张图片和一段文本。
后端数据处理:Express与Mongoose
1. 新增AdSchema模型
在app.js中,


