Logo

菜单

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

Flask React - 从零基础到全栈开发（附示例）

Flask React - 从零基础到全栈开发（附示例）

本文将介绍如何使用Flask 和 React构建可扩展、可用于生产环境的项目。对于新手来说，Flask是一个流行的 Python 框架，用于提供所有后端功能，例如身份验证、数据库接口和用户管理。在这种架构中，React负责处理用户界面，并通过安全请求与 Flask 进行通信，从而与后端解耦。为了使本文更具实用性，文中将提及一些开源项目，这些项目均可从 GitHub 下载，并遵循 MIT 许可证。

感谢阅读！ - 内容由App Generator提供。

  • 第一部分——项目概览
  • 第二部分- 要求：环境、库和工具
  • 第三部分- 什么是烧瓶
  • 第四部分- 什么是 React
  • 第五部分- 设置 Flask 后端
  • 第 6 节- 使用 POSTMAN 测试 Flask API
  • 第 7 节- 编写 React UI 代码以与 Flask 通信
  • 第 8 部分- 编译示例（后端和前端）

注意：所有资源均可从 GitHub 下载。React 控制面板已配置为与简单的 Flask API 服务器配合使用。

1# - 项目概述

全栈项目可以采用多种结构和模式。下面我仅介绍两种（流行的）模式：

后端 + SPA（单页应用）——在这种配置中，Flask 后端采用传统的 MVC 模式构建，后端负责提供文件服务，而 React 应用则负责与用户交互。这种模型曾经非常流行，但由于技术混杂且有时难以扩展，后来逐渐被弃用。

两层架构——这种模式在功能和物理上将 React UI 与 Flask 后端分离，并通过服务器端暴露的 API 构建通信桥梁。与之前的方案相比，这种设计具有以下几个优点：

  • UI 和后端可以作为独立的实体进行开发和测试。
  • 部署更便捷。
  • 如有需要，用户界面可以使用模拟 API 后端。

本文将重点介绍第二种模式，即“两层”架构，其中 Flask API 与 React UI 解耦。以下是其流程简述：

  • Flask服务器启动，API 暴露
  • React UI 由用户浏览器加载
  • React发起登录，获取用户提供的凭据
  • React将用户凭据发送到 API 服务器
  • Flask API 会检查凭据并生成 JWT 令牌。
  • React UI 会保存用户信息和 JET Token。
  • 用户只有在触发注销操作后才能访问私有区域。

2# - 项目要求

为了成功构建我们的全栈项目，一些工具和库应该已经安装好，并且可以在终端中访问。

  • Git——命令行版本控制工具
  • Python3 ——Flask 的底层语言
  • Node.js——用于将 React 的魔力引入我们的世界。
  • Yarn - 用于安装 Node.js 包
  • 像VS Code或Atom这样的现代代码编辑器。
  • 能够操作终端并编写系统命令
  • PIP（由 Python 3 提供）——用于安装 Python 包

3# -什么是烧瓶

Flask 是一个流行的 Python 框架，旨在让项目快速轻松地启动，并能够扩展到复杂的应用程序。Flask 可用于编写从简单的单页网站到 API 和复杂的电子商务解决方案的各种代码。

Flask - 开源 Python 框架。

使用 Flask，开发者可以自由地构建代码库，不受任何限制，并且只需安装真正需要的库。安装 Flask 最简单的方法是使用 PIP，它是 Python 自带的官方包管理器。

$ pip install Flask
Enter fullscreen mode Exit fullscreen mode

安装过程中，还会安装一组基本的核心依赖项：

  • Werkzeug实现了 WSGI，这是应用程序和服务器之间的标准 Python 接口。
  • Jinja是一种模板语言，用于渲染应用程序提供的页面。
  • MarkupSafe是 Jinja 的内置功能。它会在渲染模板时对不受信任的输入进行转义，以防止注入攻击。
  • ItsDangerous会对数据进行安全签名，以确保其完整性。这用于保护 Flask 的会话 cookie。
  • Click是一个用于编写命令行应用程序的框架。它提供了 flask 命令，并允许添加自定义管理命令。

安装完成后，我们就可以打开编辑器，用几行代码编写我们的第一个 Flask 应用了：

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, from Flask!'
Enter fullscreen mode Exit fullscreen mode

4# -什么是 React

2021年的统计数据显示，React已成为前端开发的主要技术，超越了Vue、Angular和Svelte等其他框架。React由Facebook积极维护和版本更新，并被众多大型企业、开发者和开源爱好者广泛采用。

React - UI 库。

React 可以通过 CDN 导入用于现有项目，也可以使用 CRA（create-react-app）命令行工具创建新项目。在我们的示例中，我们将使用一个开源模板，其中身份验证代码是添加到最初使用 CRA 工具创建的现有项目之上的。有关 React 的更多基础资源，请访问：

5# - 编写 Flask API 后端代码

