使用Flask框架和内置的jinja模板构建 Web 应用程序很酷,但是将您的后端连接到反应前端(我相信我们都喜欢😉)更有趣。在本教程中,您将完成将Flask后端连接到React前端所需的简单步骤。

先决条件

1)对flask框架的初级理解。如果您是Flask的新手,您可以查看我的文章,了解如何设置您的烧瓶项目并将其与jinja模板引擎在这里一起使用。

2)熟悉ReactJs的基础知识。您将使用useState挂钩并使用axios从 API 获取数据。

让我们开始吧!!

项目目录

创建将存储您的应用程序的项目目录,然后导航到该目录。

mkdir project

cd project

React 前端设置

通过运行创建前端反应应用程序:

npx create-react-app flask_react

移入flask_react目录

cd flask_react

然后通过运行启动前端应用程序

npm start

默认的反应应用程序页面应该会在您的浏览器中弹出;如果没有,请复制并在浏览器中打开以下链接。

http://localhost:3000

Flask 后端设置

在基本目录中创建一个新目录

mkdir backend

然后导航到它

cd backend

如果您一直在关注我的Building a web application with Flask系列,您应该知道接下来需要创建的内容。是的,虚拟环境。你碰巧做对了吗? 😀

虚拟环境

建议在开始项目之前始终创建一个虚拟环境。这有助于您将在此应用程序中使用的包与其他应用程序分开;您在此处所做的任何更改都不会影响系统上另一个应用程序中的相同包。在您的系统上创建虚拟环境;运行这个命令:

For mac/unix users: python3 -m venv env
For windows users: py -m venv env

创建环境后,通过运行激活它:

For mac/unix users: source env/bin/activate
For windows users: .\env\Scripts\activate

安装烧瓶

现在您的环境已启动并运行,您可以继续安装 Flask

pip install flask

接下来是在环境文件中注册脚本。

pip install python-dotenv

安装成功后,在上面创建的backend目录下创建.flaskenv文件。

touch .flaskenv

请注意前面的.很重要。如果您将文件命名为flaskenv,则不会读取您放入其中的任何环境变量。

现在将您的环境变量放入.flaskenv文件中:

FLASK_APP=base.py
FLASK_ENV=development

应用程序环境设置为开发模式,因此您可以轻松地调试您的应用程序,并且将在下一节中创建将包含您的烧瓶应用程序的base.py文件。

如果不使用上述方法,则无论何时重新启动终端窗口,都需要继续使用export FLASK_APP=base.py和export FLASK_ENV=development导出环境变量。

注意: 为确保本文的重点不偏离,我将简化烧瓶后端结构。如果您想构建更大的项目,您肯定必须为您的应用程序创建更好的文件夹结构。如果您需要学习如何为大型项目创建文件夹结构,可以查看我关于[Flask 入门(https://nagatodev.hashnode.dev/getting-started-with-flask)(https://nagatodev.hashnode.dev/getting-started-with-flask)和使用 Flask 构建 Todo 列表应用程序的文章。

基础py脚本

在.flaskenv目录所在的backend目录下新建文件base.py。

touch base.py

您的文件夹结构目前应该看起来像👇

在base.py脚本中创建一个简单的 API,返回您的姓名和有关您的信息:

from flask import Flask

api = Flask(__name__)

@api.route('/profile')
def my_profile():
    response_body = {
        "name": "Nagato",
        "about" :"Hello! I'm a full stack developer that loves python and javascript"
    }

    return response_body

上面的代码包含一个简单的 API,react 前端会调用它来获取response_body字典。

您可能已经注意到两件事:i) 此处未指定GEThttp 方法。这是因为默认情况下,flask 中的view函数只接受 GET 请求。 ii) 在函数末尾返回的response_body字典没有作为参数传递给流行的jsonify函数,例如jsonify(response_body)。这是因为 Flask 中的视图函数可以返回一个字典,然后 Flask 将其转换为 JSON 格式。

后端已成功设置,您可以通过运行应用程序进行测试。

flask run

然后导航到 urlhttp://127.0.0.1:5000/profile。您应该会看到以 JSON 格式呈现的字典response_body。

您也可以使用postman来确认这一点,您仍然会得到相同的结果。

如果您想将代码推送到源代码管理。不要忘记将您的env和__pycache__文件夹添加到基本目录中的gitignore文件中。

backend/env
backend/__pycache__

