Logo

菜单

发布于 2026-01-06 4 阅读
0

如何将 Flask 连接到 ReactJs

如何将 Flask 连接到 ReactJs

Flask使用框架和内置的Jinja模板构建 Web 应用程序固然很棒，但将后端与 React 前端（我相信我们都喜欢它 😉）连接起来更有意思。在本教程中，我们将引导您完成将后端连接到Flask前端所需的简单步骤React。

先决条件

1）对 Flask 框架有入门级的了解。如果您是新手，Flask可以查看我的文章，了解如何设置 Flask 项目并将其与Jinja模板引擎一起使用（链接在此）。

2) 熟悉基础知识ReactJs。您将使用useState钩子函数，并使用 API 获取数据axios。

我们开始吧。

项目目录

创建用于存储应用程序的项目目录，然后进入该目录。

mkdir project
Enter fullscreen mode Exit fullscreen mode 
cd project
Enter fullscreen mode Exit fullscreen mode

React 前端设置

运行以下命令创建前端 React 应用程序：

npx create-react-app flask_react
Enter fullscreen mode Exit fullscreen mode

进入flask_react目录

cd flask_react
Enter fullscreen mode Exit fullscreen mode

然后运行以下命令启动前端应用程序

npm start
Enter fullscreen mode Exit fullscreen mode

默认的 React 应用页面应该会在浏览器中弹出；如果没有弹出，请复制下面的链接并在浏览器中打开。

http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

react 默认

Flask后端搭建

在根目录中创建一个新目录

mkdir backend
Enter fullscreen mode Exit fullscreen mode

然后进入其中

cd backend
Enter fullscreen mode Exit fullscreen mode

如果你一直在关注我的Building a web application with Flask系列教程，你应该知道接下来需要创建什么。没错，是一个虚拟环境。你猜对了吗？😀

虚拟环境

建议在开始项目之前始终创建虚拟环境。这有助于将本应用程序中使用的软件包与其他应用程序隔离；您在此处所做的任何更改都不会影响系统上其他应用程序中的相同软件包。要在系统上创建虚拟环境，请运行以下命令：

For mac/unix users: python3 -m venv env
For windows users: py -m venv env
Enter fullscreen mode Exit fullscreen mode

创建环境后，运行以下命令激活它：

For mac/unix users: source env/bin/activate
For windows users: .\env\Scripts\activate
Enter fullscreen mode Exit fullscreen mode

安装 Flask

现在你的环境已经搭建完毕并运行，可以开始安装 Flask 了。

pip install flask
Enter fullscreen mode Exit fullscreen mode

下一步是将脚本注册到环境变量文件中。

pip install python-dotenv
Enter fullscreen mode Exit fullscreen mode

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

touch .flaskenv
Enter fullscreen mode Exit fullscreen mode

请注意，前面.这一点非常重要。如果您只将文件命名为 `.env` flaskenv，那么您在其中设置的任何环境变量都将无法被读取。

现在将环境变量添加到.flaskenv文件中：

FLASK_APP=base.py
FLASK_ENV=development
Enter fullscreen mode Exit fullscreen mode

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

export FLASK_APP=base.py如果不使用上述方法，则export FLASK_ENV=development每次重启终端窗口时，都需要继续使用 `exporting` 命令导出环境变量。

注：为了确保本文重点不偏离主题，我将简化 Flask 后端结构。如果您想构建更大的项目，则必须为您的应用程序创建更完善的文件夹结构。如果您需要学习如何为大型项目创建文件夹结构，可以查看我的文章《Flask 入门》和《使用 Flask 构建待办事项应用程序》。

基础.py

在与目标目录相同的目录base.py中创建一个新文件。backend.flaskenv

touch base.py
Enter fullscreen mode Exit fullscreen mode

您的文件夹结构目前应该如下所示👇 在脚本中创建一个简单的 API，该 API 返回您的姓名和个人信息：
文件夹结构
base.py

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
Enter fullscreen mode Exit fullscreen mode

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

您可能已经注意到两点：
i)GET这里没有指定 http 方法。这是因为viewFlask 中的函数默认只接受 GET 请求。ii
)response_body函数最后返回的字典并没有jsonify像这样作为参数传递给常用的函数jsonify(response_body)。这是因为 Flask 中的视图函数可以返回字典，Flask 会将其转换为 JSON 格式。

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

