前后端交互基本知识

软件开发架构

• c/s架构
• b/s架构
• 注: b/s本质也是c/s

HTTP协议

1. 四大特性

   • 基于TCP/IP之上作用于应用层
   • 基于请求响应
   • 无状态 注:就是[cookie session token]
   • 无连接 注: 长连接 websocket(HTTP协议的大补丁)

2. 数据格式
   请求格式
   请求首行(请求方式,协议版本)
   请求头(一堆k:v键值对)
   
   请求体(真正的数据 发完post请求的时候才会有,如果是get请求不会有)
   响应格式
   响应首行
   响应头
   
   响应体

3. 状态响应码
   用特定的数字表示一些意思
   1XX : 服务器已经成功接收到你的数据 正在处理 你可以继续提交其数据
   2XX : 服务端成功响应(200请求)
   3XX : 重定向
   4XX : 请求错误(404 请求资源不存在 403 拒绝访问)
   5XX : 服务器内部错误(500)

请求方式

get请求
朝别人要数据
post请求
向别人提交数据(例如:用户登录什么的)
url: 统一资源定位符

手撸简易版web框架

主要是使用socket编程,一开始也会受到浏览器发过来的数据一个请求头,可以从里面拿到需要用到的数据,在传输的时候要按照固定的格式传输 conn.send(b'HTTP/1.1 200 OK 消息')

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8081))
server.listen(5)  # 半连接池
# 接收浏览器数据
while 1:
    conn, addr = server.accept()
    data = conn.recv(1024)
    headers = data.decode('utf8').split(" ")[1]
    print(headers)
    conn.send(b'HTTP/1.1 200 OK

hello') # 发送格式
""" # 浏览器发送过来的数据 - headers
b'GET / HTTP/1.1
 - 请求首行

Host: 127.0.0.1:8081
 - 请求头
Connection: keep-alive

Cache-Control: max-age=0

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36

Sec-Fetch-Mode: navigate

Sec-Fetch-User: ?1

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3

Sec-Fetch-Site: none
Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9


'
"""

基于wsgiref模块

1. urls.py 路由与视图对象关系
2. views.py 放的是视图函数(处理业务逻辑的)
3. templates 模版文件夹(一堆html文件)

下面的文件就是一个简易版的基于wsgiref模块的web

其实这个就是一个根据不同的模块拆分成不同的py文件,拆分完之后,要想添加功能,只需要在urls和views两个地方添加数据就可以了

urls.py

import views
func = {
    '/index': views.index,
    '/login': views.login,
    '/register': views.register
}

views.py

def index():
    return b'index'


def login():
    return b'login'


def register():
    return b'register'

接收的地方.py

from wsgiref.simple_server import make_server
import urls


def run(env, response):
    """
    :param env: 请求相关的所有数据
    :param response: 响应相关的所有数据
    :return:
    """
    response('200 OK', [])
    choice = env.get('PATH_INFO')
    print(choice)
    if choice in urls.func:
        res = urls.func.get(choice)()
        return [res]
    else:
        return [bytes(404)]


if __name__ == '__main__':
    server = make_server('127.0.0.1', 8081, run)
    server.serve_forever()

动静态网页

静态网页

​ 数据是写死的 万年不变

动态网页

​ 数据是实时获取的

eg：
1. 后端获取当前时间展示到前端
2. 后端获取数据库中的数据展示到前端

疑问：

如何将后端获取的数据 传递给html页面

==> 后端获取的数据 传递给html页面 >>>: 模版的渲染

jinja2 模块 - 解决如何将后端数据传递给前端展示的疑问

模版语法(极其贴近python后端语法)

<p>{{ user }}</p>
<p>{{ user.name }}</p>
<p>{{ user['pwd'] }}</p>
<p>{{ user.get('hobby') }}</p>

# 以上三种方式都是和python的取值方式一致