Flask应用多轮用户交互实现及项目布局优化求助

一、基础项目结构（适配你的场景） #

先把业务逻辑从路由函数中拆分，让代码更清晰易维护，推荐结构：

your_app/
├── app.py               # 路由与核心配置
├── templates/
│   ├── base.html        # 复用页面结构的基础模板
│   └── home.html        # 单页交互主页面（替代原home+result页面）
└── utils/
    ├── __init__.py
    ├── task1.py         # 任务1独立逻辑
    ├── task2.py         # 任务2独立逻辑
    └── task3.py         # 任务3独立逻辑

二、多轮同页面交互实现 #

你之前的问题核心在于：用刷新页面的POST请求无法维持同页交互，且多个同路径的POST路由会冲突（Flask只会匹配第一个定义的路由）。解决思路是用前端AJAX异步请求+后端分任务接口，无需存储数据即可完成多轮交互。

1. 后端代码实现（app.py） #

from flask import Flask, render_template, request, jsonify
from utils.task1 import process as task1_process
from utils.task2 import process as task2_process
from utils.task3 import process as task3_process

app = Flask(__name__)

# 主页面路由
@app.route('/')
def index():
    return render_template('home.html')

# 任务1接口
@app.route('/task1', methods=['POST'])
def handle_task1():
    # 接收前端传的JSON数据，若用表单则用request.form
    data = request.get_json().get('input_data')
    result = task1_process(data)
    return jsonify({"status": "ok", "result": result})

# 任务2接口
@app.route('/task2', methods=['POST'])
def handle_task2():
    data = request.get_json().get('input_data')
    result = task2_process(data)
    return jsonify({"status": "ok", "result": result})

# 任务3接口
@app.route('/task3', methods=['POST'])
def handle_task3():
    data = request.get_json().get('input_data')
    result = task3_process(data)
    return jsonify({"status": "ok", "result": result})

2. 工具模块示例（utils/task1.py） #

把业务逻辑完全抽离，路由只做请求转发：

def process(input_data):
    # 这里写任务1的具体处理逻辑
    return f"任务1处理结果：{input_data.upper()}"

3. 前端页面实现（templates/home.html） #

用原生JS发送AJAX请求，不刷新页面即可更新内容，控制交互流程：

{% extends "base.html" %}

{% block content %}
<div class="interaction-container">
    <!-- 任务1输入区域 -->
    <div id="task1-section">
        <input type="text" id="task1-input" placeholder="输入任务1数据">
        <button onclick="runTask('task1', document.getElementById('task1-input').value)">执行任务1</button>
    </div>

    <!-- 任务2输入区域（默认隐藏） -->
    <div id="task2-section" style="display: none; margin-top: 20px;">
        <input type="text" id="task2-input" placeholder="输入任务2数据">
        <button onclick="runTask('task2', document.getElementById('task2-input').value)">执行任务2</button>
    </div>

    <!-- 任务3输入区域（默认隐藏） -->
    <div id="task3-section" style="display: none; margin-top: 20px;">
        <input type="text" id="task3-input" placeholder="输入任务3数据">
        <button onclick="runTask('task3', document.getElementById('task3-input').value)">执行任务3</button>
    </div>

    <!-- 结果展示区域 -->
    <div id="result-area" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc;"></div>
</div>

<script>
function runTask(taskName, inputData) {
    fetch(`/${taskName}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({input_data: inputData})
    })
    .then(res => res.json())
    .then(data => {
        // 更新结果展示
        document.getElementById('result-area').innerHTML = `<p>${data.result}</p>`;
        // 显示下一个任务区域
        if (taskName === 'task1') {
            document.getElementById('task2-section').style.display = 'block';
        } else if (taskName === 'task2') {
            document.getElementById('task3-section').style.display = 'block';
        }
    })
    .catch(err => {
        document.getElementById('result-area').innerHTML = `<p>出错：${err.message}</p>`;
    });
}
</script>
{% endblock %}

三、进阶布局（功能扩展时用） #

如果后续功能增多，可引入蓝图拆分模块，结构如下：

your_app/
├── app.py
├── templates/
├── static/
│   ├── css/
│   └── js/
└── blueprints/
    ├── __init__.py
    ├── task_bp.py       # 所有任务相关路由
    └── other_bp.py      # 其他功能模块

在app.py中注册蓝图：

from blueprints.task_bp import task_bp
app.register_blueprint(task_bp, url_prefix='/tasks')

内容的提问来源于stack exchange，提问作者MarvinO_