本节目录

通过对socket的学习，我们知道网络通信，我们完全可以自己写了，因为socket就是做网络通信用的，下面我们就基于socket来自己实现一个web框架，写一个web服务端，让浏览器来请求，并通过自己的服务端把页面返回给浏览器，浏览器渲染出我们想要的效果。在后面的学习中，大家提前准备一些文件：

html文件内容如下，名称为test.html：

css文件内容如下，名称为test.css：

h1{background-color:green;color:white;}

js文件内容如下，名称为test.js：

alert('这是我们第一个网页');

上面的文件都准备好之后，你用pycharm新建一个项目，把文件都放到一个文件夹里面去，留着备用，像下面这个样子：

然后开始写我们的web框架，我们分这么几步来写：

一、简单的web框架

创建一个python文件，内容如下，名称为test.py：

目前我们还没有写如何返回一个html文件给浏览器，所以这里暂时不用管它，那么我们点开这个127.0.0.1看看：

我们在python文件中打印一下浏览器发送过来的请求信息是啥：

重启我们的代码，然后在网址中输入这个：

再重启我们的代码，然后在网址中输入这个：

二、返回HTML文件的web框架

首先写一个html文件，内容如下，名称为test.html：

准备我们的python代码，服务端程序，文件内容如下，文件名称为test.py：

importsocketsk=socket.socket()sk.bind(('127.0.0.1',8001))sk.listen()conn,addr=sk.accept()from_b_msg=conn.recv(1024)str_msg=from_b_msg.decode('utf-8')print('浏览器请求信息：',str_msg)#conn.send(b'HTTP/1.1200ok\r\ncontent-type:text/html;charset=utf-8;\r\n')conn.send(b'HTTP/1.1200ok\r\n\r\n')

withopen('test1.html','rb')asf:f_data=f.read()conn.send(f_data)

页面上输入网址看效果，css和js代码的效果也有，verygood：

但是我们知道，我们的css和js基本都是写在本地的文件里面的啊，而且我们的图片基本也是我们自己本地的啊，怎么办，我们将上面我们提前准备好的js和css还有那个.ico结尾的图片文件都准备好，来我们在来一个升级版的web框架，其实css、js、图片等文件都叫做网站的静态文件。

首先我们先看一个效果，如果我们直接将我们写好的css和js还有.ico和图片文件插入到我们的html页面里面，就是下面这个html文件

名称为test.html，内容如下：

同样使用我们之前的python程序，来看效果：

发现js和css的效果都没有出来，并且我们看一下浏览器调试窗口的那个network

在下来我们在network里面点击那个test.css文件，看看请求是什么：

还有就是当我们直接在浏览器上保存某个页面的时候，随便一个页面，我们到页面上点击右键另存为，然后存到本地的一个目录下，你会发现这个页面的html、css、js、图片等文件都跟着保存下来了，我保存了一下博客园首页的页面，看，是一个文件夹和一个html文件：

我们点开博客园那个文件夹看看里面都有什么：

三、返回静态文件的高级web框架

还是用第二个web框架里面的那个html文件，我们只需要写一些我们的服务端程序就可以了，同样是test.py文件，内容如下：

importsocketsk=socket.socket()sk.bind(('127.0.0.1',8001))sk.listen()

运行起来我们的py文件，然后在浏览器访问一下我们的服务端，看效果：

666666，完全搞定了，自己通过socket已经完全搞定了web项目，激动不，哈哈，我们再来完善一下

四：函数版高级web框架

html文件和其他的静态文件还是我们上面使用的。

python代码如下：

#!/usr/bin/envpython#-*-coding:utf-8-*-#@Time:2019/2/1714:06#@Author:wuchao#@Site:#@File:test.py#@Software:PyCharmimportsocketsk=socket.socket()sk.bind(('127.0.0.1',8001))sk.listen()

