Vue3与Flask后端Demo

文章目录

- - - 准备工作
    - [Flask 后端设置](#Flask 后端设置)
    - [Vue3 前端设置](#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：
bash 复制代码
```
pip install flask flask-cors
```

编写 Flask 应用

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

python 复制代码

from flask import Flask, jsonify
from flask_cors import CORS

app = 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：
bash 复制代码
```
npm install axios
```

配置 Axios

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

vue 复制代码

<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+）：
js 复制代码
```
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};
```
配置后，Vue 中的请求可以简化为 axios.get('/api/data') 而无需指定完整的 URL。

测试

点击 Vue 页面上的 "Fetch Data" 按钮，查看是否能从 Flask 后端获取数据并显示。
点击 "Login" 按钮，查看是否能成功发送 POST 请求并处理返回的数据。

这样，你就完成了 Vue3 与 Flask 后端的基本配合设置，并能够通过实例看到前后端数据交互的过程。