如何将 ReactJS 与烧瓶 API 连接起来？

反应 是构建前端单页应用程序的最佳前端库之一。它由 Facebook 和一个大型社区开发和维护。

烧瓶 是一个用Python编写的用于快速开发过程的后端微框架。它以其简单和独立而闻名。它不需要任何外部库来工作，这使得它对初学者很友好，很多人选择了这个框架。 Flask 通常用于构建 REST API。要了解有关如何在烧瓶中构建 REST API 的更多信息，请参阅本文。

在本文中，我们将学习如何将烧瓶 API 与 Reactjs 连接以在网页上显示数据。

设置项目：确保创建 2 个单独的文件夹以便清晰理解，一个用于烧瓶后端，一个用于反应前端。项目结构应如下所示

第 1 步：设置烧瓶服务器

使用以下命令创建一个名为backend的文件夹和文件server.js ：

mkdir backend
cd backend
touch server.py

构建一个基本的烧瓶服务器。在server.py文件中写下以下代码。

server.py

# Import flask and datetime module for showing date and time
from flask import Flask
import datetime
  
x = datetime.datetime.now()
  
# Initializing flask app
app = Flask(__name__)
  
  
# Route for seeing a data
@app.route('/data')
def get_time():
  
    # Returning an api for showing in  reactjs
    return {
        'Name':"geek", 
        "Age":"22",
        "Date":x, 
        "programming":"python"
        }
  
      
# Running app
if __name__ == '__main__':
    app.run(debug=True)

运行应用程序的步骤：使用以下命令运行服务器：

python server.py

输出：

第 2 步：设置 Reactjs 项目

使用以下命令创建一个反应项目：

yarn create react-project frontend // OR
npx create-react-app frontend

移动 创建应用程序后，使用以下命令移动到应用程序：

cd frontend

之后打开package.json并添加代理。

"proxy":"http://localhost:5000/"

现在，我们在 react package.json 文件中提供代理，因为我们需要访问烧瓶 URL 才能从我们的 react 应用程序中获取 API。一般来说，代理的作用是，当我们向为反应前端提供服务的 javascript Web 服务器请求时，将自动重定向到代理密钥。在这种情况下，它将是我们的烧瓶服务器。

第 3 步：获取 API

为了获取 API useState 和 useEffect 钩子用于反应应用程序。

• useState：用于从 API 设置数据并提供到 jsx 中以显示数据。
• useEffect：用于在一次重新加载时呈现 fetch 方法。

应用程序.js

// Importing modules
import React, { useState, useEffect } from "react";
import "./App.css";
  
function App() {
    // usestate for setting a javascript
    // object for storing and using data
    const [data, setdata] = useState({
        name: "",
        age: 0,
        date: "",
        programming: "",
    });
  
    // Using useEffect for single rendering
    useEffect(() => {
        // Using fetch to fetch the api from 
        // flask server it will be redirected to proxy
        fetch("/data").then((res) =>
            res.json().then((data) => {
                // Setting a data from api
                setdata({
                    name: data.Name,
                    age: data.Age,
                    date: data.Date,
                    programming: data.programming,
                });
            })
        );
    }, []);
  
    return (
        

            

                
React and flask
                {/* Calling a data from setdata for showing */}
                
{data.name}
                
{data.age}
                
{data.date}
                
{data.programming}
  
            
        
    );
}
  
export default App;

运行应用程序的步骤：使用以下命令运行服务器：

npm start // OR
yarn start

输出：