web框架的本质:

简单的web框架

web的应用本质其实就是socket服务器,用户所使用的浏览器就是一个cocket客户端,客户使用浏览器发送的请求会被服务接收,服务器会按照http协议的响应协议来回复请求,这样的网络通讯,我们就可以自己实现web框架

下面是一个html文件,现在用户想要通过浏览器向服务器请求这个页面,我们应该怎么去让客户访问到这个页面;我们就得使用到socket

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="test.css">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://www.jd.com/favicon.ico">
</head>
<body>

<div class="div1" >
  <h1>欢迎来到我的世界</h1>
</div>

<div class="container">
  <img src="1.jpg" alt="">
</div>

<div class="container">
    <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

</body>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/npm.js"></script>
<script src="test.js"></script>
</html>

下面来写一个socket的文件,但我们使用socket将页面发送给浏览器时,由于html文件不只是一个文件,还有其它文件,这些文件是html文件通过本地路径进行导入的,所有在浏览器上没有办法显示;因此我们就将html先发送给浏览器,当浏览器在解析html文件时会再次向服务端发送请求,我们就将这些文件的请求再次获取通过判断找到对应的文件,并且发送给浏览器,进行渲染html文件;

import socket
# 导入socket这个包
from urls import urlpatters
# 导入所需的文件
from threading import Thread
# 导入thread模块,开启线程
server = socket.socket()
server.bind(('127.0.0.1',8080))  # 连接本地端口(方便测试)
server.listen()   #   设置监听数,可以不写,

while 1:
    conn,addr = server.accept()
    # 接收相应的请求信息
    from_web_data = conn.recv(1024).decode('utf-8')
    # 接收客户端的请求信息,并且转化成字符串,因为请求中会有地址的信息,
    data = from_web_data.split(' ')[1]
    # 将这个字符串用空格分割,得到的第二个字符就是请求的地址,获取到地址是(/ ----  代表的是本地),为了方便发送html的主页面;
    print(data)
    conn.send(b'HTTP/1.1 200 ok\r\n\r\n')
    # 这句话是一个http的消息格式,照着写就行
    
    for i in urlpatters:
        if data == i[0]:
            t = Thread(target=i[1],args=(conn,))
            t.start()
            
   # 这个语句是将urlpatters这个列表进行循环,

下面是一个urls的文件,就是专门放一个列表,再列表中放着一个个的元组,这些元组是为了通过与上边的判断语句进行比对,如果获取到的地址信息是下边列表中那个元组的第一个元素,就会找到元组的第二个元素对应的函数,这个函数有存放在另一个文件里;

import views
# 导入对应的函数文件
urlpatters=[
    ('/',views.home),
    ('/test.css',views.css),
    ('/bootstrap-3.3.7-dist/css/bootstrap.min.css',views.bootstrap_css),
    ('/bootstrap-3.3.7-dist/js/bootstrap.min.js',views.bootstrap_js),
    ('/bootstrap-3.3.7-dist/js/npm.js',views.bootstrap_npm),
    ('/test.js',views.js),
    ('/1.jpg',views.img),
    ('/bootstrap-3.3.7-dist/css/bootstrap.min.css.map',views.bootstrap_map),
]

存放函数的文件,里边存放着每个元组对应的函数,每个函数都对应着各自的文档,当调用某个函数时,函数就会找到对应的文档,将其读取出来,并且发送给浏览器,

def home(conn):
    with open('home.html', 'rb')as f:
        data = f.read()

    conn.send(data)
    conn.close()

def css(conn):
    with open('test.css', 'rb')as f:
        data = f.read()
    conn.send(data)
    conn.close()

def js(conn):
    with open('test.js', 'rb')as f:
        data = f.read()

    conn.send(data)
    conn.close()

def img(conn):
    with open('1.jpg', 'rb')as f:
        data = f.read()

    conn.send(data)
    conn.close()

def bootstrap_css(conn):
    with open('bootstrap-3.3.7-dist/css/bootstrap.min.css', 'rb')as f:
        data = f.read()

    conn.send(data)
    conn.close()

def bootstrap_js(conn):
    with open('bootstrap-3.3.7-dist/js/bootstrap.min.js','rb')as f:
        data = f.read()
    conn.send(data)
    conn.close()

def bootstrap_npm(conn):
    with open('bootstrap-3.3.7-dist/js/npm.js', 'rb')as f:
        data = f.read()
    conn.send(data)
    conn.close()
