### Vue.js 前端应用连接 Python 后端 API #### 1. 架构概述 在现代 Web 开发中，前后端分离是一种主流架构，在这种开发模式下，前端使用 Vue.js 等流行框架负责页面的交互和动态效果；后端则采用 Flask 或 Django 提供 API 接口来处理数据、完成业务逻辑等[^2]。 #### 2. 使用 Flask 作为后端服务 当选择 Flask 作为后端时，基本思路是利用 Flask 来提供 RESTful API 服务。Vue.js 则用于构建用户界面并通过 Axios 库向 Flask 发起 AJAX 请求来进行通信。两者之间主要通过 JSON 格式的报文交换信息[^1]。 ##### 示例项目结构 假设有一个简单的待办事项列表应用程序： - **Flask (app.py)**: 定义了一个 `/api/todos` 路径用来返回所有的 todo items。 ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/todos', methods=['GET']) def get_todos(): todos = [{"id": 1, "title": "Learn Vue"}, {"id": 2, "title": "Build App"}] return jsonify(todos) if __name__ == '__main__': app.run(debug=True) ``` - **Vue Component (TodoList.vue)**: 创建一个组件去调用上述定义好的接口并显示结果 ```html <template> <ul> <li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li> </ul> </template> <script> import axios from 'axios'; export default { data() { return {todos: []}; }, created() { this.fetchTodos(); }, methods: { async fetchTodos() { try { const response = await axios.get('http://localhost:5000/api/todos'); this.todos = response.data; } catch(error) { console.error("There was an error fetching the Todos!", error); } } } } </script> ``` #### 3. 使用 Django 作为后端服务 如果选择了 Django，则通常会结合 Django REST framework(DRF)，它可以帮助快速搭建强大的 RESTful APIs。同样地，Vue.js 可以通过 Axios 或者 Fetch API 对这些 API 进行访问操作[^3]。 ##### 设置 DRF ViewSet 和 URL Pattern 首先安装 `djangorestframework` 并配置好相应的视图集以及路由规则: ```bash pip install djangorestframework ``` 编辑 settings.py 文件添加 `'rest_framework'` 至 INSTALLED_APPS 中. 创建一个新的 TodoViewSet 类继承自 ModelViewSet，并将其映射至特定 url 上: ```python # views.py from rest_framework.viewsets import ModelViewSet from .models import TodoItem from .serializers import TodoSerializer class TodoViewSet(ModelViewSet): queryset = TodoItem.objects.all() serializer_class = TodoSerializer # urls.py from django.urls import path, include from rest_framework.routers import DefaultRouter from .views import TodoViewSet router = DefaultRouter() router.register(r'todoitems', TodoViewSet) urlpatterns = [ ... path('', include(router.urls)), ] ``` 此时就可以像之前那样让 Vue 组件发起 GET 请求到对应的路径获取资源了。 ---