【Flask+React】 - 从零到全栈的详细开发教程

方石剑
8,057 阅读3分钟

本文介绍了如何使用**Flask和React**来编码可扩展的、可用于生产的项目。对于新手来说，Flask是一个流行的Python框架，用于提供所有的后端功能，如认证、数据库接口和用户管理。在这个架构中，React处理用户界面，并使用安全请求与Flask进行通信，与后端脱钩。为了使这篇文章更加有用，我们将提到一些开源项目，可以在MIT许可下从Github下载。

谢谢你的阅读!- 内容由**App Generator**提供。

  • 第1节- 项目的概况
  • 第2节 - 要求：环境、库和工具
  • 第3节 - 什么是Flask
  • 第4节 - 什么是React
  • 第5节 - 设置Flask后端
  • 第6节 - 使用POSTMAN测试Flask的API
  • 第7节--编写React UI与Flask通信的代码
  • 第8节- 编译样本（后端和前端）。

注意：所有资源都可以从Github下载。React仪表盘被配置为与一个简单的Flask API服务器一起工作。

1# - 项目概述

全栈项目的结构可以有很多方式和模式。我将在下面只提到两种（流行的）模式。

后台+SPA（单页应用）--在这种配置中，Flask后台使用老式的MVC模式构建，文件从后台提供，React应用将提供与用户的交互。这种模式曾经非常流行，但在某种程度上被放弃了，因为这些技术是混合的，有时很难扩展。

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

  • UI和后端可以作为独立的实体进行开发和测试
  • 更容易部署。
  • 如果需要，UI可以使用模拟的API后端。

本文将重点介绍第二种模式，即 "两层 "架构，其中Flask API与React UI是解耦的。以下是几句话的流程。

  • Flask服务器启动，API被暴露
  • 用户浏览器加载ReactUI
  • React发起登录，获得用户提供的凭证
  • React向API服务器发送用户凭证
  • FlaskAPI检查凭证并生成JWT令牌
  • ReactUI保存用户信息和JET Token
  • 允许访问私人区域，直到用户触发注销。

2# - 项目要求

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

  • GIT- 命令行版本管理工具
  • Python3--支持Flask的语言
  • Node JS- 用于将React的魔力引入我们的世界
  • Yarn- 用于安装Node JS包
  • 一个现代的代码编辑器，如**VsCode或Atom**
  • 能够在终端工作并编写系统命令
  • PIP（由Python3提供）--用于安装Python包

3# - 什么是Flask

Flask是一个流行的Python框架，旨在使一个项目快速而简单，并能够扩展到复杂的应用程序。Flask可以用来编写从简单的单页网站到API和复杂的电子商务解决方案。

Flask - Open-source Python Framework.

使用Flask，开发者可以自由地构建代码库，不受限制，也可以只安装他真正使用的库。安装Flask的最简单方法是使用PIP，即Python的官方软件包管理器。

$ pip install Flask

在设置过程中，也会安装一组基本的核心依赖。

  • 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!'

4# - 什么是React

2021年的统计数据显示，React被用作前端开发的主要技术，超过了Vue、Angular或Svelte等其他框架。React得到了Facebook的积极支持和版本更新，并被大公司和许多开发者及开源爱好者广泛采用。

React - UI Library.

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等更重的DBMS。

Flask API的依赖性

  • flask-restx - 用于编码API节点
  • Flask-JWT-Extended - 处理JWT Token的管理问题
  • 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

让我们对路由进行编码，这是我们的API服务器中最重要的部分。这里是最重要的代码。

Routes.py - API进口

# Imports
from flask_restx import Api, Resource, fields
import jwt
from .models import db, Users

Routes.py- API对象

...
rest_api = Api(version="1.0", title="Users API")
...

Routes.py- 定义验证(Sign UP sample)

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)
                                              })

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

上述代码片段（验证、动作处理程序）应重复用于API暴露的所有方法。

Flask API- 项目资源

6# - 使用POSTMAN测试Flask API

一旦我们的API启动并运行，我们可以使用POSTMAN，一个流行的免费工具来测试后端代码。我们假设Flask API服务器是在5000端口启动的，并且注册方法是完整的代码和功能。

Postman- 创建一个新的集合和带有属性的请求

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

Flask API POSTMAN - Registration Header

身体内容指定了新用户的凭证。

Flask API POSTMAN - Registration Body

注册API响应

Flask API POSTMAN - Registration Response.

在这一点上，用户在数据库中被创建，我们可以进行认证并继续我们的全栈项目。

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

安装依赖性- 通过NPM或Yarn

$ npm i
// OR
$ yarn

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

$ npm run start
// OR
$ npm start

React Datta Able - Free Dashboard Template

为了编写新功能的代码，应该用一些有用的库来更新项目的依赖性。

  • 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/';

最重要的值是由API_SERVER 变量保存的，基本上是我们Flask API的地址。当项目进入生产阶段时，这个地址应该相应地更新为公共API的地址。

创建一个Guest Guard组件

这个组件负责检测当前用户是否经过认证。访客用户会被重定向到Sign IN，而通过认证的用户则被允许访问所有的私有页面。

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;

创建一个管理用户状态的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 };
        }
    }
};

与当前用户相关的变量应该根据会话中执行的操作来更新。

  • 访客访问：会话用户为Null，isLoggedIn 状态为false
  • 登录：用户被后端成功认证，并且。当然，isLoggedIn 状态变为真
  • 注销：所有会话数据被删除，isLoggedIn 再次变成假的

在这一点上，React UI可以用来注册和认证用户。

8# - 编译免费样本

上述所有的代码已经在Github上的两个独立项目中提供。

编译并启动Flask API服务器

步骤#1- 克隆源代码

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

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

$ virtualenv env
$ source env/bin/activate
$
$ pip3 install -r requirements.txt

第3步 - 设置环境

$ export FLASK_APP=run.py
$ export FLASK_ENV=development

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

$ flask shell
>>> from api import db
>>> db.create_all()

第5步--启动API服务器

$ flask run
// the API server runs on http://localhost:5000

在这一点上，我们的API服务器应该已经启动并运行。

编译并启动React UI

步骤#1- 克隆源代码

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

第2步 - 安装依赖项

$ npm i
// OR
$ yarn

第3步 - 在开发模式下启动

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

浏览器应该显示Sign IN页面，我们可以注册新用户并进行认证。

Flask React Datta Able - Login Page.

Flask React Datta Able - Dashboard.

谢谢你的阅读!如需更多资源和支持，请访问。

avatar
文章
阅读
粉丝