一、安装 mongodb:

yarn add mongodb@6.3.0

注:此处指定版本为 6.3.0 ,可自行选择。

二、连接 mongodb 数据库并配置跨域:

1、连接 mongodb 数据库

准备工作:

  • 安装 mongodb 数据库并启动服务
  • 安装 express,此处版本为 @4.16.1
  • 可根据需要安装 express-generator,用于生成 express 框架基本结构(推荐)

此处借助 express-generator 生成了框架的基本结构。

routes/users.js 中进行数据库的连接:

var express = require('express');
var router = express.Router();
const { MongoClient } = require('mongodb');

// 注意:使用localhost可能会出现报错
const url = 'mongodb://127.0.0.1:27017';
// const url = 'mongodb://localhost:27017';

// 创建 MongoDB 连接池
const client = new MongoClient(url,{
    // 最大连接池数量
    maxPoolSize: 50,
    // 连接超时提示
    wtimeoutMs: 2500,
});

// 连接数据库
async function conMongoDB() {
    await client.connect().then(() => {
        console.log('-- 连接成功 --');
    }).catch(err => {
        console.log('err:' + err);
        process.exit(1);
    })
}

conMongoDB();

注意:可能出现的报错

连接数据库时 url 使用 const url = 'mongodb://localhost:27017' 连接时出现报错 err:MongoServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017 ,通过网上查找资料后得知,将 localhost 修改成 127.0.0.1 即可。

期间还出现另一个报错 MongoTopologyClosedError Topology is closed ,后来数据库连接成功后该错误消失。

参考资料(转载):

连接成功后获取数据:

// 数据库名称
const dbName = 'test';

router.get('/', async function (req, res, next) {
    try {
        const db = client.db(dbName);
        // 获取集合
        const collection = db.collection('table1');
        
        // 获取第一条数据 并排除 _id 字段
        const findResult = await collection.findOne({},{projection:{_id:0}});
        if(findResult) {
            // 进一步对数据做处理
            ...
        }else {
            console.log('--');
        }
        // 将结果返回
        res.json(findResult);
    } catch (err) {
        console.log(err);
    }
})

module.exports = router;
2、跨域配置

安装 cors:

yarn add cors

app.js 中进行配置:

var express = require('express');
...
const cors = require('cors');

// 导入路由文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// 解决跨域
app.use(cors({
    // 前端项目地址
    origin: ['http://localhost:5173'],
    // origin: true,
    methods: ['GET','POST'],
}));

...

// 配置路由
app.use('/api', indexRouter);
app.use('/api/users', usersRouter);

module.exports = app;

三、前端获取数据

安装 axios :

yarn add axios

获取数据:

<template>
    <button @click="getData">获取数据</button>
</template>

<script setup>
import axios from 'axios';

function getData() {
    axios.get('http://localhost:3000/api/users').then(
        response => {
            console.log(response.data);
        },
        error => {
            console.log(error);
        }
    )
}
</script>

四、参考资料

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