分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

Web框架的原理

发布时间:2023-09-06 02:15责任编辑:顾先生关键词:Web

Web框架本质

我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端。 这样我们就可以自己实现Web框架了。

socket服务端

  1. importsocket
  2. sk=socket.socket()
  3. sk.bind(("127.0.0.1",80))
  4. sk.listen()
  5. whileTrue:
  6. conn,addr=sk.accept()
  7. data=conn.recv(8096)
  8. conn.send(b"OK")
  9. conn.close()

可以说Web服务本质上都是在这十几行代码基础上扩展出来的。这段代码就是它们的祖宗。

用户在浏览器中输入网址,浏览器会向服务端发送数据,那浏览器会发送什么数据?怎么发?这个谁来定? 你这个网站是这个规定,他那个网站按照他那个规定,那互联网还能玩么?

所以,必须有一个统一的规则,让大家发送消息、接收消息的时候都有个格式依据,不能随便写。

这个规则就是HTTP协议,以后浏览器发送请求信息也好,服务器回复响应信息也罢,都要按照这个规则来。

HTTP协议主要规定了客户端和服务器之间的通信格式,那HTTP协议是怎么规定消息格式的呢?

让我们首先打印下我们在服务端接收到的消息是什么。

  1. importsocket
  2. sk=socket.socket()
  3. sk.bind(("127.0.0.1",80))
  4. sk.listen()
  5. whileTrue:
  6. conn,addr=sk.accept()
  7. data=conn.recv(8096)
  8. print(data)#将浏览器发来的消息打印出来
  9. conn.send(b"OK")
  10. conn.close()

输出:

b‘GET / HTTP/1.1\r\nHost: 127.0.0.1:8080\r\nConnection: keep-alive\r\nCache-Control: max-age=0\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3355.4 Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\nCookie: csrftoken=CtHePYARJOKNx5oNVwxIteOJXpNyJ29L4bW4506YoVqFaIFFaHm0EWDZqKmw6Jm8\r\n\r\n‘

