使用Flask中的变量规则路由：前后端示例

在现代Web开发中，动态路由是一个至关重要的功能。它允许我们根据URL路径中的变量来处理请求。在Flask中，这种路由称为"变量规则"。本文将通过一个完整的前后端示例，介绍如何在Flask中使用变量规则路由。

后端：Flask应用

首先，我们需要创建一个简单的Flask应用，该应用将展示如何定义和使用变量规则路由。假设我们有一个学生提交作业的功能，后端需要根据作业ID获取相应的提交记录。

创建Flask应用

创建一个新的Flask项目，并安装Flask：

bash 复制代码

pip install flask

创建一个名为 app.py 的文件，编写以下代码：

python 复制代码

from flask import Flask, jsonify

app = Flask(__name__)

# 模拟数据
submissions = {
    1: {'student_id': 101, 'submission': 'Assignment 1 Submission'},
    2: {'student_id': 102, 'submission': 'Assignment 2 Submission'},
    3: {'student_id': 103, 'submission': 'Assignment 3 Submission'}
}

@app.route('/instructor/submissions/<int:assignment_id>', methods=['GET'])
def get_submission(assignment_id):
    submission = submissions.get(assignment_id)
    if submission:
        return jsonify(submission)
    else:
        return jsonify({'error': 'Submission not found'}), 404

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

在这个示例中，我们定义了一个路由 /instructor/submissions/<int:assignment_id>，其中 assignment_id 是一个整数变量。视图函数 get_submission 根据传入的 assignment_id 返回相应的提交记录。

运行Flask应用

在终端中运行以下命令启动Flask应用：

bash 复制代码

python app.py

前端：使用JavaScript发送请求

接下来，我们将编写一个简单的前端，使用JavaScript向我们的Flask后端发送请求，并显示结果。

创建HTML文件

创建一个名为 index.html 的文件，编写以下代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Variable Rule Example</title>
</head>
<body>
    <h1>Fetch Assignment Submission</h1>
    <label for="assignment_id">Assignment ID:</label>
    <input type="number" id="assignment_id" name="assignment_id">
    <button onclick="fetchSubmission()">Fetch Submission</button>

    <h2>Submission Details</h2>
    <pre id="submissionDetails"></pre>

    <script>
        function fetchSubmission() {
            const assignmentId = document.getElementById('assignment_id').value;
            fetch(`/instructor/submissions/${assignmentId}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('submissionDetails').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => console.error('Error:', error));
        }
    </script>
</body>
</html>

在这个示例中，我们创建了一个简单的HTML页面，包含一个输入框用于输入作业ID，以及一个按钮用于触发请求。JavaScript函数 fetchSubmission 获取输入的作业ID，并向Flask后端发送请求。请求的结果将以JSON格式显示在页面上。

运行前后端代码

确保Flask应用正在运行。
打开浏览器，访问 index.html 文件所在的路径。

本文通过一个完整的前后端示例，介绍了如何在Flask中使用变量规则路由。我们定义了一个动态路由，通过变量规则解析URL路径中的参数，并展示了如何使用JavaScript向后端发送请求并处理响应。希望这个示例能帮助你更好地理解和使用Flask的变量规则路由。

在浏览器中输入一个作业ID，并点击"Fetch Submission"按钮，页面将显示相应的提交记录。如果输入的作业ID不存在，页面将显示错误信息。