Flask与Vue.js结合实战：从环境搭建到数据交互¶
一、为什么选择Flask+Vue.js？¶
在Web开发中，前后端分离是目前主流的架构模式。Flask作为轻量级Python后端框架，负责提供数据和业务逻辑；Vue.js作为前端框架，负责页面渲染和用户交互。两者结合可以实现：
- 后端专注数据处理，前端专注用户体验；
- 开发效率高，前后端团队可独立协作；
- 数据交互通过API完成，灵活性强。
二、开发环境准备¶
要开始实战，需先安装以下工具：
1. Python与Flask：
- 安装Python（推荐3.6+）：Python官网
- 安装Flask：pip install flask
- 安装跨域工具（解决前后端通信问题）：pip install flask-cors
- Node.js与Vue.js：
- 安装Node.js（含npm）：Node官网
- 安装Vue-cli（快速创建Vue项目）：npm install -g @vue/cli
三、项目结构设计¶
采用前后端分离结构，在项目根目录下创建两个文件夹：
my-fullstack-app/
├─ flask_server/ # 后端Flask项目
│ └─ app.py # Flask主文件
└─ vue_client/ # 前端Vue项目
└─ my-vue-app/ # Vue项目（通过Vue-cli创建）
四、后端Flask搭建¶
- 创建Flask项目
在flask_server文件夹下新建app.py，编写简单的后端接口：
from flask import Flask, jsonify
from flask_cors import CORS # 解决跨域问题
app = Flask(__name__)
CORS(app) # 允许所有跨域请求（开发阶段）
# 模拟数据：用户列表
users = [
{"id": 1, "name": "张三", "age": 20},
{"id": 2, "name": "李四", "age": 22},
{"id": 3, "name": "王五", "age": 25}
]
# 后端接口：获取用户列表
@app.route('/api/users', methods=['GET'])
def get_users():
return jsonify(users) # 返回JSON格式数据
if __name__ == '__main__':
app.run(port=5000, debug=True) # 后端运行在5000端口
- 启动Flask后端
在flask_server目录执行：
python app.py
成功后，访问http://localhost:5000/api/users，可看到后端返回的用户列表JSON数据。
五、前端Vue搭建¶
- 创建Vue项目
在项目根目录执行：
vue create vue_client/my-vue-app
选择默认配置（或手动选择Vue 3），进入项目目录：
cd vue_client/my-vue-app
- 安装Axios（数据请求工具）
Vue需通过Axios向后端发送HTTP请求，安装Axios：
npm install axios --save
- 编写Vue组件
修改src/App.vue，实现数据请求和渲染：
<template>
<div class="container">
<h1>用户列表</h1>
<ul v-if="userList.length">
<li v-for="user in userList" :key="user.id">
{{ user.name }}（{{ user.age }}岁）
</li>
</ul>
<p v-else>加载中...</p>
</div>
</template>
<script>
import axios from 'axios' // 导入Axios
export default {
name: 'App',
data() {
return {
userList: [] // 存储后端返回的用户列表
}
},
created() { // 组件创建后自动执行
this.fetchUsers() // 调用获取用户列表的方法
},
methods: {
async fetchUsers() { // 用async/await简化异步请求
try {
// 调用后端接口（Flask地址+端口+接口路径）
const response = await axios.get('http://localhost:5000/api/users')
this.userList = response.data // 将后端数据赋值给userList
} catch (error) {
console.error('请求失败：', error)
}
}
}
}
</script>
<style scoped>
.container {
width: 80%;
margin: 50px auto;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
border: 1px solid #eee;
margin: 5px 0;
}
</style>
六、运行与测试¶
- 启动前端Vue
在vue_client/my-vue-app目录执行：
npm run serve
前端默认运行在http://localhost:8080。
- 验证数据交互
打开浏览器访问http://localhost:8080，页面应显示从后端获取的用户列表：
- 张三（20岁）
- 李四（22岁）
- 王五（25岁）
七、常见问题与解决¶
- 跨域问题
若前端请求后端时出现“Access to XMLHttpRequest”错误，需在Flask后端安装flask-cors并配置：
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 允许所有前端跨域请求（开发环境可用，生产环境需指定域名）
-
Axios请求路径错误
确保Axios的get方法中地址与后端接口一致（如http://localhost:5000/api/users）。 -
Vue组件未渲染数据
检查v-for是否使用user.id作为:key，且data()中userList是否初始化为空数组。
八、总结¶
通过本次实战，我们完成了Flask后端与Vue前端的结合：
- 后端用Flask提供简单的API接口，返回JSON数据；
- 前端用Vue渲染页面，通过Axios请求后端数据；
- 前后端通过HTTP协议实现数据交互。
这种“后端专注逻辑、前端专注交互”的分离模式，能极大提升开发效率和用户体验。后续可扩展功能，如添加用户增删改查、路由跳转等。
扩展方向：可尝试将后端部署到云服务器（如阿里云），前端打包后通过Nginx部署，实现生产环境下的完整Web应用。