本文主要是介绍nuxt3连接mongodb操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 创建一个nuxt3应用
- 添加nuxt后端服务
- nuxt3路由
- 创建mongo数据
- 连接mongodb数据库
- 补充
- 添加显示(用v-for打印出数组)
- nuxt-server-insert
- 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这篇关于nuxt3连接mongodb操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
