使用vite+vue+flask实现一个简单的前后端交互效果

Shaw0xyz

1. 简介

在现代Web开发中，前后端分离已成为一种常见的开发模式。本文将介绍如何使用Vite和Vue来构建前端，以及使用Flask构建后端，并实现一个简单的前后端交互效果。我们将详细讲解从项目初始化到前后端交互的实现过程。

1.1 环境准备

在开始之前，请确保你的开发环境已经安装了以下工具：

(1) Node.js：用于运行Vite和Vue项目
(2) Python：用于运行Flask项目
(3) npm或yarn：用于管理前端依赖

1.2 项目初始化

首先，我们需要初始化前端项目和后端项目。

1.2.1 初始化前端项目

使用Vite创建Vue项目。打开终端并执行以下命令：

1. npm create vite@latest my-vue-app --template vue

复制代码

进入项目目录并安装依赖：

1. cd my-vue-app
   
2. npm install

复制代码

1.2.2 初始化后端项目

在另一个目录中创建一个新的Flask项目。打开终端并执行以下命令：

1. mkdir my-flask-app
   
2. cd my-flask-app
   
3. python -m venv venv
   
4. source venv/bin/activate # 对于windows用户，使用 `venv\Scripts\activate`
   
5. pip install flask

复制代码

创建一个简单的Flask应用，在项目根目录下创建app.py文件，并添加以下代码：

1. from flask import Flask, jsonify
   
2. 
   
3. app = Flask(__name__)
   
4. 
   
5. @app.route('/api/data')
   
6. def get_data():
   
7.     return jsonify({'message': 'Hello from Flask!'})
   
8. 
   
9. if __name__ == '__main__':
   
10.     app.run(debug=True)

复制代码

1.3 前后端交互实现

接下来，我们将实现前端和后端的交互。

1.3.1 配置前端请求

在Vue项目中，安装axios以便进行HTTP请求。执行以下命令：

1. npm install axios

复制代码

然后在src目录下创建一个新的组件文件FetchData.vue，并添加以下代码：

1. <template>
   
2.   <div>
   
3.     <h1>{{ message }}</h1>
   
4.     <button @click="fetchData">Fetch Data</button>
   
5.   </div>
   
6. </template>
   
7. 
   
8. <script>
   
9. import axios from 'axios';
   
10. 
    
11. export default {
    
12.   data() {
    
13.     return {
    
14.       message: ''
    
15.     };
    
16.   },
    
17.   methods: {
    
18.     async fetchData() {
    
19.       try {
    
20.         const response = await axios.get('http://127.0.0.1:5000/api/data');
    
21.         this.message = response.data.message;
    
22.       } catch (error) {
    
23.         console.error('Error fetching data:', error);
    
24.       }
    
25.     }
    
26.   }
    
27. };
    
28. </script>

复制代码

1.3.2 配置后端CORS

为了让前端能够请求后端API，我们需要在Flask中启用CORS。在Flask项目中安装flask-cors库：

1. pip install flask-cors
   

复制代码

然后修改app.py文件，添加CORS支持：

1. from flask import Flask, jsonify
   
2. from flask_cors import CORS
   
3. 
   
4. app = Flask(__name__)
   
5. CORS(app)
   
6. 
   
7. @app.route('/api/data')
   
8. def get_data():
   
9.     return jsonify({'message': 'Hello from Flask!'})
   
10. 
    
11. if __name__ == '__main__':
    
12.     app.run(debug=True)

复制代码

1.3.3 启动前后端项目

首先启动Flask后端。在my-flask-app目录下执行：

1. python app.py

复制代码

然后启动Vue前端。在my-vue-app目录下执行：

1. npm run dev

复制代码

1.4 测试前后端交互

打开浏览器访问Vite启动的本地服务器，通常为http://localhost:3000。点击Fetch Data按钮，应该可以看到页面上显示从Flask后端获取的数据“Hello from Flask!”。

2. 结论

通过本文的介绍，我们成功地使用Vite和Vue构建了一个简单的前端，并使用Flask构建了后端，实现了前后端的交互效果。这种开发模式不仅结构清晰，而且有助于提高开发效率和代码可维护性。希望本文能为你的前后端分离开发提供一些参考和帮助。



/ 荔枝学姐de课后专栏 /

Hi！这里是荔枝学姐~

欢迎来到我的课后专栏

自然语言学渣 NLP摆烂姐

热衷于技术写作 IT边角料

AIGC & Coding & linux ...

~互撩~ TG: @Shaw_0xyz