Django——WEB应用程序（手写程序）,HTTP协议，BS CS架构

最新推荐文章于 2023-05-01 08:45:00 发布

gman344

最新推荐文章于 2023-05-01 08:45:00 发布

阅读量717

点赞数 1

分类专栏：技术

原文链接：https://www.colorgg.com

版权

技术专栏收录该内容

463 篇文章 9 订阅

订阅专栏

本文介绍了Web应用程序的概念，强调其无需客户端、直接服务端更新和跨平台性的优点，同时也指出浏览器兼容性和数据安全性的挑战。详细阐述了BS与CS架构的区别，并通过Python实例展示了如何创建一个简单的Web应用，实现实时动态页面。此外，还讲解了HTTP协议的基础知识，包括请求和响应的组成部分、状态码以及URL的结构。

摘要由CSDN通过智能技术生成

一、web应用程序

1 what：用浏览器访问的应用程序
2 优点：
    -不需要客户端
    -更新直接在服务端更新，客户端感知不到
    -跨平台性好（注意:go语言是跨平台编译）
    ps:平台编译 比如：可以在win平台编译出linux下的可执行文件
3 缺点：
    -强调浏览器的适用性（即兼容性）
    -用户的数据都保存在软件厂商那边

二、bs、cs架构

1 bs:浏览器---服务端   （本质还是cs）  web开发是bs架构
2 cs：客户端---服务端

注意：浏览器发出去的请求都符合http协议

三、自己写一个web应用,并实现动态页面

知识补充：

　　静态页面&动态页面

  #静态页面：静态的html，内容不会改变，每次访问看到的数据都一样
  #动态页面：页面的数据会发生变化，每次访问看到的可能都不一样（数据来源可能是数据库）


客户端是浏览器，服务端自己写（python）

#main.py
# 1 写一个web应用的服务端，通过浏览器（客户端），来访问

import socket

server = socket.socket()

# server.bind(('127.0.0.1', 8080)) #在符合http协议的情况下，在浏览器输入127.0.0.1：8080就可以获取数据
server.bind(('192.168.43.75', 8081))
server.listen(5)

while True:
    conn, addr = server.accept()
    # 接收浏览器传过来的数据
    data = conn.recv(1024)
    print(data)
    # 返回给浏览器数据(不符合http协议，所以会返回发送的响应无效)
    # conn.send(b'hello world')

    # (1)返回数据符合http协议，浏览器就能识别了,返回hello world
    # conn.send(b'HTTP/1.1 200 ok \r\n\r\n hello world')

    #(2) 返回符合html格式的数据 #如果title是中文就会乱码需要修改编码
    # conn.send('HTTP/1.1 200 ok \r\n\r\n <h1>title</h1>'.encode('utf-8'))

    # (3)返回一个html页面，打开文件，转成二进制，send一下
    # with open('index.html','r',encoding='utf-8') as f:
    #     data1=f.read()
    #把返回的数据拼起来
    # response='HTTP/1.1 200 ok \r\n\r\n %s'%data1
    # conn.send(response.encode('utf-8'))

    ## (4)实现动态页面（静态页面，动态页面）
    # 在index.html中写一个特殊标记，使用python的变量去替换这个特殊标记
    import time
    ctime=time.time()  # 可能是数据库查询出来的
    with open('index.html','r',encoding='utf-8') as f:
        data1=f.read().replace('{{time}}',str(ctime))
    response='HTTP/1.1 200 ok \r\n\r\n %s'%data1
    conn.send(response.encode('utf-8'))

    conn.close()


#index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{time}}
<br>
<br>

<img height="100" width="100" src="a.jpg" alt="">
</body>
</html>

四、http协议

具体参照博客:　　

　　　　HTTP协议之请求方法，响应头信息，状态码

　　　　https://www.cnblogs.com/guojieying/p/13651818.html

1 HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于万维网服务器与本地浏览器之间传输超文本的传送协议
2 应用层的协议
3 http协议特性（记一下）
    -1 基于tcp/ip之上的应用层协议
    -2 基于请求－响应模式
    -3 无状态保存
    -4 无连接



4  请求协议(浏览器发出来的)（记住）
三部分：请求首行，请求头，请求体

'''
# 请求首行（以第一个\r\n区分的），
# 请求首行里有请求方式：GET  请求地址：/lili/handsome   协议：http   版本：1.1版本
GET /lili/handsome HTTP/1.1\r\n

# 请求头（key:value形式）
Host: 192.168.11.211:8080\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/85.0.4183.83 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Accept-Encoding: gzip, deflate\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n\r\n'

# \r\n\r\n  下面的是请求体的内容

'''


5 响应协议

'''
# 响应首行  响应协议和版本：HTTP/1.1  响应的状态码和标志：200 ok  
HTTP/1.1 200 ok \r\
# 响应头（key:value形式）
key:value
key:valu
\r\n\r\n
# 响应体：在浏览器里看到的东西(浏览器能把下面的html渲染成好看的样子)

<!DOCTYPE html>
<html lang="en">
<h1>hello</h1>
</html>
'''

6 响应状态码
    -1xx：请求正在处理（用户一般看不到）        
    -2xx：请求成功（200）
    -3xx：重定向（301  302）访问一个地址，转到另一个地址
    -4xx：客户端错误（404，403）
    -5xx：服务端错误（502）


 7 url:统一资源定位符
    # 格式
    http://127.0.0.1:8080/order.html
    ftp://xxx
    协议：//IP:端口(80)/路径?name=lqz&age=18
    统一资源定位符是可以从互联网上访问资源的一种方式，协议就是资源的地址