#处理页面请求的函数deffunc1(conn):withopen('test.html','rb')asf:#withopen('Python开发.html','rb')asf:data=f.read()conn.send(data)conn.close()

#处理页面script（）标签src属性值是本地路径的时候的请求deffunc5(conn):withopen('test.js','rb')asf:js_data=f.read()conn.send(js_data)conn.close()

while1:conn,addr=sk.accept()#while1:from_b_msg=conn.recv(1024)str_msg=from_b_msg.decode('utf-8')path=str_msg.split('\r\n')[0].split('')[1]print('path>>>',path)conn.send(b'HTTP/1.1200ok\r\n\r\n')print(from_b_msg)ifpath=='/':func1(conn)elifpath=='/meinv.png':func2(conn)elifpath=='/test.css':func3(conn)elifpath=='/wechat.ico':func4(conn)

elifpath=='/test.js':func5(conn)

五更高级版(多线程版)web框架

应用上我们并发编程的内容，反正html文件和静态文件都直接给浏览器，那大家就一块并发处理，html文件和静态文件还是上面的。

#!/usr/bin/envpython#-*-coding:utf-8-*-#@Time:2019/2/1714:06#@Author:wuchao#@Site:#@File:test.py#@Software:PyCharmimportsocketfromthreadingimportThread#注意一点，不开多线程完全是可以搞定的，在这里只是教大家要有并发编程的思想，所以我使用了多线程sk=socket.socket()sk.bind(('127.0.0.1',8001))sk.listen()deffunc1(conn):withopen('test.html','rb')asf:#withopen('Python开发.html','rb')asf:data=f.read()conn.send(data)conn.close()

deffunc2(conn):withopen('meinv.png','rb')asf:pic_data=f.read()#conn.send(b'HTTP/1.1200ok\r\n\r\n')conn.send(pic_data)conn.close()

deffunc3(conn):withopen('test.css','rb')asf:css_data=f.read()conn.send(css_data)conn.close()

deffunc4(conn):withopen('wechat.ico','rb')asf:ico_data=f.read()conn.send(ico_data)conn.close()

deffunc5(conn):withopen('test.js','rb')asf:js_data=f.read()conn.send(js_data)conn.close()

while1:conn,addr=sk.accept()#while1:from_b_msg=conn.recv(1024)str_msg=from_b_msg.decode('utf-8')path=str_msg.split('\r\n')[0].split('')[1]print('path>>>',path)conn.send(b'HTTP/1.1200ok\r\n\r\n')print(from_b_msg)ifpath=='/':#func1(conn)t=Thread(target=func1,args=(conn,))t.start()elifpath=='/meinv.png':#func2(conn)t=Thread(target=func2,args=(conn,))t.start()elifpath=='/test.css':#func3(conn)t=Thread(target=func3,args=(conn,))t.start()elifpath=='/wechat.ico':#func4(conn)t=Thread(target=func4,args=(conn,))t.start()elifpath=='/test.js':#func5(conn)t=Thread(target=func5,args=(conn,))t.start()

六更更高级版web框架

if判断太多了，开线程的方式也比较恶心，有多少个if判断，就写多少次创建线程，简化一下：

importsocketfromthreadingimportThreadsk=socket.socket()sk.bind(('127.0.0.1',8001))sk.listen()

deffunc1(conn):

conn.send(b'HTTP/1.1200ok\r\ncontent-type:text/html\r\ncharset:utf-8\r\n\r\n')withopen('test.html','rb')asf:#withopen('Python开发.html','rb')asf:data=f.read()conn.send(data)conn.close()deffunc2(conn):conn.send(b'HTTP/1.1200ok\r\n\r\n')withopen('meinv.png','rb')asf:pic_data=f.read()#conn.send(b'HTTP/1.1200ok\r\n\r\n')conn.send(pic_data)conn.close()

deffunc3(conn):conn.send(b'HTTP/1.1200ok\r\n\r\n')withopen('test.css','rb')asf:css_data=f.read()conn.send(css_data)conn.close()

