vue中的json数据怎么存入数据库
时间: 2023-06-18 10:03:05 浏览: 180
在 Vue 中存入 JSON 数据到数据库需要经过以下几个步骤:
1. 通过 Vue 的 HTTP 请求库(例如 axios 或者 vue-resource)向后端发送请求,将数据传递给后端。
2. 在后端,使用相应的框架和库(例如 Express 和 Mongoose)来连接数据库,并且编写相应的路由和操作数据库的代码。
3. 在后端路由中,将前端传递过来的 JSON 数据解析成相应的对象,并且使用 Mongoose 操作数据库。
4. 将操作数据库的结果返回给前端。
下面是一个简单的例子:
前端代码:
```javascript
export default {
data() {
return {
jsonData: { name: 'John', age: 25 }
}
},
methods: {
saveData() {
this.$http.post('/api/save', this.jsonData)
.then(response => {
console.log(response.data)
})
}
}
}
```
后端代码:
```javascript
const express = require('express')
const mongoose = require('mongoose')
const app = express()
mongoose.connect('mongodb://localhost/my-database')
const schema = new mongoose.Schema({
name: String,
age: Number
})
const Model = mongoose.model('MyModel', schema)
app.post('/api/save', (req, res) => {
const data = req.body
const model = new Model(data)
model.save()
.then(result => {
res.send(result)
})
.catch(error => {
res.status(500).send(error)
})
})
app.listen(3000, () => {
console.log('Server is running')
})
```
在这个例子中,我们通过 Vue 的 HTTP 请求库将 JSON 数据发送到了 `/api/save` 路由上,后端解析 JSON 数据后,使用 Mongoose 将数据存入到了 MongoDB 数据库中,并且将操作结果返回给了前端。
阅读全文