前端vue后端flask

### Vue 前端搭配 Flask 后端开发教程 #### 1. 技术背景 Vue.js 是一种流行的前端框架，专注于构建用户界面；Flask 则是一种轻量级的 Python Web 框架。两者的结合可以实现前后端分离的应用架构，在现代 Web 应用中非常常见。 #### 2. 集成流程概述 为了使 Vue 和 Flask 能够协同工作，通常需要完成以下几个核心部分： - **后端（Flask）**: 创建 API 接口并处理数据逻辑。 - **前段（Vue.js）**: 使用 HTTP 客户端库（如 Axios）调用这些接口并与用户交互[^2]。 --- #### 3. 实现步骤 ##### 3.1 后端配置 (Flask) ###### 3.1.1 初始化 Flask 应用 创建一个新的 Flask 项目文件 `app.py` 并定义基本路由： ```python from flask import Flask, jsonify, request from flask_cors import CORS app = Flask(__name__) CORS(app) # 设置跨域支持 @app.route('/api/data', methods=['GET']) def get_data(): data = {"message": "Hello from Flask!"} return jsonify(data) if __name__ == '__main__': app.run(debug=True) ``` 上述代码设置了 `/api/data` 的 GET 请求响应，并启用了 CORS 支持以便前端能够访问该资源。 ###### 3.1.2 运行 Flask 应用 执行命令启动服务器： ```bash python app.py ``` 默认情况下，Flask 将运行在本地主机上的 `http://localhost:5000/`. --- ##### 3.2 前端配置 (Vue.js) ###### 3.2.1 初始化 Vue 项目 使用 Vue CLI 工具快速搭建一个新项目： ```bash npm install -g @vue/cli vue create frontend cd frontend npm run serve ``` 这会生成一个基于 Vue 的标准模板工程，并将其部署至 `http://localhost:8080/` 上运行。 ###### 3.2.2 编写组件以调用后端服务 编辑主要入口文件 `src/App.vue`, 添加以下内容来展示来自 Flask 提供的信息: ```javascript <template> <div id="app"> {{ message }} </div> </template> <script> import axios from 'axios'; export default { name: 'App', data() { return { message: '' }; }, mounted() { this.fetchData(); }, methods: { async fetchData() { try { const response = await axios.get('http://localhost:5000/api/data'); this.message = response.data.message; } catch (error) { console.error(error); } } } }; </script> ``` 此脚本利用了 Axios 发起异步请求获取远程 JSON 数据，并更新视图显示消息。 --- #### 4. 动态样式绑定示例 如果希望进一步增强用户体验，则可以通过 Vue 的 `:class` 属性机制动态调整 CSS 类名。例如： ```html <div :class="{ active: isActive }">Dynamic Class Binding Example</div> ``` 配合 JavaScript 控制变量状态即可轻松切换不同视觉效果[^3]。 --- ### 总结 以上介绍了如何借助 Flask 构建 RESTful APIs 来支撑由 Vue 执行渲染操作的整体解决方案。这种模式不仅有助于提高应用程序性能还便于维护扩展功能模块[^4]。