deffunc4(conn):conn.send(b'HTTP/1.1200ok\r\n\r\n')withopen('wechat.ico','rb')asf:ico_data=f.read()conn.send(ico_data)conn.close()

deffunc5(conn):conn.send(b'HTTP/1.1200ok\r\n\r\n')withopen('test.js','rb')asf:js_data=f.read()conn.send(js_data)conn.close()

#定义一个路径和执行函数的对应关系，不再写一堆的if判断了l1=[('/',func1),('/meinv.png',func2),('/test.css',func3),('/wechat.ico',func4),('/test.js',func5),]

#遍历路径和函数的对应关系列表，并开多线程高效的去执行路径对应的函数，deffun(path,conn):foriinl1:ifi[0]==path:t=Thread(target=i[1],args=(conn,))t.start()#else:#conn.send(b'sorry')

七根据不同路径返回不同页面的web框架

既然知道了我们可以根据不同的请求路径来返回不同的内容，那么我们可不可以根据用户访问的不同路径，返回不同的页面啊，嗯，应该是可以的

自己创建两个html文件，写几个标签在里面，名为index.html和home.html，然后根据不同的路径返回不同的页面，我就给大家写上python代码吧：

"""根据URL中不同的路径返回不同的内容返回独立的HTML页面"""importsocketsk=socket.socket()sk.bind(("127.0.0.1",8080))#绑定IP和端口sk.listen()#监听

#将返回不同的内容部分封装成函数defindex(url):#读取index.html页面的内容withopen("index.html","r",encoding="utf8")asf:s=f.read()#返回字节数据returnbytes(s,encoding="utf8")

defhome(url):withopen("home.html","r",encoding="utf8")asf:s=f.read()returnbytes(s,encoding="utf8")

#定义一个url和实际要执行的函数的对应关系list1=[("/index/",index),("/home/",home),]

while1:#等待连接conn,add=sk.accept()data=conn.recv(8096)#接收客户端发来的消息#从data中取到路径data=str(data,encoding="utf8")#把收到的字节类型的数据转换成字符串#按\r\n分割data1=data.split("\r\n")[0]url=data1.split()[1]#url是我们从浏览器发过来的消息中分离出的访问路径conn.send(b'HTTP/1.1200OK\r\n\r\n')#因为要遵循HTTP协议，所以回复的消息也要加状态行#根据不同的路径返回不同内容func=None#定义一个保存将要执行的函数名的变量foriinlist1:ifi[0]==url:func=i[1]breakiffunc:response=func(url)else:response=b"404notfound!"

#返回具体的响应消息conn.send(response)conn.close()

八、返回动态页面的web框架

这网页能够显示出来了，但是都是静态的啊。页面的内容都不会变化的，我想要的是动态网站，动态网站的意思是里面有动态变化的数据，而不是页面里面有动态效果，这个大家要注意啊。

"""根据URL中不同的路径返回不同的内容返回HTML页面让网页动态起来"""importsocketimporttime

sk=socket.socket()sk.bind(("127.0.0.1",8080))#绑定IP和端口sk.listen()#监听

#将返回不同的内容部分封装成函数defindex(url):withopen("index.html","r",encoding="utf8")asf:s=f.read()now=str(time.time())s=s.replace("@@oo@@",now)#在网页中定义好特殊符号，用动态的数据去替换提前定义好的特殊符号returnbytes(s,encoding="utf8")

接下来我们看一个别人写好的模块来搞的web框架，这个模块叫做wsgiref

九、wsgiref模块版web框架

wsgiref模块其实就是将整个请求信息给封装了起来，就不需要你自己处理了，假如它将所有请求信息封装成了一个叫做request的对象，那么你直接request.path就能获取到用户这次请求的路径，request.method就能获取到本次用户请求的请求方式(get还是post)等，那这个模块用起来，我们再写web框架是不是就简单了好多啊。

