自创Web框架之过度Django框架

2022-03-25 17:24:11 浏览数 (1)

目录

  • 自创Web框架之过度Django框架
    • 软件开发架构
    • HTTP协议
    • Web框架之“撸起袖子加油干”
    • Web框架之通过wsgiref加油干
      • 封装优化处理
  • 动静网页
  • jinjia2模块
  • 数据库
  • 自写框架梳理

自创Web框架之过度Django框架

Web框架,其实就是Web应用的建立;比如网页版的QQ,b站····都是Web应用软件; Web应用又是什么?可以理解为基于浏览器的一些应用程序,用户只需要有浏览器即可,不需要再安装其他软件; 比如我们打开一个URL,Web服务器返回一个HTML页面给你,那么你在搜索或者URL拼接路径搜索的时候Web服务器是怎么知道要返回什么给你?下面介绍一下:

在介绍之前先介绍所需基础知识,同时也是Web运行所需的:

软件开发架构

  • C/S架构:客户端和服务端
  • B/S架构:浏览器和服务端

ps:b/s本质也是c/s架构

HTTP协议

四大特性

  • 基于TCP、IP作用于应用层之上的协议
  • 基于请求响应
  • 无状态
  • 无(短)连接
    • 长连接:websocket

数据格式

代码语言:javascript复制
请求首行(http协议版本,网络请求的方法)
   请求头(一大堆k,v键值对)
   /r/n   # 换行符不能省略
   请求体(存放的是一些数据,并不是每种请求方式都有请求体,get没有请求体,post有请求体)
    
# 请求方式
get:朝服务器索要数据,比如输入网址获得相应的数据
post:向服务器提交数据,比如用户登录输入用户名和密码后,提交到后端做身份校验

响应格式

代码语言:javascript复制
响应首行(http协议版本,网络请求的方法)
  响应头(一大堆k,v键值对)
   /r/n   # 换行符不能省略
  响应体(交给给浏览器展示给用户看的数据)

响应状态码

HTTP 状态码由三个十进制数字组成,第一个十进制数字定义了状态码的类型。响应分为五类:信息响应(100–199),成功响应(200–299),重定向(300–399),客户端错误(400–499)和服务器错误 (500–599)

分类

分类描述

1**

信息,服务器收到请求,需要请求者继续执行操作

2**

成功,操作被成功接收并处理

3**

重定向,需要进一步的操作以完成请求

4**

客户端错误,请求包含语法错误或无法完成请求

5**

服务器错误,服务器在处理请求的过程中发生了错误

代码语言:javascript复制
# 注意
公司还会自定义状态码 一般以10000开头
参考:聚合数据

请求方式

  • get请求:向别人(服务器)索要数据
  • post请求:向别人提交数据(比如表单)

Web框架之“撸起袖子加油干”

为了更方便的理解请求网页并返回数据的过程,写一套下面的程序帮助理解

代码语言:javascript复制
import socket


server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)  # 池子

while True:
    conn,addr = server.accept()
    data=conn.recv(1024)
    # print(data) # 忽略favicon.ico,拿到用户在url后面输入的字符串
    data = data.decode('utf-8')
    conn.send(b'HTTP/1.1 200 Okrnrn')
    # 获取字符串中特定的内容   正则和切割
    current_path = data.split(' ')[1]
    # print(current_path)  # /index
    if current_path =='/index':
        with open(r'E:web组件图书管理系统界面图书管理系统.html','rb')as f:
            conn.send(f.read())
    elif current_path == '/login':
        conn.send(b'hello')
    else:
        conn.send(b'Nothing to give you!')
    conn.close()

通过上面的例子,能够简单的理解通过get请求方式得到的页面是如何返回,但是我们个人手写得服务端存在问题,如果客户请求不同得页面那么我们就得写n多个if/else,数据得格式处理起来也比较繁琐······通过一个模块来解决这些问题wsgiref模块

Web框架之通过wsgiref加油干

代码语言:javascript复制
# 解决了上述两个问题
from wsgiref.simple_server import make_server


def run(request,response):
    """
    :param request:请求相关的所有数据
    :param response:响应相关的所有数据
    :return:返回给浏览器的数据
    """
    response('200 OK',[])
    current_path = request.get("PATH_INFO")
    if current_path == '/index':
        return [b'index']
    elif current_path == '/login':
        return [b'login']
    return [b'404 error']