Flask 非常适合快速启动并在短时间内编写出功能性代码的情况。我们的后端服务器需要提供一个简单的身份验证服务，JWT web tokens该服务公开一些基本方法：

  • /api/users/register创建新用户
  • /api/users/login验证现有用户
  • /api/users/logout删除关联的 JWT 令牌
  • /api/users/edit- 编辑与注册用户关联的信息

考虑到这些 API 要求，还需要明确其他一些方面：数据库类型、使用的 REST 和 JWT 库，当然还有项目结构。为了方便起见，我们将选择 SQLite 持久化，并预留了随时升级和迁移到更强大的数据库管理系统（例如 MySQL 和 PostgreSQL）的空间。

Flask API 依赖项

  • flask-restx用于编写 API 节点代码
  • Flask-JWT-Extended- 处理 JWT 令牌管理
  • Flask-SQLAlchemy- 数据库的抽象接口

代码库将采用应用工厂模式，其中 API 功能被隔离在单独的文件夹中，并像 Python 包一样构建。一种可能的代码库结构如下所示：

api-server-flask/
├── api
|   ├── __init__.py
│   ├── config.py      # configuration variables 
│   ├── models.py      # defines the tables
│   └── routes.py      # implements API routes
| 
├── requirements.txt   # project dependencies
├── run.py             # project bootstrapper
Enter fullscreen mode Exit fullscreen mode

接下来我们来编写路由代码，这是我们 API 服务器最重要的部分。以下是最关键的代码：

Routes.py - API 导入

# Imports
from flask_restx import Api, Resource, fields
import jwt
from .models import db, Users
Enter fullscreen mode Exit fullscreen mode

Routes.py - API 对象

...
rest_api = Api(version="1.0", title="Users API")
...
Enter fullscreen mode Exit fullscreen mode

Routes.py - 定义验证（注册示例）

signup_model = rest_api.model('SignUpModel', {"username": fields.String(required=True, min_length=2, max_length=32),
                                              "email": fields.String(required=True, min_length=4, max_length=64),
                                              "password": fields.String(required=True, min_length=4, max_length=16)
                                              })
Enter fullscreen mode Exit fullscreen mode

Routes.py - 编写注册 API 处理程序

...
@rest_api.route('/api/users/register')
class Register(Resource):
    """
       Creates a new user by taking 'signup_model' input
    """

    @rest_api.expect(signup_model, validate=True)
    def post(self):

        req_data = request.get_json()

        _username = req_data.get("username")
        _email    = req_data.get("email")
        _password = req_data.get("password")

        user_exists = Users.get_by_email(_email)
        if user_exists:
            return {"success": False,
                    "msg": "Email already taken"}, 400

        new_user = Users(username=_username, email=_email)

        new_user.set_password(_password)
        new_user.save()

        return {"success": True,
                "userID": new_user.id,
                "msg": "The user was successfully registered"}, 200
Enter fullscreen mode Exit fullscreen mode

上述代码片段（验证、操作处理程序）应针对 API 公开的所有方法重复执行。

Flask API - 项目资源

6# - 使用 POSTMAN 测试 Flask API

API 启动并运行后，我们可以使用Postman（一款流行的免费工具）来测试后端代码。我们假设 Flask API 服务器已在 5000 端口启动，并且注册方法已完全编写并可正常运行。

Postman - 创建新集合并发送包含属性的请求

  • 请求：POST 超过http://localhost:5000/api/users/register
  • 头部内容类型：application-json
  • 主体数据：用户名/密码和电子邮件

Flask API POSTMAN - 注册标头

正文内容指定新用户的凭据。

Flask API POSTMAN - 注册正文

注册API 响应

Flask API POSTMAN - 注册响应。

至此，用户已在数据库中创建，我们可以进行身份​​验证并继续进行我们的全栈项目。

7# - 编写 React UI

本教程的 React 部分基于从 Github 克隆的开源项目React Datta Able编写，这是一个由 CodedThemes 提供的非常漂亮且色彩丰富的 React 控制面板。

初始项目基本上是一个 React 模板，我们将通过添加一些简单的功能来改进它：

  • 可用且与 Flask API 兼容的身份验证流程
  • 操作：登录、注销和注册
  • 访客用户将被重定向到登录页面。
  • 私有页面仅对已认证用户可见。

这款产品设计精美，而且许可协议宽松，可用于业余爱好和商业用途。让我们下载这个 React 模板，然后添加必要的代码来实现所有功能。

React Datta Able - 从公共仓库克隆模板源代码

$ git clone https://github.com/codedthemes/datta-able-free-react-admin-template.git
$ cd datta-able-free-react-admin-template/template
Enter fullscreen mode Exit fullscreen mode

安装依赖项- 通过 NPM 或 Yarn

$ npm i
// OR
$ yarn
Enter fullscreen mode Exit fullscreen mode

