前言

上一篇中&＃xff0c;简单的介绍了如何使用 flask 框架搭建自己的第一个网页。

在这个互联网时代&＃xff0c;为什么你输入一个网页&＃xff0c;等待几秒以后&＃xff0c;网页上就会有内容了&＃xff1f;其背后究竟发生了什么&＃xff1f;又有怎样的过程呢&＃xff1f;

今天就以 flask 创建网页以后&＃xff0c;来对其探究一下吧&＃xff01;

互联网

在探究原理之前&＃xff0c;不得不提到一个概念 - 互联网。正是因为它的存在&＃xff0c;我们才可以忽略物理距离&＃xff0c;来随心所欲的访问 all over the world。

互联网&＃xff0c;大家并不陌生&＃xff0c;但是日常挂在嘴边的互联网&＃xff0c;你知道它实际上代表的含义吗&＃xff1f;什么是互联网&＃xff1f;为什么叫互联网&＃xff1f;如果让你用图来描述一下&＃xff0c;能把这么抽象的概念实体化吗&＃xff1f;(各种问题抛出来&＃xff01;~)

以下故事&＃xff0c;纯属虚构&＃xff0c;如有雷同&＃xff0c;纯属巧合。

上大学时&＃xff0c;假设学校没有给接入网络的权限&＃xff0c;但宿舍人手一台电脑&＃xff0c;大家都想聚在一起玩游戏&＃xff0c;那么该怎么办呢&＃xff1f;于是&＃xff0c;弄一台集线器&＃xff0c;只需要把所有电脑的网线插到这个机器上&＃xff0c;处于同一网络的电脑&＃xff0c;就可以相互联机打游戏了&＃xff0c;比如 CS 、DOTA。。。

这样形成的网络&＃xff0c;叫局域网。

虽然学校限制不让连接&＃xff0c;但是现在每户人家的家中都可以连接到互联网了。原来每台电脑只能在一个局域网内组成一个小网络进行互动。而家用 wifi 路由器&＃xff0c;它会随着连入的设备去提供网络节点&＃xff0c;你的手机&＃xff0c;电视&＃xff0c;电脑都可以通过它来分配一个内网 ip 。就像下图这样&＃xff1a;

由路由器提供的网络&＃xff0c;在家里形成了一个局域网。这也是为什么上篇文章中&＃xff0c;如果你的电脑上启动一个 flask 的项目以后&＃xff0c;如果手机和电脑处于一个网络中&＃xff0c;手机可以直接访问到网页的原因。

路由器不仅对内&＃xff0c;而且还有对外的一个公网 ip &＃xff0c;图中的大云彩便是互联网节点。互联网由这些节点相互组成在一起&＃xff0c;才有了你在中国却能访问到外国的网站。由这些网络节点(云彩)组成的&＃xff0c;叫互联网。

专业人员&＃xff0c;如果想了解计算机网络协议&＃xff0c;推荐两篇文章&＃xff0c;阮一峰老师写的互联网协议入门博客。

http://www.ruanyifeng.com/blog/2012/05/internet_protocol_suite_part_i.html

阮一峰博客

请求一个网页&＃xff0c;发生了什么&＃xff1f;

先来看一张图&＃xff0c;此图描述了当我们访问一个 flask 项目后(其实整体流程&＃xff0c;大部分都类似&＃xff0c;比如 java 项目也是相似的逻辑&＃xff0c;变动的只是应用的组件或者框架罢了)&＃xff0c;整体发生的流程&＃xff1a;

一般我们将浏览器(发送请求)的一方&＃xff0c;称之为客户端。而处理请求的一方(web服务器&＃xff0c;上篇文章中&＃xff0c;就是我们启动 flask 项目自己的电脑)&＃xff0c;称之为服务端。

出发点从我们的浏览器(客户端)讲起。当你在浏览器输入一个网址时&＃xff0c;按下回车后的一瞬间。浏览器会生成一个 http 的请求&＃xff0c;经由互联网发送到对应的 Web 服务器(服务端)。

当我们 flask 项目的那台电脑启动后&＃xff0c;接收到浏览器发来的请求&＃xff0c;会通过 WSGI 将我们 http 的请求转化为 flask 程序能使用的 Python 数据。

在项目中(上篇文章为例)&＃xff0c;flask 会根据请求的地址执行对应的视图函数&＃xff0c;还记得 “泥豪&＃xff0c;世界&＃xff01;”吗。。视图函数就是当时的这段&＃xff1a;

