vue中表单数据点击提交后通过python存储进数据库中,代码怎么写?
时间: 2023-04-03 16:03:14 浏览: 260
您好,关于vue中表单数据点击提交后通过python存储进数据库中的代码,可以使用axios库将表单数据发送到后端,然后在后端使用Python的Flask框架接收数据并存储到数据库中。具体代码实现可以参考以下示例:
前端代码:
```
<template>
<div>
<form>
<label>姓名:</label>
<input type="text" v-model="name">
<label>年龄:</label>
<input type="text" v-model="age">
<button @click.prevent="submitForm">提交</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
name: '',
age: ''
}
},
methods: {
submitForm() {
axios.post('/api/saveData', {
name: this.name,
age: this.age
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});
}
}
}
</script>
```
后端代码:
```
from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://username:password@localhost/db_name'
db = SQLAlchemy(app)
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(50))
age = db.Column(db.Integer)
@app.route('/api/saveData', methods=['POST'])
def save_data():
data = request.get_json()
user = User(name=data['name'], age=data['age'])
db.session.add(user)
db.session.commit()
return jsonify({'message': 'Data saved successfully!'})
if __name__ == '__main__':
app.run()
```
以上是一个简单的示例,您可以根据自己的实际情况进行修改和扩展。希望能对您有所帮助!
阅读全文