对于真实开发中的pythonweb程序来说，一般会分为两部分：服务器程序和应用程序。

服务器程序负责对socket服务器进行封装，并在请求到来时，对请求的各种数据进行整理。

应用程序则负责具体的逻辑处理。为了方便应用程序的开发，就出现了众多的Web框架，例如：Django、Flask、web.py等。不同的框架有不同的开发方式，但是无论如何，开发出的应用程序都要和服务器程序配合，才能为用户提供服务。

这样，服务器程序就需要为不同的框架提供不同的支持。这样混乱的局面无论对于服务器还是框架，都是不好的。对服务器来说，需要支持各种不同框架，对框架来说，只有支持它的服务器才能被开发出的应用使用。最简单的Web应用就是先把HTML用文件保存好，用一个现成的HTTP服务器软件，接收用户请求，从文件中读取HTML，返回。如果要动态生成HTML，就需要把上述步骤自己来实现。不过，接受HTTP请求、解析HTTP请求、发送HTTP响应都是苦力活，如果我们自己来写这些底层代码，还没开始写动态HTML呢，就得花个把月去读HTTP规范。

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

这时候，标准化就变得尤为重要。我们可以设立一个标准，只要服务器程序支持这个标准，框架也支持这个标准，那么他们就可以配合使用。一旦标准确定，双方各自实现。这样，服务器可以支持更多支持标准的框架，框架也可以使用更多支持标准的服务器。

WSGI（WebServerGatewayInterface）就是一种规范，它定义了使用Python编写的web应用程序与web服务器程序之间的接口格式，实现web应用程序与web服务器程序间的解耦。

常用的WSGI服务器有uwsgi、Gunicorn。而Python标准库提供的独立WSGI服务器叫wsgiref，Django开发环境用的就是这个模块来做服务器。

好，接下来我们就看一下（能理解就行，了解就可以了）：先看看wsfiref怎么使用

mysql>createdatabasedb1;QueryOK,1rowaffected(0.00sec)mysql>usedb1;Databasechangedmysql>createtableuserinfo(idintprimarykeyauto_increment,usernamechar(20)notnullunique,passwordchar(20)notnull);QueryOK,0rowsaffected(0.23sec)

mysql>insertintouserinfo(username,password)values('chao','666'),('sb1','222');QueryOK,2rowsaffected(0.03sec)Records:2Duplicates:0Warnings:0

mysql>select*fromuserinfo;+----+----------+----------+|id|username|password|+----+----------+----------+|1|chao|666||2|sb1|222|+----+----------+----------+2rowsinset(0.00sec)

然后再创建这么几个文件：

python文件名称webmodel.py，内容如下：

#创建表，插入数据defcreatetable():importpymysqlconn=pymysql.connect(host='127.0.0.1',port=3306,user='root',password='666',database='db1',charset='utf8')cursor=conn.cursor(pymysql.cursors.DictCursor)sql='''--创建表createtableuserinfo(idintprimarykeyauto_increment,usernamechar(20)notnullunique,passwordchar(20)notnull);--插入数据insertintouserinfo(username,password)values('chao','666'),('sb1','222');'''cursor.execute(sql)conn.commit()cursor.close()conn.close()

python的名为webauth文件，内容如下：

#对用户名和密码进行验证defauth(username,password):importpymysqlconn=pymysql.connect(host='127.0.0.1',port=3306,user='root',password='123',database='db1',charset='utf8')print('userinfo',username,password)cursor=conn.cursor(pymysql.cursors.DictCursor)sql='select*fromuserinfowhereusername=%sandpassword=%s;'res=cursor.execute(sql,[username,password])ifres:returnTrueelse:returnFalse

用户输入用户名和密码的文件，名为web.html，内容如下：

用户验证成功后跳转的页面，显示成功，名为websuccess.html，内容如下：

宝贝儿，恭喜你登陆成功啦

