如何配置Flask实现渔业数据分析Python后端与前端对接？

1. 后端接口整合与配置 #

• 封装现有数据分析模块：把数据拆分、可视化数据生成、模型训练数据准备的Python代码整理成独立模块（比如utils/data_processor.py），确保每个功能都能通过函数调用直接获取结果。
• 编写Flask路由接口：将数据分析逻辑绑定到API路由，返回前端可解析的JSON格式数据：

  from flask import Flask, jsonify, render_template
  from utils.data_processor import get_catch_trend_data, prepare_training_data
  
  app = Flask(__name__)
  
  # 返回前端主页
  @app.route('/')
  def index():
      return render_template('index.html')
  
  # 获取50年捕捞趋势数据接口
  @app.route('/api/catch-trends')
  def catch_trends():
      trend_data = get_catch_trend_data()  # 调用已实现的数据处理函数
      return jsonify({
          "years": trend_data["year_list"],
          "catch_values": trend_data["catch_amount"],
          "species": trend_data["target_species"]
      })
  
  # 触发模型训练数据准备的接口
  @app.route('/api/prepare-training-data', methods=['POST'])
  def trigger_data_prep():
      try:
          prepare_training_data()  # 调用已有的数据准备函数
          return jsonify({"status": "success", "msg": "训练数据准备完成"})
      except Exception as e:
          return jsonify({"status": "error", "msg": str(e)}), 500
  

• 处理跨域问题：如果前端与后端分开部署，安装flask-cors扩展解决跨域：

  from flask_cors import CORS
  CORS(app)  # 允许所有域名跨域，生产环境可指定具体域名
  

2. 前端对接与可视化实现 #

• 页面结构配置：在Flask项目的templates文件夹下创建前端主页index.html，引入可视化库（如ECharts、D3.js），通过AJAX请求后端接口获取数据：

  <!DOCTYPE html>
  <html>
  <head>
      <title>商业鱼类捕捞趋势</title>
      <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  </head>
  <body>
      <div id="trend-chart" style="width: 90%; height: 600px; margin: 20px auto;"></div>
      <button id="prep-btn" style="display: block; margin: 0 auto;">准备训练数据</button>
  
      <script>
          // 初始化可视化图表
          const chart = echarts.init(document.getElementById('trend-chart'));
          // 请求捕捞趋势数据并渲染图表
          fetch('/api/catch-trends')
              .then(res => res.json())
              .then(data => {
                  const option = {
                      title: { text: `${data.species} 50年捕捞量趋势` },
                      tooltip: { trigger: 'axis' },
                      xAxis: { type: 'category', data: data.years },
                      yAxis: { type: 'value', name: '捕捞量(吨)' },
                      series: [{ name: '捕捞量', type: 'line', data: data.catch_values }]
                  };
                  chart.setOption(option);
              });
  
          // 触发训练数据准备
          document.getElementById('prep-btn').addEventListener('click', () => {
              fetch('/api/prepare-training-data', { method: 'POST' })
                  .then(res => res.json())
                  .then(msg => alert(msg.msg));
          });
      </script>
  </body>
  </html>
  

• 可视化迁移建议：如果原有Python代码用Matplotlib/Seaborn生成静态图表，建议迁移到前端可视化库（交互性更强）；若需保留原有可视化，可将图表转为Base64编码后通过API返回给前端展示。

3. 本地运行与调试 #

• 激活虚拟环境：

  # Linux/Mac
  source venv/bin/activate
  # Windows
  venv\Scripts\activate
  

• 安装依赖：

  pip install flask flask-cors
  

• 启动Flask应用：

  # 设置环境变量（Linux/Mac）
  export FLASK_APP=app.py
  export FLASK_DEBUG=1
  # Windows
  set FLASK_APP=app.py
  set FLASK_DEBUG=1
  # 启动服务
  flask run
  

  访问http://localhost:5000即可查看页面并调试接口。

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