将 API 端点(/profile)连接到 react 前端

现在您可以返回到 react 前端所在的基本目录。

cd ..

安装axios库:

npm install axios

包json

打开 package.json 文件并在 "private": true, 行下面添加代理,这样它就会像👇一样结束。

  "name": "flask_react",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000", //newline

通过这样做,您将能够在发出 API 请求时使用相对路径。您可以简单地使用/profile,而不是使用http://localhost:5000/profile。

注意: 通常用于在浏览器中访问烧瓶应用程序的默认 url 是http://127.0.0.1:5000,但上面使用http://localhost:5000作为代理键的值。不要混淆,它们都是一样的。您可以在此处阅读有关的更多信息

暂时不要关闭package.json文件。您还可以添加一些很酷的东西。您知道,每当您的反应服务器启动并且您对文件进行任何更改并保存它时,服务器都会重新启动,以便新的更改可以反映对吗?您还可以将该功能添加到您的烧瓶后端应用程序中。这是将 react 连接到烧瓶的另一个优点😎。

在scripts部分下添加另一个键和值。"start-backend": "cd backend && env/bin/flask run --no-debugger",

现在您可以使用npm run start-backend启动您的后端服务器。这将执行在 package.json 文件中作为其值传递的命令。它导航到您的backend目录中的env目录并执行flask run命令。

此处还传递了--no-debugger选项以禁用基于浏览器的调试器,因为 Flask 后端仅用作保存 API 端点的服务器。

应用js文件

在这里,您将调用 Flask 后端服务器中的 API 端点。更改后,app.js 文件看起来就像👇

import { useState } from 'react'
import axios from "axios";
import logo from './logo.svg';
import './App.css';

function App() {

   // new line start
  const [profileData, setProfileData] = useState(null)

  function getData() {
    axios({
      method: "GET",
      url:"/profile",
    })
    .then((response) => {
      const res =response.data
      setProfileData(({
        profile_name: res.name,
        about_me: res.about}))
    }).catch((error) => {
      if (error.response) {
        console.log(error.response)
        console.log(error.response.status)
        console.log(error.response.headers)
        }
    })}
    //end of new line 

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

        {/* new line start*/}
        <p>To get your profile details: </p><button onClick={getData}>Click me</button>
        {profileData && <div>
              <p>Profile name: {profileData.profile_name}</p>
              <p>About me: {profileData.about_me}</p>
            </div>
        }
         {/* end of new line */}
      </header>
    </div>
  );
}

export default App;

现在让我们看一下添加到 app.js 文件中的新代码行。

在文件的顶部,useState钩子和 axios 模块都被导入。

然后在名为App的函数内部,useState 挂钩用于控制profileData变量的状态。

getData函数处理 API 调用。它包含axios模块,用于向后端的 API 端点(\profile)发送GET请求,该请求以视图函数中声明的字典的jsonified格式进行响应。

接下来,setProfileData函数通过将json响应中的数据分配给profile_name和about_me来更新profileData的状态。

getData函数仅在按下click me按钮时调用。

最后&&用作条件运算符,以避免出错。profileData将在应用程序首次加载时被分配一个初始null状态,因此如果您尝试访问profileData.profile_name或profileData.about_me您会收到一条错误消息。

TypeError: Cannot read properties of null (reading 'profile_name')

因此需要&&条件运算符,以便应用程序只有在profileData的值从null更改为包含来自 API 调用的response data时才知道profileData.profile_name和profileData.about_me代码的存在。

您无需更改基本目录中的任何其他文件。应用程序前端部分的工作现已完成。现在您可以继续测试它:

Step1:使用npm run start-backend启动你的后端服务器注意这个命令可以在任何目录下运行;无论是基本目录(flask_react)还是烧瓶目录(后端)

第二步:使用npm start启动你的反应服务器

现在点击click me按钮进行 API 调用并从后端获取name和about_me数据。

瞧!!你已经成功地将你的烧瓶后端连接到你的反应前端。现在我确信您可以在您的烧瓶后端构建小型 API 端点并从您的反应前端调用端点。

如果您有任何问题,请随时将它们作为评论发表或在Linkedin或Twitter上给我发送消息,我会确保尽快回复。

如果您是Django的爱好者,您肯定也希望将其连接到React。你可以查看我关于如何将 Django 连接到 ReactJs的文章以了解如何去做。咻👋