1. 程式人生 > >python原生程式碼(無框架,無AJAX技術)前後端資料互動

python原生程式碼(無框架,無AJAX技術)前後端資料互動

採用form表格的post請求向後端傳遞資料

本系列即儘量採用原生程式碼方式實現瀏覽器與web伺服器之間進行互動;幫助小白們理解web伺服器的工作原理。
採用form表格從前端瀏覽器向後端提交資料是一種最原始的前端傳遞資料的方式,雖然程式碼執行較為麻煩,但是卻有助於深刻理解前後端的互動原理。

以下面html程式碼為例:
<form action="login" method="post">
	<p>
		<span class="spanText">使用者名稱</span>
		<input type="text" name=
"username" class="uText"> </p> <p> <span class="spanText">&nbsp;&nbsp;</span> <input type="password" name="passwd" class="uText" placeholder="請輸入6-20位號碼字元"> </p> <span class="spanText"></span> <p> <span class="isSaved"><
input type="checkbox" name="isSaved" checked>記住密碼</span> <span class="forget"><a href="#">忘記密碼?</a> <a href="#">快捷登入</a></span> </p> <p> <span class="spanText"></span> <input type="submit" name="login" class="login" value="登入"
> <a href="./register.html"><input type="button" name="regist" class="regist" value="註冊頁面"></a> </p> </form>

在這裡插入圖片描述
點選‘登入’按鈕,表格中的使用者名稱和密碼資訊通過表格以POST方式提交到後臺。
在不使用框架中的request方法的前提下,可以直接從請求資訊的請求體部分獲取資料。
(提交的資訊都儲存在了請求體中,可以採用以下程式碼獲取。)

獲取資訊執行程式碼(web伺服器執行程式碼,部分程式碼擷取)

def handle_client(self, conn):
    # 接受瀏覽器請求
    request_data = conn.recv(2048).decode('utf-8')
    request_lines = request_data.splitlines()
    print(request_lines)
    # 獲取請求行資訊(判斷請求方式 get還是post )
    request_line = request_lines[0]
    # 獲取請求體資訊(post請求資訊在請求體中,如果為get請求,獲取內容為空)
    request_msges = request_lines[-1]

舉例(使用者名稱為:閃電俠,密碼為123456)

後臺獲取的有效請求體資訊為:

'username=%E9%97%AA%E7%94%B5%E4%BE%A0&passwd=123456&isSaved=on&login=%E7%99%BB%E5%BD%95'

後端字串解析程式碼

執行程式碼如下(程式碼輔助理解,不能直接執行):

import os
from urllib.parse import unquote
from collections import defaultdict

#定義函式將請求體字串轉化為字典格式
def msg_to_dict(msg):
    lst = msg.split('&')
    del lst[-1]
    mdt = defaultdict(list)
    for i in lst:
        j = i.split('=')
        print(unquote(j[1]))                                #urllib.parse中的unquote方法將請求體資訊中的中文加密資訊(含有%)解碼為中文字元。
        mdt.setdefault('%s'%j[0], []).append(unquote(j[1]))
    return mdt
    
#定義登入函式
def login(env,set_headers):
    status = '200 OK'
    headers = [('Content-Type', 'text/html;charset=utf-8')] #允許前端接收utf-8格式的中文響應字元
    set_headers(status, headers)
    msg = env.get('MSG')                                    #獲取前端提交的響應體內容(獲取使用者名稱和密碼)
    mdt = msg_to_dict(msg)                                  #將請求體資訊轉化為字典格式
    if mdt['username'][0] == '' or mdt['passwd'][0] == '':
        return '使用者名稱或密碼有誤,請重新輸入!!'
    else:
        res = do_login(mdt)                                #進一步執行登入指令(函式略)
        if res:
            filename = os.path.join(BASE_DIR, 'static/hero.html')
            print(filename)
            with open(filename,'r') as fd:
                data = fd.read()
            return data
        else:
            return 'Username or password is wrong!'

按照上述思路程式碼執行後,案例的程式碼執行結果如下

前端資料提交後,後端將請求體資訊轉化為字典的執行結果:
mdt = {'isSaved': ['on'], 'username': ['閃電俠'], 'passwd': ['123456']})

後端根據解析出的資料資訊進一步執行登入函式。

在不採用request方法的前提下,客戶端的註冊,登入,以及發起資料庫的增刪改查請求,都可以採用這種思路來完成。