在最近工作中, 有一个小任务是需要前端发送一个请求去后端, 调用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
按钮, 当我们点击这个按钮时, 希望能从后台为我们返回一条数据文章来源:https://www.toymoban.com/news/detail-691388.html
修改App.jsx
如下文章来源地址https://www.toymoban.com/news/detail-691388.html
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))
}
到了这里,关于React+Flask实现前后端交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!