Flask + Vue · Python開發大全

使用 Flask 和 Vue.js，你可以創建一個前后端分離的 web 應用。Flask 充當后端服務器，負責提供 API 接口；Vue.js 則用于構建動態的前端用戶界面。 Flask API服務端在后端，你可以使用 Flask 來定義一些API endpoints，這些Endpoints返回 JSON 數據。這是一個簡單的例子： python Copy code from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/data', methods=['GET']) def get_data(): data = {'Name': 'DaVinci', 'Role': 'Assistant'} return jsonify(data) if __name__ == '__main__': app.run(debug=True) 運行該 Flask 應用，當你訪問 localhost:5000/api/data 時會得到一個 JSON 響應。 Vue.js 前端接下來可以使用 Vue.js 創建前端頁面并從 Flask API 中獲取數據。這是一個簡單的 Vue.js 應用： html Copy code <!DOCTYPE html> <html> <head> <title>Vue.js with Flask</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, mounted: function(){ axios .get('http://localhost:5000/api/data') .then(response => (this.message = response.data.Name)) } }); </script> </body> </html> 在 mounted 鉤子函數中，我們用 Axios 從 Flask API 獲取數據。但需要注意的是，在開發或生產環境下，通常都是將前后端分開部署，Flask 專注于提供 Restful API，Vue.js 則打包到靜態文件服務器或者 CDN 中。在開發模式下，可能需要用到跨域請求問題（CORS），可以通過 Flask-CORS 包來解決；在生產環境下，前后端分離部署，不推薦用 Flask 做靜態文件服務器，推薦 Nginx 或者其他 CDN 服務。每種技術棧都有其優點和缺點，你的選擇應基于你的項目需求、團隊技能以及個人喜好。如果你喜歡 Python 并且喜歡 Flask 的輕系統架構，且前端需要強大的交互，Vue.js 是一個不錯的選擇。