基于vue3&flask的前后端分离demo
选择flask的目的:灵活,代码库小,轻量,基于python & 算法侧使用的是python语言环境
前端:
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ message }}</h1>
<ul>
<!-- 遍历 items 数组,显示每个元素的内容 -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
// 导入 DataService
// 导入 ref 和 onMounted
import { ref, onMounted } from 'vue';
import DataService from '../services/DataService.js';
export default {
name: 'HelloWorld',
setup() {
// 初始化数据
const message = ref('');
const items = ref([]);
//定义一个异步函数来获取数据
const fetchData = async () => {
try {
const response = await DataService.getData();
// 将获取的数据设置为组件的 data 属性
message.value = response.data.message;
items.value = response.data.items;
}catch(error){
console.error(error);
}
};
// 在组件挂载时调用 fetchData 函数
onMounted(fetchData);
// 返回数据,以便在模板中使用
return {message, items};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
DataService.js
定义一个可以用来获取数据的函数,并配置了axios实例的基础URL和请求头信息
// 导入 axios
import axios from 'axios';
// 创建一个 axios 实例,用于发送请求
const apiClient = axios.create({
// 设置后端 API 的基础 URL
baseURL: 'http://localhost:5000/api',
// 设置请求头
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
});
// 定义一个用于获取数据的函数
export default {
getData() {
// 向 '/data' 路由发送 GET 请求
return apiClient.get('/data');
},
};
后端:
# 导入 Flask
from flask import Flask, jsonify
# 导入 CORS
from flask_cors import CORS
# 创建一个 Flask 应用实例
app = Flask(__name__)
# 并允许来自所有域的请求
CORS(app)
# 定义一个简单的路由
@app.route('/api/data', methods=['GET'])
def get_data():
# 创建一个字典作为模拟数据
data = {
"message": "Hello from Flask!!",
"items": [
{"id": 1, "name": "Item 1"},
{"id": 2, "name": "Item 2"},
{"id": 3, "name": "Item 3"}
]
}
# 将字典转为 JSON 并返回
return jsonify(data)
# 如果作为主程序运行,启动应用
if __name__ == '__main__':
app.run(debug=True)
前端代码使用axios或发送GET请求到后端提供的API端点,如http://localhost:5000/api/data
。后端应用会接收到请求并返回JSON数据作为响应。前端收到响应后,可以解析JSON数据并在页面上展示或处理这些数据。