if __name__ == '__main__':
    server = make_server('127.0.0.1',8080,run)  # 实时监听,一旦被访问会全部交给run函数处理
    server.serve_forever()  # 启动服务端

封装优化处理

封装的过程中主要解决: 网址的匹配问题 网址多匹配如何解决 功能复杂代码块如何解决,放在一个文件结构不清晰

代码语言:javascript复制
'''服务端'''
from wsgiref.simple_server import make_server
from views import *
from urls import *
'''
urls.py 路由与视图函数的对应关系
views.py主要存视图函数
templates 文件夹主要存HTML文件
拆分功能后只需在urls.py中书写对应关系,views.py中书写后端的业务逻辑即可
'''


def run(env, response):
    '''

    :param env:请求相关的所有数据
    :param response:响应相关的所有数据
    :return:返回给浏览器的数据
    '''
    # print(env)  # wsgiref 模块 将http格式的数据处理好
    response('200 ok',[])
    # 从env返回的大字典中拿出用户输入的内容 --->key
    current_path = env.get('PATH_INFO')
    # if current_path == '/index':
    #     return [b'Hell index']
    # elif current_path == 'login':
    #     return [b'hello wsgiref']
    # else:
    #     return [b'404']

    # 定义一个变量存储匹配到的函数名
    func = None
    for url in urls:
        if current_path == url[0]:
            # 匹配成功将url对应的函数名赋值给func
            func = url[1]
            break  # 结束当前循环
        # 判断一下func是否有值
    if func:
        res = func()
    else:
        res = error()
    return [res.encode('utf-8')]

if __name__ == '__main__':
    server = make_server('127.0.0.1', 8081, run)  # 实时监听,只要有客户端来了,就交给run函数执行
    server.serve_forever()  # 启动服务端
代码语言:javascript复制
'''
urls.py 路由与视图函数的对应关系


'''
from views import *

urls = [
    ('/index',index),
    ('login',login)
]
代码语言:javascript复制
'''
views.py主要存视图函数
下面统称为视图函数

'''


def index(env):
    return 'index'
def login(env):
    return 'login'
def error(env):
    return '404'
# 返回文件
def file(env):
    with open(r'E:web组件图书管理系统界面图书管理系统.html','r',encoding='utf8')as f:
        return f.read()

动静网页

  • 静态网页:数据是不变的,不需要实时变化的,数据写死··
  • 动态网页:数据来源于后端(代码、数据库),数据实时变化等特点

示例一:将时间同步到html页面

代码语言:javascript复制
'''服务端'''
from wsgiref.simple_server import make_server

from urls import *
def run(env, response):
    '''

    :param env:请求相关的所有数据
    :param response:响应相关的所有数据
    :return:返回给浏览器的数据
    '''
    # print(env)  # wsgiref 模块 将http格式的数据处理好
    response('200 ok', [])
    # 从env返回的大字典中拿出用户输入的内容 --->key
    current_path = env.get('PATH_INFO')
    
    # 定义一个变量存储匹配到的函数名
    func = None
    for url in urls:
        if current_path == url[0]:
            # 匹配成功将url对应的函数名赋值给func
            func = url[1]
            break  # 结束当前循环
        # 判断一下func是否有值
    if func:
        res = func(env)
    else:
        res = error(env)
    return [res.encode('utf-8')]


if __name__ == '__main__':
    server = make_server('127.0.0.1', 8081, run)  # 实时监听,只要有客户端来了,就交给run函数执行
    server.serve_forever()  # 启动服务端

    
    
'''urls.py'''
from views import *

urls = [
    ('/get_time',get_time),
]

'''views.py'''
# 同步时间
def get_time(env):
    from datetime import datetime
    current_time = datetime.now().strftime('%Y-%m-%d %X')
    with open(r'get_time.html','r',encoding='utf8') as f:
        data = f.read()
    data = data.replace('AAA',current_time)  # 用替换的方式将数据传到HTML文件中
    return data
代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style>
    #d1{
        font-size: 48px;
        color: tomato;

    }
</style>
<body>

<div class="container">
    <div class="row">
        <div id="d1" class="col-md-8 col-lg-offset-2">
            AAA
        </div>
    </div>
