Vue.js 无法渲染 Flask 后端返回数据对应 HTML 页面的问题咨询

问题原因 #

你当前的问题核心是路由功能混淆：原代码中根路由/仅负责返回JSON格式的图表数据，自然不会渲染前端页面；你修改后直接将数据返回逻辑和页面渲染逻辑揉在同一个路由中，又错误地将jsonify()返回的响应对象直接传入模板，导致前端发起请求时无法拿到正确的JSON格式数据，因此读不到labels和datasets的值。

正确实现步骤 #

1. 调整项目目录结构

Flask默认会从根目录下的templates文件夹读取模板文件，先按如下结构整理文件：

项目根目录/
├── app.py # Flask后端启动文件
├── test_data.csv # 生成的测试数据集
└── templates/
    └── index.html # 你的前端HTML代码

2. 修改后端路由，拆分页面接口和数据接口

修改Flask代码，拆分两个独立路由分别处理页面返回和数据查询：

from flask import Flask, request, jsonify, render_template
from flask_cors import CORS
import pandas as pd

app = Flask(__name__)
CORS(app)

# 根路由专门负责返回前端HTML页面
@app.route('/')
def index():
    return render_template('index.html')

# 新增独立接口专门返回图表数据
@app.route('/api/chart-data')
def get_chart_data():
    offset = request.args.get('offset', default = 1, type = int)
    limit = request.args.get('limit', default = 1, type = int)
    df = pd.read_csv('test_data.csv', skiprows=range(1, offset+1), nrows=limit, parse_dates=['X'])

    cols = [col for col in df.columns if col.startswith('Y')]

    configs = {
        'Y1': {'color': '#483D8B', 'col_name': 'name_Y1'},
        'Y2': {'color': '#f87979', 'col_name': 'name_Y2'},
        'Y3': {'color': '#00BFFF', 'col_name': 'name_Y3'},
    }

    datasets = []
    for k, c in enumerate(cols):
        datasets.append({
            'label': configs[c]['col_name'],
            'borderColor': configs[c]['color'],
            'backgroundColor': configs[c]['color'],
            'borderWidth': 2,
            'pointBorderColor': '#000000',
            'lineTension': k*0.23,
            'pointRadius': 2,
            'pointBorderWidth': 1,
            'fill': False,
            'data': df[c].tolist()
        })

    chart = {
        'labels': df['X'].dt.strftime('%H:%M:%S').tolist(),
        'datasets': datasets
    }

    return jsonify({'chart_data': chart})

app.run()

3. 修改前端请求地址

找到Vue代码中的数据请求行，将请求地址修改为新增的数据接口：

// 原来的代码
Vue.http.get('http://127.0.0.1:5000/?limit=' +limit+ '&offset=' +offset)
// 修改为
Vue.http.get('/api/chart-data?limit=' +limit+ '&offset=' +offset)

验证操作 #

启动Flask服务后直接访问http://127.0.0.1:5000即可加载前端页面，页面加载完成后会自动拉取数据渲染实时图表。

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