如何在 Flask 中实现多步请求处理并在中间插入静态提示页面-html教程-PHP中文网

如何在 Flask 中实现多步请求处理并在中间插入静态提示页面

本文介绍如何在 flask 应用中优雅处理“检查 → 提示 → 创建”的三步流程，通过路由跳转与前端延时重定向，在用户提交表单后先展示静态提示页（如“仓库不存在，正在创建…”），再自动触发后续操作。

本文介绍如何在 flask 应用中优雅处理“检查 → 提示 → 创建”的三步流程，通过路由跳转与前端延时重定向，在用户提交表单后先展示静态提示页（如“仓库不存在，正在创建…”），再自动触发后续操作。

在构建 GitHub 仓库自动化工具时，常见的交互逻辑是：用户提交应用名和邮箱 → 后端检查仓库是否存在 → 若不存在，则需向用户明确反馈“正在创建”，再执行创建动作。但直接 return redirect() 会跳过中间提示，而 render_template() 又无法在渲染后自动继续流程。解决方案是将提示页设计为一个独立的、带前端自动跳转逻辑的 HTML 页面，由 Flask 路由提供服务，而非仅作静态资源。

具体实现分为三步：

新增专用提示路由：添加 /repo_does_not_exist 端点，仅负责渲染提示模板；
创建提示页面模板：在 templates/repo_does_not_exist.html 中嵌入简洁 UI 与自动跳转脚本；
调整控制流：在 repo_exists() 中根据检查结果，分别跳转至已存在页或提示页，而非直接跳转到创建页。

以下是关键代码修改示例：

@app.route('/check_repo', methods=['POST'])
def repo_exists():
    repo_name = request.form.get('Application_Name')
    owner_email = request.form.get('Owner_Email')  # 注意：原代码未使用该字段，实际中应传入

    # 构造 GitHub API 请求参数（示例）
    url = f"https://api.github.com/repos/{{username}}/{{repo_name}}"
    auth = HTTPBasicAuth('your_username', 'your_token')
    response = requests.get(url, auth=auth)

    if response.status_code == 200:
        return render_template('repo_exists.html', repo_name=repo_name)
    else:
        # 传递必要参数（如 repo_name、email）给提示页，便于后续创建时复用
        return render_template('repo_does_not_exist.html', 
                             repo_name=repo_name, 
                             owner_email=owner_email)

对应地，新建 templates/repo_does_not_exist.html：

{% extends 'base.html' %}

{% block content %}
<div class="alert alert-info text-center" style="margin: 2rem auto; max-width: 600px;">
    <h3>⏳ GitHub 仓库不存在</h3>
    <p>正在为您创建新仓库：<strong>{{ repo_name }}</strong></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11111" title="python-flask-vue-creator"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="python-flask-vue-creator" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11111" title="python-flask-vue-creator" class="overflowclass">python-flask-vue-creator</a>
													<p class="overflowclass">创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11111" title="python-flask-vue-creator" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
    <p>请稍候…</p>
</div>

<script>
// 延迟 1.5 秒后自动提交创建请求（模拟“创建中”状态）
setTimeout(() => {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/create_repo';

    const inputName = document.createElement('input');
    inputName.type = 'hidden';
    inputName.name = 'Application_Name';
    inputName.value = '{{ repo_name }}';
    form.appendChild(inputName);

    const inputEmail = document.createElement('input');
    inputEmail.type = 'hidden';
    inputEmail.name = 'Owner_Email';
    inputEmail.value = '{{ owner_email }}';
    form.appendChild(inputEmail);

    document.body.appendChild(form);
    form.submit();
}, 1500);
</script>
{% endblock %}

⚠️ 注意事项：

不要将 /repo_does_not_exist 设为 methods=['POST'] —— 它本质是展示页，应接收 GET 请求（Flask 默认支持）。若需传参，推荐用 render_template() 渲染时注入上下文变量（如上所示），而非依赖 POST。

create_repo 路由需改为接收并处理来自提示页的 POST 请求（即移除原 @app.route('/create_repo', methods=['POST']) 的 methods 限制，或确保表单 method 匹配）：

@app.route('/create_repo', methods=['GET', 'POST'])
def create_repo():
    repo_name = request.form.get('Application_Name') or request.args.get('Application_Name')
    owner_email = request.form.get('Owner_Email') or request.args.get('Owner_Email')
    # 执行创建逻辑（调用 GitHub API）
    # ……
    return render_template('repo_created.html', repo_name=repo_name)