自定义Web框架与jinja2模板

时间:2022-02-23 03:48:22

http协议

HTTP简介

HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。

HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。

HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且HTTP-NG(Next Generation of HTTP)的建议已经提出。

HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后,向客户端发送响应信息。

HTTP特点

1、简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。

2、灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

3.无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。

4.无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

HTTP请求协议

请求协议遵照以下格式:

请求首行;        // 请求方式 请求路径 协议和版本,例如:GET /index.html HTTP/1.1
请求头信息;      // 请求头名称:请求头内容,即为key:value格式,例如:Host:localhost
空行;           // 用来与请求体分隔开
请求体。         // GET没有请求体,只有POST有请求体。

浏览器发送给服务器的内容就这个格式的,如果不是这个格式服务器将无法解读!在HTTP协议中,请求有很多请求方法,其中最为常用的就是GETPOST

get请求

GET /562f25980001b1b106000338.jpg HTTP/1.1
Host    img.mukewang.com
User-Agent    Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
Accept    image/webp,image/*,*/*;q=0.8
Referer    http://www.imooc.com/
Accept-Encoding    gzip, deflate, sdch
Accept-Language    zh-CN,zh;q=0.8

HTTP默认的请求方法就是GET
     * 没有请求体
     * 数据量有限制!
     * GET请求数据会暴露在浏览器的地址栏中

GET请求常用的操作:
       1. 在浏览器的地址栏中直接给出URL,那么就一定是GET请求
       2. 点击页面上的超链接也一定是GET请求
       3. 提交表单时,表单默认使用GET请求,但可以设置为POST

请求头

1、Host
请求的web服务器域名地址
2、User-Agent
HTTP客户端运行的浏览器类型的详细信息。通过该头部信息,web服务器可以判断出http请求的客户端的浏览器的类型。
3、Accept
指定客户端能够接收的内容类型,内容类型的先后次序表示客户都接收的先后次序
4、Accept-Lanuage
指定HTTP客户端浏览器用来展示返回信息优先选择的语言
5、Accept-Encoding
指定客户端浏览器可以支持的web服务器返回内容压缩编码类型。表示允许服务器在将输出内容发送到客户端以前进行压缩,以节约带宽。
而这里设置的就是客户端浏览器所能够支持的返回压缩格式。
6、Accept-Charset
HTTP客户端浏览器可以接受的字符编码集
7、Content-Type
显示此HTTP请求提交的内容类型。一般只有post提交时才需要设置该属性
有关Content-Type属性值有如下两种编码类型:
(1)“application/x-www-form-urlencoded”: 表单数据向服务器提交时所采用的编码类型,默认的缺省值就是“application/x-www-form-urlencoded”。
然而,在向服务器发送大量的文本、包含非ASCII字符的文本或二进制数据时这种编码方式效率很低。
(2)“multipart/form-data”: 在文件上载时,所使用的编码类型应当是“multipart/form-data”,它既可以发送文本数据,也支持二进制数据上载。

当提交为表单数据时,可以使用“application/x-www-form-urlencoded”;当提交的是文件时,就需要使用“multipart/form-data”编码类型。

8、Keep-Alive
表示是否需要持久连接。如果web服务器端看到这里的值为“Keep-Alive”,或者看到请求使用的是HTTP 1.1(HTTP 1.1默认进行持久连接),它就可以利用持久连接的优点

post请求

POST / HTTP1.1
Host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley

第一部分:请求行,第一行明了是post请求,以及http1.1版本。
第二部分:请求头部,第二行至第六行。
第三部分:空行,第七行的空行。
第四部分:请求数据,第八行。

HTTP响应协议

 响应格式

一般情况下,服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息。

HTTP响应也由四个部分组成,分别是:状态行、消息报头、空行和响应正文。

自定义Web框架与jinja2模板

http响应消息格式.jpg

例子

HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8

<html>
      <head></head>
      <body>
            <!--body goes here-->
      </body>
</html>
第一部分:状态行,由HTTP协议版本号, 状态码, 状态消息 三部分组成。

第一行为状态行,(HTTP/1.1)表明HTTP版本为1.1版本,状态码为200,状态消息为(ok)

第二部分:消息报头,用来说明客户端要使用的一些附加信息

第二行和第三行为消息报头,
Date:生成响应的日期和时间;Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8

第三部分:空行,消息报头后面的空行是必须的
第四部分:响应正文,服务器返回给客户端的文本信息。

空行后面的html部分为响应正文。

响应状态码

状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别:
1xx:指示信息--表示请求已接收,继续处理
2xx:成功--表示请求已被成功接收、理解、接受
3xx:重定向--要完成请求必须进行更进一步的操作
4xx:客户端错误--请求有语法错误或请求无法实现
5xx:服务器端错误--服务器未能实现合法的请求

常见状态码:

200 OK                        //客户端请求成功
400 Bad Request               //客户端请求有语法错误,不能被服务器所理解
401 Unauthorized              //请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用 
403 Forbidden                 //服务器收到请求,但是拒绝提供服务
404 Not Found                 //请求资源不存在,eg:输入了错误的URL
500 Internal Server Error     //服务器发生不可预期的错误
503 Server Unavailable        //服务器当前不能处理客户端的请求,一段时间后可能恢复正常

GET和POST请求的区别

GET请求
GET /books/?sex=man&name=Professional HTTP/1.1
Host: www.wrox.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive

注意最后一行是空行
POST请求
POST / HTTP/1.1
Host: www.wrox.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley

1、GET提交,请求的数据会附在URL之后(就是把数据放置在HTTP协议头中),以?分割URL和传输数据,多个参数用&连接;例 如:login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。如果数据是英文字母/数字,原样发送,如果是空格,转换为+,如果是中文/其他字符,则直接把字符串用BASE64加密,得出如: %E4%BD%A0%E5%A5%BD,其中%XX中的XX为该符号以16进制表示的ASCII。

POST提交:把提交的数据放置在是HTTP包的包体中。上文示例中红色字体标明的就是实际的传输数据

因此,GET提交的数据会在地址栏中显示出来,而POST提交,地址栏不会改变

2、传输数据的大小:首先声明:HTTP协议没有对传输的数据大小进行限制,HTTP协议规范也没有对URL长度进行限制。

而在实际开发中存在的限制主要有:

GET:特定浏览器和服务器对URL长度有限制,例如 IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系 统的支持。

因此对于GET提交时,传输数据就会受到URL长度的 限制。

POST:由于不是通过URL传值,理论上数据不受 限。但实际各个WEB服务器会规定对post提交数据大小进行限制,Apache、IIS6都有各自的配置。

 GET和POST的区别

  1. GET提交的数据会放在URL之后,以?分割URL和传输数据,参数之间以&相连,如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的Body中.

  2. GET提交的数据大小有限制(因为浏览器对URL的长度有限制),而POST方法提交的数据没有限制.

  3. GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值。

  4. GET方式提交数据,会带来安全问题,比如一个登录页面,通过GET方式提交数据时,用户名和密码将出现在URL上,如果页面可以被缓存或者其他人可以访问这台机器,就可以从历史记录获得该用户的账号和密码.

web应用与web框架

web应用

对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端

import socket

def handle_request(client):

    buf = client.recv(1024)
    client.send("HTTP/1.1 200 OK\r\n\r\n".encode("utf8"))
    client.send("<h1 style='color:red'>Hello, yuan</h1>".encode("utf8"))

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8001))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == '__main__':

    main()

最简单的Web应用就是先把HTML用文件保存好,用一个现成的HTTP服务器软件,接收用户请求,从文件中读取HTML,返回。

如果要动态生成HTML,就需要把上述步骤自己来实现。不过,接受HTTP请求、解析HTTP请求、发送HTTP响应都是苦力活,如果我们自己来写这些底层代码,还没开始写动态HTML呢,就得花个把月去读HTTP规范。

正确的做法是底层代码由专门的服务器软件实现,我们用Python专注于生成HTML文档。因为我们不希望接触到TCP连接、HTTP原始请求和响应格式,所以,需要一个统一的接口,让我们专心用Python编写Web业务。

