如何将 Flask API 端点连接到 React 应用程序

Question

我有一个在 Flask 上创建的 API，它有多个端点。我正在尝试使用来自这些端点的数据在我的前端显示一个向用户显示数据的图表。

以下是我的具体要求：

实施一种或多种类型的图表，可用于有效地可视化从 API 端点提供的数据。用户应该能够选择不同的指标来可视化并与其他人进行比较。

我的 Flask API：

import os
from flask import Flask, jsonify, session, request
import sqlalchemy
import time
from functools import wraps

# web app
app = Flask(__name__)
app.secret_key = 'super_secure_key_that_should_be_in_.env'

# database engine
engine = sqlalchemy.create_engine(os.getenv('SQL_URI'))

def rate_limit(**limit_kwargs):
    def decorator(function):
        @wraps(function)
        def wrapper(*args, **kwargs):
            limit = limit_kwargs['limit'] if 'limit' in limit_kwargs else 5
            seconds = limit_kwargs['window'] if 'window' in limit_kwargs else 60
            session_key = 'rate_limit_' + str(request.url_rule)
            if session_key not in session:
                session[session_key] = []

            window: list = session[session_key]
            if len(window) < limit:
                window.append(int(time.time()))
                session[session_key] = window
                return function(*args, **kwargs)

            if time.time() - window[0] < seconds:
                return jsonify(error='Rate limit exceeded'), 429

            window.pop(0)
            window.append(int(time.time()))
            session[session_key] = window
            return function(*args, **kwargs)
        return wrapper
    return decorator


@app.route('/')
@rate_limit()
def index():
    return 'Welcome ????'


@app.route('/events/hourly')
@rate_limit(limit=3, window=20)
def events_hourly():
    return queryHelper('''
        SELECT date, hour, events
        FROM public.hourly_events
        ORDER BY date, hour
        LIMIT 168;
    ''')


@app.route('/events/daily')
@rate_limit(limit=2)
def events_daily():
    return queryHelper('''
        SELECT date, SUM(events) AS events
        FROM public.hourly_events
        GROUP BY date
        ORDER BY date
        LIMIT 7;
    ''')


@app.route('/stats/hourly')
@rate_limit(limit=3, window=20)
def stats_hourly():
    return queryHelper('''
        SELECT date, hour, impressions, clicks, revenue
        FROM public.hourly_stats
        ORDER BY date, hour
        LIMIT 168;
    ''')


@app.route('/stats/daily')
@rate_limit(limit=2)
def stats_daily():
    return queryHelper('''
        SELECT date,
            SUM(impressions) AS impressions,
            SUM(clicks) AS clicks,
            SUM(revenue) AS revenue
        FROM public.hourly_stats
        GROUP BY date
        ORDER BY date
        LIMIT 7;
    ''')

@app.route('/poi')
@rate_limit(limit=3)
def poi():
    return queryHelper('''
        SELECT *
        FROM public.poi;
    ''')

def queryHelper(query):
    with engine.connect() as conn:
        result = conn.execute(query).fetchall()
        return jsonify([dict(row.items()) for row in result])

我的 React App.js：

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

import DailyEvents from "./Components/DailyEvents";

class App extends Component {
    render() {
        return (
            <div className="App">
                <header className= "App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title"> Welcome to React</h1>
                </header>
                <DailyEvents />
            </div>
        );
    }
}

export default App;

我的组件/DailyEvents.js：

import React, { Component } from 'react';
import axios from 'axios';


class App extends Component {
  state = {
    dates: []
  }
    componentDidMount() {
    axios.get('api_url_or_localhost/events/daily')
    .then(res => res.json())
    .then((data) => {
      this.setState({ dates: data })
    })
    .catch(console.log)
  }
}

export default App;

我不断收到一个 TypeError，即 instance.render 不是一个函数。

我想要做的是使用我的 Flask API 端点来可视化前端的数据。

Answer 1

尝试使用 axios ： https://alligator.io/react/axios-react/

它应该是这样的：

axios.get('put the query address')
      .then(response => {
        process your response
      })

Answer 2

您可以/应该对 Flask API 进行更改，还是该代码是需求的一部分？因为我很确定如果不先对它们进行序列化，您将无法直接从数据库中返回这些 Date 对象。

我建议你使用 Postman（或者只是一个浏览器，用于获取请求）在本地测试路由，基本上先看看数据。 React 可以使用 Axios 或 fetch 来获取这些数据并将其可视化。

import React, { Component } from 'react'

class App extends Component {
  state = {
    dates: []
  }      
    componentDidMount() {
    fetch('api_url_or_localhost/events/daily'))
    .then(res => res.json())
    .then((data) => {
      this.setState({ dates: data })
    })
    .catch(console.log)
  }
  ...
}

查看https://pusher.com/tutorials/consume-restful-api-react了解更多详情