前端Web框架的實現過程

一、Web框架的本質：

　　我們可以這樣理解：所有的Web應用本質上就是一個socket服務端，而用戶的瀏覽器就是一個socket客戶端。 這樣我們就可以自己實現Web框架了。

• 半成品自定義web框架

  import socket
  
  server = socket.socket()
  server.bind(("127.0.0.1", 8080))
  server.listen()
  
  while True:
      conn, addr = server.accept()
      data = conn.recv(8096)
      conn.send(b"OK")
      conn.close()

  可以說Web服務本質上都是在這十幾行代碼基礎上擴展出來的。這段代碼是web服務的核心。
  那么用戶的瀏覽器輸入一個網址，會給服務端發送數據，那么服務端會發送什么格式的數據來進行瀏覽器與服務端直接的收發通信呢？
  必須有一個統一的規則，讓雙方發送消息、接收消息的時候有個格式依據，這樣就不會出亂子。
  這個規則就是HTTP-超文本傳輸協議
  先看看瀏覽器訪問服務端會發生什么：
  

  import socket
  
  server = socket.socket()
  server.bind(("127.0.0.1", 8080))
  server.listen()
  
  while True:
      conn, addr = server.accept()
      data = conn.recv(8096)
      print(data)
      conn.send(b"OK")
      conn.close()

  輸出：

  b'GET / HTTP/1.1\r\nHost: 127.0.0.1:8080\r\nConnection: keep-alive\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\nDNT: 1\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\nCookie: csrftoken=RKBXh1d3M97iz03Rpbojx1bR6mhHudhyX5PszUxxG3bOEwh1lxFpGOgWN93ZH3zv\r\n\r\n'

  這就是瀏覽器給服務端發送的請求數據，接下來得知道，HTTP請求和相應的格式：

  數據格式之GET請求:
  　　請求首行
         請求頭(一堆k,v鍵值對)
  
         請求體(post請求攜帶的數據)
  數據格式之響應:
  　　響應首行
  　　響應頭(一堆k,v鍵值對)
  
  　　響應體(post請求攜帶的數據)
  

  

  接下來繼續完善web框架：（根據不同路徑返回不同的內容）：
  

  '''
  根據URL中不同的路徑返回不同的內容
  '''
  
  import socket
  
  # 創建server服務連接
  server = socket.socket()
  server.bind(('127.0.0.1', 8080))   # 綁定服務端IP和端口（本機做服務端則為127.0.0.1，這樣socket就會自動識別。
  server.listen(5)    # 半連接池
  
  # 下面是通信循環：
  while True:
      conn, addr = server.accept()   # 等待客戶的連接，這個地方是阻塞點
      data_bytes = conn.recv(1024)         # 接收客戶的發來的請求數據
      data = data_bytes.decode('utf-8')    # 解碼收到的數據
      data1 = data.split('\r\n')[0]     # 分離出第一行數據（第一個\r\n之前的數據）
      url = data1.split()[1]    # 繼續分離，用空格來分割，然后取索引為1的元素就是請求的訪問路徑
      conn.send(b'HTTP/1.1 200 OK\r\n\r\n')    # 因為要遵循HTTP協議，所以回復的消息也要加狀態行
      # 根據不同的路徑返回不同的內容：
      if url == '/index':
          response = b'index'
      elif url == '/home':
          response = b'home'
      else:
          response = b'404 not found!'
      conn.send(response)
      conn.close()

   

  

  繼續優化：用函數來返回不同的內容：
  

  import socket
  
  # 創建server服務連接
  server = socket.socket()
  server.bind(('127.0.0.1', 8080))   # 綁定服務端IP和端口（本機做服務端則為127.0.0.1，這樣socket就會自動識別。
  server.listen(5)    # 半連接池
  
  def index(url):
      response = b'index'
      return response
  
  def home(url):
      response = b'home'
      return response
  
  url_list = [
      ('/index', index),
      ('/home', home),
  ]
  
  
  # 下面是通信循環：
  while True:
      conn, addr = server.accept()   # 等待客戶的連接，這個地方是阻塞點
      data_bytes = conn.recv(1024)         # 接收客戶的發來的請求數據
      data = data_bytes.decode('utf-8')    # 解碼收到的數據
      data1 = data.split('\r\n')[0]     # 分離出第一行數據（第一個\r\n之前的數據）
      url = data1.split()[1]    # 繼續分離，用空格來分割，然后取索引為1的元素就是請求的訪問路徑
      conn.send(b'HTTP/1.1 200 OK\r\n\r\n')    # 因為要遵循HTTP協議，所以回復的消息也要加狀態行
      # 根據不同的路徑返回不同的內容：
      func = None
      for i in url_list:
          if i[0] == url:
              func = i[1]
              break
      if func:
          response = func(url)
      else:
          response = b'404 not found!'
  
      conn.send(response)
      conn.close()

  返回具體的HTML文件

  完美解決了不同URL返回不同內容的問題。 但是我不想僅僅返回幾個字符串，我想給瀏覽器返回完整的HTML內容，這又該怎么辦呢？

  沒問題，不管是什么內容，最后都是轉換成字節數據發送出去的。 我們可以打開HTML文件，讀取出它內部的二進制數據，然后再發送給瀏覽器。
  
  

  import socket
  
  # 創建server服務連接
  server = socket.socket()
  server.bind(('127.0.0.1', 8080))   # 綁定服務端IP和端口（本機做服務端則為127.0.0.1，這樣socket就會自動識別。
  server.listen(5)    # 半連接池
  
  def index(url):
      # 讀取index.html頁面的內容
      with open("index.html", "r", encoding="utf8") as f:
          s = f.read()
      # 返回字節數據
      return s.encode('utf-8')
  
  def home(url):
      # 讀取index.html頁面的內容
      with open("home.html", "r", encoding="utf8") as f:
          s = f.read()
      # 返回字節數據
      return s.encode('utf-8')
  
  url_list = [
      ('/index', index),
      ('/home', home),
  ]
  
  
  # 下面是通信循環：
  while True:
      conn, addr = server.accept()   # 等待客戶的連接，這個地方是阻塞點
      data_bytes = conn.recv(1024)         # 接收客戶的發來的請求數據
      data = data_bytes.decode('utf-8')    # 解碼收到的數據
      data1 = data.split('\r\n')[0]     # 分離出第一行數據（第一個\r\n之前的數據）
      url = data1.split()[1]    # 繼續分離，用空格來分割，然后取索引為1的元素就是請求的訪問路徑
      conn.send(b'HTTP/1.1 200 OK\r\n\r\n')    # 因為要遵循HTTP協議，所以回復的消息也要加狀態行
      # 根據不同的路徑返回不同的內容：
      func = None
      for i in url_list:
          if i[0] == url:
              func = i[1]
              break
      if func:
          response = func(url)
      else:
          response = b'404 not found!'
  
      conn.send(response)
      conn.close()

  讓網頁動態起來

  這網頁能夠顯示出來了，但是都是靜態的啊。頁面的內容都不會變化的，我想要的是動態網站。

  沒問題，我也有辦法解決。我選擇使用字符串替換來實現這個需求。（這里使用時間戳來模擬動態的數據）

  import socket
  import time
  
  # 創建server服務連接
  server = socket.socket()
  server.bind(('127.0.0.1', 8080))   # 綁定服務端IP和端口（本機做服務端則為127.0.0.1，這樣socket就會自動識別。
  server.listen(5)    # 半連接池
  
  
  def index(url):
      with open("index.html", "r", encoding="utf8") as f:
          s = f.read()
          now = str(time.time())
          s = s.replace("@@oo@@", now)  # 在網頁中定義好特殊符號，用動態的數據去替換提前定義好的特殊符號
      return s.encode('utf-8')
  
  
  def home(url):
      # 讀取index.html頁面的內容
      with open("index.html", "r", encoding="utf8") as f:
          s = f.read()
      # 返回字節數據
      return s.encode('utf-8')
  
  
  url_list = [
      ('/index', index),
      ('/home', home),
  ]
  
  
  # 下面是通信循環：
  while True:
      conn, addr = server.accept()   # 等待客戶的連接，這個地方是阻塞點
      data_bytes = conn.recv(1024)         # 接收客戶的發來的請求數據
      data = data_bytes.decode('utf-8')    # 解碼收到的數據
      data1 = data.split('\r\n')[0]     # 分離出第一行數據（第一個\r\n之前的數據）
      url = data1.split()[1]    # 繼續分離，用空格來分割，然后取索引為1的元素就是請求的訪問路徑
      conn.send(b'HTTP/1.1 200 OK\r\n\r\n')    # 因為要遵循HTTP協議，所以回復的消息也要加狀態行
      # 根據不同的路徑返回不同的內容：
      func = None
      for i in url_list:
          if i[0] == url:
              func = i[1]
              break
      if func:
          response = func(url)
      else:
          response = b'404 not found!'
  
      conn.send(response)
      conn.close()

   

  對於真實開發中的python web程序來說，一般會分為兩部分：服務器程序和應用程序。

  服務器程序負責對socket服務器進行封裝，並在請求到來時，對請求的各種數據進行整理。

  應用程序則負責具體的邏輯處理。為了方便應用程序的開發，就出現了眾多的Web框架，例如：Django、Flask、web.py 等。不同的框架有不同的開發方式，但是無論如何，開發出的應用程序都要和服務器程序配合，才能為用戶提供服務。

  這樣，服務器程序就需要為不同的框架提供不同的支持。這樣混亂的局面無論對於服務器還是框架，都是不好的。對服務器來說，需要支持各種不同框架，對框架來說，只有支持它的服務器才能被開發出的應用使用。

  這時候，標准化就變得尤為重要。我們可以設立一個標准，只要服務器程序支持這個標准，框架也支持這個標准，那么他們就可以配合使用。一旦標准確定，雙方各自實現。這樣，服務器可以支持更多支持標准的框架，框架也可以使用更多支持標准的服務器。

  WSGI（Web Server Gateway Interface）就是一種規范，它定義了使用Python編寫的web應用程序與web服務器程序之間的接口格式，實現web應用程序與web服務器程序間的解耦。

  常用的WSGI服務器有uwsgi、Gunicorn。而Python標准庫提供的獨立WSGI服務器叫wsgiref，Django開發環境用的就是這個模塊來做服務器。
  

   服務器程序，正常開發環境下用wsgiref，而在正式假設服務上線用uWSGI
  接下來利用wsgiref模塊來替換上面寫的web框架的socket server部分：
  
  

  import time
  from wsgiref.simple_server import make_server
  
  
  
  def index(url):
      with open("index.html", "r", encoding="utf8") as f:
          s = f.read()
          now = str(time.time())
          # 在網頁中定義好特殊符號，用動態的數據去替換提前定義好的特殊符號
          s = s.replace("@@oo@@", now)  
      return s
  
  
  def home(url):
      # 讀取index.html頁面的內容
      with open("index.html", "r", encoding="utf8") as f:
          s = f.read()
      return s
  
  def err():
      return '404 not found!'
  
  url_list = [
      ('/index', index),
      ('/home', home),
  ]
  
  def run(env, response):
      '''
  
      :param env: 請求相關信息，一個大字典，里面裝了一堆處理好了的鍵值對數據
      :param response: 相應相關信息
      :return:
      '''
      # 固定寫法 后面列表里面一個個元祖會以響應頭kv鍵值對的形式返回給客戶端
      response('200 ok', [('username', 'sgt'), ('password', '123')])
      # 獲取用戶訪問路徑：
      current_path = env.get('PATH_INFO')
      # 定義一個存儲函數名的變量：
      func = None
      for i in url_list:
          if i[0] == current_path:
              func = i[1]
              break
      if func:
          res = func()
      else:
          res = err()
  
      return [res.encode('utf-8')]
  
  if __name__ == '__main__':
      server = make_server('127.0.0.1', 8080, run)
      server.serve_forever()

  jinja2

  上面的代碼實現了一個簡單的動態，我完全可以從數據庫中查詢數據，然后去替換我html中的對應內容，然后再發送給瀏覽器完成渲染。 這個過程就相當於HTML模板渲染數據。 本質上就是HTML內容中利用一些特殊的符號來替換要展示的數據。 我這里用的特殊符號是我定義的，其實模板渲染有個現成的工具： jinja2

  下載jinja2:

  pip install jinja2

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
  </head>
  <body>
      <h1>姓名：{{name}}</h1>
      <h1>愛好：</h1>
      <ul>
          {% for hobby in hobby_list %}
          <li>{{hobby}}</li>
          {% endfor %}
      </ul>
  </body>
  </html>

  使用jinja2渲染index2.html文件：

  from wsgiref.simple_server import make_server
  from jinja2 import Template
  
  
  def index():
      with open("index2.html", "r") as f:
          data = f.read()
      template = Template(data)  # 生成模板文件
      ret = template.render({"name": "Alex", "hobby_list": ["燙頭", "泡吧"]})  # 把數據填充到模板里面
      return [bytes(ret, encoding="utf8"), ]
  
  
  def home():
      with open("home.html", "rb") as f:
          data = f.read()
      return [data, ]
  
  
  # 定義一個url和函數的對應關系
  URL_LIST = [
      ("/index/", index),
      ("/home/", home),
  ]
  
  
  def run_server(environ, start_response):
      start_response('200 OK', [('Content-Type', 'text/html;charset=utf8'), ])  # 設置HTTP響應的狀態碼和頭信息
      url = environ['PATH_INFO']  # 取到用戶輸入的url
      func = None  # 將要執行的函數
      for i in URL_LIST:
          if i[0] == url:
              func = i[1]  # 去之前定義好的url列表里找url應該執行的函數
              break
      if func:  # 如果能找到要執行的函數
          return func()  # 返回函數的執行結果
      else:
          return [bytes("404沒有該頁面", encoding="utf8"), ]
  
  
  if __name__ == '__main__':
      httpd = make_server('', 8000, run_server)
      print("Serving HTTP on port 8000...")
      httpd.serve_forever()

  現在的數據是我們自己手寫的，那可不可以從數據庫中查詢數據，來填充頁面呢？

  使用pymysql連接數據庫：

  conn = pymysql.connect(host="127.0.0.1", port=3306, user="root", passwd="xxx", db="xxx", charset="utf8")
  cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
  cursor.execute("select name, age, department_id from userinfo")
  user_list = cursor.fetchall()
  cursor.close()
  conn.close()

  創建一個測試的user表：

  CREATE TABLE user(
    id int auto_increment PRIMARY KEY,
    name CHAR(10) NOT NULL,
    hobby CHAR(20) NOT NULL
  )engine=innodb DEFAULT charset=UTF8;

  模板的原理就是字符串替換，我們只要在HTML頁面中遵循jinja2的語法規則寫上，其內部就會按照指定的語法進行相應的替換，從而達到動態的返回內容。