这个接口就是WSGI:Web Server Gateway Interface。

wsgiref 简单介绍

 

实现一个最简单的框架

自定义Web框架与jinja2模板

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>index</h1>
    <h2>{{ name[0] }}</h2>
    <h3>{{ name[1] }}</h3>
</body>
</html>

start.py

from wsgiref.simple_server import make_server
from urls import urls

def app(env,response):
    print(env)
    route = env['PATH_INFO']

    response("200 OK",[('Content-type','text/html')])
    data = urls['error']()
    if route in urls:
        data = urls[route]()

    return [data]


if __name__ == '__main__':
    server = make_server('localhost',8886,app)
    print("http://localhost:8886")
    server.serve_forever() 

urls.py

from views import *
urls ={
    '/index':index,
    'error':error,
} 

views.py

#处理请求的功能函数(处理结果返回的都是页面 ————> views)
# 利用jinja2来渲染模板,将后台数据传输给前台

from jinja2 import Template

def index():
    with open('templates/index.html','r') as f:
        dt = f.read()
    tem = Template(dt)


    resp = tem.render(name=["主页","附页"])
    return resp.encode('utf-8')

def error():
    return b"404"

增加一点难度

manage.py

from wsgiref.simple_server import make_server

#  request            response


from app01.views import *

from app01 import urls


def routers():

    URLpattern=urls.URLpattern

    return URLpattern


def applications(environ,start_response):

    path=environ.get("PATH_INFO")
    print("path",path)
    start_response('200 OK', [('Content-Type', 'text/html'),('Charset', 'utf8')])

    urlpattern=routers()
    func=None

    for item in urlpattern:
        if path==item[0]:
            func=item[1]
            break
    if func:
        return [func(environ)]
    else:
        return [b"<h1>404!<h1>"]
    # return [b"<h1>hello world<h1>"]

if __name__ == '__main__':

    t=make_server("",8810,applications)
    print("server is working...")
    t.serve_forever()

urls

from app01.views import *


URLpattern = (
    ("/login/", login),
)

views

import pymysql

from urllib.parse import parse_qs


def login(request):

    if request.get("REQUEST_METHOD")=="POST":
        print("+++++",request)


        #当请求方式是GET时
        # user_union,pwd_union=request.get("QUERY_STRING").split("&")
        # _,user=user_union.split("=")
        # _,pwd=pwd_union.split("=")

        # 环境变量 CONTENT_LENGTH 可能是空值 或者 值丢失
        try:
            request_body_size = int(request.get('CONTENT_LENGTH', 0))
        except (ValueError):
            request_body_size = 0
        # 当请求方式是POST时, 变量将会被放在存在域wsgi.input文件中的HTTP请求信息中, 由WSGI 服务器一起发送.
        request_body = request['wsgi.input'].read(request_body_size)
        d = parse_qs(request_body)


        user=d.get(b"user")[0].decode("utf8")
        pwd=d.get(b"pwd")[0].decode("utf8")

        print("user",user,pwd)

        #连接数据库
        conn = pymysql.connect(host='',port= 3306,user = 'root',passwd='',db='s6') #db:库名
        #创建游标
        cur = conn.cursor()

        SQL="select * from userinfo2 WHERE NAME ='%s' AND PASSWORD ='%s'"%(user,pwd)

        cur.execute(SQL)

        if cur.fetchone():

            f=open("templates/backend.html","rb")

            data=f.read()
            data=(data.decode("utf8"))%user
            return data.encode("utf8")

        else:
             return b"user or pwd is wrong"

    else:
        f = open("templates/login.html", "rb")

        data = f.read()
        f.close()

        return data

models

import pymysql

import pymysql
#连接数据库
conn = pymysql.connect(host='',port= 3306,user = 'root',passwd='',db='s6') #db:库名
#创建游标
cur = conn.cursor()

# sql='''
# create table userinfo2(
#         id INT PRIMARY KEY ,
#         name VARCHAR(32) ,
#         password VARCHAR(32)
# )
#
# '''
#
# cur.execute(sql)
#
# cur.executemany("insert into userinfo2 values(%s,%s,%s)", [(1,"yuan","123"),
#                                                           (2,"alex","456"),
#                                                           (3,"egon","789")])