python服务端代码(主逻辑代码)，名为web_python.py：

把代码拷走，创建文件，放到同一个目录下，运行一下we_python.py文件的代码就能看到效果，注意先输入的网址是127.0.0.1:8080/login，还要注意你的mysql数据库没有问题。

十、起飞版web框架

我们上一个web框架把所有的代码都写在了一个py文件中，我们拆到其他文件里面去，并且针对不用的路径来进行分发请求的时候都用的if判断，很多值得优化的地方，好，结合我们前面几个版本的优势我们来优化一下，分几个文件和文件夹

将来要说的MVC框架是什么呢：

M：model.py就是和数据库打交道用的，创建表等操作

V：View视图（视图函数，html文件）

C：controller控制器（其实就是我百度云代码里面那个urls文件里面的内容，url（路径）分发与视图函数的逻辑处理）

Django叫做MTV框架

M：model.py就是和数据库打交道用的，创建表等操作（和上面一样）

T：templates存放HTML文件的

V：View视图函数（逻辑处理）

其实你会发现MTV比MVC少一个url分发的部分

所以我们学的django还要学一个叫做url控制器（路径分发）的东西，MTV+url控制器就是我们django要学的内容。

捋一下框架的整个流程吧~~~

上面的代码实现了一个简单的动态页面(字符串替换)，我完全可以从数据库中查询数据，然后去替换我html中的对应内容（专业名词叫做模板渲染，你先渲染一下，再给浏览器进行渲染），然后再发送给浏览器完成渲染。这个过程就相当于HTML模板渲染数据。本质上就是HTML内容中利用一些特殊的符号来替换要展示的数据。我这里用的特殊符号是我定义的，其实模板渲染有个现成的工具：jinja2

下载：

pipinstalljinja2

来一个html文件，index2,html，内容如下：

使用jinja2渲染index2.html文件，创建一个python文件，代码如下：

fromwsgiref.simple_serverimportmake_serverfromjinja2importTemplatedefindex():withopen("index2.html","r",encoding='utf-8')asf:data=f.read()template=Template(data)#生成模板文件ret=template.render({"name":"于谦","hobby_list":["烫头","泡吧"]})#把数据填充到模板里面return[bytes(ret,encoding="utf8"),]

#定义一个url和函数的对应关系URL_LIST=[("/index/",index),]

defrun_server(environ,start_response):start_response('200OK',[('Content-Type','text/html;charset=utf8'),])#设置HTTP响应的状态码和头信息url=environ['PATH_INFO']#取到用户输入的urlfunc=None#将要执行的函数foriinURL_LIST:ifi[0]==url:func=i[1]#去之前定义好的url列表里找url应该执行的函数breakiffunc:#如果能找到要执行的函数returnfunc()#返回函数的执行结果else:return[bytes("404没有该页面",encoding="utf8"),]

现在的数据是我们自己手写的，那可不可以从数据库中查询数据，来填充页面呢？

使用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("selectname,age,department_idfromuserinfo")user_list=cursor.fetchall()cursor.close()conn.close()

创建一个测试的user表：

CREATETABLEuser(idintauto_incrementPRIMARYKEY,nameCHAR(10)NOTNULL,hobbyCHAR(20)NOTNULL)engine=innodbDEFAULTcharset=UTF8;

模板的原理就是字符串替换，我们只要在HTML页面中遵循jinja2的语法规则写上，其内部就会按照指定的语法进行相应的替换，从而达到动态的返回内容。

Web服务器开发领域里著名的MVC模式，所谓MVC就是把Web应用分为模型(M)，控制器(C)和视图(V)三层，他们之间以一种插件式的、松耦合的方式连接在一起，模型负责业务对象与数据库的映射(ORM)，视图负责与用户的交互(页面)，控制器接受用户的输入调用模型和视图完成用户的请求，其示意图如下所示：