React Datta Able - 以开发模式启动项目

$ npm run start
// OR
$ npm start
Enter fullscreen mode Exit fullscreen mode

React Datta Able - 免费仪表盘模板

为了实现新功能，需要更新项目依赖项，添加一些有用的库：

  • Formik——用于增强和管理注册表单
  • Axios - 用于管理与 Flask API 的通信

新依赖项安装完毕后，我们就可以继续编写代码了。

项目配置- 后端 API 的 URL

该应用程序将使用一组在不同位置（例如登录、注销等）导入的通用变量。为了简化操作，最好将所有变量定义在一个文件中src/config/constant.js：

export const BASENAME = ''; // don't add '/' at end off BASENAME
export const BASE_URL = '/app/dashboard/default';
export const BASE_TITLE = ' | React Datta Able ';
export const API_SERVER = 'http://localhost:5000/api/';
Enter fullscreen mode Exit fullscreen mode

最重要的值保存在API_SERVER变量中，它本质上是我们的 Flask API 地址。当项目上线时，这个地址需要相应地更新为公共 API 的地址。

创建访客守卫组件

此组件负责检测当前用户是否已通过身份验证。访客用户将被重定向到登录页面，已通过身份验证的用户可以访问所有私有页面。

import React from 'react';
import { Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { BASE_URL } from '../../config/constant';

const GuestGuard = ({ children }) => {
    const account = useSelector((state) => state.account);
    const { isLoggedIn } = account;

    if (isLoggedIn) {
        return <Redirect to={BASE_URL} />;
    }

    return <React.Fragment>{children}</React.Fragment>;
};

export default GuestGuard;
Enter fullscreen mode Exit fullscreen mode

创建一个用于管理用户状态的Redux store

React 应用应该能够根据与当前用户相关的信息做出决策。它redux-store使用几个变量和对象以简单的方式提供这些信息：

export const initialState = {
    token: '',
    isLoggedIn: false,
    isInitialized: false,
    user: null
};

const accountReducer = (state = initialState, action) => {
    switch (action.type) {
        case ACCOUNT_INITIALIZE: {
            const { isLoggedIn, user, token } = action.payload;
            return {
                ...state,
                isLoggedIn,
                isInitialized: true,
                token,
                user
            };
        }
        case LOGIN: {
            const { user } = action.payload;
            return {
                ...state,
                isLoggedIn: true,
                user
            };
        }
        case LOGOUT: {
            return {
                ...state,
                isLoggedIn: false,
                token: '',
                user: null
            };
        }
        default: {
            return { ...state };
        }
    }
};
Enter fullscreen mode Exit fullscreen mode

应根据会话中执行的操作更新与当前用户关联的变量：

  • 访客访问权限：会话用户为空，isLoggedIn状态为 false
  • 登录：用户已成功通过后端身份验证。当然，isLoggedIn状态变为 true。
  • 注销：所有会话数据将被删除，并isLoggedIn再次变为 false。

此时，可以使用 React UI 来注册和验证用户身份。

8# - 整理免费样品

以上所有代码均已在Github上以两个独立项目的形式提供：

编译并启动 Flask API 服务器

步骤一：克隆源代码

$ git clone https://github.com/app-generator/api-server-flask.git
$ cd api-server-flask
Enter fullscreen mode Exit fullscreen mode

步骤 2 - 使用虚拟环境安装依赖项

$ virtualenv env
$ source env/bin/activate
$
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

步骤 3 - 设置环境

$ export FLASK_APP=run.py
$ export FLASK_ENV=development
Enter fullscreen mode Exit fullscreen mode

步骤 4 - 创建 SQLite 数据库和表

$ flask shell
>>> from api import db
>>> db.create_all()
Enter fullscreen mode Exit fullscreen mode

步骤 5 - 启动 API 服务器

$ flask run
// the API server runs on http://localhost:5000
Enter fullscreen mode Exit fullscreen mode

此时，我们的API服务器应该已经启动并运行了。

编译并启动React UI

步骤一：克隆源代码

$ git clone https://github.com/app-generator/react-datta-able-dashboard.git
$ cd react-datta-able-dashboard
Enter fullscreen mode Exit fullscreen mode

步骤 2 - 安装依赖项

$ npm i
// OR
$ yarn
Enter fullscreen mode Exit fullscreen mode

步骤 3 - 启动开发模式

$ npm run start
// OR
$ yarn start
// the React UI runs on http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

浏览器应显示登录页面，我们可以注册新用户并进行身份验证。

Flask React Datta Able - 登录页面。

Flask React Datta Able - 仪表盘。

感谢阅读！如需更多资源和支持，请访问：

文章来源：https://dev.to/sm0ke/flask-react-from-zero-to-full-stack-with-samples-4aj4
我如何将语音 AI 演示变成真正的...
10 个下载量数百万却毫无用处的 ...