cur.execute("select * from userinfo2 WHERE NAME='yuan' AND PASSWORD ='123'")
#提交
conn.commit()
#关闭指针对象
cur.close()
#关闭连接对象
conn.close()

模板

要了解jinja2,那么需要先理解模板的概念。模板在Python的web开发中广泛使用,它能够有效的将业务逻辑和页面逻辑分开,使代码可读性增强、并且更加容易理解和维护。

模板简单来说就是一个其中包涵占位变量表示动态的部分的文件,模板文件在经过动态赋值后,返回给用户。  --> 可以理解为渲染

python中自带一个简单的模板,就是string提供的。

>>> import string
>>> a = string.Template('$who is $role')
>>> a.substitute(who='daxin',role='Linux')
'daxin is Linux'
>>> a.substitute(who='daxin',role='cat')
'daxin is cat'
>>>

Python自带的模板功能极其有限,如果我们想要在模板中使用控制语句,和表达式,以及继承等功能的话,就无法实现了。

目前主流的模板系统,最常用的就是jinja2和mako

jinja2

jinja2是Flask作者开发的一个模板系统,起初是仿django模板的一个模板引擎,为Flask提供模板支持,由于其灵活,快速和安全等优点被广泛使用。

jinja2之所以被广泛使用是因为它具有以下优点

相对于Template,jinja2更加灵活,它提供了控制结构,表达式和继承等。
相对于Mako,jinja2仅有控制结构,不允许在模板中编写太多的业务逻辑。
相对于Django模板,jinja2性能更好。
Jinja2模板的可读性很棒。

安装jinja2

由于jinja2属于第三方模块,首先需要对其进行安装

pip3 install jinja2

测试模板是否安装成功

python -c "import jinja2"
# 没有报错就表示安装成功
# 必须用双引号"

jinja2语法

作为一个模板系统,它还提供了特殊的语法,我们按照它支持的语法进行编写之后,就能使用jinja2模块进行渲染

基本语法

在jinja2中,存在三种语法