我们将\r\n替换成换行看得更清晰点:

  1. GET/HTTP/1.1
  2. Host:127.0.0.1:8080
  3. Connection:keep-alive
  4. Cache-Control:max-age=0
  5. Upgrade-Insecure-Requests:1
  6. User-Agent:Mozilla/5.0(WindowsNT6.1;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/66.0.3355.4Safari/537.36
  7. Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
  8. Accept-Encoding:gzip,deflate,br
  9. Accept-Language:zh-CN,zh;q=0.9
  10. Cookie:csrftoken=CtHePYARJOKNx5oNVwxIteOJXpNyJ29L4bW4506YoVqFaIFFaHm0EWDZqKmw6Jm8

然后我们再看一下我们访问博客园官网时浏览器收到的响应信息是什么。

响应相关信息可以在浏览器调试窗口的Network标签页中看到。

点击view source之后显示如下图:

我们发现收发的消息需要按照一定的格式来,这里就需要了解一下HTTP协议了。

HTTP协议介绍

HTTP协议对收发消息的格式要求

每个HTTP请求和响应都遵循相同的格式,一个HTTP包含Header和Body两部分,其中Body是可选的。

HTTP响应的Header中有一个 Content-Type表明响应的内容格式。它的值如text/html; charset=utf-8。

text/html则表示是网页,charset=utf-8则表示编码为utf-8。

HTTP GET请求的格式:

HTTP响应的格式:

自定义web框架

经过上面的学习,那我们基于socket服务端的十几行代码写一个我们自己的web框架。我们先不处理浏览器发送的请求,先让浏览器能显示我们web框架返回的信息,那我们就要按照HTTP协议的格式来发送响应。

  1. importsocket
  2. sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
  3. sock.bind((‘127.0.0.1‘,8000))
  4. sock.listen()
  5. whileTrue:
  6. conn,addr=sock.accept()
  7. data=conn.recv(8096)
  8. #给回复的消息加上响应状态行
  9. conn.send(b"HTTP/1.1200OK\r\n\r\n")
  10. conn.send(b"OK")
  11. conn.close()

我们通过十几行代码简单地演示了web 框架的本质。

接下来就让我们继续完善我们的自定义web框架吧!

根据不同的路径返回不同的内容

这样就结束了吗? 如何让我们的Web服务根据用户请求的URL不同而返回不同的内容呢?

小事一桩,我们可以从请求相关数据里面拿到请求URL的路径,然后拿路径做一个判断...

  1. """
  2. 根据URL中不同的路径返回不同的内容
  3. """
  4. importsocket
  5. sk=socket.socket()
  6. sk.bind(("127.0.0.1",8080))#绑定IP和端口
  7. sk.listen()#监听
  8. whileTrue:
  9. #等待连接
  10. conn,add=sk.accept()
  11. data=conn.recv(8096)#接收客户端发来的消息
  12. #从data中取到路径
  13. data=str(data,encoding="utf8")#把收到的字节类型的数据转换成字符串
  14. #按\r\n分割
  15. data1=data.split("\r\n")[0]
  16. url=data1.split()[1]#url是我们从浏览器发过来的消息中分离出的访问路径
  17. conn.send(b‘HTTP/1.1200OK\r\n\r\n‘)#因为要遵循HTTP协议,所以回复的消息也要加状态行
  18. #根据不同的路径返回不同内容
  19. ifurl=="/index/":
  20. response=b"index"
  21. elifurl=="/home/":
  22. response=b"home"
  23. else:
  24. response=b"404notfound!"
  25. conn.send(response)
  26. conn.close()

根据不同的路径返回不同的内容--函数版

上面的代码解决了不同URL路径返回不同内容的需求。

我们返回的内容是简单的几个字符,那如果我可以将返回的结果封装成一个函数呢?

  1. """
  2. 根据URL中不同的路径返回不同的内容--函数版
  3. """
  4. importsocket
  5. sk=socket.socket()
  6. sk.bind(("127.0.0.1",8080))#绑定IP和端口
  7. sk.listen()#监听
  8. #将返回不同的内容部分封装成函数
  9. deffunc(url):
  10. s="这是{}页面!".format(url)
  11. returnbytes(s,encoding="utf8")
  12. whileTrue:
  13. #等待连接
  14. conn,add=sk.accept()
  15. data=conn.recv(8096)#接收客户端发来的消息
  16. #从data中取到路径
  17. data=str(data,encoding="utf8")#把收到的字节类型的数据转换成字符串
  18. #按\r\n分割
  19. data1=data.split("\r\n")[0]
  20. url=data1.split()[1]#url是我们从浏览器发过来的消息中分离出的访问路径
  21. conn.send(b‘HTTP/1.1200OK\r\n\r\n‘)#因为要遵循HTTP协议,所以回复的消息也要加状态行
  22. #根据不同的路径返回不同内容,response是具体的响应体
  23. ifurl=="/index/":
  24. response=func(url)
  25. elifurl=="/home/":
  26. response=func(url)
  27. else:
  28. response=b"404notfound!"
  29. conn.send(response)
  30. conn.close()

根据不同的路径返回不同的内容--函数进阶版

看起来上面的代码写了一个函数,那肯定可以写多个函数,不同的路径对应执行不同的函数拿到结果,但是我们要一个个判断路径,是不是很麻烦?我们有简单的办法来解决。

  1. """
  2. 根据URL中不同的路径返回不同的内容--函数进阶版
  3. """
  4. importsocket
  5. sk=socket.socket()
  6. sk.bind(("127.0.0.1",8080))#绑定IP和端口
  7. sk.listen()#监听
  8. #将返回不同的内容部分封装成不同的函数
  9. defindex(url):
  10. s="这是{}页面XX!".format(url)
  11. returnbytes(s,encoding="utf8")
  12. defhome(url):
  13. s="这是{}页面。。!".format(url)
  14. returnbytes(s,encoding="utf8")
  15. #定义一个url和实际要执行的函数的对应关系
  16. list1=[
  17. ("/index/",index),
  18. ("/home/",home),
  19. ]
  20. whileTrue:
  21. #等待连接
  22. conn,add=sk.accept()
  23. data=conn.recv(8096)#接收客户端发来的消息
  24. #从data中取到路径
  25. data=str(data,encoding="utf8")#把收到的字节类型的数据转换成字符串
  26. #按\r\n分割
  27. data1=data.split("\r\n")[0]
  28. url=data1.split()[1]#url是我们从浏览器发过来的消息中分离出的访问路径
  29. conn.send(b‘HTTP/1.1200OK\r\n\r\n‘)#因为要遵循HTTP协议,所以回复的消息也要加状态行
  30. #根据不同的路径返回不同内容
  31. func=None#定义一个保存将要执行的函数名的变量
  32. foriteminlist1:
  33. ifitem[0]==url:
  34. func=item[1]
  35. break
  36. iffunc:
  37. response=func(url)
  38. else:
  39. response=b"404notfound!"
  40. #返回具体的响应消息
  41. conn.send(response)
  42. conn.close()

返回具体的HTML文件

完美解决了不同URL返回不同内容的问题。 但是我不想仅仅返回几个字符串,我想给浏览器返回完整的HTML内容,这又该怎么办呢?

没问题,不管是什么内容,最后都是转换成字节数据发送出去的。 我们可以打开HTML文件,读取出它内部的二进制数据,然后再发送给浏览器。

  1. """
  2. 根据URL中不同的路径返回不同的内容--函数进阶版
  3. 返回独立的HTML页面
  4. """
  5. importsocket
  6. sk=socket.socket()
  7. sk.bind(("127.0.0.1",8080))#绑定IP和端口
  8. sk.listen()#监听
  9. #将返回不同的内容部分封装成不同的函数
  10. defindex(url):
  11. #读取index.html页面的内容
  12. withopen("index.html","r",encoding="utf8")asf:
  13. s=f.read()
  14. #返回字节数据
  15. returnbytes(s,encoding="utf8")
  16. defhome(url):
  17. withopen("home.html","r",encoding="utf8")asf:
  18. s=f.read()
  19. returnbytes(s,encoding="utf8")
  20. #定义一个url和实际要执行的函数的对应关系
  21. list1=[
  22. ("/index/",index),
  23. ("/home/",home),
  24. ]
  25. whileTrue:
  26. #等待连接
  27. conn,add=sk.accept()
  28. data=conn.recv(8096)#接收客户端发来的消息
  29. #从data中取到路径
  30. data=str(data,encoding="utf8")#把收到的字节类型的数据转换成字符串
  31. #按\r\n分割
  32. data1=data.split("\r\n")[0]
  33. url=data1.split()[1]#url是我们从浏览器发过来的消息中分离出的访问路径
  34. conn.send(b‘HTTP/1.1200OK\r\n\r\n‘)#因为要遵循HTTP协议,所以回复的消息也要加状态行
  35. #根据不同的路径返回不同内容
  36. func=None#定义一个保存将要执行的函数名的变量
  37. foriteminlist1:
  38. ifitem[0]==url:
  39. func=item[1]
  40. break
  41. iffunc:
  42. response=func(url)
  43. else:
  44. response=b"404notfound!"
  45. #返回具体的响应消息
  46. conn.send(response)
  47. conn.close()
<!DOCTYPE html><html lang="en"><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>index</title></head><body><div>这是index页面</div></body></html>
index.html
<!DOCTYPE html><html lang="en"><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>index</title></head><body><div>这是home页面</div></body></html>
home.html

让网页动态起来

这网页能够显示出来了,但是都是静态的啊。页面的内容都不会变化的,我想要的是动态网站。

没问题,我也有办法解决。我选择使用字符串替换来实现这个需求。(这里使用时间戳来模拟动态的数据)

  1. """
  2. 根据URL中不同的路径返回不同的内容--函数进阶版
  3. 返回独立的HTML页面
  4. """
  5. importsocket
  6. sk=socket.socket()
  7. sk.bind(("127.0.0.1",8080))#绑定IP和端口
  8. sk.listen()#监听
  9. #将返回不同的内容部分封装成不同的函数
  10. defindex(url):
  11. #读取index.html页面的内容
  12. withopen("index.html","r",encoding="utf8")asf:
  13. s=f.read()
  14. #返回字节数据
  15. returnbytes(s,encoding="utf8")
  16. defhome(url):
  17. withopen("home.html","r",encoding="utf8")asf:
  18. s=f.read()
  19. returnbytes(s,encoding="utf8")
  20. deftimer(url):
  21. importtime
  22. withopen("time.html","r",encoding="utf8")asf:
  23. s=f.read()
  24. s=s.replace(‘@@time@@‘,time.strftime("%Y-%m-%d%H:%M:%S"))
  25. returnbytes(s,encoding="utf8")
  26. #定义一个url和实际要执行的函数的对应关系
  27. list1=[
  28. ("/index/",index),
  29. ("/home/",home),
  30. ("/time/",timer),
  31. ]
  32. whileTrue:
  33. #等待连接
  34. conn,add=sk.accept()
  35. data=conn.recv(8096)#接收客户端发来的消息
  36. #从data中取到路径
  37. data=str(data,encoding="utf8")#把收到的字节类型的数据转换成字符串
  38. #按\r\n分割
  39. data1=data.split("\r\n")[0]
  40. url=data1.split()[1]#url是我们从浏览器发过来的消息中分离出的访问路径
  41. conn.send(b‘HTTP/1.1200OK\r\n\r\n‘)#因为要遵循HTTP协议,所以回复的消息也要加状态行
  42. #根据不同的路径返回不同内容
  43. func=None#定义一个保存将要执行的函数名的变量
  44. foriteminlist1:
  45. ifitem[0]==url:
  46. func=item[1]
  47. break
  48. iffunc:
  49. response=func(url)
  50. else:
  51. response=b"404notfound!"
  52. #返回具体的响应消息
  53. conn.send(response)
  54. 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

我们利用wsgiref模块来替换我们自己写的web框架的socket server部分:

  1. """
  2. 根据URL中不同的路径返回不同的内容--函数进阶版
  3. 返回HTML页面
  4. 让网页动态起来
  5. wsgiref模块版
  6. """
  7. fromwsgiref.simple_serverimportmake_server
  8. #将返回不同的内容部分封装成函数
  9. defindex(url):
  10. #读取index.html页面的内容
  11. withopen("index.html","r",encoding="utf8")asf:
  12. s=f.read()
  13. #返回字节数据
  14. returnbytes(s,encoding="utf8")
  15. defhome(url):
  16. withopen("home.html","r",encoding="utf8")asf:
  17. s=f.read()
  18. returnbytes(s,encoding="utf8")
  19. deftimer(url):
  20. importtime
  21. withopen("time.html","r",encoding="utf8")asf:
  22. s=f.read()
  23. s=s.replace(‘@@time@@‘,time.strftime("%Y-%m-%d%H:%M:%S"))
  24. returnbytes(s,encoding="utf8")
  25. #定义一个url和实际要执行的函数的对应关系
  26. list1=[
  27. ("/index/",index),
  28. ("/home/",home),
  29. ("/time/",timer),
  30. ]
  31. defrun_server(environ,start_response):
  32. start_response(‘200OK‘,[(‘Content-Type‘,‘text/html;charset=utf8‘),])#设置HTTP响应的状态码和头信息
  33. url=environ[‘PATH_INFO‘]#取到用户输入的url
  34. func=None
  35. foriinlist1:
  36. ifi[0]==url:
  37. func=i[1]
  38. break
  39. iffunc:
  40. response=func(url)
  41. else:
  42. response=b"404notfound!"
  43. return[response,]
  44. if__name__==‘__main__‘:
  45. httpd=make_server(‘127.0.0.1‘,8090,run_server)
  46. print("我在8090等你哦...")
  47. httpd.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>
index2.html文件

使用jinja2渲染index2.html文件:

  1. fromwsgiref.simple_serverimportmake_server
  2. fromjinja2importTemplate
  3. defindex(url):
  4. #读取HTML文件内容
  5. withopen("index2.html","r",encoding="utf8")asf:
  6. data=f.read()
  7. template=Template(data)#生成模板文件
  8. ret=template.render({‘name‘:‘alex‘,‘hobby_list‘:[‘抽烟‘,‘喝酒‘,‘烫头‘]})#把数据填充到模板中
  9. returnbytes(ret,encoding="utf8")
  10. defhome(url):
  11. withopen("home.html","r",encoding="utf8")asf:
  12. s=f.read()
  13. returnbytes(s,encoding="utf8")
  14. #定义一个url和实际要执行的函数的对应关系
  15. list1=[
  16. ("/index/",index),
  17. ("/home/",home),
  18. ]
  19. defrun_server(environ,start_response):
  20. start_response(‘200OK‘,[(‘Content-Type‘,‘text/html;charset=utf8‘),])#设置HTTP响
我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved