web框架的本质初识

1.什么是HTML

HTML是一个超文本语言,是一种创建网页结构的标记语言。就是你女朋友化妆之后的样子

2.什么是HTTP协议

是一种用于在Web上传输数据的协议。它是客户端和服务器之间进行相互通信的基础的协议

3.HTTP的特点

无连接:每个http请求都是独立·的

无状态:不会保存客户端之间的信息,每个请求的是独立的

简单:代码简单易懂

超文本:可以传输除了文本之外的数据

4.如何建立TCP客户端和服务端连接(写代码)

#  客户端
import socket

# 在循环外部创建 socket 实例
client = socket.socket()

# 连接服务器
client.connect(('127.0.0.1',9696))

while True:
    # 发送消息
    send_msg = input('请输入消息 :>>>>>').strip()
    if not send_msg: continue
    client.send(send_msg.encode('utf-8'))
    if send_msg == 'q':
        break
    # 接受消息
    msg = client.recv(1024)
    print(msg.decode('utf-8'))

# 关闭连接
client.close()
# 服务端
import socket

# 在循环外部创建 socket 实例
server = socket.socket()

# 绑定地址并开始监听
server.bind(('127.0.0.1',9696))
server.listen(5)

while True:
    # 等待客户端连接
    conn,addr = server.accept()
    while True:
        # 接收消息
        msg = conn.recv(1024)
        msg = msg.decode('utf-8')
        print(f'收到消息:{msg}')
        if msg == 'q':
            break
        # 发送消息
        send_msg = input('请发送的消息 :>>>>>').strip()
        if not send_msg: continue
        conn.send(send_msg.encode('utf-8'))
    # 关闭连接
    conn.close()

# 关闭服务器
server.close()

5.TCP协议的特点

  • 可靠性:TCP使用可靠的数据传输机制,确保数据按照正确的顺序到达目标,并进行错误检测和重传。
  • 面向连接:在数据传输之前,TCP在客户端和服务端之间建立一个连接,确保双方能够进行可靠的通信。
  • 流式传输:TCP将数据划分为逻辑上连续的字节流,并通过网络传输。不同于UDP,它没有消息边界。
  • 拥塞控制:TCP具有拥塞控制机制,通过动态调整数据传输速率来避免网络拥塞。
  • 双工通信:TCP支持同时进行双向通信,客户端和服务端可以在同一个连接上交换数据。
  • 有序性:TCP保证数据按照发送的顺序到达目标,不会乱序。
  • 头部开销:TCP头部包含一些控制信息,因此在传输的数据中会有一定的开销。

【一】web框架的本质

image-20240226155147981

  • Web框架是一种软件框架,用于简化Web应用程序的开发。
  • web框架本质上就是一个TCP的客户端跟服务端

浏览器访问页面 —> 访问制定的URL地址 —> 后端服务器

客户端(浏览器/应用程序) —> 请求服务器(web框架) —> 再从数据库里面查询数据

数据库返回数据—> 被服务端接受并处理 —> 反馈给客户端

常见的Web框架

  • Django:基于Python的高级Web框架,提供了强大的功能和开发工具,适用于构建复杂的Web应用(重点学习)。
  • Flask:同样是基于Python的轻量级Web框架,灵活且易于学习,适用于快速开发小型Web应用或原型。
  • Ruby on Rails:基于Ruby语言的Web框架,遵循“约定优于配置”的原则,提高开发效率。
  • Express.js:基于Node.js的Web应用框架,简单易用,适合构建快速、高性能的服务器端应用。
  • Spring Framework:Java平台上最流行的开发框架之一,提供了全面的基础设施支持,包括依赖注入、AOP等。

web框架的特点