def bootstrap_map(conn):
    with open('bootstrap-3.3.7-dist/css/bootstrap.min.css.map', 'rb')as f:
        data = f.read()

    conn.send(data)
    conn.close()

wsgiref模块的应用

WSGI(web server gateway interface)就是一种规范,它定义了使用python编写的web应用程序与web服务器程序之间的接口格式,实现web应用程序与web服务器程序间的解耦

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

下面是一个make_server文件

from wsgiref.simple_server import make_server
# 导入make_server模块
from urls import urlpatters
# 导入对应的文件
def application(environ,start_response):
    # environ  ---  所有请求相关信息
    # start_response --- 封装响应数据格式
    path = environ['PATH_INFO']
    # 由于获得信息是个字典的形式,所以这样就能获取到浏览器需要的地址信息;
    start_response('200 ok',[])
    # 相当于HTTP/1.1 200 ok\r\n\r\n 写上就行
    for i in urlpatters:
        if path == i[0]:
            ret = i[1]() # 调用相应的函数,并获取返回值
      # 用于做判断的for语句
    return [ret]
    # 将返回值返回给server_forever()
if __name__ == '__main__':
    http = make_server('127.0.0.1',8090,application)
    # 第一个是本地的ip地址,第二个是端口号,第三个是对应的函数名
    http.serve_forever()
    # 通过这个语句执行上边的函数表达式,并且将得到的返回值发送给浏览器

这个是一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://pic13.nipic.com/20110409/7119492_114440620000_2.jpg">
</head>
<body>
<div>
    <h1>欢迎XXX来到24期后台管理系统</h1>
</div>

<a href="homepage.html">个人中心</a>

</body>
</html>

下边是一个urls文件用来存放用于判断路径并执行对应函数的一个列表文件

import views

urlpatters=[
    ('/',views.home),
]

这个是函数,找到文件并且返回给make_server文件中的函数

def home():
    with open('home.html', 'rb')as f:
        data = f.read()
    return data

原文地址:https://www.cnblogs.com/zhufanyu/p/11644251.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自己重新定义class类即可,主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
起步导入:<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
(1)modal声明一个模态框(2)modal-dialog定义模态框尺寸(3)modal-lg定义大尺寸模态框(4)modal-sm定义小尺寸模态框(5)modal-header(6)modal-body(7)modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
图片在Bootstrap版本3中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性,从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
  一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网,想要快速地将Bootstrap应用到你的项目中,有以下两种办法: 1、bootstrap可以在线引用,方法如下:A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。<!
第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ?:writelessdomore写更少的代码,做更多的事找出所有兄弟:$("div").siblings()基本过滤器:选择器:过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
1.bootstrap表单(1)form声明一个表单域(2)form-inline内联表单域(3)form-horizontal水平排列表单域(4)form-group表单组、包括表单文字和表单控件(5)form-control文本输入框、下拉列表控件样式(6)checkboxcheck-inline多选框样式(7)radioradio-inline单选框样式(8)input-group表单控件组
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java,bootstrap,oracle,springboot,jquery,mybatis。 开始,我也挺心虚的,但是后来一看,,,其实本没有必要这么虚。。。毕竟。。。这些东西,写的有问题。。。问题在于没有逻辑。 bootstrap,j
表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。
1、问题背景   一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
Bootstrap简介什么是Bootstrap?Bootstrap官网框架:库liblibraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单,更快捷;注意是Bootstrap不是BootStrap!这是一个词,不是
1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标,font文件夹需要和css文件夹在同一目录3.bootst导航条(1)navbar声明导航条(2)navbar-default声明默认的导航条样式(3)navbar-inverse声明反白的导航条样式(4)navbar-static-top去掉导航条的圆角(5)n
1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
问题描述:最近在学习BootStrap,过程中遇到引用glyphicon图标无法显示的问题,经过在百度后该问题已解决。1、首先看一下图标显示失败的页面:2、经过参考大佬们的经验,我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的,没有把所有
BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统,随着屏幕设备或可视窗口(viewport)尺寸的
1引入所需要的文件2用法
想让bootstrap的table列内容超出部分省略号,要在table上加table-layout:fixed和word-break:break-all,然后在头部thead的th加上宽度百分比,最后在列里加个标签如span,在这个span加上单行超出部分省略号的css:display:inline-block,overflow:hidden,white-space:nowrap,text-overflow:e