Flask+SQLAlchemy：点击申请人姓名跳转至详情页的实现问题

核心问题 #

当前跳转链接/applicant-report未携带申请人的唯一标识（如手机号），导致详情页无法定位到具体申请人记录；同时前端嵌套遍历所有申请人匹配手机号的写法效率低下，易引发逻辑冗余。

解决方案 #

1. 前端模板修改：传递申请人标识 #

修改跳转链接，将申请人手机号（或数据库ID，推荐用ID更安全）作为参数附加到URL中，同时优化模板逻辑避免嵌套循环：

{% for report in reports %}
  <div class="rec_box">
      {% set target_applicant = None %}
      {% for a in applicant %}
          {% if a.phone == report.applicant_phone %}
              {% set target_applicant = a %}
          {% endif %}
      {% endfor %}
      
      {% if target_applicant %}
          <!-- 方式1：查询参数传递 -->
          <a class="text" href="/applicant-report?phone={{ target_applicant.phone }}">
              {{ target_applicant.name }}
          </a>
          <!-- 方式2：路径参数传递（更优雅） -->
          <!-- <a class="text" href="/applicant-report/{{ target_applicant.phone }}">
              {{ target_applicant.name }}
          </a> -->
      {% endif %}

      <p class="rec_small">O: {{(report.op*100)}}%</p>
      <p class="rec_small">C: {{report.co*100}}%</p>
      <p class="rec_small">E: {{report.ex*100}}%</p>
      <p class="rec_small">A: {{report.ag*100}}%</p>
      <p class="rec_small">N: {{report.ne*100}}%</p>
  </div>
{% endfor %}

2. 后端路由修改：接收参数并查询记录 #

根据前端选择的传参方式，修改Flask路由接收参数，查询对应申请人和报告数据：

方式1：处理查询参数

from flask import request, render_template
from your_app import db, Applicant, Report

@app.route('/applicant-report')
def applicant_report():
    # 获取前端传递的手机号
    phone = request.args.get('phone')
    if not phone:
        return "申请人信息缺失", 400
    
    # 查询对应申请人和报告
    applicant = Applicant.query.filter_by(phone=phone).first()
    report = Report.query.filter_by(applicant_phone=phone).first()
    
    if not applicant or not report:
        return "未找到对应申请人或报告", 404
    
    # 渲染详情页并传递数据
    return render_template('applicant-report.html', applicant=applicant, report=report)

方式2：处理路径参数

from flask import render_template
from your_app import db, Applicant, Report

@app.route('/applicant-report/<phone>')
def applicant_report(phone):
    applicant = Applicant.query.filter_by(phone=phone).first()
    report = Report.query.filter_by(applicant_phone=phone).first()
    
    if not applicant or not report:
        return "未找到对应申请人或报告", 404
    
    return render_template('applicant-report.html', applicant=applicant, report=report)

3. 进阶优化：后端关联查询，简化前端逻辑 #

在后端通过SQLAlchemy关联查询提前绑定报告与申请人数据，消除前端嵌套循环：

# 后端查询时关联申请人表
reports_with_applicant = db.session.query(Report, Applicant)\
    .join(Applicant, Report.applicant_phone == Applicant.phone)\
    .all()

# 传递给模板
return render_template('index.html', reports_with_applicant=reports_with_applicant)

前端模板可简化为：

{% for report, applicant in reports_with_applicant %}
  <div class="rec_box">
      <a class="text" href="/applicant-report/{{ applicant.phone }}">
          {{ applicant.name }}
      </a>
      <p class="rec_small">O: {{(report.op*100)}}%</p>
      <p class="rec_small">C: {{report.co*100}}%</p>
      <p class="rec_small">E: {{report.ex*100}}%</p>
      <p class="rec_small">A: {{report.ag*100}}%</p>
      <p class="rec_small">N: {{report.ne*100}}%</p>
  </div>
{% endfor %}

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