当前位置：首页 > news >正文

nuxt3连接mongodb操作

news 来源：原创 2024/9/20 15:34:54

文章目录

- - 创建一个nuxt3应用
  - 添加nuxt后端服务
  - nuxt3路由
  - 创建mongo数据
  - 连接mongodb数据库
  - 补充
  - - 添加显示(用v-for打印出数组)
  - nuxt-server-insert
  - mongodb删除数据
  - mongodb更改用户

创建一个nuxt3应用

Node.js - v18.0.0 或更新版本
推荐使用 Visual Studio Code 以及 Volar 扩展

npx nuxi@latest init project_name

注意:这个会有node_moudle依赖文件所以创建时会很慢

在这里插入图片描述
找到C:\Windows\System32\drivers\etc并以管理员身份编辑保存hosts文件(用vscode可以编辑保存)

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost#编辑这段
185.199.108.133               raw.githubusercontent.com

哪个域名报错，可以添加或修改一下IP和域名

# GitHub520 Host Start
140.82.112.25                 alive.github.com
140.82.112.25                 live.github.com
185.199.108.154               github.githubassets.com
140.82.114.21                 central.github.com
185.199.108.133               desktop.githubusercontent.com
185.199.108.153               assets-cdn.github.com
185.199.108.133               camo.githubusercontent.com
185.199.108.133               github.map.fastly.net
199.232.69.194                github.global.ssl.fastly.net
140.82.112.4                  gist.github.com
185.199.108.153               github.io
140.82.114.3                  github.com
192.0.66.2                    github.blog
140.82.114.5                  api.github.com
185.199.108.133               raw.githubusercontent.com
185.199.108.133               user-images.githubusercontent.com
185.199.108.133               favicons.githubusercontent.com
185.199.108.133               avatars5.githubusercontent.com
185.199.108.133               avatars4.githubusercontent.com
185.199.108.133               avatars3.githubusercontent.com
185.199.108.133               avatars2.githubusercontent.com
185.199.108.133               avatars1.githubusercontent.com
185.199.108.133               avatars0.githubusercontent.com
185.199.108.133               avatars.githubusercontent.com
140.82.114.9                  codeload.github.com
54.231.200.129                github-cloud.s3.amazonaws.com
52.217.33.196                 github-com.s3.amazonaws.com
52.216.93.147                 github-production-release-asset-2e65be.s3.amazonaws.com
52.216.93.147                 github-production-user-asset-6210df.s3.amazonaws.com
52.217.207.33                 github-production-repository-file-5c1aeb.s3.amazonaws.com
185.199.108.153               githubstatus.com
64.71.144.211                 github.community
23.100.27.125                 github.dev
140.82.113.21                 collector.github.com
13.107.42.16                  pipelines.actions.githubusercontent.com
185.199.108.133               media.githubusercontent.com
185.199.108.133               cloud.githubusercontent.com
185.199.108.133               objects.githubusercontent.com# Update time: 2022-06-04T12:05:45+08:00
# Update url: https://raw.hellogithub.com/hosts
# Star me: https://github.com/521xueweihan/GitHub520
# GitHub520 Host End

添加nuxt后端服务

在server文件夹中添加api文件夹,并在api文件夹中添加index.js/index.ts文件

在这里插入图片描述

注意:因为我使用的时yarn所以会有yarn.lock，根据自己的编译来

在这里插入图片描述

export default defineEventHandler((event:any)=>{return {status:200,message:"hello"}
})

这个说最基本的nuxt3的后端程序，想要访问可以使用fetch或者安装一个axios(集成了ajax)

nuxt3路由

<!--app.vue-->
<template><div><nuxt-link to="/">首页</nuxt-link><nuxt-page></nuxt-page></div>
</template>

在根目录下创建一个pages的文件夹，里面创建一个index.vue文件，这个index.vue文件nuxt会认为时根文件也就是/

<!--/pages/index.vue-->
<script setup lang="ts">
onMounted(()=>{fetch('/api').then(res=> {return res.json()}).then(async data=>{console.log(data)}).catch(err=>console.log(err))
})
</script><template><div>你好</div>
</template><style scoped></style>

在这里插入图片描述
这样，我们简单的nuxt前后端SSR应用就完成了

创建mongo数据

mongodb下载选择各自的系统版本(windows系统最好还是下载msi文件)注意: MongoDB从6.x版本开始不再自带mongosh。在这种情况下，你需要单独下载并安装mongosh
没有mongosh就下载mongosh(记住:需要任何目录都能访问mongosh那么就需要添加环境变量)

#我这里演示的是users,所以创建users数据库
use users;

在这里插入图片描述

#查看集合
show collections;

如果是没有的数据库那么一开始并没有集合,但是你可以按照自己的想法来使用集合,比如

#注意使用mongodb这样创建，它会默认创建一个唯一的id
db.user.insertOne({'name':"admin","account":"admin","password":"admin"})

#查看集合中的数据
db.user.find()

在这里插入图片描述

连接mongodb数据库

#npm i -D nuxt-mongodb
yarn add nuxt-mongodb

配置nuxt.config.ts：在项目的nuxt.config.ts文件中添加nuxt-mongodb模块到modules数组中

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({compatibilityDate: '2024-04-03',devtools: { enabled: true },modules:['nuxt-mongodb']//添加
})

在这里插入图片描述
设置环境变量：在项目的根目录下创建.env文件，并设置MongoDB的连接字符串和数据库名称

MONGO_CONNECTION_STRING=你的数据库链接字符串
MONGO_DB=你的数据库名称
#MONGO_CONNECTION_STRING=mongodb://localhost:27017/users
#MONGO_DB=users

创建API文件：在server目录中的api文件夹中创建一个任意的文件(比如linkMongoDB.ts)来存放你的api后端服务，使用nuxt-mongodb提供的mongo对象来操作数据库

//以/server/api/linkMongoDB.ts为例
import { mongo } from '#nuxt-mongodb'
const db = mongo.db()
const response = await db.collection('你的集合名称').find()

在这里插入图片描述
没有安装此类mongodb的依赖

yarn add --dev @types/mongodb

但是以上的方法并不能构成服务而且async和await是一起出现的(js的异步)，所以

//以/server/api/linkMongoDB.ts为例
import { mongo } from '#nuxt-mongodb'// const response = await db.collection('你的集合名称').find()export default defineEventHandle