如何在Nuxt3.0中使用MongoDB数据库
<h2 id="一介绍">一、介绍</h2><p>Nuxt.js 是一个基于 Vue.js 的开源框架，用于构建服务端渲染 (Server-Side Rendering, SSR) 或静态生成 (Static Site Generation, SSG) 的单页应用 (Single-Page Applications, SPA)，可以用来作为<strong>全栈项目开发框架</strong>使用。本篇主要分享下我在使用<strong>Nuxt3.0项目</strong>做全栈项目开发时遇到的连接<strong>MongoDB数据库</strong>的经验。</p>
<h2 id="二mongodb数据库安装">二、MongoDB数据库安装</h2>
<p>关于MongoDB数据库的安装这里不再赘述，请参考：MongoDB安装（超详细）_mongodb 安装_AI bro的博客-CSDN博客，这位博主的文章写的很详细了。</p>
<h2 id="三在nuxt30中连接mongodb数据库">三、在Nuxt3.0中连接MongoDB数据库</h2>
<p>虽然在nuxt3.0的官网中也有一个插件Nuxt-mongoose Module · Nuxt，但是个人使用起来有一些奇怪的问题出现。所以这里推荐一个github上的开源工具库timb-103/nuxt-mongodb: A simple way to use mongoDB in your Nuxt 3 project. (github.com)，这个工具库使用步骤简单，亲测有效！</p>
<p>我在项目中使用的就是这个工具库，接下来根据库作者的说明进行讲解：</p>
<h4 id="首先安装该工具库">🤖首先，安装该工具库：</h4>
<pre><code class="language-javascript">npm i -D nuxt-mongodb
</code></pre>
<h4 id="接下来在nuxtconfigts文件中进行配置">🧐接下来，在<code>nuxt.config.ts</code>文件中进行配置：</h4>
<pre><code class="language-javascript">//nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-mongodb'],
})
</code></pre>
<h4 id="️然后就是进行关于mongodb数据库连接的配置">♾️然后，就是进行关于mongoDB数据库连接的配置：</h4>
<ol>
<li>
<p>在根目录（nuxt.config.ts文件同级目录）下新建<code>.env</code>文件</p>
</li>
<li>
<p>在<code>.env</code>文件内根据以下格式进行内容替换：</p>
<pre><code class="language-javascript">//.env
MONGO_CONNECTION_STRING={{你的数据库链接字符串}}
MONGO_DB={{你的数据库名称}}
</code></pre>
<p>例如：</p>
<pre><code class="language-javascript">//.env
MONGO_CONNECTION_STRING="mongodb://127.0.0.1:27017"
MONGO_DB="myDatabase"
</code></pre>
</li>
</ol>
<h4 id="最后在你的server目录中创建apijs文件用于调用数据库">💡最后，在你的<code>server目录</code>中创建<code>api.js</code>文件用于调用数据库：</h4>
<pre><code class="language-javascript">//api.js
import { mongo } from '#nuxt-mongodb'
const db = mongo.db()
const response = await db.collection('你的集合名称').find()
</code></pre>
<p> 例如：</p>
<pre><code class="language-javascript">//api.js
import { mongo } from '#nuxt-mongodb'
const db = mongo.db()
const response = await db.collection('myTestCollection').find()
</code></pre>
<p>🎊🎊至此，我们连接数据库的步骤就完成了🎉🎉🎉</p>
<blockquote>
<p>😊下面的内容是我根据上述的步骤进行连接数据库后进行的一个优化方法，可以供大家参考使用，我对上述的最后一步进行了一个简单的封装，便于后续的使用。</p>
</blockquote>
<p>我在最后一步”在你的<code>server目录</code>中创建<code>api.js</code>文件用于调用数据库“中是这样封装使用的，我的代码示例如下：</p>
<pre><code class="language-ts">// 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)
}
})
}
</code></pre>
<p>对上述封装的调用示例：</p>
<pre><code class="language-javascript">// 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
}
})
</code></pre>
<p>更多使用示例例如：</p>
<pre><code class="language-javascript">// 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
}
}
})
</code></pre>
<p>🚀🚀🚀在这篇博客中，我分享了如何在 Nuxt.js 3.0 中使用 MongoDB 数据库的经验。主要步骤包括：</p>
<ol>
<li>
<p><strong>安装 MongoDB 数据库</strong>：我在这里没有详细介绍安装步骤，而是提供了一个详细的 MongoDB 安装教程链接，这会对初学者很有帮助。</p>
</li>
<li>
<p><strong>在 Nuxt.js 3.0 中连接 MongoDB 数据库</strong>：我推荐使用一个名为 "nuxt-mongodb" 的开源库来实现这一步骤。在安装了这个库之后，我在 nuxt.config.ts 文件中进行了配置，并在项目根目录下的 .env 文件中设置了 MongoDB 数据库的连接字符串和数据库名称。</p>
</li>
<li>
<p><strong>创建 API 文件以调用数据库</strong>：我在 server 目录中创建了 api.js 文件，通过导入 nuxt-mongodb 库并调用其提供的方法来操作 MongoDB 数据库。</p>
</li>
<li>
<p><strong>优化数据库调用方法</strong>：为了让数据库调用更加便捷，我进一步封装了数据库查询方法。这个封装方法允许我传入数据集合和查询对象，然后返回查询结果。</p>
</li>
</ol>
<p>🥰🥰🥰我希望这篇博客对于想要在 Nuxt.js 3.0 项目中使用 MongoDB 数据库的开发者有所帮助，特别是那些希望简化数据库操作的开发者。</p>
</div>
<div id="MySignature" role="contentinfo">
<div style="box-shadow:1px 1px 1px 2px var(--theme-primary-4);padding:15px 10px;line-height:1.5;border-radius:10px;">
<p style="font-weight:bold;color:#ff6b81;">时间仓促，如有错误欢迎指出，欢迎在评论区讨论，如对您有帮助还请点个推荐、关注支持一下</p>
<p style="font-weight:bold;"><span style="color:#0984e3;">作者：</span>莫颀</p>
<p style="font-weight:bold;"><span style="color:#0984e3;">出处：</span>https://www.cnblogs.com/bokemoqi/p/17724956.html</p>
<p>本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文链接，否则保留追究法律责任的权利。</p>
<p>若内容有侵犯您权益的地方，请公告栏处联系本人，本人定积极配合处理解决。</p>
</div><br><br>
来源：https://www.cnblogs.com/bokemoqi/p/17724956.html
頁:
[1]