创建一个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