Web开发：React+Flask前后端分离简介与初步实现

最新推荐文章于 2024-07-28 15:46:11 发布

红毛乌龟

最新推荐文章于 2024-07-28 15:46:11 发布

阅读量1.4k

点赞数 1

分类专栏： Web开发文章标签： react.js flask python typescript

本文链接：https://blog.csdn.net/daishabby2486/article/details/132352190

版权

Web开发专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、前言

本文主要简要介绍一下React+Flask的前后端分离开发实现。

1. 前后端分离

前后端分离是一种软件架构模式，旨在将一个应用程序的前端（用户界面）和后端（业务逻辑和数据处理）部分分开开发、管理和部署。这种模式的主要目标是提高开发效率、灵活性和可维护性，同时允许不同类型的开发团队专注于各自的领域。
在前后端分离架构中，前端和后端是独立的两个模块，它们通过网络通信进行交互。下面是关于前后端分离的一些关键特点：
前端（Frontend）：

用户界面： 前端负责用户界面的展示，包括页面布局、交互元素、样式和用户体验。
开发技术： 前端可以使用各种技术，如HTML、CSS、JavaScript、框架（例如React、Vue.js、Angular）等来构建交互式的用户界面。
网络请求： 前端通过网络请求从后端获取数据，通常使用AJAX、Fetch API或类似的技术来进行异步通信。

后端（Backend）：

业务逻辑： 后端负责应用程序的核心业务逻辑、数据处理、数据库交互和安全验证等。
开发技术： 后端开发可以使用不同的编程语言和框架，如Node.js、Python、Java、Ruby、Flask、Django等。
API提供： 后端向前端提供API（Application Programming Interface），用于定义前后端之间的通信协议和数据交换格式（如JSON）。

优势和不足：
优势：

分工合作： 前后端分离允许前端和后端开发团队专注于各自领域，提高开发效率。
可维护性： 分离的架构使得前端和后端的代码更易于维护和扩展。
灵活性： 可以独立开发和部署前后端，从而在技术栈和部署方式上更加灵活。

不足：

跨域问题： 分离的架构可能引发跨域问题，需要适当的跨域策略。
沟通协作： 前后端需要良好的沟通和协作，确保API的设计和接口规范一致。
部署复杂性： 分离架构需要独立部署前后端，可能会增加一些部署和维护的复杂性。

2. 前端框架：React

2.1 React简介

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它专注于构建高效、交互式和可重用的用户界面组件，使开发者能够轻松地构建复杂的 Web 应用。
以下是 React 框架的一些关键特点和概念：

组件化开发： React 鼓励开发者将用户界面分解为独立的可重用组件，每个组件都有自己的状态（state）和属性（props）。
虚拟 DOM： React 使用虚拟 DOM 来提高性能。它会在内存中创建一个虚拟表示，然后通过比较虚拟 DOM 的变化来最小化实际 DOM 的更新，从而提高页面渲染效率。
单向数据流： React 中的数据流是单向的，从父组件传递属性（props）到子组件，并通过回调函数来处理子组件状态的更改。
声明式编程： React 鼓励使用声明式方式描述 UI，开发者只需关注“什么”需要渲染，而不是“如何”渲染。
生命周期方法： React 组件具有生命周期方法，允许开发者在组件的不同阶段执行特定的操作，如组件挂载、更新和卸载。
组件间通信： React 中的组件可以通过属性（props）和回调函数进行通信。这种通信方式使组件的复用和解耦更加容易。

具体的React框架学习与入门，强烈推荐官方文档，提供中文版。

2.2 TypeScript

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集。TypeScript 扩展了 JavaScript，添加了静态类型系统和一些其他编程特性，旨在增强代码的可维护性、可读性和开发时的错误检测能力。当结合TypeScript与React时，可以得到一种更加类型安全的开发体验：

