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

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

一、介绍

Nuxt.js 是一个基于 Vue.js 的开源框架，用于构建服务端渲染 (Server-Side Rendering, SSR) 或静态生成 (Static Site Generation, SSG) 的单页应用 (Single-Page Applications, SPA)，可以用来作为全栈项目开发框架使用。本篇主要分享下我在使用Nuxt3.0项目做全栈项目开发时遇到的连接MongoDB数据库的经验。

二、MongDB数据库安装

关于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 数据库的开发者有所帮助，特别是那些希望简化数据库操作的开发者。