Vue3与Flask后端Demo

准备工作

1. 安装开发环境

   • 安装 Python（推荐 Python 3.8 或更高版本）。
   • 安装 Node.js（推荐 LTS 版本）。
   • 安装 PyCharm（用于 Flask 开发）和 VSCode（用于 Vue3 开发）。
   • 使用 npm 安装 Vue CLI：npm install -g @vue/cli。

2. 创建项目

   • Flask 项目：在 PyCharm 中新建一个 Python 项目，并创建一个 app.py 文件。
   • Vue3 项目：在命令行中运行 vue create vue3-flask-project 创建一个新的 Vue 3 项目。

Flask 后端设置

1. 安装 Flask 和 Flask-CORS
   在 Flask 项目中，使用 pip 安装 Flask 和 Flask-CORS：

   pip install flask flask-cors
   

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

   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 前端设置

1. 安装 Axios
   在 Vue3 项目中，使用 npm 安装 Axios：

   npm install axios
   

2. 配置 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>
   

3. 运行项目

   • 在 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。

测试

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

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

原文地址：https://blog.csdn.net/m0_54490473/article/details/142410530

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！