將 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 而非渲染引擎。