控制结构 {% %}
变量取值 {{ }}
注释 {# #}

下面是一个简单的jinja2例子

{# This is jinja code
 
    {% for file in filenames %}
    ...
    {% endfor %}
 
#}

可以看到,for循环的使用方式和Python比较类似,但是没有了句尾的冒号,另外需要使用endfor最为结尾,其实在jinja2中,if也是一样的,结尾需要使用endif。

jinja2变量

jinja2模板中使用 {{ }} 语法表示一个变量,它是一种特殊的占位符。当利用jinja2进行渲染的时候,它会把这些特殊的占位符进行填充/替换,jinja2支持python中所有的Python数据类型比如列表、字段、对象等

<p>this is a dicectory:{{ mydict['key'] }} </p>
<p>this is a list:{{ mylist[3] }} </p>
<p>this is a object:{{ myobject.something() }} </p>

jinja2中的过滤器

变量可以通过“过滤器”进行修改,过滤器可以理解为是jinja2里面的内置函数和字符串处理函数。

常用的过滤器有:

过滤器名称     说明    
safe  渲染时值不转义
capitialize  把值的首字母转换成大写,其他子母转换为小写
 lower  把值转换成小写形式 
 upper  把值转换成大写形式 
 title  把值中每个单词的首字母都转换成大写
 trim  把值的首尾空格去掉
 striptags  渲染之前把值中所有的HTML标签都删掉
join   拼接多个值为字符串
 replace  替换字符串的值
 round  默认对数字进行四舍五入,也可以用参数进行控制
int   把值转换成整型

那么如何使用这些过滤器呢? 只需要在变量后面使用管道(|)分割,多个过滤器可以链式调用,前一个过滤器的输出会作为后一个过滤器的输入

{{ 'abc' | captialize  }}
# Abc
 
{{ 'abc' | upper  }}
# ABC
 
{{ 'hello world' | title  }}
# Hello World
 
{{ "hello world" | replace('world','daxin') | upper }}
# HELLO DAXIN
 
{{ 18.18 | round | int }}
# 18

jinja2的控制结构

jinja2中的if语句类似与Python的if语句,它也具有单分支,多分支等多种结构,不同的是,条件语句不需要使用冒号结尾,而结束控制语句,需要使用endif关键字

{% if daxin.safe %}
daxin is safe.
{% elif daxin.dead %}
daxin is dead
{% else %}
daxin is okay
{% endif %}

jinja2的for循环

jinja2中的for循环用于迭代Python的数据类型,包括列表,元组和字典。在jinja2中不存在while循环。

迭代列表

<ul>
{% for user in users %}
<li>{{ user.username|title }}</li>
{% endfor %}
</ul>

迭代字典

<dl>
{% for key, value in my_dict.iteritems() %}
<dt>{{ key }}</dt>
<dd>{{ value}}</dd>
{% endfor %}
</dl>

当然也可以加入else语句,在循环正确执行完毕后,执行

在for循环中,jinja2还提供了一些特殊的变量,用以来获取当前的遍历状态:

变量 描述
loop.index 当前迭代的索引(从1开始)
loop.index0 当前迭代的索引(从0开始)
loop.first 是否是第一次迭代,返回bool
loop.last 是否是最后一次迭代,返回bool
loop.length 序列中的项目数量
loop.revindex 到循环结束的次数(从1开始)
loop.revindex0 到循环结束的次数(从0开始)

jinja2的宏

宏类似于Python中的函数,我们在宏中定义行为,还可以进行传递参数,就像Python中的函数一样一样儿的。

在宏中定义一个宏的关键字是macro,后面跟其 宏的名称和参数等

{% macro input(name,age=18) %}   # 参数age的默认值为18
 
 <input type='text' name="{{ name }}" value="{{ age }}" >
 
{% endmacro %}

调用方法也和Python的类似

<p>{{ input('daxin') }} </p>
<p>{{ input('daxin',age=20) }} </p>

jinja2的继承和Super函数

jinja2中最强大的部分就是模板继承。模板继承允许我们创建一个基本(骨架)文件,其他文件从该骨架文件继承,然后针对自己需要的地方进行修改。

jinja2的骨架文件中,利用block关键字表示其包涵的内容可以进行修改。

以下面的骨架文件base.html为例

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <link rel="stylesheet" href="style.css"/>
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
    {% block  footer %}
    <script>This is javascript code </script>
    {% endblock %}
</div>
</body>
</html>

这里定义了四处 block,即:head,title,content,footer。那怎么进行继承和变量替换呢?注意看下面的文件

{% extend "base.html" %}       # 继承base.html文件
 
{% block title %} Dachenzi {% endblock %}   # 定制title部分的内容
 
{% block head %}
    {{  super()  }}        # 用于获取原有的信息
    <style type='text/css'>
    .important { color: #FFFFFF }
    </style>
{% endblock %}   
 
# 其他不修改的原封不同的继承

PS: super()函数 表示获取block块中定义的原来的内容

利用jinja2进行渲染

jinja2模块中有一个名为Enviroment的类,这个类的实例用于存储配置和全局对象,然后从文件系统或其他位置中加载模板。

基本使用方法

大多数应用都在初始化的时候撞见一个Environment对象,并用它加载模板。Environment支持两种加载方式:

    • PackageLoader:包加载器
    • FileSystemLoader:文件系统加载器

PackageLoader

使用包加载器来加载文档的最简单的方式如下

from jinja2 import PackageLoader,Environment
env = Environment(loader=PackageLoader('python_project','templates'))    # 创建一个包加载器对象
 
template = env.get_template('bast.html')    # 获取一个模板文件
template.render(name='daxin',age=18)   # 渲染

其中:

      • PackageLoader()的两个参数为:python包的名称,以及模板目录名称。
      • get_template():获取模板目录下的某个具体文件。
      • render():接受变量,对模板进行渲染

FileSystemLoader

文件系统加载器,不需要模板文件存在某个Python包下,可以直接访问系统中的文件。