留留工作室案例一
编写了一个基于 Flask 框架的 Python 程序，搭建后端服务，利用 `flask_cors` 解决跨域问题。它提供 `/api/data` 接口，支持 GET 和 POST 请求，并配置了跨域及中文显示，可用于为 Vue 前端提供数据交互服务。
from flask import Flask, request, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
# 关键配置：禁用ASCII编码
app.config['JSON_AS_ASCII'] = False # 关闭自动转义中文[1]
students = []
@app.route('/api/data', methods=['GET', 'POST'])
def handle_students():
if request.method == 'GET':
return jsonify({
"data": students,
"message": "数据获取成功，你是大帅哥" # 直接显示中文
})
elif request.method == 'POST':
data = request.get_json()
students.append(data)
return jsonify({"code": 200, "message": "数据提交成功"})
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000, debug=True)vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生简易管理系统</title>
<!-- 引入 vue.js -->
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- div id 为 app 挂载点 -->
<div id="app">
<h2>学生列表</h2>
<ul v-if = "students.length">
<li v-for="(student, index) in students" :key="index">
<!-- Vue通过数据劫持实现响应式，当数据变化时，视图会自动更新。 -->
姓名: {{ student.name }} - 年龄: {{ student.age }}
</li>
</ul>
<!-- 数据提交表单 -->
<!-- 表单没有阻止默认的提交行为，导致同时执行了addStudent方法和传统表单提交，而传统提交因为没有正确的action或处理方式导致失败。解决方法是在@click事件中使用.prevent修饰符，或者在addStudent方法中阻止默认行为，并确保数据通过正确的方式发送。 -->
<!-- <form @submit.prevent="addStudent"> -->
<form>
<!-- 姓名 -->
<div>
<label >姓名:</label>
<input type="text" v-model="newStudent.name" >
</div>
<!-- 年龄 -->
<div>
<label >年龄:</label>
<input type="text" v-model="newStudent.age" >
</div>
<button type="submit" @click.prevent="addStudent">提交</button>
</form>
</div>
<!-- 使用 javascript 脚本 -->
<script type="text/javascript">
// 配置 Axios 实例
const api = axios.create({
baseURL: 'http://localhost:5000',
timeout: 5000
})
new Vue({
el:'#app',
data(){
return{
students:[
{ name:'张三',age:18 },
{ name:'李四',age:19 },
{ name:'王五',age:20 }
],
newStudent:{
name:'',
age:''
},
submitStatus: false,
submitSuccess: false,
submitMessage: ''
}
},
created() {
this.fetchStudents();
},
methods:{
// 获取学生列表
async fetchStudents(){
try{
// this.loading = true;
const response = await api.get('/api/data');
this.students = response.data.data;
// this.error = null;
}catch(err){
// this.error = `数据获取失败: ${err.message}`;
this.students = []; // 如果请求失败，清空学生列表
} finally{
// this.loading = false;
}
},
// 提交添加学生
async addStudent(){
try{
const response = await api.post('/api/data',this.newStudent);
this.submitSuccess = true;
this.submitMessage = response.data.message;
// 清空表单
this.newStudent.name = '';
this.newStudent.age = '';
this.fetchStudents(); // 重新获取学生列表
}catch(error){
this.submitSuccess = false;
console.log(error)
} finally{
this.submitStatus = true;
setTimeout(()=>this.submitStatus = false,3000);
// this.fetchStudents(); // 重新获取学生列表
}
}
}
})
</script>
</body>
</html>
