初识前后端交互

软件开发架构

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

HTTP协议

四大特性
- 基于TCP/IP之上作用于应用层
- 基于请求响应
- 无状态注:就是[cookie session token]
- 无连接注: 长连接 websocket(HTTP协议的大补丁)
数据格式
请求格式
请求首行(请求方式,协议版本)
请求头(一堆k:v键值对)
\r\n
请求体(真正的数据发完post请求的时候才会有,如果是get请求不会有)
响应格式
响应首行
响应头
\r\n
响应体
状态响应码
用特定的数字表示一些意思
1XX : 服务器已经成功接收到你的数据正在处理你可以继续提交其数据
2XX : 服务端成功响应(200请求)
3XX : 重定向
4XX : 请求错误(404 请求资源不存在 403 拒绝访问)
5XX : 服务器内部错误(500)

请求方式

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

手撸简易版web框架

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

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\r\n\r\nhello') # 发送格式
""" # 浏览器发送过来的数据 - headers
b'GET / HTTP/1.1\r\n - 请求首行

Host: 127.0.0.1:8081\r\n - 请求头
Connection: keep-alive\r\n
Cache-Control: max-age=0\r\n
Upgrade-Insecure-Requests: 1\r\n
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\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3\r\n
Sec-Fetch-Site: none\r\nAccept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n'
"""

基于wsgiref模块

urls.py 路由与视图对象关系
views.py 放的是视图函数(处理业务逻辑的)
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的取值方式一致