如何在HTML中显示mongoDB集合?

时间:2018-09-10 17:01:39

标签: node.js mongodb mongoose

我是猫鼬的初学者,想在基本html列表中的“ example.ejs”文件中显示“ 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>

1 个答案:

答案 0 :(得分:1)

您的问题似乎是EJS语法,您应该在此处进行检查:EJS Docs。考虑以下测试项目结构:

.
├── index.js
├── package.json
├── setup.js
└── views
    ├── index.ejs
    └── table.ejs

我使用 setup.js 创建一个测试数据库,以便我们显示一些虚拟帖子:

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模板 views / table.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模板 views / index.ejs 以使用表格模板

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

我还使服务器响应 index.js 中的请求,并使用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()函数提供数据,并使用呈现所需的所有数据填充呈现范围。

但是,我已经使 table.ejs 可重用。因此,可以说我还有另一个页面,希望能够以表格形式显示其中的一些帖子。

我还有另一个EJS模板: views / profile.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时,我只会得到帖子中的前2个项目,因为我只用所有帖子的一部分填充了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>