Nuxt3 全栈结合MonogDB数据库完成后端数据接口时光小灶

博主：时光小灶
发布时间：2023 年 03 月 24 日
2307 次浏览
5 条评论
1815字数
分类： Nuxt

> Nuxt版本：3.3.1
> mongodb依赖版本：5.1.0
> 作者：时光 个人博客：[https://timebk.cn/](https://timebk.cn/)
> 版权声明：原创文章，请勿抄袭，思维有限，敬请指正，转载需注明作者和原文

# 安装和导入mongodb依赖

node运用MongoDB实现后端接口操作数据库，我们需要安装MongoDB NodeJS 驱动程序 `mongodb`（如果不了解，请先在菜鸟教程里学习：[Node.js 连接 MongoDB | 菜鸟教程](https://www.runoob.com/nodejs/nodejs-mongodb.html)）

* 通过 `npm i mongodb` 安装MongoDB NodeJS 驱动程序
* 官方的正常流程是安装依赖后在需要的接口js(或ts)文件里导入依赖

```
var MongoClient = require('mongodb').MongoClient;
```

## 导入依赖出现 require is not defined

* 在Nxut3里导入mongodb依赖会出现 require is not defined
  ![请输入图片描述](https://timebk.cn/usr/uploads/2023/03/1030773158.png)

### 解决方案

* 这里我们需要换一种导入方法，使用 `import { MongoClient } from "mongodb;"` 方式即可

```
import { MongoClient } from "mongodb;
```

## 配置

既然要链接数据库，那我们肯定是要配置一下数据库相关咯

* 首先，你需要在本地系统或服务器上面安装 `MongoDB` ，官方下载地址：[MongoDB社区免费版](https://www.mongodb.com/try/download/community)
* 安装好后，在我们的 `/server` 文件夹下新增个配置文件 `mongodb.ts`

![请输入图片描述](https://timebk.cn/usr/uploads/2023/03/2124779920.png)![请输入图片描述](https://timebk.cn/usr/uploads/2023/03/2651649303.png)

```
// mongodb.ts
import { MongoClient } from "mongodb";
const dbConfig = {
  ip: "", // 服务器ip
  port: "27017", // 端口，一般默认是27017
  dbname: "", // 数据库名称
  name: "", // 数据库用户名
  password: "", // 数据库密码
};
const url = `mongodb://${dbConfig.name}:${dbConfig.password}@${dbConfig.ip}:${dbConfig.port}/${dbConfig.dbname}`;
const mongodb = MongoClient.connect(url);
export default mongodb;
```

* 然后在需要的接口文件里导入即可，`增删改查` 请到 菜鸟教程里自行学习：[Node.js MongoDB | 菜鸟教程](https://www.runoob.com/nodejs/nodejs-mongodb.html)
* 不过因为Nuxt3是用 `return` 进行抛出，所以我们还需要会运用 `Promise`、`async/await` 实现等待数据库操作完毕，这里我有一个例子，是我自己的编程习惯：

![请输入图片描述](https://timebk.cn/usr/uploads/2023/03/3361067907.png)
![请输入图片描述](https://timebk.cn/usr/uploads/2023/03/1608526620.png)

最后修改：2023 年 03 月 24 日

分享不易，请老板打赏。

5 条评论

1
August 9th, 2023 at 05:44 pm

1

回复
俊 48
March 29th, 2023 at 03:42 pm

可以出一期nuxt3使用express框架吗

回复
1. 1 69
  August 9th, 2023 at 04:14 pm
  
  @俊
  
  1
  
  回复
  1. 1
    August 9th, 2023 at 05:58 pm
    
    @1
    
    555
    
    回复
2. 1 1
  August 9th, 2023 at 04:14 pm
  
  @俊
  
  1
  
  回复