2021-05-12 14:32:11
利用python實現後端寫網頁(flask框架)
如何用python做後端寫網頁-flask框架 什麼是Flask安裝flask模組Hello World更深一步:資料繫結後端傳入資料從前端獲取資料 資料庫連線screen建立後臺檢視刪除後臺 結束
什麼是Flask
Flask是一個使用 Python 編寫的輕量級 Web 應用框架。其 WSGI 工具箱採用 Werkzeug ,模板引擎則使用 Jinja2 。Flask使用 BSD 授權。以下程式均在自己伺服器上執行(在vs code利用ssh進行連線)
安裝flask模組
首先使用pip進行安裝:
pip install flask
在所在專案資料夾下建立templates資料夾(用於存放html等檔案)和app.py,如圖:
Hello World
我們可以在templates檔案中新建index.html檔案,其內容如下:
<html> <h1>Hello Word!</h1> </html>
在上一步建立的app.py檔案中,寫入:
from flask import Flask, render_template, request, jsonify #建立Flask物件app並初始化 app = Flask(__name__) #通過python裝飾器的方法定義路由地址 @app.route("/") #定義方法 用jinjia2引擎來渲染頁面,並返回一個index.html頁面 def root(): return render_template("index.html") #定義app在8080埠執行 app.run(port=8080)
我們寫好app.py檔案後,我們按F5 執行,即終端輸出:
我們存取伺服器的8080埠,即Hello World出現在眼前!
更深一步:資料繫結
上一步我們簡單地搭建好一個靜態網頁,它的顯示只取決於前端,是固定不變的。我們如何做到從後端傳遞數值並在前端顯示呢?這就需要使用資料繫結.
資料繫結,顧名思義,是為了實現一種「動態」的效果,後臺的資料更新了,前端頁面也自動更新;前端頁面上的資料更新了,後臺的資料也自動更新。在flask框架中,後端先將網頁進行載入,並把傳入的資料放在合適的位置後使用jinjia2引擎渲染,最後將渲染好的頁面返回。
後端傳入資料
我們首先在render_template函數中傳遞需要繫結的資料name,age:
from flask import Flask, render_template, request, jsonify #建立Flask物件app並初始化 app = Flask(__name__) #通過python裝飾器的方法定義路由地址 @app.route("/") #定義方法 用jinjia2引擎來渲染頁面,並返回一個index.html頁面 def root(): return render_template("index.html",name="zxy",age=21) #定義app在8080埠執行 app.run(port=8080)
在前端index.html中,我們獲取傳入的資料:
<html> <h1>我是{{name}},今年{{age}}歲</h1> </html>
我們再按F5執行,並存取伺服器的8080埠,頁面顯示:
從前端獲取資料
那麼,前端提交的資料如何傳到後端呢?
在這裡,我使用ajax實現資料的非同步傳輸。我們將主要步驟概括為:
1.在前端頁面中引入jQuery
2.建立兩個輸入框,一個按鈕用於輸入資料和事件提交。
3.在js中編寫事件,使用ajax進行資料提交
4.在後端app.py中編寫對應的事件處理常式
前端index.html內容如下:
<html> <!--引入jQuery包用於使用ajax--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <h1>請輸入你的姓名和年齡</h1> <!--建立兩個input輸入框,定義id分別為name,age--> <input type="text" id="name" name="name" placeholder="姓名"> <br> <input type="text" id="age" name="age" placeholder="年齡"> <br> <!--建立button按鈕,點選則激發submit()事件--> <button onclick="submit();">提交</button> <script> /*在這裡編寫submit()事件*/ function submit() { $.ajax({ url: "submit", /*資料提交到submit處*/ type: "POST", /*採用POST方法提交*/ data: { "name": $("#name").val(),"age":$("#age").val()}, /*提交的資料(json格式),從輸入框中獲取*/ /*result為後端函數返回的json*/ success: function (result) { if (result.message == "success!") { alert(result.message+"你的名字是"+result.name+",你的年齡是"+result.age) } else { alert(result.message) } } }); } </script> </html>
當我們完成ajax資料提交後,則在後端app.py處編寫對應的處理常式submit()。
app.py中的內容如下:
from flask import Flask, render_template, request, jsonify #建立Flask物件app並初始化 app = Flask(__name__) #通過python裝飾器的方法定義路由地址 @app.route("/") #定義方法 用jinjia2引擎來渲染頁面,並返回一個index.html頁面 def root(): return render_template("index.html") #app的路由地址"/submit"即為ajax中定義的url地址,採用POST、GET方法均可提交 @app.route("/submit",methods=["GET", "POST"]) #從這裡定義具體的函數 返回值均為json格式 def submit(): #由於POST、GET獲取資料的方式不同,需要使用if語句進行判斷 if request.method == "POST": name = request.form.get("name") age = request.form.get("age") if request.method == "GET": name = request.args.get("name") age = request.args.get("age") #如果獲取的資料為空 if len(name) == 0 or len(age) ==0: return {'message':"error!"} else: return {'message':"success!",'name':name,'age':age} #定義app在8080埠執行 app.run(port=8080)
編寫完成後,我們存取伺服器8080埠進行測試,結果如下:
資料庫連線
資料庫是一個網頁不可或缺的部分。前面的例子中,資料都是從前端獲取或者隨機輸入的。如何從資料庫中獲取資料呢?
首先我們引入pymysql庫 並編寫Database類,該類寫在database.py中:
import pymysql class Database: #設定資料庫的連線引數,由於我是在伺服器中編寫的,所以host是localhost host = "localhost" user = "root" password = "Zhangxy0212!!" #類別建構函式,引數db為欲連線的資料庫。該建構函式實現了資料庫的連線 def __init__(self,db): connect = pymysql.connect(host=self.host,user=self.user,password=self.password,database=db) self.cursor = connect.cursor() #類的方法,引數command為sql語句 def execute(self, command): try: #執行command中的sql語句 self.cursor.execute(command) except Exception as e: return e else: #fetchall()返回語句的執行結果,並以元組的形式儲存 return self.cursor.fetchall()
我們可以在templates檔案中新建一個data.html檔案,用於建立一個新的頁面,檔案內容如下:
<html> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <h1>請輸入你的名字</h1> <input type="text" id="name" name="name"> <button onclick="show();">提交</button> <!--result用來顯示提交結果--> <p id="result"></p> <script> function show() { $.ajax({ url: "show", type: "POST", data: { "name": $("#name").val()}, /*不要忘記 result為後端處理常式的返回值!*/ success: function (result) { if (result.status == "success") { $("#result").text($("#name").val() + "是" + result.message) } else { $("#result").text("出錯了") } } }); } </script> </html>
按鈕的觸發事件為show();接下來我們在app.py中編寫 渲染data.html頁面的函數data()和事件處理常式show().
切記,這兩個函數一定要加在 建立app物件 和 定義執行埠之間!!
由於我們要使用寫好的Database類進行資料庫的連線,因此需要在app.py頂部進行引入:
from database import Database
data()函數和show()函數如下:
#通過python裝飾器的方法定義路由地址 @app.route("/data") #定義方法 用jinjia2引擎來渲染頁面,並返回一個index.html頁面 def data(): return render_template("data.html") #app的路由地址"/show"即為ajax中定義的url地址,採用POST、GET方法均可提交 @app.route("/show",methods=["GET", "POST"]) def show(): #首先獲取前端傳入的name資料 if request.method == "POST": name = request.form.get("name") if request.method == "GET": name = request.args.get("name") #建立Database類的物件sql,test為需要存取的資料庫名字 具體可見Database類別建構函式 sql = Database("test") try: #執行sql語句 多說一句,f+字串的形式,可以在字串裡面以{}的形式加入變數名 結果儲存在result陣列中 result = sql.execute(f"SELECT type FROM type WHERE name='{name}'") except Exception as e: return {'status':"error", 'message': "code error"} else: if not len(result) == 0: #這個result,我覺得也可以把它當成資料表,查詢的結果至多一個,result[0][0]返回陣列中的第一行第一列 return {'status':'success','message':result[0][0]} else: return "rbq"
我們按F5 執行app.py檔案後,存取http://121.41.111.94/data
執行結果如圖:
多提一句,資料表type中的內容如下:
screen
至此,使用flask框架搭建簡單網頁的基本流程結束啦!
我想你們心中一定有個疑問,每次執行python程式總是需要按F5執行,如果關掉 VS Code ,那麼程序將會被殺掉,伺服器頁面就無法顯示,如圖:
那麼我們就需要在伺服器中使用screen建立一個後臺,將app.py程式放在後臺中執行,達到持續執行的目的。
建立後臺
由於我的伺服器是Centos,所以我使用 yum install screen的方式下載的screen。
下載完成後,在伺服器的任意位置 輸入screen命令即可建立後臺,後臺如圖:
即上面會顯示screen 0.
我們進入工程所在的檔案try 輸入命令:python app.py 如圖:
這樣 我們再存取一下121.41.111.94,會發現 網站已經啟動啦!我們即使關閉命令列,程式也繼續在後臺執行。
檢視刪除後臺
如果我們需要檢視後臺的執行情況,在伺服器中輸入命令:screen -x
如果需要停止後臺執行,則先通過 screen -x [pid號] 進入某一後臺。進入之後 Ctrl+C即可停止執行。
如果刪除後臺,則先通過 screen -x [pid號] 進入某一後臺,進入之後輸入exit
結束
到此這篇關於利用python實現後端寫網頁(flask框架)的文章就介紹到這了,更多相關python後端寫網頁內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!
相關文章