React+Flask实现前后端交互

在最近工作中, 有一个小任务是需要前端发送一个请求去后端, 调用python并返回给前端结果. 因为只是一个小需求, 因此挑选了比较轻量化的flask来满足后端和前端的交互

以下是一个小小的示例

1. 配置所需的环境

1.1 构建前后端文件夹安装基础依赖

前端使用React.js, 如何安装就不再赘述, 使用如下命令创建一个React项目

# 创建 front-end 存放前端文件
create-react-app front-end

而在后端, 为了隔离开发环境, 我们首先安装virtualenv (这是官网所推荐的), 然后按照下方所示创建后端项目

# 安装pip依赖
pip install virtualenv

mkdir back-end	# 创建文件夹
cd back-end	# 进入文件夹

# 创建虚拟环境 venv
# 这一条命令执行的时候遇到了一点小问题, 提示virtualenv命令没有, 但是查询pip依赖是有的, 这个原因是virtualenv安装后, 并不会直接成为全局命令, 因此需要手动创建软链接. 如果是非root用户, virtualenv安装后可能会在 /home/$username/.local/bin/python* 下
virtualenv venv
# 进入虚拟环境
# 这里又有一个小问题, 在低版本中, 应该使用 ./venv/Script/activate 来激活虚拟环境
source ./venv/bin/activate

# 之后, 命令行应该变为了这样
(venv)xxx 

1.2 前端环境搭建和测试

首先进入上一步创建好的front-end文件夹, public下我一般只保留ico和index.html, src下全部删除, 然后手动创建App.js 和index.js

• index.js

  import React, {
        StrictMode } from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
      <StrictMode>
          <App />
      </StrictMode>
  )
  

使用命令npm start启动项目, 打开浏览器, 我们可以看到启动成功

1.3 后端环境搭建和测试

在virtualenv环境中, 我们使用命令pip install flask安装flask

之后, 我们在back-end文件夹中(注意,不是在venv目录下!), 新建文件hello.py如下

from flask import Flask

app = Flask(__name__)

@app.route('/')
def sayHello():
    return 'Hello Python'

在虚拟环境中使用命令falsk --app hello run启动flask, 打开网页, 可以看到运行正常

这里, 我们做一点小的改进, 在hello.py文件下, 我们添加一些内容, 这样, 我们之后就可以使用python hello.py打开项目, 同时debug=Ture可以让我们的修改及时生效(而不是重启项目)

# from flask import Flask
# app = Flask(__name__)
# @app.route('/')
# def sayHello():
    # return 'Hello Python'
if __name__ == "__main__":
    app.run(debug=True)

我们做一个测试, 在hello.py中, 新增一条route

# from flask import Flask
# app = Flask(__name__)
# @app.route('/')
# def sayHello():
    # return 'Hello Python'
@app.route('/hi')
def sayHi():
    return ('<h1>Hi Flask</h1>')
# if __name__ == "__main__":
    # app.run(debug=True)

打开网页, 在localhost:5000后添加/hi, 可以看到页面显示了最新内容

2. 最简单的前后交互

在上一章中, 我们已经成功的搭建起了前后端, 但此时, 前端和后端还是相互分离的, 两者之间并没有任何联系

现在, 让我们一步步为他们搭起桥梁

2.1 前端发送GET请求

我们在前端页面中添加一个button按钮, 当我们点击这个按钮时, 希望能从后台为我们返回一条数据

修改App.jsx如下

import React from 'react'

export default function App() {
   

  const getData = async() => {
   
    console.log('button is clicked')
    await fetch('http://127.0.0.1:5000/message')
    .then(response => console.log(response))
    .catch(error => console.log(error))
  }