静态类型检查： TypeScript允许你在开发阶段捕获类型错误，减少在运行时出现的意外错误。
代码提示和自动补全： TypeScript可以为你提供更准确的代码提示，帮助你更快速地编写代码。
更好的可维护性： 使用类型可以使你的代码更易于理解和维护，因为类型信息可以提供更多的文档和上下文。
接口和类型别名： TypeScript允许你创建自定义的类型、接口和类型别名，使你的代码更具表现力。
可选的类型： TypeScript的类型可以是可选的，这意味着你可以在需要的地方使用类型，而在其他地方保持普通JavaScript的灵活性。

3. 后端框架：Flask

Flask 是一个基于 Python 的微型Web应用框架，旨在帮助开发者快速构建简单而灵活的Web应用程序。它被设计成非常轻量级，以便于扩展和自定义，同时提供了一些基本工具和结构，使得构建Web应用变得简单。

微型框架： Flask 是一个微型框架，它提供了一些基础功能，但不强迫开发者使用特定的工具或模块。这使得开发者可以根据项目的需求来选择性地添加功能和扩展。
路由： Flask 使用路由来映射 URL 到相应的视图函数。通过定义不同的路由规则，可以实现不同 URL 地址与不同处理逻辑的映射。
视图函数： 视图函数是处理 HTTP 请求的函数，它可以根据请求方法（GET、POST 等）来执行不同的操作，并返回响应内容。
模板引擎： Flask 集成了 Jinja2 模板引擎，允许开发者在视图函数中生成动态的 HTML 页面。模板引擎使得页面的渲染变得更加灵活和可维护。
上下文管理： Flask 提供了应用上下文和请求上下文来管理应用程序状态和请求相关的信息。这有助于在应用中共享数据，如数据库连接。
扩展： Flask 允许通过扩展（Extensions）来集成额外的功能，例如数据库集成、表单处理、身份验证等。这些扩展可以根据项目需求灵活地添加和定制。
RESTful 支持： Flask 可以很容易地实现 RESTful API，使得构建 Web 服务和移动应用后端变得方便。

总之，Flask 是一个非常适合小型至中型 Web 应用的框架，特点是灵活、简单、可扩展，适合那些希望快速构建原型或小规模应用的开发者。
Flask的入门学习强烈推荐李辉老师的教程：Flask 入门教程。

二、React+Flask前后端分离初步实现

2.1 整体架构

React-Flask-demo
backend
frontend

2.2 backend

创建Flask项目
命令行创建：

mkdir backend
cd backend
touch app.py

或者直接PyCharm创建Flask项目。

app.py

import datetime
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 允许跨域传输数据
CORS(app)

nowTime = datetime.datetime.now()


@app.route('/time')
def get_time():
    return {
        'Task': 'Connect the frontend and the backend successfully!',
        'Date': nowTime,
        'Frontend': 'React',
        'Backend': 'Flask'
    }


if __name__ == '__main__':
    app.run(debug=True)

在Flask程序中，我们引入了Flask-CORS扩展，来允许跨域传输，不然的话可能会报错。其他解决跨域传输的办法可以参考这篇文章：
3 Ways to Fix the CORS Error — and How the Access-Control-Allow-Origin Header Works。

终端运行：

cd backend
python app.py

或者PyCharm直接点击运行Flask。
记录下Flask运行的端口号：
port

打开浏览器，输入：

http://127.0.0.1:5000/time

我们可以看到:
flask

2.3 frontend

命令行运行：

npx create-react-app frontend --template typescript

或者可以WebStorm/PyCharm创建React项目，勾选上typescript选项。

向package.json文件中添加记录的端口号：

"proxy": "http://127.0.0.1:5000",

package.json

App.tsx

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    const [time, setTime] = useState({
        task: '',
        date: '',
        frontend: '',
        backend: ''
    });
    useEffect(() => {
        fetch('/time').then((res) => res.json().then((time) => {
            setTime({
                task: time.Task,
                date: time.Date,
                frontend: time.Frontend,
                backend: time.Backend,
            });
        }));
    }, []);
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1>React and Flask</h1>
                <p>{ time.task }</p>
                <p>{ time.date }</p>
                <p>{ time.frontend }</p>
                <p>{ time.backend }</p>
            </header>
        </div>
    );
}

export default App;