如何在Nuxt3.0中使用MongoDB数据库

一、介绍

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数据库连接的配置：

在根目录（nuxt.config.ts文件同级目录）下新建.env文件

在.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 数据库的经验。主要步骤包括：

安装 MongoDB 数据库：我在这里没有详细介绍安装步骤，而是提供了一个详细的 MongoDB 安装教程链接，这会对初学者很有帮助。
在 Nuxt.js 3.0 中连接 MongoDB 数据库：我推荐使用一个名为 "nuxt-mongodb" 的开源库来实现这一步骤。在安装了这个库之后，我在 nuxt.config.ts 文件中进行了配置，并在项目根目录下的 .env 文件中设置了 MongoDB 数据库的连接字符串和数据库名称。
创建 API 文件以调用数据库：我在 server 目录中创建了 api.js 文件，通过导入 nuxt-mongodb 库并调用其提供的方法来操作 MongoDB 数据库。
优化数据库调用方法：为了让数据库调用更加便捷，我进一步封装了数据库查询方法。这个封装方法允许我传入数据集合和查询对象，然后返回查询结果。

🥰🥰🥰我希望这篇博客对于想要在 Nuxt.js 3.0 项目中使用 MongoDB 数据库的开发者有所帮助，特别是那些希望简化数据库操作的开发者。

莫颀