我制作了一个 Web 应用程序,它使用 Firebase 进行存储并使用 MongoDB 地图集作为数据库。我创建了一个模式来存储一个部分的文件路径和标题。然后我还向我的应用程序添加了另一个架构,以便在同一个数据库中创建另一个集合。现在我面临的主要问题是我无法将数据从我的第二个集合检索到我的 index.ejs 页面。这是我的代码:
//MongoDB init
mongoose.connect(
"mongodb+srv://<My_DB>:<MY_DB_pass>@cluster0.cqqda.mongodb.net/proDB?retryWrites=true&w=majority"
);
mongoose.set("useCreateIndex", true);
const connectionParams = {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true,
};
mongoose
.connect(url, connectionParams)
.then(() => {
console.log("Connected to database ");
})
.catch((err) => {
console.error(`Error connecting to the database. \n${err}`);
});
mongoose.set("useCreateIndex", true);
const dbName = "proDB";
const userSchema = mongoose.Schema({
title: String,
filepath: String,
});
const testSchema = mongoose.Schema({
secondTitle: String,
secondFilePath: String,
});
testSchema.plugin(findOrCreate);
userSchema.plugin(passportLocalMongoose);
userSchema.plugin(findOrCreate);
//DATABASE MODEL
const User = new mongoose.model("User", userSchema);
const Test = new mongoose.model("Test", testSchema);
索引路线:
app.get("/", function (req, res) {
User.find({}, function (err, foundItems) {
// console.log(foundItems);
res.render("index", { newListItems: foundItems });
});
});
EJS 代码: 此代码呈现我第一个集合中的数据
<% newListItems.forEach(function(item){ %>
<div class="col-xs-6 col-sm-4 video-div " >
<!-- before col-sm -->
<div class="main-video">
<video style="outline: none; width: 100%; height: 200px;"
width="auto"
height="220" controls>
<source src="<%=item.filepath%>" type="video/mp4">
</video>
</div>
<div class="video-title" style="width: 50%;">
<p class="podcast-title">
<%=item.title%>
</p>
</div>
</div>
<% }) %>
第二个 EJS 代码,我试图在其中渲染第二个集合中的数据
<% newListItems.forEach(function(item){ %>
<div class="col-xs-6 col-sm-4 video-div ">
<!-- before col-sm -->
<div class="main-video">
<video style="outline: none; width: 100%; height: 200px;" width="auto"
height="220"
controls>
<source src="<%=item.secondFilePath%>" type="video/mp4">
</video>
<!-- <img style="width: 100%; height: auto;" src="" alt=""> -->
</div>
<div class="video-title" style="width: 50%;">
<p class="podcast-title">
<%=item.secondPodcastTitle%>
</p>
</div>
</div>
<% }) %>
答案 0 :(得分:1)
更改您的路由功能以查询其他集合:
app.get("/", function (req, res) {
User.find()
.then(newListItems => {
Test.find() // <- Your other collection
.then(testListItems => {
res.render("index", { newListItems, testListItems });
})
})
});
然后在您的 EJS 中,执行以下操作:
<% newListItems.forEach(function(item){ %>
<div class="col-xs-6 col-sm-4 video-div " >
<!-- before col-sm -->
<div class="main-video">
<video style="outline: none; width: 100%; height: 200px;"
width="auto"
height="220" controls>
<source src="<%=item.filepath%>" type="video/mp4">
</video>
</div>
<div class="video-title" style="width: 50%;">
<p class="podcast-title">
<%=item.title%>
</p>
</div>
</div>
<% }) %>
...
...
<% testListItems.forEach(function(item){ %>
<div class="col-xs-6 col-sm-4 video-div ">
<!-- before col-sm -->
<div class="main-video">
<video style="outline: none; width: 100%; height: 200px;" width="auto"
height="220"
controls>
<source src="<%=item.secondFilePath%>" type="video/mp4">
</video>
<!-- <img style="width: 100%; height: auto;" src="" alt=""> -->
</div>
<div class="video-title" style="width: 50%;">
<p class="podcast-title">
<%=item.secondTitle%>
</p>
</div>
</div>
<% }) %>
请注意,您的原始 ejs 中有 <%=item.secondPodcastTitle%>
。这与没有 secondPodcastTitle
的架构不一致。它有 secondTitle
,所以我将 ejs 更改为:<%=item.secondTitle%>