在最近工作中, 有一個小任務(wù)是需要前端發(fā)送一個請求去后端, 調(diào)用python并返回給前端結(jié)果. 因為只是一個小需求, 因此挑選了比較輕量化的flask來滿足后端和前端的交互

以下是一個小小的示例

1. 配置所需的環(huán)境

1.1 構(gòu)建前后端文件夾安裝基礎(chǔ)依賴

前端使用React.js, 如何安裝就不再贅述, 使用如下命令創(chuàng)建一個React項目

# 創(chuàng)建 front-end 存放前端文件
create-react-app front-end

而在后端, 為了隔離開發(fā)環(huán)境, 我們首先安裝virtualenv (這是官網(wǎng)所推薦的), 然后按照下方所示創(chuàng)建后端項目

# 安裝pip依賴
pip install virtualenv

mkdir back-end	# 創(chuàng)建文件夾
cd back-end	# 進(jìn)入文件夾

# 創(chuàng)建虛擬環(huán)境 venv
# 這一條命令執(zhí)行的時候遇到了一點小問題, 提示virtualenv命令沒有, 但是查詢pip依賴是有的, 這個原因是virtualenv安裝后, 并不會直接成為全局命令, 因此需要手動創(chuàng)建軟鏈接. 如果是非root用戶, virtualenv安裝后可能會在 /home/$username/.local/bin/python* 下
virtualenv venv
# 進(jìn)入虛擬環(huán)境
# 這里又有一個小問題, 在低版本中, 應(yīng)該使用 ./venv/Script/activate 來激活虛擬環(huán)境
source ./venv/bin/activate

# 之后, 命令行應(yīng)該變?yōu)榱诉@樣
(venv)xxx 

1.2 前端環(huán)境搭建和測試

首先進(jìn)入上一步創(chuàng)建好的front-end文件夾, public下我一般只保留ico和index.html, src下全部刪除, 然后手動創(chuàng)建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 后端環(huán)境搭建和測試

在virtualenv環(huán)境中, 我們使用命令pip install flask安裝flask

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

from flask import Flask

app = Flask(__name__)

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

在虛擬環(huán)境中使用命令falsk --app hello run啟動flask, 打開網(wǎng)頁, 可以看到運行正常

這里, 我們做一點小的改進(jìn), 在hello.py文件下, 我們添加一些內(nèi)容, 這樣, 我們之后就可以使用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)

打開網(wǎng)頁, 在localhost:5000后添加/hi, 可以看到頁面顯示了最新內(nèi)容

2. 最簡單的前后交互

在上一章中, 我們已經(jīng)成功的搭建起了前后端, 但此時, 前端和后端還是相互分離的, 兩者之間并沒有任何聯(lián)系

現(xiàn)在, 讓我們一步步為他們搭起橋梁

2.1 前端發(fā)送GET請求

我們在前端頁面中添加一個button按鈕, 當(dāng)我們點擊這個按鈕時, 希望能從后臺為我們返回一條數(shù)據(jù)

修改App.jsx如下文章來源地址http://www.zghlxwxcb.cn/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))
  }

到了這里，關(guān)于React+Flask實現(xiàn)前后端交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！