Vue3与Flask后端Demo

文章目录

- - - 准备工作
    - Flask 后端设置
    - Vue3 前端设置
    - 跨域问题
    - 测试

准备工作

安装开发环境
- 安装 Python（推荐 Python 3.8 或更高版本）。
- 安装 Node.js（推荐 LTS 版本）。
- 安装 PyCharm（用于 Flask 开发）和 VSCode（用于 Vue3 开发）。
- 使用 npm 安装 Vue CLI：npm install -g @vue/cli。
创建项目
- Flask 项目：在 PyCharm 中新建一个 Python 项目，并创建一个 app.py 文件。
- Vue3 项目：在命令行中运行 vue create vue3-flask-project 创建一个新的 Vue 3 项目。

Flask 后端设置

安装 Flask 和 Flask-CORS
在 Flask 项目中，使用 pip 安装 Flask 和 Flask-CORS：
```
pip install flask flask-cors
```

编写 Flask 应用
在 app.py 中，设置 Flask 应用并启用 CORS：

from flask import Flask, jsonify
from flask_cors import CORSapp = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}}, supports_credentials=True)@app.route('/api/data', methods=['GET'])
def get_data():return jsonify({'message': 'Hello from Flask!'})@app.route('/api/login', methods=['POST'])
def login():# 假设接收 JSON 数据data = request.get_json()# 这里可以添加数据库验证等逻辑return jsonify({'status': 'success', 'user': data.get('username')})if __name__ == '__main__':app.run(debug=True)

Vue3 前端设置

安装 Axios
在 Vue3 项目中，使用 npm 安装 Axios：
```
npm install axios
```

配置 Axios
在 Vue 组件中引入 Axios 并配置请求：

<template><div><h1>Vue3 with Flask Demo</h1><button @click="fetchData">Fetch Data</button><button @click="login">Login</button><p v-if="message">{{ message }}</p></div>
</template><script setup>
import { ref } from 'vue';
import axios from 'axios';const message = ref('');function fetchData() {axios.get('http://localhost:5000/api/data').then(response => {message.value = response.data.message;}).catch(error => {console.error('Error fetching data:', error);});
}function login() {axios.post('http://localhost:5000/api/login', {username: 'testuser',password: 'testpass' // 注意：实际应用中不应明文传输密码}).then(response => {message.value = `Login success: ${response.data.user}`;}).catch(error => {console.error('Error logging in:', error);});
}
</script>

运行项目
- 在 PyCharm 中运行 Flask 应用（通常会自动打开 http://localhost:5000/）。
- 在 VSCode 的 Vue 项目中，运行 npm run serve，这将启动 Vue 开发服务器（通常位于 http://localhost:8080/）。

跨域问题

在 Flask 中，通过 Flask-CORS 插件已经处理了跨域请求。
如果在 Vue 项目中遇到跨域问题，可以在 vue.config.js 文件中配置代理（如果使用 Vue CLI 3+）：
```
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:5000',changeOrigin: true,pathRewrite: { '^/api': '' }}}}
};
```
配置后，Vue 中的请求可以简化为 axios.get('/api/data') 而无需指定完整的 URL。