import socket
sk = socket.socket()
sk.bind(('127.0.0.1',8001))
sk.listen()
conn,addr = sk.accept()
from_b_msg = conn.recv(1024)
str_msg = from_b_msg.decode('utf-8')
#socket是应用层和传输层之间的抽象层,每次都有协议,协议就是消息格式,那么传输层的消息格式我们不用管,因为socket帮我们搞定了,但是应用层的协议还是需要咱们自己遵守的,所以再给浏览器发送消息的时候,如果没有按照应用层的消息格式来写,那么你返回给浏览器的信息,浏览器是没法识别的。而应用层的协议就是我们的HTTP协议,所以我们按照HTTP协议规定的消息格式来给浏览器返回消息就没有问题了,关于HTTP我们会细说,首先看一下直接写conn.send(b'hello')的效果,然后运行代码,通过浏览器来访问一下,然后再看这一句conn.send(b'HTTP/1.1 200 ok \r\n\r\nhello')的效果
#下面这句就是按照http协议来写的
# conn.send(b'HTTP/1.1 200 ok \r\n\r\nhello')
#上面这句还可以分成下面两句来写
conn.send(b'HTTP/1.1 200 ok \r\n\r\n')
conn.send(b'hello')
import socket
sk = socket.socket()
sk.bind(('127.0.0.1',8001))
sk.listen()
conn,addr = sk.accept()
from_b_msg = conn.recv(1024)
str_msg = from_b_msg.decode('utf-8')
#socket是应用层和传输层之间的抽象层,每次都有协议,协议就是消息格式,那么传输层的消息格式我们不用管,因为socket帮我们搞定了,但是应用层的协议还是需要咱们自己遵守的,所以再给浏览器发送消息的时候,如果没有按照应用层的消息格式来写,那么你返回给浏览器的信息,浏览器是没法识别的。而应用层的协议就是我们的HTTP协议,所以我们按照HTTP协议规定的消息格式来给浏览器返回消息就没有问题了,关于HTTP我们会细说,首先看一下直接写conn.send(b'hello')的效果,然后运行代码,通过浏览器来访问一下,然后再看这一句conn.send(b'HTTP/1.1 200 ok \r\n\r\nhello')的效果
#下面这句就是按照http协议来写的
# conn.send(b'HTTP/1.1 200 ok \r\n\r\nhello')
#上面这句还可以分成下面两句来写
conn.send(b'HTTP/1.1 200 ok \r\n\r\n')
conn.send(b'hello')

【1.0】

#  客户端
import socket

while True:
    client = socket.socket()
    # 创建连接
    client.connect(('127.0.0.1',9696))
    # 发送消息
    send_msg = input('请输入消息 :>>>>>').strip()
    if not send_msg: continue
    client.send(send_msg.encode('utf-8'))
    if send_msg == 'q':
        client.close()
        break
    # 接受消息
    msg = client.recv(1024)
    print(msg.decode('utf-8'))
# 服务端
import socket

server = socket.socket()

server.bind(('127.0.0.1',9696))

server.listen(5)


while True:
    conn,addr = server.accept()
    # 先接受
    msg = conn.recv(1024)
    msg = msg.decode('utf-8')
    print(f'msg:>>>{msg}')
    if msg == 'q':
        conn.close()
        break
    # 在发送
    while True:
        send_msg = input('请发送的消息 :>>>>>').strip()
        if not send_msg: continue
        conn.send(send_msg.encode('utf-8'))
        break

server.close()

【2.0】

  • 使用浏览器来充当客户端
  • 服务端无法正常响应客户端(浏览器)的请求

浏览器和服务端进行交互是基于HTTP协议

【1】什么是HTML

​ HTML是一个超文本语言,是一种创建网页结构的标记语言。就是你女朋友化妆之后的样子

【2】什么是HTTP协议

是一种用于在Web上传输数据的协议。它是客户端和服务器之间进行相互通信的基础的协议

【3】HTTP的特点

  • 无连接:每个http请求都是独立的

  • 无状态:不会保存客户端之间的信息,每个请求的是独立的

  • 超文本:可以传输除了文本之外的数据

  • 简单:HTTP使用简单的请求-响应模型,易于理解和实现。

  • 可扩展性:HTTP支持添加新的方法和头部字段,以满足不断变化的需求。

【4】请求数据格式

请求方式 请求路径(地址)状态码 版本(HTTP1.0)

响应头

响应体

