Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,而 Flask/Django 是 Python 语言编写的轻量级 Web 开发框架。它们可以很好地配合使用,以实现前后端分离的开发模式。
以下是一个简单的示例,展示了如何使用 Vue.js 与 Flask/Django 后端进行交互:
1、首先,确保你已经安装了 Flask/Django 和 Vue.js。可以使用以下命令安装 Flask:
bash
pip install flask
2、建一个 Flask 应用:
python
# app.py
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/data', methods=['GET'])
def get_data():
data = {"message": "Hello from Flask!"}
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
3、建一个简单的 Vue.js 应用:
html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js with Flask</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('/api/data')
.then(response => {
this.message = response.data.message;
})
.catch(error => {
console.log(error);
});
}
}
});
</script>
</body>
</html>
在这个示例中,我们创建了一个简单的 Flask 应用,其中有一个路由 /api/data
,它返回一个 JSON 对象。然后,我们创建了一个 Vue.js 应用,它在页面加载时通过 Axios 发送一个 GET 请求到 Flask 应用的 /api/data
路由,并将返回的数据绑定到 Vue 实例的 message
属性上。
要运行这个示例,请确保 Flask 应用正在运行,然后在浏览器中打开 index.html
文件。你应该能看到从 Flask 应用返回的消息显示在页面上。