东莞网站建设服务公司,网站备案有哪些资料,下载百度极速版免费安装,ds115j用wordpress在现代Web开发中#xff0c;动态路由是一个至关重要的功能。它允许我们根据URL路径中的变量来处理请求。在Flask中#xff0c;这种路由称为变量规则。本文将通过一个完整的前后端示例#xff0c;介绍如何在Flask中使用变量规则路由。
后端#xff1a;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(debugTrue)在这个示例中我们定义了一个路由 /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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleFlask Variable Rule Example/title
/head
bodyh1Fetch Assignment Submission/h1label forassignment_idAssignment ID:/labelinput typenumber idassignment_id nameassignment_idbutton onclickfetchSubmission()Fetch Submission/buttonh2Submission Details/h2pre idsubmissionDetails/prescriptfunction 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不存在页面将显示错误信息。
