本文详解如何在 flask 应用中将 python 爬取并清洗后的结构化数据，准确渲染到 html 页面，重点解决变量名不一致导致清洗后数据无法显示的问题，并提供完整、可运行的前后端集成方案。
本文详解如何在 flask 应用中将 python 爬取并清洗后的结构化数据，准确渲染到 html 页面，重点解决变量名不一致导致清洗后数据无法显示的问题，并提供完整、可运行的前后端集成方案。
在基于 Flask 的招聘数据采集系统中，用户通过 upload.html 选择岗位领域、上传含 URL 列表的 CSV 文件，后端执行 LinkedIn 爬取与数据清洗，最终在 display.html 展示结果。然而，常见问题在于：清洗后的数据（如 cleandata）未被 HTML 模板正确引用，导致页面仍显示原始未清洗内容或报错。
根本原因在于 Flask 路由函数与 Jinja2 模板间的变量名不匹配。观察原代码：
# flask_app.py（问题代码）
@app.route('/upload', methods=['POST'])
def upload():
file = request.files['file']
df = pd.read_csv(file)
data = scrape_data(df)
cleandata = clean_data(data) # ← 清洗后存为变量 cleandata
return render_template('display.html', data=cleandata) # ← 却传给模板的键名为 'data'而 display.html 中却使用了：
{% for item in data %} <!-- ✅ 此处 'data' 与传入的键名一致，但语义易混淆 -->表面上能运行，实则隐藏逻辑缺陷：若后续需同时展示原始数据与清洗数据，或在其他模板中复用变量，这种命名方式极易引发歧义和维护困难。更严重的是，原答案指出的“应改为 {% for item in cleandata %}”是错误的——因为模板接收的变量名始终由 render_template() 的关键字参数决定，而非 Python 变量名。真正有效的修复是统一变量命名契约。
✅ 正确做法：在 render_template() 中显式使用语义清晰的键名，并在模板中严格对应：
# flask_app.py（推荐修正版）
@app.route('/upload', methods=['POST'])
def upload():
try:
file = request.files['file']
if not file or not file.filename.endswith('.csv'):
return "Please upload a valid CSV file", 400
df = pd.read_csv(file)
raw_data = scrape_data(df) # 原始爬取结果（list of dict）
cleaned_data = clean_data(raw_data) # 清洗后 DataFrame → list of list
# 关键：使用明确、一致的键名传递清洗后数据
return render_template('display.html',
job_field=request.form.get('job_field', 'Unknown'),
cleaned_data=cleaned_data) # ← 统一使用 'cleaned_data'
except Exception as e:
return f"Error during processing: {str(e)}", 500对应地，更新 display.html 中的数据循环部分：
<h2>Scraped & Cleaned Information</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Title</th>
<th>Location</th>
<th>Experiences</th>
<th>Education</th>
<th>Certifications</th>
<th>Skills</th>
<th>Languages</th>
</tr>
</thead>
<tbody>
{% for row in cleaned_data %} <!-- ✅ 与 render_template 的键名完全一致 -->
<tr>
<td>{{ row[0] }}</td> <!-- Name -->
<td>{{ row[1] }}</td> <!-- Title -->
<td>{{ row[2] }}</td> <!-- Location -->
<td>{{ row[3] | join(', ') }}</td> <!-- Experiences (list → string) -->
<td>{{ row[4] | join(', ') }}</td>
<td>{{ row[5] | join(', ') }}</td>
<td>{{ row[6] | join(', ') }}</td>
<td>{{ row[7] | join(', ') }}</td>
</tr>
{% endfor %}
</tbody>
</table>⚠️ 注意事项：
- clean_data() 当前返回的是 df.values.tolist()（二维列表），因此模板中需用 row[0], row[1] 等索引访问字段，而非 row["Name"]（后者适用于字典列表）。若需保持键值访问，应在清洗函数中返回 df.to_dict('records')。
- 建议增强健壮性：在 upload 路由中校验 request.form.get('job_field') 是否存在，避免 job_field 为空时模板报错。
- 安全提醒：当前代码硬编码 LinkedIn 账号密码，切勿在生产环境使用。应改用环境变量（如 os.getenv('LINKEDIN_USER')）或 OAuth2 认证。
- 性能优化：LinkedIn 爬取耗时较长，建议添加异步任务（如 Celery）或前端加载提示，避免请求超时。
总结：Flask 模板数据传递的核心原则是 “键名即契约” —— 后端 render_template(key=value) 中的 key 必须与模板中 {% for item in key %} 的变量名完全一致。通过语义化命名（如 cleaned_data）、类型一致性（列表/字典）、异常处理与安全加固，即可构建稳定、可维护的数据展示流程。
