Python Web Flask 後端開發

react + flask + axios 實際案例

結語之所以開始學習 flask 框架，主要是因為最近乙個專案需求。因為我們]資料處理和服務都是使用 python 編寫的，又因為想要最後以網頁的方式呈現，增加使用者體驗，所以前後端的開發就不可避免。前端使用了 react.js 框架，但是後端呢?很自然的，我就希望也能用 python 編寫後端程式碼，與資料層也更好的連線。於是就開始了學習 flask 這個框架。這篇主要介紹 flask 的用法，並說明自己是如何將 react 和 flask 連線的。

flask 是乙個使用 python 編寫的輕量級 web 應用框架。基於 werkzeug wsgi 工具箱和 jinja2 模板引擎。簡單來說，就本人使用起來的感覺，flask 是乙個非常方便的後端框架，不需要過多繁瑣複雜配置。

廢話不多說，直接來看看怎麼使用 flask 吧!

當然，要使用 flask 就要先安裝 python。具體在這邊就不多做攢述。

下載網址 :

我使用的開發環境是 pycharm ide。

接著就要來安裝 flask 基本套件。

pip install flask

到這邊就都安裝完畢啦!是不是很簡單呢?

如果尚未了解 react 的，可以先去了解。

官方檔案: react 官方教程

先來看看乙個基本的 flask 例子:

from flask import flask
"/")
deffunc()
:return
"hello world"
if __name__ ==
"__main__"
:true
)

再接下去之前，如果還沒安裝 axios 的人可以先安裝下。axios 是乙個基於 promise 的 http 客戶端，可以協助我們將前後端相連。

npm install axios

我自己的專案需求是，我想要將頁面上使用者對輸入框輸入的值傳給 flask 後端做完處理後，再將結果回傳至前端，以顯示在頁面上。

from flask import flask, jsonify
# solve cors problem
defafter_request
(resp)
: resp.headers[
'access-control-allow-origin']=
'*'return resp
"/echartreport/"
)def
echartreport
(student_id)
:# print(student_id)
overall_student_value =
specific_student_value =
if student_id ==
"student_id="
: error =
return jsonify(error)
else
:'''
順序如下：
1. **估計相似度
2. **時間複雜度
3. **風格水平
4. **空間複雜度
'''220)
410)
398)
400)
120)
290)
287)
320)
echartreport =
return jsonify(echartreport)
if __name__ ==
"__main__"
:true
)

這邊針對這段 flask 後端程式碼做一些講解:

這邊沒有將整個 react 元件程式碼附上，僅給出前後端互動的方法程式碼。

import axios from
'axios'
get_overall_report()
`).then
(response =>
else
if(data.message ===
"valid input"))
}}).
catch
(error =>
)}

這邊針對這段 react 前端程式碼做一些講解:

這只是本人對於 flask 的使用一點基本粗淺的理解，後續也將再更新更深入的部落格。希望對於同樣是 flask 初學者的你有些許幫助，也歡迎各位大神們多多指教 !

Python Web Flask 後端開發

70後 80後 90後的區別

70後 80後 90後的離奇區別

70後 80後 90後的離奇區別

Python Web Flask 後端開發

70後 80後 90後的區別

70後 80後 90後的離奇區別

70後 80後 90後的離奇區別

相關推薦