如何从外部模块向Flask网页传递数据实现前后端交互

你的代码有3个核心错误，导致数据无法正常渲染到前端：

• 路由逻辑拆分不合理：GET请求访问首页时，home()函数没有向模板传递result变量，模板渲染时直接触发未定义错误；POST路由才会拉取CVE数据，但没有触发POST请求的入口
• HTML模板语法/结构完全错误：标签顺序颠倒（开头直接写闭合的</body>/</html>），form标签的属性写法错误（引号未闭合、action属性误用了result变量），如果没有继承基础模板直接写{% block content %}也不会正常生效
• 启动逻辑位置错误：把if __name__ == "__main__"的判断写在Application类内部，运行脚本时不会触发app.run()，服务根本无法正常启动

根据无状态架构的交互逻辑，提供两种可直接运行的实现，可按需选择：

方案1：打开页面自动加载CVE数据（GET请求直接拉取） #

不需要表单提交，用户访问首页时后端直接拉取Red Hat的CVE数据，渲染到页面。

修正后的后端代码 #

from flask import Flask, render_template
# 导入你自己写的CVE抓取模块
from your_cve_module import CVE

app = Flask(__name__, template_folder='frontend/templates')

# 同一个路由支持GET访问，进入页面即拉取数据
@app.route("/")
@app.route("/home")
def home():
    # 加异常捕获，避免接口请求失败直接返回500错误
    try:
        redhat = CVE("CVE-xxx-xxxx")
        result = redhat.get_cve_json()['cve_id']
    except Exception as e:
        result = f"数据拉取失败：{str(e)}"
    return render_template("home.html", result=result)

if __name__ == "__main__":
    # 启动逻辑放在全局作用域，不要写在类内部
    app.run(debug=True)

修正后的home.html模板 #

写完整合法的HTML结构，直接渲染传入的result变量：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CVE数据查询</title>
</head>
<body>
    <h1>Red Hat CVE信息</h1>
    <!-- 加默认值兜底，避免变量未定义触发报错 -->
    <h2>CVE ID：{{ result|default('暂无数据') }}</h2>
</body>
</html>

方案2：点击按钮提交后再加载数据（POST触发拉取） #

如果需要用户点击查询按钮才发起请求拉取数据，保留POST逻辑、补充表单入口即可。

修正后的后端代码 #

from flask import Flask, render_template, request
from your_cve_module import CVE

app = Flask(__name__, template_folder='frontend/templates')

# 同一个路由同时支持GET、POST方法
@app.route("/")
@app.route("/home", methods=['GET', 'POST'])
def home():
    result = None
    # 只有POST请求触发时才拉取CVE数据
    if request.method == 'POST':
        try:
            redhat = CVE("CVE-xxx-xxxx")
            result = redhat.get_cve_json()['cve_id']
        except Exception as e:
            result = f"数据拉取失败：{str(e)}"
    return render_template("home.html", result=result)

if __name__ == "__main__":
    app.run(debug=True)

修正后的home.html模板 #

补充正确的表单提交入口，存在结果时再展示内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CVE数据查询</title>
</head>
<body>
    <h1>Red Hat CVE信息查询</h1>
    <!-- 表单属性正确配置，提交到/home路由，使用POST方法 -->
    <form action="/home" method="post">
        <button type="submit">点击查询CVE数据</button>
    </form>
    <!-- 结果存在时才渲染结果块 -->
    {% if result %}
    <h2>查询结果：{{ result }}</h2>
    {% endif %}
</body>
</html>

• 不需要强行用类封装Flask路由，Flask本身基于装饰器注册路由，强行放在类内容易出现路由注册不生效、启动逻辑不执行的问题
• 所有传给模板的变量都要做兜底处理，要么在后端传入默认值，要么在模板里用default过滤器，避免变量未定义导致页面报错
• 编写HTML时注意标签顺序，先写开标签再写闭合标签，标签属性要正确添加引号，避免语法错误导致渲染异常

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