Python Flask结合Pusher发布内容刷新页面后丢失如何解决？

问题原因 #

• 现有实现仅完成了实时事件推送逻辑，未对发布的帖子数据做持久化存储，所有内容仅临时存在于浏览器DOM中，页面刷新后DOM重置，内容自然丢失
• 页面初始化时没有拉取历史帖子的逻辑，只有新的Pusher事件触发时才会追加内容，刷新后无历史数据可渲染

修复方案 #

后端修改 #

1. 新增数据持久化存储，可根据场景选择SQLite、MySQL等数据库，示例使用Flask-SQLAlchemy实现：

from flask_sqlalchemy import SQLAlchemy

# 初始化数据库连接
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///questions.db'
db = SQLAlchemy(app)

# 定义帖子表结构
class Question(db.Model):
    id = db.Column(db.String(64), primary_key=True)
    title = db.Column(db.String(255), nullable=False)
    content = db.Column(db.Text, nullable=False)
    status = db.Column(db.String(20), default='active')

# 首次启动执行建表
with app.app_context():
    db.create_all()

2. 修改原有发帖接口，新增存库逻辑：

@app.route('/post-question', methods=['POST'])
def add_question():
    data_received = json.loads(request.data)
    question_id = 'post-{}'.format(uuid.uuid4().hex)
    data = {
        'id': question_id,
        'title': data_received['title'],
        'question': data_received['content'],
        'status': 'active',
        'event_name': 'created'
    }
    # 写入数据库
    new_question = Question(
        id=question_id,
        title=data_received['title'],
        content=data_received['content']
    )
    db.session.add(new_question)
    db.session.commit()
    
    pusher.trigger("CHANNEL", 'question-created', data)
    return jsonify(data)

3. 新增历史数据查询接口：

@app.route('/get-questions', methods=['GET'])
def get_questions():
    # 查询所有有效帖子，可按需加排序、分页逻辑
    questions = Question.query.filter_by(status='active').all()
    res = []
    for q in questions:
        res.append({
            'id': q.id,
            'title': q.title,
            'question': q.content,
            'status': q.status
        })
    return jsonify(res)

前端修改 #

1. 页面初始化时拉取历史数据渲染，同时修复原有表单重置的语法bug：

$(document).ready(() => {
    // 新增初始化拉取历史帖子逻辑
    $.get('/get-questions', function(res) {
        res.forEach(item => appendToList(item))
    })

    // 原有提交逻辑
    $(document).on('click', "#submit", function(event) {
        $.post({
            url: '/post-question',
            type: 'POST',
            contentType: 'application/json;charset=UTF-8',
            dataType: 'JSON',
            data: JSON.stringify({'title': $("#question-title").val(), 'content': $("#question-content").val()}),
            success : function(response) {
                console.log(response);  
            },
            error : function(xhr) {
                console.log(xhr);
            }
        }).done(function(response) {
            // 修复原写法bug：jQuery对象无reset方法，需取原生DOM元素
            $("#question-form")[0].reset()
        })
    })
})

临时调试方案（无需修改后端，仅单端有效） #

如果仅做本地测试不需要多端同步历史数据，可直接将帖子数据存在浏览器localStorage中，页面初始化时读取渲染，无需修改后端逻辑。

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