flask run
Enter fullscreen mode Exit fullscreen mode

然后访问该网址。您应该会看到以 JSON 格式呈现的http://127.0.0.1:5000/profile字典。response_body

flask-run-view

你也可以用postman这种方法来验证，结果是一样的。
postman-api-call

如果你想将代码推送到版本控制系统中，别忘了将你的文件env和__pycache__文件夹添加到gitignore根目录下的文件中。

backend/env
backend/__pycache__
Enter fullscreen mode Exit fullscreen mode

将 API 端点（/profile）连接到 React 前端

现在您可以返回到 React 前端所在的根目录。

cd ..
Enter fullscreen mode Exit fullscreen mode

安装axios库：

注意：您可以选择使用任一方式axios来fetch发送 HTTP 请求。但是，在本文中，我们axios将使用该库向您之前构建的 API 端点发送请求。

npm install axios
Enter fullscreen mode Exit fullscreen mode

package.json

打开 package.json 文件，并在“private”: true 行下方添加代理，使其最终如下所示👇。

  "name": "flask_react",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000", //newline
Enter fullscreen mode Exit fullscreen mode

这样，您在发出 API 请求时就可以使用相对路径。http://localhost:5000/profile您可以直接使用相对路径，而无需使用 ` /profile.`。

注意：通常用于在浏览器中访问 Flask 应用的默认 URL 是 `/usr/local/flask/`，http://127.0.0.1:5000但上面已将其用作代理键的值。请不要混淆，它们指的是同一个 URL。您可以在这里http://localhost:5000阅读更多相关信息。

先别关package.json文件。你还可以添加一些很棒的功能。你知道，每次 React 服务器启动后，如果你修改了文件并保存，服务器都会重启，以便新的更改能够生效，对吧？你也可以把这个功能添加到你的 Flask 后端应用中。这就是 React 与 Flask 连接的另一个优势😎。

在该scripts部分下方添加另一个键和值。
"start-backend": "cd backend && env/bin/flask run --no-debugger",最终效果如下👇

  "scripts": {
    "start": "react-scripts start",
    "start-backend": "cd backend && env/bin/flask run --no-debugger", //new line
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
Enter fullscreen mode Exit fullscreen mode

现在你可以使用以下命令启动后端服务器npm run start-backend。该命令会执行 package.json 文件中指定的参数值。它会导航到env你的backend项目目录并执行该flask run命令。

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

app.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;
Enter fullscreen mode Exit fullscreen mode

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

文件顶部useState同时导入了 hook 和 axios 模块。

然后，在名为 useState 的函数内部App，使用 hook 来控制变量的状态profileData。

该getData函数处理 API 调用。它包含一个axios模块，该模块用于GET向后端 API 端点（\profile）发送请求，后端会以jsonified视图函数中声明的字典格式返回结果。

接下来，该函数通过将 json 响应中的数据分配给和 来setProfileData更新状态。profileDataprofile_nameabout_me

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

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

TypeError: Cannot read properties of null (reading 'profile_name')
Enter fullscreen mode Exit fullscreen mode

因此需要条件运算符，以便应用程序仅在值从 API 调用更改为包含时才知道and代码&&的存在。profileData.profile_nameprofileData.about_meprofileDatanullresponse data

您无需修改​​根目录中的任何其他文件。应用程序前端部分的工作现已完成。现在您可以开始测试了：

步骤1：启动后端服务器。请npm run start-backend
注意，此命令可以在任何目录中运行；无论是根目录（flask_react）还是flask目录（backend）。

步骤2：启动你的React服务器npm start

flask-react-project

现在点击按钮click me发起 API 调用，从后端获取数据name。about_me
调用 API 获取姓名和个人信息数据

瞧！你已经成功将 Flask 后端连接到 React 前端。现在，我相信你可以在 Flask 后端构建一些简单的 API 接口，并从 React 前端调用这些接口。

如果您有任何疑问，请随时在评论区留言，或者通过LinkedIn或Twitter给我发消息，我会尽快回复。

如果你也Django喜欢 Django，那你肯定也想把它连接起来React。你可以看看我写的关于如何将 Django 连接到 ReactJs 的文章，了解具体操作方法。再见 👋

卡特曼

文章来源：https://dev.to/nagatodev/how-to-connect-flask-to-reactjs-1k8i
使用 TypeScript、io-...
使用 Docker 搭建一个优秀的...