如何以HTML格式显示MongoDB集合?

我是Mongoose的初学者,我想在一个名为“example.ejs”的基本HTML列表文件中显示“excoll”集合中的MongoDB文档,但是我遇到了各种问题。关于这个话题还有其他的帖子,但我仍然对此感到困惑。

-我有一个工作代码块,它使用res.json从excoll.find()输出所有文档,显然将它们放在json格式中。但是,我无法将这段代码改编成使用res.render的代码。

-当我在app.js中定义一个变量并尝试在example.ejs中访问它时,没有找到该变量,因此即使我可以在变量中保存excoll.find()的结果,我也看不到如何将其输入HTML。

很明显,我不知道我不知道什么让人沮丧。如果有人能帮我填补概念上的空白,那就太好了。

---编辑---- 添加我尝试过的代码段

app.get("/example", function (req, res){
    exColl.find({})
    .exec(function (err, examples){
        if (err) {
            res.send("an error has occurred")
        } else res.render(examples: examples);
        });
    });

在EJS文件中

<p> <%= examples %> </p>

您的问题似乎是EJS语法,您应该在这里回顾一下: EJS Docs . 考虑以下测试项目结构:

.
âââ index.js
âââ package.json
âââ setup.js
âââ views
    âââ index.ejs
    âââ table.ejs

我用创建测试数据库 J. 所以我们有一些虚拟的帖子来显示:

const mongoose = require("mongoose");

mongoose.connect("mongodb://localhost:8081/test", {
    useNewUrlParser: true
});

const Post = mongoose.model("Post", {
    title:String,
    body: String
});

const toMake = [
    {title: "hello", body: "world"},
    {title: "foo", body: "bar"},
    {title: "fizz", body: "buzz"},
    {title: "a", body: "b"}
];

Post.insertMany(toMake)
    .then(()=>{
        console.log("done");
        mongoose.connection.close();
    })
    .catch(err => console.error(err));

我创建一个EJS模板 视图/表 要将我的文章呈现为表格:

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Body</th>
        </tr>
    </thead>
    <tbody>
        <% posts.forEach(post => { %>
            <tr>
                <td><%= post.title %></td>
                <td><%= post.body %></td>
            </tr>
        <% }) %>
    </tbody>
</table>

然后我创建一个EJS模板 视图/索引 使用表格模板

<main>
    <h1>Posts</h1>
    <%- include("table", {posts}); %>
</main>

我还创建了一个服务器来响应 索引文件 并运行它 node index.js :

const express = require("express");
const mongoose = require("mongoose");

mongoose.connect("mongodb://localhost:8081/test", {
    useNewUrlParser: true
});

const app = express();

const Post = mongoose.model("Post", {
    title: String,
    body: String
});

app.set("view engine", "ejs");

app.get("/", async (req, res) => {
    const posts = await Post.find({});
    res.render("index", {posts});
});

app.listen(3000, () => console.log("Listening"));

当我 curl localhost:3000 我得到呈现的HTML:

<main>
    <h1>Posts</h1>
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Body</th>
            </tr>
        </thead>
        <tbody>

                <tr>
                    <td>hello</td>
                    <td>world</td>
                </tr>

                <tr>
                    <td>foo</td>
                    <td>bar</td>
                </tr>

                <tr>
                    <td>fizz</td>
                    <td>buzz</td>
                </tr>

                <tr>
                    <td>a</td>
                    <td>b</td>
                </tr>

        </tbody>
    </table>
</main>

无论怎样,我都需要将数据输入 res.render() 函数并用渲染所需的所有数据填充渲染范围。

但是,我已经 表EJS 可重复使用的。所以假设我有另一个页面,我希望能够以表格的方式显示一些文章。

我有另一个EJS模板: 视图/配置文件.ejs 看起来是这样的:

<main>
    <h1>2 Posts</h1>
    <%- include("table", {posts: posts.slice(0, 2)}); %>
</main>

我在我的应用程序中添加了另一条路径 /sliced :

app.get("/sliced", async (req, res) => {
    const posts = await Post.find({});
    res.render("profile", {posts});
});

每当我卷曲 localhost:3000/sliced 因为我只填充了 include 的作用域,包含所有文章的切片:

<main>
    <h1>2 Posts</h1>
    <table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Body</th>
        </tr>
    </thead>
    <tbody>

            <tr>
                <td>hello</td>
                <td>world</td>
            </tr>

            <tr>
                <td>foo</td>
                <td>bar</td>
            </tr>

    </tbody>
</table>

</main>