Flask集成Tradingview时如何存储CSV供Python与前端JS读取

我是编程新手，首次在Stack Overflow提问，若问题存在疏漏敬请谅解。
我正基于Python Flask搭建网站，计划集成Tradingview图表功能。我已编写承载Tradingview图表的HTML页面（包含相关JavaScript逻辑），通过Flask(Python)框架启动Web服务。
目前已完成Flask应用渲染HTML页面的基础配置，但运行时前端无法访问存储股票行情数据的CSV文件，导致图表无法正常加载。相关代码与报错信息如下：

Flask 代码 #

from flask import Flask, redirect, url_for, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html")

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

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="tvchart"></div>
</body>
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<script src="static/js/index.js"></script>
</html>

JavaScript 代码 #

const getData = async () => {
  const res = await fetch('static/js/data2.csv');
  const resp = await res.text();
  //   console.log(resp);
  const cdata = resp.split('\n').map((row) => {
    const [time1, time2, open, high, low, close] = row.split(',');
    return {
      time: new Date(`${time1}, ${time2}`).getTime() / 1000,
      open: open * 1,
      high: high * 1,
      low: low * 1,
      close: close * 1,
    };
  });
  return cdata;
  //   console.log(cdata);
};

// getData();

const displayChart = async () => {
  const chartProperties = {
    width: 1500,
    height: 600,
    timeScale: {
      timeVisible: true,
      secondsVisible: true,
    },
  };

  const domElement = document.getElementById('tvchart');
  const chart = LightweightCharts.createChart(domElement, chartProperties);
  const candleseries = chart.addCandlestickSeries();
  const klinedata = await getData();
  candleseries.setData(klinedata);
};

displayChart();

运行报错信息 #

* Serving Flask app "stockstarapp" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [26/Jun/2022 14:42:36] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [26/Jun/2022 14:42:37] "GET /data2.csv HTTP/1.1" 404 -

报错核心原因是静态资源路径解析错误，Flask默认从项目根目录下的static文件夹读取静态资源，当前JS里写的相对路径在页面加载时被解析成了根路径下的/data2.csv，没有匹配到正确的静态资源位置，所以返回404。
按下面两步修改即可：

• 调整项目目录结构，把CSV文件放到Flask可识别的静态资源路径下，标准目录结构参考：

  你的项目根目录/
  ├── app.py  # 你的Flask启动文件
  ├── templates/
  │   └── index.html
  └── static/
      └── js/
          ├── index.js
          └── data2.csv  # 确认CSV文件放在这个位置
  

• 修改JS中fetch请求的路径，把相对路径改成Flask识别的绝对静态路径，避免相对路径解析偏差：

  // 把原来的 fetch('static/js/data2.csv') 改成下面这行
  const res = await fetch('/static/js/data2.csv');
  

修改完成后重启Flask服务，前端就能正常读取到CSV数据加载图表了。

补充注意点：如果CSV文件存在表头行，解析的时候要跳过第一行，不然会把表头转成NaN导致图表渲染异常，可以在split后加slice处理：

const cdata = resp.split('\n').slice(1).map((row) => {
  // 原有解析逻辑不变
})

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