【5】状态码

  • 20X(20开头):代表成功的状态码,指示请求已成功被服务器接收、理解和接受。
  • 30X(30开头):代表重定向的状态码,指示客户端需要执行进一步的操作来完成请求。
  • 40X(40开头):代表客户端错误的状态码,指示客户端发送了无效、无法处理或未经授权的请求。
  • 50X(50开头):代表服务器错误的状态码,指示服务器在处理请求时遇到了错误或无法完成请求。

【二】web框架代码版

·

# 客户端
# 【1】导入模块
import socket

# 【2】定义通信IP和端口
IP = '127.0.0.1'
PORT = 8686

# 【3】创建scock连接对象
client = socket.socket()
client.connect((IP, PORT, ))


while True:
    # 【4】发送数据
    client.send(b'hello laji server!')
    # 【5】接收数据
    data = client.recv(1024)
    print(f'这是来自客户端的信息:>>>>>>{data.decode("utf-8")}')
# 服务端
import socket
from _socket import SOL_SOCKET,SO_REUSEADDR

# 【2】定义通信IP和端口
IP = '127.0.0.1'
PORT = 8686

# 【3】创建scock连接对象
'''AF_INET 表示IPv4地址 ;SOCK_STREAM 表示使用TCP协议进行数据传输;'''
server = socket.socket()
'''setsockopt 套接字; SO_REUSEADDR 用于允许重用本地地址端口号'''
server.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)

# 【4】监听端口
server.bind((IP,PORT))

# 【5】创建半链接池
server.listen(5)

while True:
    conn, addr = server.accept()

    # 从客户端接收到信息
    data_from_client = conn.recv(1024)
    data_from_client = data_from_client.decode("utf-8")

    # 从上述请求数据中切分出指定的请求方式和请求路径
    option = data_from_client.split(' ')
    # 请求方式
    option_type = option[0]
    # 请求路径
    option_path = option[1]
    print(option_path)
    http_res_type = "HTTP1.1 200 OK\r\n\r\n"
    # 根据请求路径指定请求方法
    if option_path == "/login":
        res = f"{http_res_type} hello dream login success"
        conn.send(res.encode("utf-8"))
    elif option_path == "/register":
        res = f"{http_res_type} hello dream register success"
        conn.send(res.encode("utf-8"))
    else:
        res = f"{http_res_type} 404 not found"
        conn.send(res.encode("utf-8"))

环境配置 Node 下载地址http://nodejs.cn/ 安装文件下有一个绿色的图片交node.exe 点击运行 输入node -v进行检测是否安装成功 使用vue-cli(脚手架)搭建项目 vue-cli是vue官方提供的用域搭建基于vue+webpack_es6项目的脚手架工具 在线文档:https://github.com/vuejs/vue-cli 操作: 1.npm install -g vue-cli:全局下载工具 2.vue init webpack 项目名:下载基于webpack模板项目 3.cd 项目名:进入项目目录 4.npm install :下载项目依赖的所有模块 5.npm run dev :运行项目 6.访问项目:localhost:8080 项目目录结构 src assets:存放照片、css、js css js img components:存放组件 lib:存放模拟数据 router:配置路由 store:存放vuex vuex的安装:cd x项目目录 cnpm install vuex --save views:存放所有单页面 配置访问端口号: 根目录下有一个config文件夹,看名字就知道与配置有关,打开config目录下的index.js dev: { env: require('./dev.env'), port: 8092, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, } 项目目录下:https://blog.csdn.net/weixin_39378691/article/details/83784403 1.安装elementUI:cd进入项目根目录,npm i element-ui -S 2.引入elementUI组件(main.js文件中) import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element, { size: 'small' }) 项目目录下:https://blog.csdn.net/weixin_41432849/article/details/81988058 1.安装jquery:cd进入项目根目录, npm install jquery --save 2.在项目 build 里的webpack.base.conf.js 里加载webpack文件,注意,要放在配置文件第一行; const webpack = require('webpack') 3.在module.exports的最后加入 , plugins:[ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", jquery:"jquery", "window.jQuery":"jquery" }) ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值