如何在Nuxt3.0中使用MongoDB資料庫

莫頎發表於2023-09-23
UXMongoDB資料庫

一、介紹

Nuxt.js 是一個基於 Vue.js 的開源框架，用於構建服務端渲染 (Server-Side Rendering, SSR) 或靜態生成 (Static Site Generation, SSG) 的單頁應用 (Single-Page Applications, SPA)，可以用來作為全棧專案開發框架使用。本篇主要分享下我在使用Nuxt3.0專案做全棧專案開發時遇到的連線MongoDB資料庫的經驗。

二、MongoDB資料庫安裝

關於MongoDB資料庫的安裝這裡不再贅述，請參考：MongoDB安裝（超詳細）_mongodb 安裝_AI bro的部落格-CSDN部落格，這位博主的文章寫的很詳細了。

三、在Nuxt3.0中連線MongoDB資料庫

雖然在nuxt3.0的官網中也有一個外掛Nuxt-mongoose Module · Nuxt，但是個人使用起來有一些奇怪的問題出現。所以這裡推薦一個github上的開源工具庫timb-103/nuxt-mongodb: A simple way to use mongoDB in your Nuxt 3 project. (github.com)，這個工具庫使用步驟簡單，親測有效！

我在專案中使用的就是這個工具庫，接下來根據庫作者的說明進行講解：

?首先，安裝該工具庫：

npm i -D nuxt-mongodb

?接下來，在nuxt.config.ts檔案中進行配置：

//nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-mongodb'],
})

♾️然後，就是進行關於mongoDB資料庫連線的配置：

  1. 在根目錄（nuxt.config.ts檔案同級目錄）下新建.env檔案

  2. 在.env檔案內根據以下格式進行內容替換：

    //.env
MONGO_CONNECTION_STRING={{你的資料庫連結字串}}
MONGO_DB={{你的資料庫名稱}}

    例如：

    //.env
MONGO_CONNECTION_STRING="mongodb://127.0.0.1:27017"
MONGO_DB="myDatabase"

?最後，在你的server目錄中建立api.js檔案用於呼叫資料庫：

//api.js
import { mongo } from '#nuxt-mongodb'

const db = mongo.db()
const response = await db.collection('你的集合名稱').find()

​ 例如：

//api.js
import { mongo } from '#nuxt-mongodb'

const db = mongo.db()
const response = await db.collection('myTestCollection').find()

??至此，我們連線資料庫的步驟就完成了???

?下面的內容是我根據上述的步驟進行連線資料庫後進行的一個最佳化方法，可以供大家參考使用，我對上述的最後一步進行了一個簡單的封裝，便於後續的使用。

我在最後一步”在你的server目錄中建立api.js檔案用於呼叫資料庫“中是這樣封裝使用的，我的程式碼示例如下：

// findSQL.ts

/*
 * @FilePath: \AIGC_Course_frontend\server\curd\findSQL.ts
 * @Description: mongoDB資料庫查詢方法封裝
 */

import { mongo } from '#nuxt-mongodb'

/**
 * 資料庫查詢方法
 * @param table 資料集合
 * @param obj 查詢物件
 * @returns 返回查詢結果
 * @example 
 * findSQL("myTestCollection",{"age": 21})
 */
export const findSQL = async (table: string, obj: object = {}) => {
    return new Promise(async (resolve, reject) => {
        const db = mongo.db()
        try {
            const response = await db.collection(table).find(obj).toArray()  //注意此處的toArray()方法，否則可能返回的資料無法正常訪問
            resolve(response)
            db.close();
        } catch (error) {
            reject(error)
        }
    })
}

對上述封裝的呼叫示例：

// app.js

 * @FilePath: \AIGC_Course_frontend\server\api\app.ts
 * @Description: 資料庫查詢方法的呼叫
 
 // 引入自行封裝的查詢方法
import { findSQL } from '../curd/findSQL'

export default defineEventHandler(async (event: any) => {
    // 此處獲取並解析前端介面傳來的body引數，詳情參見https://nuxt.com.cn/docs/guide/directory-structure/server#%E7%94%A8body%E5%A4%84%E7%90%86%E8%AF%B7%E6%B1%82
    const body = await readBody(event)   
    // 此處呼叫自行封裝的查詢方法並填入相關引數
    const data = await findSQL('myTestCollection', body)  //例如： findSQL("myTestCollection",{"age": 21})
    return {
        code:200,
        msg: 'ok',
        data: data
    }
})

更多使用示例例如：

// getSwiper.js

/*
 * @FilePath: \AIGC_Course_frontend\server\api\getSwiper.ts
 * @Description: 使用資料庫查詢方法的查詢輪播圖列表資料
 */

import { findSQL } from '../curd/findSQL'

export default defineEventHandler(async (event: any) => {
    try {
        const data = await findSQL('swiper')
        // 成功時返回狀態碼和資料資訊
        return {
            code: 200,
            msg: 'ok',
            data: data
        }
    } catch (error: any) {
        // 失敗時返回錯誤碼和錯誤資訊
        return {
            code: 500,
            msg: error.message
        }
    }
})

???在這篇部落格中，我分享瞭如何在 Nuxt.js 3.0 中使用 MongoDB 資料庫的經驗。主要步驟包括：

  1. 安裝 MongoDB 資料庫：我在這裡沒有詳細介紹安裝步驟，而是提供了一個詳細的 MongoDB 安裝教程連結，這會對初學者很有幫助。

  2. 在 Nuxt.js 3.0 中連線 MongoDB 資料庫：我推薦使用一個名為 "nuxt-mongodb" 的開源庫來實現這一步驟。在安裝了這個庫之後，我在 nuxt.config.ts 檔案中進行了配置，並在專案根目錄下的 .env 檔案中設定了 MongoDB 資料庫的連線字串和資料庫名稱。

  3. 建立 API 檔案以呼叫資料庫：我在 server 目錄中建立了 api.js 檔案，透過匯入 nuxt-mongodb 庫並呼叫其提供的方法來操作 MongoDB 資料庫。

  4. 最佳化資料庫呼叫方法：為了讓資料庫呼叫更加便捷，我進一步封裝了資料庫查詢方法。這個封裝方法允許我傳入資料集合和查詢物件，然後返回查詢結果。

???我希望這篇部落格對於想要在 Nuxt.js 3.0 專案中使用 MongoDB 資料庫的開發者有所幫助，特別是那些希望簡化資料庫操作的開發者。

相關文章