Flask开发时如何将Python处理逻辑集成到HTML实现动态表格渲染

你只需要调整Flask后端的传参逻辑，配合Jinja2模板语法渲染表格即可，具体步骤如下：

1. 修改Flask服务端代码 #

将CSV读取、数据计算逻辑整合到路由函数中，把处理好的多组表格数据传递给HTML模板：

from flask import Flask, render_template
import csv

app = Flask(__name__)

# 封装CSV读取和数据处理逻辑
def process_csv():
    raw_data = []
    with open('testfinal.csv', 'r', encoding='utf-8') as csv_file:
        csv_reader = csv.reader(csv_file)
        # 逐行读取所有数据
        for row in csv_reader:
            raw_data.append(row)
    # 拆分表头和数据行
    header = raw_data[0]
    rows = raw_data[1:]
    
    # --------------- 这里写你自己的计算逻辑 ---------------
    # 示例：第二个表格problems，可自行替换为你的计算逻辑
    problems_table = [header] + [row for row in rows if int(row[2]) < 60] # 示例：筛选分数低于60的行
    # 示例：第三个表格rank，按分数倒序排序
    rank_table = [header] + sorted(rows, key=lambda x: int(x[2]), reverse=True)
    # 示例：第四个表格cheated，自行替换为你的作弊检测逻辑
    cheated_table = [header] + [row for row in rows if row[-1] == '是']
    # ------------------------------------------------------
    
    # 返回4个表格的数据，每个都包含表头和内容行
    return {
        "raw_table": {"header": header, "rows": rows},
        "problems_table": {"header": problems_table[0], "rows": problems_table[1:]},
        "rank_table": {"header": rank_table[0], "rows": rank_table[1:]},
        "cheated_table": {"header": cheated_table[0], "rows": cheated_table[1:]}
    }

@app.route('/')
def about():
    # 调用处理函数获取所有表格数据
    table_data = process_csv()
    # 将数据传递给模板
    return render_template("about.html", **table_data)

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

2. 修改HTML模板代码 #

把所有标注some table的位置替换为Jinja2动态渲染表格的逻辑，对应每个section分别渲染不同的表格数据：

<!doctype html>
<html lang="ru">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<div class="container">
  <nav class="navbar">
      <ul>
         <li><a href="#table">first</a></li>
         <li><a href="#problems">second</a></li>
         <li><a href="#rank">third</a></li>
         <li><a href="#cheated">forth</a></li>
        </ul>
      </nav>
  <section id="table">
    <h1>1</h1>
    <!-- 原始数据表格 -->
    <table class="lead">
      <thead>
        <tr>
          {% for col in raw_table.header %}
          <th>{{ col }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in raw_table.rows %}
        <tr>
          {% for cell in row %}
          <td>{{ cell }}</td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
  <section id="problems">
      <h1>2</h1>
      <!-- 问题数据表格 -->
      <table class="lead">
      <thead>
        <tr>
          {% for col in problems_table.header %}
          <th>{{ col }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in problems_table.rows %}
        <tr>
          {% for cell in row %}
          <td>{{ cell }}</td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
  <section id="rank">
      <h1>3</h1>
      <!-- 排名表格 -->
      <table class="lead">
      <thead>
        <tr>
          {% for col in rank_table.header %}
          <th>{{ col }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in rank_table.rows %}
        <tr>
          {% for cell in row %}
          <td>{{ cell }}</td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
  <section id="cheated">
      <h1>4</h1>
      <!-- 作弊数据表格 -->
      <table class="lead">
      <thead>
        <tr>
          {% for col in cheated_table.header %}
          <th>{{ col }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in cheated_table.rows %}
        <tr>
          {% for cell in row %}
          <td>{{ cell }}</td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
</div>
</html>

注意事项 #

• 如果你的CSV文件包含中文，打开文件时需要指定encoding='utf-8'或者对应编码，避免乱码
• 代码里的计算逻辑只是示例，你可以根据自己的实际需求修改数据处理规则
• 如果需要美化表格样式，直接在你的main.css里给table、th、td添加对应样式即可

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