Flask 前端交互-CFANZ编程社区

使用 Flask 创建 RESTful API 并与前端进行交互是现代 Web 开发中的常见任务。Flask 是一个轻量级的 Python Web 框架，特别适用于构建小型和中型的 Web 应用。创建 RESTful API 时，Flask 提供了灵活和简单的方式，能够处理前端的 HTTP 请求，返回 JSON 数据，支持常见的 HTTP 动作，如 GET、POST、PUT、DELETE 等。

下面我将展示如何使用 Flask 创建一个简单的 RESTful API，并与前端进行交互。

一、安装 Flask

首先，需要安装 Flask。你可以使用 pip 来安装：

pip install flask

二、创建一个简单的 Flask RESTful API

在 Flask 中，路由（route）是用来处理客户端请求的。你可以使用装饰器（@app.route）来创建不同的 API 端点。

1. 创建 Flask 应用

在一个 Python 文件中（如 app.py），创建 Flask 应用并定义 RESTful API：

from flask import Flask, jsonify, request

app = Flask(__name__)

# 假数据
todos = [
    {"id": 1, "task": "Buy groceries", "done": False},
    {"id": 2, "task": "Clean the house", "done": True},
    {"id": 3, "task": "Study Flask", "done": False}
]

# GET 请求：获取所有任务
@app.route('/api/todos', methods=['GET'])
def get_todos():
    return jsonify(todos)

# GET 请求：根据 ID 获取单个任务
@app.route('/api/todos/<int:id>', methods=['GET'])
def get_todo(id):
    todo = next((todo for todo in todos if todo["id"] == id), None)
    if todo:
        return jsonify(todo)
    return jsonify({"message": "Todo not found"}), 404

# POST 请求：创建一个新任务
@app.route('/api/todos', methods=['POST'])
def create_todo():
    new_todo = request.get_json()  # 获取 JSON 数据
    new_todo['id'] = len(todos) + 1
    todos.append(new_todo)
    return jsonify(new_todo), 201

# PUT 请求：更新任务
@app.route('/api/todos/<int:id>', methods=['PUT'])
def update_todo(id):
    todo = next((todo for todo in todos if todo["id"] == id), None)
    if todo:
        data = request.get_json()
        todo['task'] = data.get('task', todo['task'])
        todo['done'] = data.get('done', todo['done'])
        return jsonify(todo)
    return jsonify({"message": "Todo not found"}), 404

# DELETE 请求：删除任务
@app.route('/api/todos/<int:id>', methods=['DELETE'])
def delete_todo(id):
    global todos
    todos = [todo for todo in todos if todo["id"] != id]
    return jsonify({"message": "Todo deleted"}), 200

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

2. 说明

GET /api/todos：返回所有任务。
GET /api/todos/<id>：根据任务 ID 返回单个任务。
POST /api/todos：接收一个新的任务，并添加到任务列表中。
PUT /api/todos/<id>：根据任务 ID 更新任务的信息。
DELETE /api/todos/<id>：根据任务 ID 删除任务。

三、前端与 Flask 后端交互

假设我们在前端使用 HTML + JavaScript 来与后端交互，进行增删改查操作。前端通过 AJAX 向 Flask 提供的 API 发出请求。

1. 创建简单的 HTML 前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask RESTful API Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Todo List</h1>
    <div id="todo-list"></div>

    <h2>Create New Todo</h2>
    <form id="new-todo-form">
        <input type="text" id="task" placeholder="Enter task" required />
        <button type="submit">Add Todo</button>
    </form>

    <script>
        // 获取任务列表
        function getTodos() {
            $.get("/api/todos", function(data) {
                $('#todo-list').empty();
                data.forEach(function(todo) {
                    $('#todo-list').append(`
                        <div>
                            <span>${todo.task} - ${todo.done ? 'Done' : 'Not Done'}</span>
                            <button onclick="updateTodo(${todo.id})">Update</button>
                            <button onclick="deleteTodo(${todo.id})">Delete</button>
                        </div>
                    `);
                });
            });
        }

        // 添加新任务
        $('#new-todo-form').submit(function(e) {
            e.preventDefault();
            var task = $('#task').val();
            $.ajax({
                url: '/api/todos',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ task: task, done: false }),
                success: function() {
                    getTodos();  // 刷新任务列表
                }
            });
        });

        // 更新任务状态
        function updateTodo(id) {
            var newTask = prompt('Enter new task');
            if (newTask) {
                $.ajax({
                    url: '/api/todos/' + id,
                    method: 'PUT',
                    contentType: 'application/json',
                    data: JSON.stringify({ task: newTask, done: true }),
                    success: function() {
                        getTodos();  // 刷新任务列表
                    }
                });
            }
        }

        // 删除任务
        function deleteTodo(id) {
            $.ajax({
                url: '/api/todos/' + id,
                method: 'DELETE',
                success: function() {
                    getTodos();  // 刷新任务列表
                }
            });
        }

        // 初始加载任务
        getTodos();
    </script>
</body>
</html>

2. 说明

getTodos()：通过 GET 请求获取任务列表，并显示在前端页面上。
updateTodo()：通过 PUT 请求更新任务的状态（例如将任务标记为已完成）。
deleteTodo()：通过 DELETE 请求删除指定的任务。
$('#new-todo-form').submit()：通过 POST 请求将新任务添加到列表。

3. 工作流程

页面加载时，前端通过 GET 请求从 Flask 后端获取所有任务并显示在页面上。
用户可以使用表单添加新任务，前端通过 POST 请求将数据发送给 Flask 后端。
用户点击任务旁的 "Update" 或 "Delete" 按钮，前端会发送相应的 PUT 或 DELETE 请求到后端，后端更新数据并返回更新后的任务列表，前端刷新显示任务。

四、启动 Flask 应用

保存 Flask 应用代码为 app.py。
运行 Flask 应用：

python app.py

Flask 应用会默认启动在 http://127.0.0.1:5000 上。

将前端的 HTML 文件保存为 index.html，并在浏览器中打开。

你将能够看到一个简单的待办事项应用，它可以与 Flask 后端进行交互，支持任务的增删改查。

五、总结

使用 Flask 可以快速构建一个 RESTful API，并通过 HTTP 请求处理前端的交互。
前端可以使用 JavaScript 和 AJAX 技术通过 GET、POST、PUT、DELETE 等 HTTP 方法与 Flask 后端进行交互，支持动态更新页面内容。
Flask 提供的 jsonify() 方法非常方便地将 Python 字典转换为 JSON 格式返回，便于前后端的数据交互。