在单击HTML按钮时将数据保存到MongoDB(使用mongoose)
答案: 当用户单击HTML按钮时,可以通过前端代码触发后端的请求,将数据保存到MongoDB数据库中。以下是一个完整的实现过程:
前端代码(HTML + JavaScript):
<!DOCTYPE html>
<html>
<head>
<title>Save to MongoDB</title>
</head>
<body>
<button id="saveButton">Save Data</button>
<script>
document.getElementById('saveButton').addEventListener('click', function() {
var data = {
name: 'John Doe',
age: 25,
email: 'johndoe@example.com'
};
fetch('/api/saveData', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
console.log(result);
// Handle response from server
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>
后端代码(Node.js + Express + Mongoose):
const express = require('express');
const mongoose = require('mongoose');
// 连接MongoDB数据库
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('Connected to MongoDB'))
.catch(error => console.error('MongoDB connection error:', error));
// 创建Mongoose模型
const Schema = mongoose.Schema;
const dataSchema = new Schema({
name: String,
age: Number,
email: String
});
const Data = mongoose.model('Data', dataSchema);
// 创建Express应用
const app = express();
// 解析请求体中的JSON数据
app.use(express.json());
// 定义API路由
app.post('/api/saveData', (req, res) => {
const newData = new Data(req.body);
newData.save()
.then(() => {
res.json({ success: true, message: 'Data saved successfully' });
})
.catch(error => {
res.json({ success: false, message: 'Failed to save data', error: error.message });
});
});
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000');
});
以上代码示例了如何在单击HTML按钮时将数据保存到MongoDB数据库中。在实际应用中,可以根据需求进行适当的修改和扩展。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云