共计 6568 个字符，预计需要花费 17 分钟才能阅读完成。
前言
Web 开发技术始终在高速倒退，各种离奇概念与框架层出不穷，尤其在 Web 前端畛域，几年前还是 jQuery 的天下，而现在在 Vue、React 等框架背后也显得廉颇老矣。
不过，尽管各种框架技术突飞猛进，但 Web 开发的外围概念与实质仍旧未曾扭转，本教程将通过一个 Todo List 利用带你摸索 Web 开发基本原理，只有真正明确了 Web 开发的外围根底，能力更轻松的应答新框架与技术。
Web 开发简介
咱们常见的软件品种有桌面软件、挪动 APP 以及网页利用等，Web 开发通常就是在开发网页利用。桌面软件、挪动 APP 须要先装置在 Windows、Android 等宿主机能力应用，每个客户端每次降级更新软件时都须要从新下载并装置。而 Web 利用所依赖的客户端是浏览器，理论数据都存储在近程服务器端，如果利用须要降级，那么只须要降级服务器，所有用户通过浏览器关上网页时都将实时获取最新的数据，这也是 Web 开发可能流行起来的很重要的起因。
HTTP 简介
要学习 Web 开发，首先要明确什么是 HTTP 协定，因为 Web 开发就是建设在 HTTP 协定之上的。
在浏览器地址栏输出网址 https://www.jd.com/ 将失去京东商城首页。咱们在浏览器页面中看到的所有数据都是服务器通过 HTTP 协定传输过去的。
HTTP 协定中文叫超文本传输协定，能够拆分成三局部了解：超文本、传输、协定。
所谓超文本就是 HTML、CSS、图片、视频等内容的汇合。传输既超文本内容从浏览器（客户端）到服务器或从服务器到浏览器之间的传输过程。而协定是标准，大家约定俗成的规约既是协定。
HTTP 基于申请 —— 响应模型，浏览器向服务器的某个网址发动申请，服务器响应浏览器对应的资源。以下就是一个 HTTP 申请 —— 响应的模型图。
左侧是浏览器，右侧是服务器。浏览器和服务器之间通信是通过文本传输来实现的。浏览器发动申请时发送的数据叫作申请报文，失去的服务端响应的数据叫作响应报文。下图示展现了申请报文和响应报文的格局。
依据图示能够看到，无论是申请报文还是响应报文根本都分为四个局部，每个局部之间以 \r\n 作为换行分隔符。
申请报文蕴含申请行、报文首部、空行、报文主体四个局部。
响应报文蕴含状态行、报文首部、空行、报文主体四个局部。
在申请报文中，申请行和报文首部能够看成一个整体叫作申请头，报文主体又叫申请体。
在响应报文中，状态行和报文首部能够看成一个整体叫作响应头，报文主体又叫响应体。
如何在 Chrome 浏览器中查看申请与响应的报文信息呢？浏览器页面任意地位点击鼠标右键 —— 抉择查看，就可能在页面底部显示 Chrome 开发者工具。点击 Elements 选项卡，你就可能看到网页的源代码，也就是服务器的响应数据。
[](https://p6-juejin.byteimg.com…
点击 Network 选项卡，就可能看到所有申请、响应记录。
每一行记录即为一个申请，为什么只是在地址栏里输出了 https://www.jd.com/ 会呈现这么多申请呢？咱们晓得，HTML 中不止能够写简略的文本标签，还能够写 img、video 等多媒体标签加载图片或视频，以及 link、script 等标签来加载 CSS 款式 和 JavaScript 脚本。浏览器在失去服务器的第一个响应时，会查看服务器返回的 HTML 页面，如果页面源码中蕴含这些非凡的标签，浏览器就会针对每一个标签专门发动一次申请。
点击第一个申请，在右侧将会显示该申请及响应信息。找到 Request Headers 点击右侧的 view source，将会看到此次申请的申请头信息。
第一行 GET / HTTP/1.1 即为申请行。它由三个局部组成：申请办法、申请地址、HTTP 协定版本号，别离对应 GET、/、HTTP/1.1。每个局部之间通过一个空格隔开。
HTTP 申请办法有很多，不过最常见的只有四种：POST、DELETE、PUT、GET 别离对应增、删、改、查四个操作。因为咱们只是想查看京东首页，所以这里发送的是 GET 申请。
申请地址 / 代表首页，你可能看过如 /index、/index.html 等相似的地址，其实这只是一个约定俗成的做法，它们都代表首页。
当初最罕用的 HTTP 版本即为 1.1。尽管 HTTP 2.0 早已公布，不过目前来说普及率仍旧不是很高。所以当初大可不必纠结版本的问题。
从第二行开始，所有内容都是诸如 Key: Value 这种键值对的模式组合成的，咱们管每一组键值对都叫作申请首部字段，这些首部字段加在一起就是申请的报文首部，个别会间接叫申请头。
其中最重要的申请首部字段就是 Host: www.jd.com 这一行，因为只有这一行是 HTTP 协定明确规定为必传的首部字段，其余申请首部字段都是非必传字段。Host: www.jd.com 的作用是当服务器上部署了多个网站，那么服务器就会依据这一行的信息来确定浏览器到底想拜访哪个网站。
Connection: keep-alive 代表长连贯，User-Agent 标识了浏览器信息，Accept 代表浏览器可能接管的报文格式，其余的申请首部字段能够等咱们用到了再做阐明。
在 HTTP 申请报文中，还短少一个空行和申请体是咱们目前没有看到的。实际上尽管咱们是点击浏览器的 view source 性能来查看申请报文信息，但它依然是浏览器解决过的数据，并不是原始数据，所以空行是看不到的。而此次申请为 GET 申请，通常 GET 申请是没有申请体的，所以申请体被省略了。
一个 HTTP GET 申请大略长这样：
GET / HTTP/1.1
Host: www.jd.com
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9一个 HTTP POST 申请大略长这样：
POST /login HTTP/1.1
Host: www.jd.com
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
username=test&password=pass下面 POST 申请示例中 username=test&password=pass 即为申请体。
须要留神，以上申请报文中每一个换行都是用 \r\n 来标识的，这一点在前面理论开发的章节中就能领会到。
剖析完申请报文，接下来剖析下响应报文。找到 Response Headers 同样点击右侧的 view source，将会看到此次申请的响应头信息。
第一行 HTTP/1.1 200 OK 即为状态行。它同样由三局部组成：HTTP 协定版本号、状态码、以后状态码对应的起因短语，别离对应 HTTP/1.1、200、OK。每个局部之间依然通过一个空格隔开。
其中状态码用来告知服务器返回的响应状态，为一个数字。状态码大略分为四类：2XX、3XX、4XX、5XX，别离对应胜利、重定向、客户端谬误、服务端谬误。所以状态码为 200 示意申请胜利。
起因短语 OK 其实并不是很重要，它次要是给客户端返回一个人类可读的短语，来标识申请后果，对浏览器来说没什么作用。
响应首部字段同样是 Key: Value 这种键值对模式，并且有些是和申请首部字段一样的，称为通用首部字段，如 Connection: keep-alive 同样存在于响应首部字段。还有些字段是和申请首部字段搭配着应用的，如你所见 Content-Type 字段就是搭配申请首部字段中的 Accept 来应用的，Accept 是浏览器用来通知服务器它可能接管的数据格式，而 Content-Type: text/html 标识了服务器返回的数据格式为 html。其余的响应首部字段能够等咱们用到了再做阐明。
同样的，响应报文中的空行并不会在浏览器中展示进去，不过响应体是能够在浏览器中看到的。
以后申请的响应体实际上就是服务器返回的 HTML 源码。
一个 HTTP 响应大略长这样：
HTTP/1.1 200 OK
Connection: keep-alive
Content-Type: text/html
<html>XXX</html>URL 简介
介绍完 HTTP 协定根底，咱们再来简略介绍下 URL。
京东首页的网址是 https://www.jd.com/，这就是一个 URL。URL 中文叫作对立资源定位符。URL 的作用是在网络中惟一的标记一个资源。
你可能据说过 URI，实际上 URL 是 URI 的一个子集。在根底学习阶段，咱们并不需要弄清楚它们之间到底有什么差异，只须要把咱们常见的网址统称为 URL 即可。
一个 URL 的残缺格局如下：
scheme://user:passwd@host:port/path?query#fragment每一个局部代表含意如下：
scheme：协定名，示意资源应用哪种协定，http 就代表了 HTTP 协定，file 代表文件协定。
://：这个是固定写法，记住就好，没必要深究。
user:passwd@：身份信息，示意拜访主机时须要提供的用户名和明码，但这种将隐衷信息齐全裸露在内部的作法曾经简直没人应用了。
host:port：示意资源所在的主机名和端口号。主机名为 IP 地址或域名，必须要有，HTTP 协定默认端口号是 80，能够省略，其余端口号则不可省略。
path：标识资源所在位置。它采纳相似 Unix 零碎的目录格调，必须以 / 结尾，如果是多级门路，能够写成 /a/b/c 这种模式。
query：查问参数，在门路之后第一个 ? 开始（不蕴含?）到 # 之前完结，所有的内容都是查问参数，一个参数的格局为 key=value，如果存在多个参数，两头用 & 隔开。如果咱们须要对数据做分页解决就能够应用这个参数，如 page=1&offset=20 示意须要获取第一页的数据，每页数据 20 条。这时候服务器端就能够解析到这个参数并返回对应的数据。
fragment：最初一部分为片段标识符。也能够将其叫做锚点，从 # 开始，浏览器能够依据锚点跳转到页面指定地位，但这个参数是不会被发送到服务器端的，所以开发服务器端通常不太须要关怀。
上面通过对一个理论的 URL 地址进行剖析来增强了解。
以下图示为在京东首页搜寻 Python 书籍 后浏览器地址栏 URL 截图。为了可能更清晰的阐明问题 URL 局部略有删减。
咱们能够将 URL 复制进去：
https://search.jd.com/Search?keyword=python%E4%B9%A6%E7%B1%8D&enc=utf-8以上 URL 按规范格局拆分如下：
scheme: https
host:port: search.jd.com
path: /Search
query: keyword=python%E4%B9%A6%E7%B1%8D&enc=utf-8你应该曾经发现下面复制进去的 URL 和截图中的有些不同。
首先咱们复制进去的 URL 是以 https 结尾，而浏览器中却是以 search 结尾，其实这是浏览器为了让 URL 更加可读，而将 https:// 暗藏了，实际上它依然是存在的。
你可能有个纳闷，咱们下面始终在介绍 HTTP 协定，一个残缺的 URL 是以 http 结尾的。但实际上京东网站的 URL 都是以 https 结尾的。其实 https 是基于 http 的，只是在 http 的根底上又加了一个安全套接层，默认端口 443，HTTP 协定传输数据都是明文传输，HTTPS 协定传输数据是通过加密的，所以使得数据的传输更加平安，仅此而已。本教程不会应用 HTTPS 协定，故此不做过多解说。
还有一个较大的差别就是在浏览器地址栏中看到的查问参数 Python 书籍 复制进去当前就变成了 python%E4%B9%A6%E7%B1%8D。这是 URL 编码造成的，通常在 URL 中只能应用 ASCII 码，并且 URL 自身会应用如 ?、& 等符号作为分隔符。这就导致了很多特殊符号或者 ASCII 以外的字符（如中文）不可能间接应用，所以就规定了一种转码标准，将不能间接用于 URL 的字符通过本义操作使其变为可用字符。这就是 书籍 两个字符变成了 %E4%B9%A6%E7%B1%8D 的起因。在浏览器地址栏中可能失常显示同样是浏览器为了让 URL 更加可读做的非凡解决。URL 本义具体规定能够查看相干文档进行学习。
TCP/IP 简介
多个计算机之间通信靠的是网络协议，最早的计算机厂商生产的计算机只能跟自家的计算机通信，为让所有计算机之间都可能通信就有了 TCP/IP 协定。这就比方几个人对话，有的说汉语、有的说英语、有的说日语，大家谁也听不懂其他人谈话，所以最初大家都规定用一种语言来交换一样。
TCP/IP 协定并不是单个的协定，它是一个协定族，蕴含了很多种网络通讯协定，HTTP 协定也在其中。在网络中两台计算机之间如果须要通信，就要晓得对方在哪，所以就有了 IP 地址。就像咱们要给他人发快递，那么就要晓得对方的家庭住址一样。当初罕用的 IP 地址为 IPv4 版本，格局如 192.168.3.14，最新版本是 IPv6，格局如 ABCD:EF01:2345:6789:ABCD:EF01:2345:6789。
有了 IP 地址还不够，就像你把快递邮寄到一个家庭住址，但家里有五口人，你还要确定这个快递是寄给谁的。端口的作用就是干这个的。计算机通过端口号辨别收到的信息该转发给哪个软件。
IP 地址加上端口号就是下面介绍的 URL 中 host:port 局部，如 192.168.3.14:80。但 IP 地址是一串数字，不容易记住，所以就有了域名。www.jd.com 就是京东的域名。咱们在浏览器中输出这个域名时，计算机会主动将其转换成 IP 地址加端口号的模式。这个转换过程是通过一个叫 DNS 解析的技术。它可能将域名和 IP 之间的关系做绑定，晓得了域名它就能查出其对应的 IP 地址是多少。
HTTP 协定是建设在 TCP/IP 协定之上的，HTTP 的数据传输依附的是 TCP 协定。总结起来就是 TCP 用来传输数据，HTTP 用来标准数据传输格局。
扩大
从浏览器地址栏输出网址 https://www.jd.com/ 到看见京东网站首页经验了什么？
- 浏览器从地址栏获取 URL
- 浏览器或操作系统通过 DNS 解析将 URL 中域名和端口号解析成对应的 IP 地址和端口号
- 浏览器通过 TCP 与服务器建设连贯
- 浏览器向服务器发送申请报文
- 服务器收到申请报文后做对应的解决，将处理结果组装成响应报文返回给浏览器
- 浏览器解析响应报文，渲染页面
以上就是从浏览器地址栏输出网址 https://www.jd.com/ 到看见京东网站首页所经验的过程概述。
如果你对 Web 开发齐全零根底，看了以上我对 HTTP 协定的简介，感觉不是很明确的话，那么我举荐你能够看一本叫作《图解 HTTP》的书，看完后再来学习本教程可能达到事倍功半的成果。
开发环境
本教程我的项目开发环境如下：
- Python：Python3.7
- 浏览器：Chrome83
- 开发工具：PyCharm 2020.1
- 操作系统：macOS 10.15
有 Python 根底的同学想必搭建开发环境必定不在话下，所以具体搭建过程这里不再做过多介绍，须要强调的一点是浏览器我只举荐 Chrome 或者 Firefox，这样可能失去更好的开发体验。
分割我：
- 微信：jianghushinian
- 邮箱：jianghushinian007@outlook.com
- 博客地址：https://jianghushinian.cn/
