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

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

后端：Flask应用

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

创建Flask应用

创建一个新的Flask项目，并安装Flask：
```
pip install flask
```
创建一个名为 app.py 的文件，编写以下代码：

from flask import Flask, jsonifyapp = 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'}), 404if __name__ == '__main__':app.run(debug=True)

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

运行Flask应用

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

python app.py

前端：使用JavaScript发送请求

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

创建HTML文件

创建一个名为 index.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格式显示在页面上。