Django的MTV模式本质上和MVC是一样的，也是为了各组件间保持松耦合关系，只是定义上有些许不同，Django的MTV分别是值：

除了以上三层之外，还需要一个URL分发器，它的作用是将一个个URL的页面请求分发给不同的View处理，View再调用相应的Model和Template，MTV的响应模式如下所示：

一般是用户通过浏览器向我们的服务器发起一个请求(request)，这个请求回去访问视图函数，（如果不涉及到数据调用，那么这个时候视图函数返回一个模板也就是一个网页给用户），视图函数调用模型，模型去数据库查找数据，然后逐级返回，视图函数把返回的数据填充到模板中空格中，最后返回网页给用户。

当前目录下会生成mysite的工程，目录结构如下：（大家注意昂，pip下载下来的django你就理解成一个模块，而不是django项目，这个模块可以帮我们创建django项目）

pythonmanage.pyrunserver127.0.0.1:8080#此时已经可以启动django项目了，只不过什么逻辑也没有呢

我们现在只需要看其中两个文件

学习Django，我们就学上面的这些文件，怎么在MTV+url分发的功能下来使用。

最后我们说一下，其实我们将来创建django项目，很少用命令行了，就用pycharm来创建，怎么创建呢？看图：

看项目目录：

django1.11.9版本的url写法：fromdjango.conf.urlsimporturlfromdjango.contribimportadminfromcrmimportviewsurlpatterns=[url(r'^admin/',admin.site.urls),url(r'^index/',views.index),]下面是django2.x版本的url写法，不太一样了，但是兼容1.x的，不过我们现在还是主要说1.xx版本的，所以写url的时候按照上的方式写。fromdjango.contribimportadminfromdjango.urlsimportpath找对应的函数，是哪个app里面的函数fromapp01importviews

urlpatterns=[path('admin/',admin.site.urls),#这个先不用管，后面会学path('index/',views.index),]

视图

fromdjango.shortcutsimportrender,HttpResponse#Createyourviewshere.

defindex(request):

importdatetimenow=datetime.datetime.now()ctime=now.strftime("%Y-%m-%d%X")#returnHttpResponse('哈哈，好玩吗？')returnrender(request,"index.html",{"ctime":ctime})#render，渲染html页面文件并返回给浏览器

模板

通过pycharm来运行项目：

看控制台：

执行效果如下：

有同学说：我想自己配置启动的端口怎么搞啊：

还有一点说一下昂，在settings配置文件里面有关于templates(放html文件的配置)：

TEMPLATES=[{'BACKEND':'django.template.backends.django.DjangoTemplates','DIRS':[os.path.join(BASE_DIR,'templates')]#有些版本的django没有写这个，自己写一下，就是配置一个django找html文件的路径，render方法就来这里找html文件,'APP_DIRS':True,'OPTIONS':{'context_processors':['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},]

关于请求和响应的请求信息和相应信息的设置还需要你自己写吗？之前我们用wsgiref是不是还写来着，现在都不需要写了，简单不。

还有一点：post请求的时候你会发现一个Forbidden的错误：

现在只需要做一步，在settings配置文件里面将这一行注释掉，这是django给你加的一个csrf的认证，现在不需要，我们会讲的

MIDDLEWARE=['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware',#'django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware',]

还记得django写视图函数的时候，有一个参数是必须要给的吗，叫做request，如果你是post请求，那么就用request.POST，就能拿到post请求提交过来的所有数据（一个字典，然后再通过字典取值request.POST.get('username')，取出来的就是个字符串，你在那个字典里面看到的是{'username':['chao']}，虽然看着是列表，但是request.POST.get('username')取出来的就是个字符串），通过request.GET就能拿到提交过来的所有数据，而且记着，每一个视图函数都要给人家返回一些内容，用render或者HttpResponse等，其实render里面也是通过HttpResponse来返回内容，不然会报错，错误是告诉你没有返回任何内容：