使用vite+vue+flask实现一个简单的前后端交互效果
本帖最后由 Shaw0xyz 于 2024-6-9 14:04 编辑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项目。打开终端并执行以下命令：
npm create vite@latest my-vue-app --template vue
进入项目目录并安装依赖：
cd my-vue-app
npm install
1.2.2 初始化后端项目
在另一个目录中创建一个新的Flask项目。打开终端并执行以下命令：
mkdir my-flask-app
cd my-flask-app
python -m venv venv
source venv/bin/activate # 对于Windows用户，使用 `venv\Scripts\activate`
pip install flask
创建一个简单的Flask应用，在项目根目录下创建app.py文件，并添加以下代码：
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/data')
def get_data():
return jsonify({'message': 'Hello from Flask!'})
if __name__ == '__main__':
app.run(debug=True)
1.3 前后端交互实现
接下来，我们将实现前端和后端的交互。
1.3.1 配置前端请求
在Vue项目中，安装axios以便进行HTTP请求。执行以下命令：
npm install axios
然后在src目录下创建一个新的组件文件FetchData.vue，并添加以下代码：
<template>
<div>
<h1>{{ message }}</h1>
<button @click="fetchData">Fetch Data</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
message: ''
};
},
methods: {
async fetchData() {
try {
const response = await axios.get('http://127.0.0.1:5000/api/data');
this.message = response.data.message;
} catch (error) {
console.error('Error fetching data:', error);
}
}
}
};
</script>
1.3.2 配置后端CORS
为了让前端能够请求后端API，我们需要在Flask中启用CORS。在Flask项目中安装flask-cors库：
pip install flask-cors
然后修改app.py文件，添加CORS支持：
from flask import Flask, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/api/data')
def get_data():
return jsonify({'message': 'Hello from Flask!'})
if __name__ == '__main__':
app.run(debug=True)
1.3.3 启动前后端项目
首先启动Flask后端。在my-flask-app目录下执行：
python app.py
然后启动Vue前端。在my-vue-app目录下执行：
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
页:
[1]