前后端交互基本知識

軟件開發架構

• c/s架構
• b/s架構
• 注: b/s本質也是c/s

HTTP協議

1. 四大特性

   • 基於TCP/IP之上作用於應用層
   • 基於請求響應
   • 無狀態 注:就是[cookie session token]
   • 無連接 注: 長連接 websocket(HTTP協議的大補丁)

2. 數據格式
   請求格式
   請求首行(請求方式,協議版本)
   請求頭(一堆k:v鍵值對)
   \r\n
   請求體(真正的數據 發完post請求的時候才會有,如果是get請求不會有)
   響應格式
   響應首行
   響應頭
   \r\n
   響應體

3. 狀態響應碼
   用特定的數字表示一些意思
   1XX : 服務器已經成功接收到你的數據 正在處理 你可以繼續提交其數據
   2XX : 服務端成功響應(200請求)
   3XX : 重定向
   4XX : 請求錯誤(404 請求資源不存在 403 拒絕訪問)
   5XX : 服務器內部錯誤(500)

請求方式

get請求
朝別人要數據
post請求
向別人提交數據(例如:用戶登錄什么的)
url: 統一資源定位符

手擼簡易版web框架

主要是使用socket編程,一開始也會受到瀏覽器發過來的數據一個請求頭,可以從里面拿到需要用到的數據,在傳輸的時候要按照固定的格式傳輸 conn.send(b'HTTP/1.1 200 OK\r\n\r\n消息')

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8081))
server.listen(5)  # 半連接池
# 接收瀏覽器數據
while 1:
    conn, addr = server.accept()
    data = conn.recv(1024)
    headers = data.decode('utf8').split(" ")[1]
    print(headers)
    conn.send(b'HTTP/1.1 200 OK\r\n\r\nhello') # 發送格式
""" # 瀏覽器發送過來的數據 - headers
b'GET / HTTP/1.1\r\n - 請求首行

Host: 127.0.0.1:8081\r\n - 請求頭
Connection: keep-alive\r\n
Cache-Control: max-age=0\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3\r\n
Sec-Fetch-Site: none\r\nAccept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n'
"""

基於wsgiref模塊

1. urls.py 路由與視圖對象關系
2. views.py 放的是視圖函數(處理業務邏輯的)
3. templates 模版文件夾(一堆html文件)

下面的文件就是一個簡易版的基於wsgiref模塊的web

其實這個就是一個根據不同的模塊拆分成不同的py文件,拆分完之后,要想添加功能,只需要在urls和views兩個地方添加數據就可以了

urls.py

import views
func = {
    '/index': views.index,
    '/login': views.login,
    '/register': views.register
}

views.py

def index():
    return b'index'


def login():
    return b'login'


def register():
    return b'register'

接收的地方.py

from wsgiref.simple_server import make_server
import urls


def run(env, response):
    """
    :param env: 請求相關的所有數據
    :param response: 響應相關的所有數據
    :return:
    """
    response('200 OK', [])
    choice = env.get('PATH_INFO')
    print(choice)
    if choice in urls.func:
        res = urls.func.get(choice)()
        return [res]
    else:
        return [bytes(404)]


if __name__ == '__main__':
    server = make_server('127.0.0.1', 8081, run)
    server.serve_forever()

動靜態網頁

靜態網頁

​ 數據是寫死的 萬年不變

動態網頁

​ 數據是實時獲取的

eg：
1. 后端獲取當前時間展示到前端
2. 后端獲取數據庫中的數據展示到前端

疑問：

如何將后端獲取的數據 傳遞給html頁面

==> 后端獲取的數據 傳遞給html頁面 >>>: 模版的渲染

jinja2 模塊 - 解決如何將后端數據傳遞給前端展示的疑問

模版語法(極其貼近python后端語法)

<p>{{ user }}</p>
<p>{{ user.name }}</p>
<p>{{ user['pwd'] }}</p>
<p>{{ user.get('hobby') }}</p>

# 以上三種方式都是和python的取值方式一致