Как подключить Flask конечные точки API к приложению React - PullRequest
Новая
       41

Как подключить Flask конечные точки API к приложению React

0 голосов
/ 20 февраля 2020

У меня есть API, созданный на Flask, который имеет несколько конечных точек. Я пытаюсь использовать данные из этих конечных точек для отображения диаграммы на моем внешнем интерфейсе, которая показывает данные для пользователя.

Ниже приведены мои точные требования:

Реализация одного или нескольких типов диаграмм, которые можно использовать для эффективной визуализации данных, предоставляемых с конечных точек API. Пользователи должны иметь возможность выбирать различные метрики для визуализации и сравнения с другими.

My 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])

My 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 не является функцией.

Я пытаюсь использовать мои конечные точки API Flask для визуализации данных во внешнем интерфейсе.

Ответы [ 2 ]

0 голосов
/ 20 февраля 2020

Можно / следует ли внести изменения в Flask API, или этот код является частью требований? Потому что я почти уверен, что вы не сможете вернуть эти объекты Date прямо из БД без предварительной их сериализации.

Я предлагаю вам использовать Postman (или просто браузер для получения запросов) для тестирования маршруты в местном масштабе и в основном взглянуть на данные в первую очередь. React может использовать Ax ios или получить эти данные и визуализировать их. 

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 для получения более подробной информации

0 голосов
/ 20 февраля 2020

попробуйте использовать топор ios: https://alligator.io/react/axios-react/

это должно выглядеть так: 

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