将 vanilla JS 转换为与 Nodejs、Mongo 和 Express 一起使用

Question

我正在使用 Nodejs、Mongo 和 Express 为 class 开发一个博客项目。 我们一直在努力使用 Express。 我有以前的 JS 代码来为博客文章创建幻灯片。 我现在需要幻灯片来访问来自 MongoDB 的数据并路由到具有匹配标题的 post.ejs 文件（因此它可以在数据库中找到它并在 post.ejs 文件中显示它）。 我不能使用幻灯片按钮，因为正如我之前提到的，这是在引入 Node.js 之前使用的 vanilla js。 如何将旧的 vanilla JS 转换为使用 express 并从 Mongo DB 中提取数据？ 我已经设法自己学到了很多东西，但我现在陷入了困境。

这是我的 GitHub 存储库。https://github.com/mmercad4/Marco_800951815/tree/milestone-5

旧 JS 在 /public/assets/main.js

我的帖子 controller 在 controllers/postController.js

我的 ajax 的 jquery 文件夹位于 public/assets/jquery.js

最后我的 index.ejs 和 post.ejs 位于 views 文件夹中。

Answer 1

您可以修改您的 vanilla JS 文件并将它们制作成 ejs 模板。 使用与post.ejs相同的语法，以便您可以访问传入的数据。

在您的服务器上，您应该设置一个路由处理程序，例如app.get("/example") 。 在路由处理程序内部，您应该查询 mongodb 实例以获取所需的数据。 现在获取新修改的 ejs 文件并渲染它，传入来自 mongodb 的查询结果。 这是一个例子：

app.get("/example", (req, res) => {
    const data = getDataFromMongo() // insert your query here
    res.render("main", data);
}

如果您希望您的客户端负责获取数据，然后跳过将您的 vanilla 文件转换为 ejs，您可以简单地将 mongodb 数据作为 JSON 返回，如下所示：

app.get("/example", (req, res) => {
    const data = getDataFromMongo() // insert your query here
    res.json(data);
}

现在，在您的客户端代码中，向“/example”发出 ajax GET 请求，您可以使用返回的 JSON 来满足您的需求。 这里不需要 ejs 模板语法。

因此，您可以自行决定如何控制对数据的访问。 第一种方法在服务器端处理一切。 第二种方法在服务器和客户端之间划分责任。 在这种情况下，服务器更多地充当数据 API 而非渲染引擎。