&＃64;app.route(&＃39;/&＃39;)def hello_world(): return &＃39;泥豪&＃xff0c;世界&＃xff01;&＃39;

经过程序获取返回值生成响应&＃xff0c;响应经过 WSGI 转换再生成 http 响应传回 Web 服务器&＃xff0c;最后被发出请求的客户端接收。

Duang~浏览器此时能看到我们服务端返回的数据。

同时渲染响应中包含的HTML和CSS代码&＃xff0c;并执行Javascript代码&＃xff0c;最终把解析后的页面呈现在用户浏览器的窗口中。当时仅仅返回了 HTML 标签&＃xff0c;至于 CSS 和 Javascript 代码在后续文章中会介绍到。

---

额外普及&＃xff1a;

真正 python web 开发的线上流程&＃xff0c;大体是酱紫的(之前有画过&＃xff0c;在介绍 if name 的文章中写过)&＃xff1a;

WSGI&＃xff0c;全称 Web Server Gateway Interface&＃xff0c;或者 Python Web Server Gateway Interface &＃xff0c;是为 Python 语言定义的 Web 服务器和 Web 应用程序或框架之间的一种简单而通用的接口。

wiki

WSGI 存在的目的有两个&＃xff1a;

1. Web 服务器知道如何调用 Python 应用程序&＃xff0c;并且把用户的请求告诉应用程序。
2. 让 Python 应用程序知道用户的具体请求是什么&＃xff0c;以及如何返回结果给 Web 服务器。

如果用图来表示的话&＃xff0c;下图(来源于网络)&＃xff1a;

关于 http 协议

大家不难发现&＃xff0c;上面的流程中有个关键点&＃xff0c;就是 http 协议。这个协议在互联网中起着关键性的作用。对它熟练掌握&＃xff0c;可谓是大大滴友好&＃xff01;(你滴&＃xff0c;死啦死啦滴。。。)

网络爬虫的原理&＃xff0c;离不开 http 协议。比如当你查询网站背后的数据地址时&＃xff0c;模拟浏览器发出的 http 协议请求头时&＃xff0c;发送时携带的 http 数据时&＃xff0c;这些原理其实都是基于网页开发涉及到的知识。

所以如果当你知道了网页背后的运作流程&＃xff0c;相对于理解爬虫来说&＃xff0c;只会锦上添花&＃xff01;~

http 协议的相关知识&＃xff0c;在介绍几点&＃xff0c;至于浏览器 F12 开发者工具如何使用&＃xff0c;想了解的小伙伴可以看下之前写的这篇文章 python小课堂30 - 爬虫之前必会的浏览器开发者工具

1. http状态码

状态码反映的是你这次请求后的结果状态&＃xff0c;有时可以通过状态码来分辨是客户端的问题还是服务端的问题&＃xff0c;常见的几种&＃xff1a;

2. http 请求方法

http常见的几种请求方法&＃xff0c;不仅仅以下几种&＃xff0c;HTTP1.1 中新增了其他几个&＃xff0c;没有列举出来&＃xff1a;

但是上最常用的两种方法就是 POST 和 GET。一般我们请求浏览器时发生的动作都是 GET 请求&＃xff0c;比如当你访问百度时&＃xff0c;打开 F12 看到&＃xff1a;

3. http 请求头&＃xff1a;

大家可以看到&＃xff0c;截图中的部分&＃xff0c;http 请求头是包含一些字段的&＃xff0c;为什么有时候有些网站&＃xff0c;我们写爬虫去请求时&＃xff0c;如果不带上特定的请求头字段&＃xff0c;就访问不到呢&＃xff1f;

原理就是因为服务端对这些请求头的特定字段进行了检验&＃xff0c;比如 user -agent 这个字段&＃xff0c;如果不带上&＃xff0c;服务端直接检验出你的请求没有此字段&＃xff0c;说明不是浏览器发出的请求&＃xff0c;是人为的行动。所以返回给你的信息有时候就是空白&＃xff0c;或是假的。

关于 COOKIEs 这个字段&＃xff0c;尽量不要将其暴露在公共的地方&＃xff0c;会有安全的问题&＃xff0c;所以截图中我把 COOKIEs 抹掉了。

总结

看完本文的你&＃xff0c;是否对网页开发的背后整体逻辑有了更深层次的理解了呢&＃xff1f;

从整体架构出发考虑&＃xff0c;访问一个网页的流程大致如此&＃xff0c;如果有什么问题&＃xff0c;欢迎小伙伴们留言探讨&＃xff01;