8-1 HTTP协议+RESTFUL风格+Flask框架入门+Chrome开发者工具入门

本节对于网工专业为拓展课，Flask属于软件领域，但HTTP协议实在是流行，学计算机的都绕不开，学习本节有助于：

部署web服务
第七章telemetry遥测获取设备侧数据后呈现图表
理解第八章RESTful风格的前置课程。
网络设备的Web管理界面 (GUI) 基于 HTTP 协议。
网络自动化脚本经常使用 HTTP/RESTfulAPI与设备交互。

一、HTTP 协议介绍

HTTP：超文本传输协议 (Hypertext Transfer Protocol)。在OSI模型中属于应用层协议，底层基于TCP/IP协议，用于在浏览器和Web服务器之间传输信息，基于请求-响应模式。

请求

请求：request，客户端（通常是浏览器）发送给服务器，例如请求网站首页的html源代码。

请求行 (Request Line)：包含请求方法、请求 URI 和 HTTP 协议版本。
- 请求方法 (HTTP Methods)：
  - GET：请求获取指定资源。
  - POST：向服务器提交数据，通常用于创建或更新资源。
  - PUT：请求更新指定资源。
  - DELETE：请求删除指定资源。
  - 其他常用方法：HEAD, OPTIONS 等 (简单介绍)。
- 请求 URI (Uniform Resource Identifier)：标识请求的资源。
- HTTP 协议版本 (HTTP Version)：例如 HTTP/1.1, HTTP/2。
- 请求头部 (Request Headers)：包含关于请求的附加信息，例如客户端信息、接受的数据类型等。
  - User-Agent：发送请求的客户端软件信息。
  - Accept：客户端能够接受的 MIME 类型。
  - Content-Type：请求体的 MIME 类型 (用于 POST, PUT 等方法)。
  - Host：目标服务器的主机名和端口号。
- 请求体 (Request Body)：包含要发送给服务器的数据 (用于 POST, PUT 等方法)。

响应

响应：response，服务器返回html/js/css信息给浏览器。

状态行 (Status Line)：包含 HTTP 协议版本、状态码和状态描述。
- 状态码 (Status Codes)：
  - 2xx (Success)：表示请求已成功被服务器接收、理解、并接受。
    - 200 OK：请求成功。
  - 3xx (Redirection)：表示需要客户端采取进一步的操作才能完成请求。
    - 301 Moved Permanently：请求的资源已永久移动到新 URI。
    - 302 Found (或 Moved Temporarily)：请求的资源临时移动到新 URI。
  - 4xx (Client Error)：表示客户端的请求有错误。
    - 400 Bad Request：客户端请求的语法错误。
    - 404 Not Found：服务器找不到请求的资源。
  - 5xx (Server Error)：表示服务器在处理请求时发生错误。
    - 500 Internal Server Error：服务器遇到了一个未曾预料的状况。
- 响应头部 (Response Headers)：包含关于响应的附加信息，例如服务器信息、内容类型等。
  - 常用头部字段：
    - Server：服务器软件信息。
    - Content-Type：响应体的 MIME 类型。
    - Content-Length：响应体的长度。
- 响应体 (Response Body)：包含服务器返回的实际数据 (例如 HTML, JSON, 图片等)。

其它概念

URL：即网址。另一个类似术语是URI，统一资源定位符。

Flask框架

Flask框架：直译为“烧杯”，python生态知名的web框架，小、轻量，与第六章学习的Jinja2来自同一团队。

Flask官方文档

Web框架架构主要有：

路由控制。下面代码的@app.route('/')，负责用户请求的网址走哪个视图方法。
视图方法。后端业务逻辑，从数据库取数据，渲染数据到前端模板，返回最终的html代码。
前端模板。html代码和Jinja2语法结合。

安装

pip install flask -i https://mirrors.aliyun.com/pypi/simple/

新建文件夹和文件，项目结构如下：

-- pythonProject
    -- app.py
    -- templates
        -- index.html

(参考后面截图)

编辑app.py
from flask import Flask, render_template # 实例化 app = Flask(__name__) @app.route('/') def index(): return '<h1>Hello World!</h1>' # 路由装饰器，符合路由规则的请求http://127.0.0.1:5000/devices将走下面的方法。 @app.route('/devices') def list_devices(): devices_info = [ {'name': 'Router-A', 'ip': '192.168.1.1', 'status': 'Up'}, {'name': 'Switch-B', 'ip': '192.168.1.2', 'status': 'Down'}, {'name': 'Firewall-C', 'ip': '192.168.1.3', 'status': 'Up'} ] rendered_html = render_template('index.html', devices=devices_info) return rendered_html if __name__ == '__main__': # 开启web服务。进入阻塞监听状态，客户端的访问ip和端口应该与此保持一致。 app.run(debug=True, host='0.0.0.0', port=8080)
编辑index.html
<!DOCTYPE html> <html> <head> <title>Network Devices</title> </head> <body> <h1>Network Devices</h1> <ul> {% for i in devices %} <li style="color: green;">Name: {{ i.name }}, IP: {{ i.ip }}, Status: {{ i.status }}</li> {% endfor %} </ul> </body> </html>
运行测试
1. 服务端：运行服务器app.py
2. 客户端：浏览器访问 http://127.0.0.1:8080/devices
IP和端口号根据实际情况修改。
不要点Pycharm自带的浏览器图标，那是pycharm自己的文件服务器，会把html以纯文本展示出来，没走web服务器。

RESTful 风格介绍

在没有restful风格之前，一个学生管理系统的路由可能设计为：

获取学生列表 /students、 /get_students、 /all_students、 /student?type=all。
取一个学生 /student/0001、 /student/stu0001、 /student?id=0001、 /student?stuid=0001。
添加一个学生 /student/add、 /add_student。
当项目复杂后，看似只是命名不统一的小问题，也会严重影响项目理解和项目质量。

RESTful: Representational State Transfer 表述性状态转移。由Roy Fielding在论文中提出。并不是一样新技术，而是一种设计风格。

核心原则：
无状态，服务器不存储客户端的任何状态。每个请求都必须包含足够的信息，以便服务器理解请求。统一接口，资源识别，使用 URI 唯一标识每个资源，例如"/interfaces/eth0"。通过表述操作资源，HTTP 方法 (GET, POST, PUT, DELETE) 用于指示要执行的操作。

RESTful风格例如下面的设计：

"GET /interfaces"获取网口列表
"GET /interfaces/eth0"获取第一个网口配置
"POST /interfaces/eth0"添加配置。
"PUT /interfaces/eth0"修改配置
"DELETE /interfaces/eth0"删除配置

Chrome开发者工具

F12或鼠标右键-检查-Network

参考

《图解HTTP》作者：日上野宣
Flask document

16 四月 2025