Nuxt后端接口实战：从0到1连接MongoDB数据库

总所周知next框架是一个全栈框架，可以一把梭哈，同时nuxt也支持编写后端接口。

网上有很多nuxt教程但是我注意到对于nuxt后端接口的教程比较少，所以我决定写一篇关于nuxt链接数据库编写后端接口的文章，数据库的选择就使用MongoDB。

1·安装相关库

首先我们需要安装一些依赖mongoose和dotenv，当然dotenv并不是必须的，但是我建议使用dotenv来管理环境变量，这样可以更好的保护我们的敏感信息。

npm install mongoose dotenv

然后我们需要在根目录下创建一个.env文件，里面写入我们的数据库连接信息，这里我使用mongodb://localhost:27017/test作为我的数据库连接信息，如果你有云服务器可以替换成你的数据库连接信息。

2·链接数据库

接下来我们需要在server目录下创建一个mongoose.ts文件(当然文件名可以自定义，我使用的ts)，用来连接数据库，代码如下：

typescript 复制代码

// server/db.js
import mongoose from "mongoose";
import { config } from "dotenv";
config(); // 加载环境变量
let isConnected = false; // 确保只连接一次
export const connect = async () => {
  try {
    if (isConnected) return;
    await mongoose.connect(process.env.NUXT_MONGODB_URI as string, {
      // 移除 useNewUrlParser 和 useUnifiedTopology
      // 添加其他必要的连接选项
      autoIndex: true, // 如果不需要自动创建索引，可以设置为 false
      maxPoolSize: 10, // 连接池大小优化：根据服务器配置调整maxPoolSize
      serverSelectionTimeoutMS: 5000, // 超时时间
      socketTimeoutMS: 45000, // 套接字超时时间
      family: 4, // 强制使用 IPv4
    });
    isConnected = true;
    console.log("成功连接到MongoDB");
  } catch (error) {
    console.error("无法连接到MongoDB:", error);
    process.exit(1); // 如果连接失败，终止应用
  }
};

配置完mongoose.ts后我们需要在server目录下创建plugins目录，然后再plugins目录下创建一个connectToDatabase文件，用于连接数据库，代码如下：

arduino 复制代码

import { connect } from "../mongoose";
export default defineNitroPlugin(async (nuxtApp) => {
  // 连接数据库
  await connect();
});

这时候启动项目应该就可以看到控制台打印出'成功连接到MongoDB'。

3·编写接口

数据库链接完成下面我们需要编写接口，首先我们需要在server目录下创建一个api目录，api目录下创建todo目录，在todo目录中创建ts文件或者js文件，这里我使用ts，创建add.ts文件，代码如下：

javascript 复制代码

import { defineEventHandler, readBody } from "h3";
import Todo from "./todoModel";
import mongoose from "mongoose";
export default defineEventHandler(async (event) => {
  try {
    // 检查数据库连接状态
    if (mongoose.connection.readyState !== 1) {
      return createError({
        statusCode: 500,
        statusMessage: "Database connection not established",
      });
    }

    const body = await readBody(event);

    if (!body.title) {
      return createError({
        statusCode: 400,
        statusMessage: "Title is required",
      });
    }

    const todo = await Todo.create(body);

    return { status: 201, message: "Todo created successfully", data: todo };
  } catch (err) {
    console.error("Error creating todo:", err);
    throw createError({
      statusCode: 500,
      statusMessage: "Internal Server Error",
    });
  }
});

上述代码中我们引入了todoModel这个也需要们创建，建议把模型创建在todo中，这样方便管理，当然也可以在根目录下创建一个models目录，然后在models目录下创建一个todo.ts文件，模型代码可以根据自己的需求定义，下面是我的实例代码：

php 复制代码

import mongoose from "mongoose";

// 定义Todo模型的Schema
const todoSchema = new mongoose.Schema(
  {
    title: {
      type: String,
      required: true,
    },
    completed: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: "",
    },
  },
  { timestamps: true } // 自动添加 createdAt 和 updatedAt 字段
);

// 使用mongoose.model()创建模型，避免重复定义模型的问题
const Todo = mongoose.model("Todo", todoSchema);

export default Todo;

4·调用接口

接下来就是调用接口，这里需要注意的是我们的接口地址就是api/xxx，我们的在api目录中创建的目录和文件就是接口的路由地址，例如我们的目录是api/todo/add.ts，那么我们的接口地址就是api/todo/add，当然如果你在api目录下创建的是api/todo/add/a/index.ts，就是api/todo/add/a。请求我们使用useAsyncData，当然除了useAsyncData官方还提供了其他的请求方法这里就不多少了，感兴趣的可以去官方文档看看。我们的接口代码如下：

javascript 复制代码

const posts = async () => {
  const _data = {
    title: "这是一个标题",
    content: "这是文字",
  };

  const { data } = await useAsyncData(() =>
    $fetch("/api/todo/add", {
      method: "POST",
      body: JSON.stringify(_data),
    })
  );
  console.log(data.value);
};

结语

Nuxt3默认集成Nitro服务引擎，可直接输出独立Node/Serverless应用，无需单独配置。

同时欢迎大家关注我的博客：小贺博客