</div>
</body>
</html>

jinjia2模块

该模块是flask框架必备的模块,在这里只使用jinjia2模块来写我们的模板语法

需求:将后端字典展示到HTML页面上

代码语言:javascript复制
'''服务端和上面一样'''

'''urls.py'''
from views import *
urls = [
    ('/get_dict',get_dict)
    ]
'''views.py'''

# 获取字典
def get_dict(env):
    user_dict = {'id': 1, 'name': 'Hammer', 'hobby': 'python'}
    from jinja2 import Template
    with open(r'templates/get_dict.html', 'r', encoding='utf8') as f1:
        data = f1.read()
    temp = Template(data)
    res = temp.render(user_data=user_dict)  # 将user_dict传递给html页面,在该页面使用user_data调用
    return res
代码语言:javascript复制
<!--由于导入了jinjia2模块,这里可以直接使用模板语法,类似python的字典方法-->
<body>
{{user_data}}
{{user_data.id}}
{{user_data['name']}}
{{user_data.get('hobby')}}
</body>

数据库

需求:操作MySQL数据并且展示到HTML页面上 注意:数据是在后端处理完之后发送到前端的

代码语言:javascript复制
'''服务端'''
from wsgiref.simple_server import make_server

from urls import *
def run(env, response):
    '''

    :param env:请求相关的所有数据
    :param response:响应相关的所有数据
    :return:返回给浏览器的数据
    '''
    # print(env)  # wsgiref 模块 将http格式的数据处理好
    response('200 ok', [])
    # 从env返回的大字典中拿出用户输入的内容 --->key
    current_path = env.get('PATH_INFO')
    
    # 定义一个变量存储匹配到的函数名
    func = None
    for url in urls:
        if current_path == url[0]:
            # 匹配成功将url对应的函数名赋值给func
            func = url[1]
            break  # 结束当前循环
        # 判断一下func是否有值
    if func:
        res = func(env)
    else:
        res = error(env)
    return [res.encode('utf-8')]


if __name__ == '__main__':
    server = make_server('127.0.0.1', 8081, run)  # 实时监听,只要有客户端来了,就交给run函数执行
    server.serve_forever()  # 启动服务端
代码语言:javascript复制
'''路由'''
from views import *
urls = [
        ('/get_db',get_db)
]
代码语言:javascript复制
'''视图函数'''
# 获取数据库的内容
def get_db(env):
    import pymysql
    conn = pymysql.connect(
        user='root',
        password='7410',
        port=3306,
        host='127.0.0.1',
        database='info',
        charset='utf8',
        autocommit=True
    )
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    sql = 'select * from emp;'
    rows = cursor.execute(sql)
    res = cursor.fetchall() # [{},{},{}]
    # print(res)
    with open(r'templates/get_db.html','r',encoding='utf8') as f:
        data = f.read()
    temp = Template(data)
    total_res = temp.render(data_list = res)
    return total_res
代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <h1 style="text-align: center">用户数据</h1>
        <div class="col-md-8 col-lg-offset-2">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr class="success" style="text-align: center">
                        <td>id</td>
                        <td>name</td>
                        <td>sex</td>
                        <td>age</td>
                        <td>dep_id</td>
                    </tr>
                </thead>
                <tbody>
                    {%for user_dict in data_list%}
                    <tr class="info" style="text-align: center">
                        <td>{{user_dict.id}}</td>
                        <td>{{user_dict.name}}</td>
                        <td>{{user_dict.sex}}</td>
                        <td>{{user_dict.age}}</td>
                        <td>{{user_dict.dep_id}}</td>
                    </tr>
                    {%endfor%}
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

到此前后端和数据库交互就都完成了,这所有的功能都可以用Django完成,上面只是一个推导过程~

自写框架梳理

  • wsgiref模块:
    • 封装了socket代码
    • 处理了http数据格式
  • 根据功能的不同拆分成不同的文件夹
    • urls.py 路由与视图函数对应关系
    • views.py 视图函数
    • templates 模板文件夹
  • 步骤:
    • 第一步添加路由与视图函数的对应关系
    • 去views中书写功能代码
    • 如果需要使用到html则去模板文件夹中操作
  • jinjia2模板语法
    • {{}}
    • {%%}

0 人点赞