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應用。