Web框架本质
众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端。
s1
1 import socket 2 def handle_request(client): 3 buf = client.recv(1024) 4 client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding="utf-8")) 5 # client.send(bytes("<h1 style='background-color:red;'>Hello,Seven<h1>",encoding="utf-8")) 6 f=open('index.html','rb') 7 data=f.read() 8 f.close() 9 client.send(data) 10 def main(): 11 sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) 12 sock.bind(('localhost', 8000)) 13 sock.listen(5) 14 while True: 15 connection, address = sock.accept() 16 handle_request(connection) 17 connection.close() 18 if __name__ == '__main__': 19 main()
上述通过socket来实现了其本质,而对于真实开发中的python web程序来说,一般会分为两部分:服务器程序和应用程序。服务器程序负责对socket服务器进行封装,并在请求到来时,对请求的各种数据进行整理。应用程序则负责具体的逻辑处理。为了方便应用程序的开发,就出现了众多的Web框架,例如:Django、Flask、web.py 等。不同的框架有不同的开发方式,但是无论如何,开发出的应用程序都要和服务器程序配合,才能为用户提供服务。这样,服务器程序就需要为不同的框架提供不同的支持。这样混乱的局面无论对于服务器还是框架,都是不好的。对服务器来说,需要支持各种不同框架,对框架来说,只有支持它的服务器才能被开发出的应用使用。这时候,标准化就变得尤为重要。我们可以设立一个标准,只要服务器程序支持这个标准,框架也支持这个标准,那么他们就可以配合使用。一旦标准确定,双方各自实现。这样,服务器可以支持更多支持标准的框架,框架也可以使用更多支持标准的服务器。
index.html
1 <h1 style='background-color:red;'>Hello,Seven<h1> 2 <a href='http://www.baidu.com'>走你</a> 3 <table border='1'> 4 <tr> 5 <td>1</td> 6 <td>2</td> 7 <td>3</td> 8 </tr> 9 <tr> 10 <td>1</td> 11 <td>1</td> 12 <td>1</td> 13 </tr> 14 <table>
前端:html(人) css(衣服)js(动起来),html和css是静态基础 HTML 1.一套规则,浏览器认识的规则。 2.开发者: ①.学习Html规则 ②.开发后台程序: ---写html文件(充当模板的作用) ---数据库获取数据,然后替换到html文件的指定位置(Web框架) 3.本地测试 ---找到文件路径,直接浏览器打开 ---pycharm打开测试 4.编写Html文件 ---doctype对应关系 ---html标签,标签内部可以写属性 ===>只能有一个 ---注释: <!-- 注释的内容 --> 5.标签分类 ---自闭合标签 <meta charset="UTF-8"> ---主动闭合标签 <title>博客</title> 6.head标签中 ---<meta ->编码,跳转,刷新,关键字,描述,IE兼容<meta http-equiv = "X-UA-Compatible" cotent = "IE=IE9;IE=IE8;"/> ---Title标签 ---<link/> 搞图标 ---<style/> ---<script/> 7.body标签 ---图标 >< ---p标签,段落 ---br标签,换行 ===小总结=== 所有的标签分为:1.块级标签---div(白板),H系列(加大加粗),p标签(段落和段落之间有间距) 2.行内标签(内联标签)---span标签(白板) 标签之间可以嵌套 标签存在的意义:css操作,js操作 ps:Chrome审查元素的使用 1.-定位 2.-查看样式 -h系列 -div -span - input系列 + form标签 input type='text' - name属性,value="赵凡" input type='password' - name属性,value="123" input type='submit' - value='提交' 提交按钮,表单 input type='button' - value='登录' 按钮 input type='radio' - 单选框 value,checked="checked",name属性(name相同则互斥) input type='checkbox' - 复选框 value, checked="checked",name属性(批量获取数据) input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data" input type='reset' - 重置 <textarea >默认值</textarea> - name属性 select标签 - name,内部option value, 提交到后台,size,multiple ---optgroup label="四川省",选不了 - a标签 - 跳转 - 锚 href='#某个标签的ID' 标签的ID不允许重复 - img src alt title - 列表 ul li ol li dl dt dd - 表格 table thead tr th tbody tr td colspan = '' rowspan = '' - label 用于点击文字,使得关联的标签获取光标 <label for="username">用户名:</label> <input id="username" type="text" name="user" /> - fieldset legend - 20个标签 CSS ---位置 ---颜色 ---...... 在标签上设置style属性: background-color: #2459a2; height: 48px; ... 编写css样式: 1. 标签的style属性 2. 写在head里面 style标签中写样式 - id选择器 #i1{ background-color: #2459a2; height: 48px; } - class选择器 ******(常用) .名称{ ... } <标签 class='名称'> </标签> - 标签选择器 div{ ... } 所有div设置上此样式 - 层级(关联)选择器(空格) ****** .c1 .c2 div{ } - 组合选择器(逗号) ****** #c1,.c2,div{ } - 属性选择器 ****** 对选择到的标签再通过属性再进行一次筛选 .c1[n='alex']{ width:100px; height:200px; } PS: - 优先级,标签上style优先,编写顺序,就近原则 2.5 css样式也可以写在单独文件中 <link rel="stylesheet" href="commons.css" /> 3、注释 /* */ 4、边框 - 宽度,样式,颜色 (border: 4px dotted red;) - border-left 5、 height, 高度 百分比 width, 宽度 像素,百分比 text-align:ceter, 水平方向居中 line-height,垂直方向根据标签高度 color、 字体颜色 font-size、 字体大小 font-weight 字体加粗 6、float 让标签浪起来,块级标签也可以堆叠 老子管不住: <div style="clear: both;"></div> 7、display display: none; -- 让标签消失 display: inline; display: block; display: inline-block; 具有inline,默认自己有多少占多少 具有block,可以设置无法设置高度,宽度,padding margin ****** 行内标签:无法设置高度,宽度,padding margin 块级标签:设置高度,宽度,padding margin 8、padding margin(0,auto) 边距 padding:内边距, margin:外边距
s1
1 <!DOCTYPE html> 2 <!-- 类似html这种格式,标签,html标签 <html>content...</html><html> 3 lang 标签内部的属性 --> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>blog</title> 8 </head> 9 <body> 10 <a href="http://www.cnblogs.com/jyh-py-blog">博客</a> 11 </body> 12 </html>
s2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>123dasddsadd<br />sadasdad</p> 9 <p>123</p> 10 <p>123</p> 11 <h1>Alex</h1> 12 <h2>Alex</h2> 13 <h3>Alex</h3> 14 <h4>Alex</h4> 15 <h5>Alex</h5> 16 <h6>JYH</h6> 17 <span>hello</span> 18 <span>hello</span> 19 <span>hello</span> 20 <!--<a href="http://www.cnblogs.com/jyh-py-blog/">空 格</a>--> 21 </body> 22 </html>
s3
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <div></div> 10 <span></span> 11 <p></p> 12 </div> 13 </body> 14 </html>
s4
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="http://localhost:8888/index" method="POST"> 9 <input type="text" name="user" /> 10 <input type="text" name="email"/> 11 <input type="password" name="pwd"/> 12 <!--{'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' }--> 13 <input type="button" value="登录1"/> 14 <input type="submit" value="登录2"/> 15 </form> 16 <br/> 17 <form> 18 <input type="text" /> 19 <input type="password" /> 20 <input type="button" value="登录1"/> 21 <input type="submit" value="登录2"/> 22 </form> 23 </body> 24 </html>
s5
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="https://www.sogou.com/web"> 9 <input type="text" name="query" value="赵凡" /> 10 <input type="submit" value="搜索" /> 11 </form> 12 </body> 13 </html>
s6
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form enctype="multipart/form-data"> 9 <div> 10 <textarea name="meno" >asdfasdf</textarea> 11 <select name="city" size="10" multiple="multiple"> 12 <option value="1">北京</option> 13 <option value="2">上海</option> 14 <option value="3" selected="selected">南京</option> 15 <option value="4">成都</option> 16 </select> 17 <input type="text" name="user" /> 18 <p>请选择性别:</p> 19 男:<input type="radio" name="gender" value="1" /> 20 女:<input type="radio" name="gender" value="2" checked="checked"/> 21 Alex:<input type="radio" name="gender" value="3"/> 22 <p>爱好</p> 23 篮球:<input type="checkbox" name="favor" value="1" /> 24 足球:<input type="checkbox" name="favor" value="2" checked="checked" /> 25 皮球:<input type="checkbox" name="favor" value="3" /> 26 台球:<input type="checkbox" name="favor" value="4" checked="checked"/> 27 网球:<input type="checkbox" name="favor" value="5" /> 28 <p>技能</p> 29 撩妹:<input type="checkbox" name="skill" checked="checked" /> 30 写代码:<input type="checkbox" name="skill"/> 31 <p>上传文件</p> 32 <input type="file" name="fname"/> 33 </div> 34 <input type="submit" value="提交" /> 35 <input type="reset" value="重置" /> 36 </form> 37 </body> 38 </html>
s7
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="#i1">第一章</a> 9 <a href="#i2">第二章</a> 10 <a href="#i3">第三章</a> 11 <a href="#i4">第四章</a> 12 <div id="i1" style="height:600px;">第一章的内容</div> 13 <div id="i2" style="height:600px;">第二章的内容</div> 14 <div id="i3" style="height:600px;">第三章的内容</div> 15 <div id="i4" style="height:600px;">第四章的内容</div> 16 </body> 17 </html>
s8
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="http://www.oldboyedu.com"> 9 <img src="1.jpg" title="大帅哥" style="height: 200px;width: 200px;" alt="帅哥女"> 10 </a> 11 <ul> 12 <li>asdf</li> 13 <li>asdf</li> 14 <li>asdf</li> 15 <li>asdf</li> 16 </ul> 17 <ol> 18 <li>asdf</li> 19 <li>asdf</li> 20 <li>asdf</li> 21 <li>asdf</li> 22 </ol> 23 <dl> 24 <dt>ttt</dt> 25 <dd>ddd</dd> 26 <dd>ddd</dd> 27 <dd>ddd</dd> 28 <dt>ttt</dt> 29 <dd>ddd</dd> 30 <dd>ddd</dd> 31 <dd>ddd</dd> 32 </dl> 33 </body> 34 </html>
s9
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table border="1"> 9 <tr> 10 <td>主机名</td> 11 <td>端口</td> 12 <td>操作</td> 13 </tr> 14 <tr> 15 <td>1.1.1.1</td> 16 <td>80</td> 17 <td> 18 <a href="s2.html">查看详细</a> 19 <a href="#">修改</a> 20 </td> 21 </tr> 22 <tr> 23 <td>1.1.1.1</td> 24 <td>80</td> 25 <td>第二行,第3列</td> 26 </tr> 27 </table> 28 <table border="1"> 29 <thead> 30 <tr> 31 <th>表头1</th> 32 <th>表头1</th> 33 <th>表头1</th> 34 <th>表头1</th> 35 </tr> 36 </thead> 37 <tbody> 38 <tr> 39 <td>1</td> 40 <td colspan="3">1</td> 41 </tr> 42 <tr> 43 <td rowspan="2">1</td> 44 <td>1</td> 45 <td>1</td> 46 <td>1</td> 47 </tr> 48 <tr> 49 <td>1</td> 50 <td>1</td> 51 <td>1</td> 52 </tr> 53 <tr> 54 <td>1</td> 55 <td>1</td> 56 <td>1</td> 57 <td>1</td> 58 </tr> 59 </tbody> 60 </table> 61 </body> 62 </html>
s10
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <fieldset> 9 <legend>登录</legend> 10 <label for="username">用户名:</label> 11 <input id="username" type="text" name="user" /> 12 <br /> 13 <label for="pwd">密码:</label> 14 <input id="pwd" type="text" name="user" /> 15 </fieldset> 16 </body> 17 </html>
s11
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 8 #i1{ 9 background-color: #2459a2; 10 height: 48px; 11 } 12 #i2{ 13 background-color: #2459a2; 14 height: 48px; 15 } 16 #i3{ 17 background-color: #2459a2; 18 height: 48px; 19 } 20 .c1{ 21 background-color: #2459a2; 22 height: 10px; 23 } 24 */ 25 /*#c2{*/ 26 /*background-color: black;*/ 27 /*color: white;*/ 28 /*}*/ 29 30 /*.c1 div{*/ 31 /*background-color: black;*/ 32 /*color: white;*/ 33 /*}*/ 34 .i1,.i2,.i3{ 35 background-color: black; 36 color: white; 37 } 38 .c1[n='alex']{ width:100px; height:200px; } 39 </style> 40 </head> 41 <body> 42 <div class="i1">ff</div> 43 <div class="i2">ff</div> 44 <div class="i3">2</div> 45 <input class="c1" type="text" n="alex"> 46 <input class="c1" type="password"> 47 </body> 48 </html>
s12
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="css/commons.css" /> 7 </head> 8 <body> 9 <div class="c1 c2" style="color: pink">asdf</div> 10 <div class="c1 c2" style="color: pink">asdf</div> 11 <div class="c1 c2" style="color: pink">asdf</div> 12 <div class="c1 c2" style="color: pink">asdf</div> 13 <div class="c1 c2" style="color: pink">asdf</div> 14 <div class="c1 c2" style="color: pink">asdf</div> 15 <div class="c1 c2" style="color: pink">asdf</div> 16 <div class="c1 c2" style="color: pink">asdf</div> 17 </body> 18 </html>
s13
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="css/commons.css" /> 7 </head> 8 <body> 9 <div class="c1 c2" style="color: pink">asdf</div> 10 </body> 11 </html>
s14
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="border: 1px solid red;"> 9 asdfasdf 10 </div> 11 <div style="height: 48px; 12 width:80%; 13 border: 1px solid red; 14 font-size: 16px; 15 text-align: center; 16 line-height: 48px; 17 font-weight: bold; 18 ">asdf</div> 19 </body> 20 </html>
s15
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="width: 20%;background-color: red;float: left">1</div> 9 <div style="width: 20%;background-color: black;float: left">2</div> 10 </body> 11 </html>
s16
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 height: 38px; 9 background-color: #dddddd; 10 line-height: 38px; 11 } 12 </style> 13 </head> 14 <body style="margin: 0"> 15 <div class="pg-header"> 16 <div style="width: 980px;margin: 0 auto;"> 17 <div style="float: left;">收藏本站</div> 18 <div style="float: right;"> 19 <a>登录</a> 20 <a>注册</a> 21 </div> 22 <div style="clear: both"></div> 23 </div> 24 </div> 25 <div> 26 <div style="width: 980px;margin: 0 auto;"> 27 <div style="float: left"> 28 Logo 29 </div> 30 <div style="float: right"> 31 <div style="height: 50px;width: 100px;background-color: #dddddd"></div> 32 </div> 33 <div style="clear: both"></div> 34 </div> 35 </div> 36 <div style="background-color: red;"> 37 <div style="width: 980px;margin: 0 auto;"> 38 asdfsdf 39 </div> 40 </div> 41 <div style="width: 300px;border: 1px solid red;"> 42 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 43 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 44 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 45 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 46 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 47 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 48 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 49 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 50 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 51 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 52 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 53 <div style="clear: both;"></div> 54 </div> 55 </body> 56 </html>
s17
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--<div style="background-color: red;display: inline;">asdf</div>--> 9 <!--<span style="background-color: red;display: block;">asdf</span>--> 10 <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span> 11 <a style="background-color: red;">Eric</a> 12 </body> 13 </html>
commons.css
1 .c2{ 2 font-size: 58px; 3 color: black; 4 } 5 .c1{ 6 background-color: red; 7 color: white; 8 }
app.py
1 class MainHandler(tornado.web.RequestHandler): 2 def get(self): 3 print(111) 4 u = self.get_argument('user') 5 e = self.get_argument('email') 6 p = self.get_argument('pwd') 7 if u == 'alex' and p == '123' and e == 'alex@126.com': 8 self.write("OK") 9 else: 10 self.write("滚") 11 def post(self, *args, **kwargs): 12 u = self.get_argument('user', None) 13 e = self.get_argument('email', None) 14 p = self.get_argument('pwd', None) 15 print(u, e, p) 16 self.write('POST') 17 application = tornado.web.Application([ 18 (r"/index", MainHandler), 19 ]) 20 if __name__ == "__main__": 21 application.listen(8888) 22 tornado.ioloop.IOLoop.instance().start()