nuxt3连接mongodb操作

2024-08-27 08:44
文章标签 操作 连接 mongodb nuxt3

本文主要是介绍nuxt3连接mongodb操作,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

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

创建一个nuxt3应用

  1. Node.js - v18.0.0 或更新版本
  2. 推荐使用 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操作的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1111188

相关文章

Python调用Orator ORM进行数据库操作

《Python调用OratorORM进行数据库操作》OratorORM是一个功能丰富且灵活的PythonORM库,旨在简化数据库操作,它支持多种数据库并提供了简洁且直观的API,下面我们就... 目录Orator ORM 主要特点安装使用示例总结Orator ORM 是一个功能丰富且灵活的 python O

Nginx设置连接超时并进行测试的方法步骤

《Nginx设置连接超时并进行测试的方法步骤》在高并发场景下,如果客户端与服务器的连接长时间未响应,会占用大量的系统资源,影响其他正常请求的处理效率,为了解决这个问题,可以通过设置Nginx的连接... 目录设置连接超时目的操作步骤测试连接超时测试方法:总结:设置连接超时目的设置客户端与服务器之间的连接

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型,3步搞定一个应

SQL 中多表查询的常见连接方式详解

《SQL中多表查询的常见连接方式详解》本文介绍SQL中多表查询的常见连接方式,包括内连接(INNERJOIN)、左连接(LEFTJOIN)、右连接(RIGHTJOIN)、全外连接(FULLOUTER... 目录一、连接类型图表(ASCII 形式)二、前置代码(创建示例表)三、连接方式代码示例1. 内连接(I

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》:本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE

Go Mongox轻松实现MongoDB的时间字段自动填充

《GoMongox轻松实现MongoDB的时间字段自动填充》这篇文章主要为大家详细介绍了Go语言如何使用mongox库,在插入和更新数据时自动填充时间字段,从而提升开发效率并减少重复代码,需要的可以... 目录前言时间字段填充规则Mongox 的安装使用 Mongox 进行插入操作使用 Mongox 进行更

java如何通过Kerberos认证方式连接hive

《java如何通过Kerberos认证方式连接hive》该文主要介绍了如何在数据源管理功能中适配不同数据源(如MySQL、PostgreSQL和Hive),特别是如何在SpringBoot3框架下通过... 目录Java实现Kerberos认证主要方法依赖示例续期连接hive遇到的问题分析解决方式扩展思考总

C++实现封装的顺序表的操作与实践

《C++实现封装的顺序表的操作与实践》在程序设计中,顺序表是一种常见的线性数据结构,通常用于存储具有固定顺序的元素,与链表不同,顺序表中的元素是连续存储的,因此访问速度较快,但插入和删除操作的效率可能... 目录一、顺序表的基本概念二、顺序表类的设计1. 顺序表类的成员变量2. 构造函数和析构函数三、顺序表

使用C++实现单链表的操作与实践

《使用C++实现单链表的操作与实践》在程序设计中,链表是一种常见的数据结构,特别是在动态数据管理、频繁插入和删除元素的场景中,链表相比于数组,具有更高的灵活性和高效性,尤其是在需要频繁修改数据结构的应... 目录一、单链表的基本概念二、单链表类的设计1. 节点的定义2. 链表的类定义三、单链表的操作实现四、