express中连接mongodb数据库,前端vue3通过axios获取数据
·
一、安装 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>
四、参考资料
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)