Python 实战案例：如何用 Flask+Vue 实现前后端分离架构？

前言

前后端分离架构是目前比较流行的一种架构模式，它将前端和后端分离，前端负责展示数据，后端负责处理数据和逻辑，两者通过接口协议进行通信。

Flask 和 Vue 分别是 Python 后端和 JavaScript 前端中比较流行的框架，本文将介绍如何使用 Flask 和 Vue 实现前后端分离架构，并提供具体的实战案例。

一、前后端分离架构介绍

前后端分离架构是指将前端和后端分离到不同的服务器上，通过网络接口协议进行通信。这种架构方式的好处是可以让前后端开发人员专注于各自的领域，提高开发效率和可维护性。

在前后端分离架构中，前端一般使用 JavaScript 框架构建页面，而后端则使用 Python、Java 等语言实现业务逻辑。前后端通过接口协议进行通信，前端向后端发送请求，后端处理请求并返回数据，前端再将数据渲染到页面上。常用的接口协议有 RESTful API、GraphQL 等。

二、Flask 框架介绍

Flask 是一个基于 Python 的 Web 框架，它简洁、灵活、易于扩展，可以帮助开发人员快速搭建 Web 应用。Flask 并不强制使用特定的 ORM、模板引擎等组件，开发人员可以根据项目需求选择合适的组件。

Flask 的核心是 WSGI（Web 服务器网关接口），它是 Python Web 应用程序和 Web 服务器之间的接口。Flask 提供了一个简单的方式来创建 WSGI 应用程序，开发人员可以在应用程序中定义路由、中间件、错误处理等功能。

三、Vue 框架介绍

Vue 是一个渐进式 JavaScript 框架，它用于构建用户界面，可以轻松地将其集成到现有项目中。Vue 将 UI 界面和数据状态分离，支持组件化和模块化开发，有助于提高开发效率和可维护性。

Vue 的核心是 Vue 实例，它是一个数据模型，包含数据、计算属性、方法等属性。Vue 提供了一些内置指令和组件，用于处理数据和事件、渲染 DOM 等方面，也支持使用第三方插件和组件库。

四、Flask+Vue 实战案例

本文将以一个简单的 TodoList 应用为例，演示如何使用 Flask+Vue 实现前后端分离架构。应用的功能包括添加 Todo 任务、删除 Todo 任务、标记已完成等。

1. 后端实现

首先，我们需要使用 Flask 框架实现后端接口。在项目根目录下，创建一个名为 app.py 的文件，写入以下代码：

```python
from flask import Flask, jsonify, request

app = Flask(__name__)

todos = []

@app.route('/todos', methods=['GET'])
def get_todos():
    return jsonify(todos)

@app.route('/todos', methods=['POST'])
def add_todo():
    data = request.get_json()
    todos.append(data)
    return jsonify({'success': True})

@app.route('/todos/', methods=['DELETE'])
def delete_todo(idx):
    try:
        idx = int(idx)
        del todos[idx]
        return jsonify({'success': True})
    except:
        return jsonify({'success': False, 'error': 'Invalid index'})

@app.route('/todos/', methods=['PUT'])
def update_todo_status(idx):
    try:
        idx = int(idx)
        todo = todos[idx]
        todo['done'] = not todo['done']
        return jsonify({'success': True})
    except:
        return jsonify({'success': False, 'error': 'Invalid index'})

if __name__ == '__main__':
    app.run(debug=True)
```

上述代码定义了四个接口，分别用于获取 Todo 列表、添加 Todo 任务、删除 Todo 任务、标记已完成。接口使用了 RESTful API 风格，将请求方法和 URL 对应到了特定的操作上。

2. 前端实现

接下来，我们需要使用 Vue 框架实现前端页面。在项目根目录下，创建一个名为 frontend 的文件夹，进入该文件夹，执行以下命令：

```
vue create todo-app
```

该命令将使用 Vue CLI 工具创建一个名为 todo-app 的应用。根据提示，选择 Manually select features，然后选择 Babel、Router、Vuex、CSS Pre-processors、Linter/Formatter 等选项，按照默认配置完成应用创建。

创建完成后，进入 todo-app 目录，打开 src/App.vue 文件，将其内容替换为以下代码：

```vue





```

上述代码定义了一个名为 App 的 Vue 组件，该组件包含一个表单、一个任务列表和一些方法。组件的 data 属性包含了 newTodo、todos 两个属性，分别表示新任务和任务列表，created 生命周期钩子函数在组件被创建时自动调用，并调用了 getTodos 方法来获取任务列表。组件的 methods 属性包含了 addTodo、deleteTodo、updateTodoStatus 等方法，分别对应添加任务、删除任务、更新任务状态等操作。

3. 运行应用

最后，我们需要将前端页面和后端接口集成起来，使应用能够运行起来。在根目录下创建一个名为 run.py 的文件，写入以下代码：

```python
from flask import Flask, render_template

app = Flask(__name__, static_folder='./frontend/todo-app/dist/static', template_folder='./frontend/todo-app/dist')

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)
```

上述代码定义了一个名为 index 的接口，用于渲染前端页面。以及服务静态文件。

接下来，打开终端，进入项目根目录，依次执行以下命令：

```
cd frontend/todo-app
npm install
npm run build
cd ../..
pip install flask flask-cors
python run.py
```

该命令将安装必要的依赖、打包前端页面、启动后端服务，最终在浏览器中访问 http://localhost:5000 即可看到 TodoList 应用的页面。

五、总结

本文介绍了如何使用 Flask+Vue 实现前后端分离架构。通过一个简单的实战案例，演示了如何使用 Flask 框架实现后端接口、使用 Vue 框架实现前端页面，并将两者集成起来。

前后端分离架构可以提高开发效率和可维护性，是现代 Web 应用的一种流行架构模式。Flask 和 Vue 分别是 Python 后端和 JavaScript 前端中比较流行的框架，掌握它们的使用可以让我们更好地实现前后端分离架构。