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 是一个不错的选择。