前言Web开发技术一直在高速发展，各种新颖的概念和框架层出不穷，尤其是在Web前端领域-结尾。几年前，jQuery还是天下第一，但现在在Vue、React等框架面前，它也显得相当苍老。然而，虽然各种框架技术日新月异，但Web开发的核心理念和本质却没有变。本教程将带您通过一个TodoList应用探索Web开发的基本原理。只有真正理解Web开发的核心基础，才能更容易应对新的框架和技术。Web开发简介我们常见的软件类型有桌面软件、手机APP、Web应用。Web开发通常是Web应用程序的开发。桌面软件和手机APP需要在Windows、Android等主机上安装后才能使用。每个客户端每次更新软件都需要重新下载安装。Web应用程序所依赖的客户端是浏览器，实际数据存储在远程服务器上。如果应用需要升级，那么只需要升级服务器，所有用户通过浏览器打开网页都会实时获得最新的数据。Web开发流行的一个很重要的原因。HTTP简介要学习Web开发，首先要了解什么是HTTP协议，因为Web开发是建立在HTTP协议之上的。在浏览器地址栏中输入网址https://www.jd.com/，即可获得京东首页。我们在浏览器页面看到的所有数据都是服务器通过HTTP协议传输的。HTTP协议中文全称为HypertextTransferProtocol，理解起来可以分为三个部分：超文本、传输、协议。所谓超文本就是HTML、CSS、图片、视频等内容的集合。传输是将超文本内容从浏览器（客户端）传输到服务器或从服务器传输到浏览器的过程。约定是规范，大家同意的法规都是约定。HTTP基于请求-响应模型。浏览器向服务器的某个URL发起请求，服务器响应浏览器对应的资源。下面是一个HTTP请求-响应模型图。左边是浏览器，右边是服务器。浏览器和服务器之间的通信是通过文本传输完成的。浏览器发起请求时发送的数据称为请求消息，服务器响应的数据称为响应消息。下图显示了请求报文和响应报文的格式。从图中我们可以看出，无论是请求报文还是响应报文，基本上都分为四部分，每部分之间使用\r\n作为换行符。请求消息包括四部分：请求行、消息头、空行和消息体。响应消息包括四个部分：状态行、消息头、空行和消息体。在请求消息中，请求行和消息头可以看作一个整体称为请求头，消息体也称为请求体。在响应消息中，状态行和消息头可以看作一个整体称为响应头，消息体也称为响应体。如何在Chrome浏览器中查看请求和响应消息信息？在浏览器页面的任意位置单击鼠标右键-选择检查以在页面底部显示Chrome开发人员工具。点击Elements标签，可以看到网页的源代码，也就是服务器端的响应数据。[](https://p6-juejin.byteimg.com...点击Network选项卡，可以看到所有的请求和响应记录，每行记录都是一个请求，为什么直接在地址栏输入https：//www.jd.com/会不会有那么多请求呢？我们知道html不仅可以写简单的文本标签，还可以写img、video等多媒体标签来加载图片或者视频，还有诸如作为链接和脚本来加载CSS样式和JavaScript脚本。当浏览器得到服务器的第一个响应时，它会检查服务器返回的HTML页面。如果页面源代码中包含这些特殊标记，浏览器将发起请求具体针对每个标签，点击Forthefirstrequest，右侧会显示请求和响应信息，找到RequestHeaders，点击右侧的viewsource，会看到本次请求的请求头信息，第一行GET/HTTP/1.1为请求行，由三部分组成：requestmethod，请求地址，HTTP协议版本号，分别对应GET、/、HTTP/1.1。每个部分由一个空格分隔。HTTP的请求方式有很多种，但最常见的只有四种：POST、DELETE、PUT、GET，分别对应增、删、改、查四种操作。由于我们只是想查看京东的首页，所以这里是一个GET请求。请求地址/代表首页，你可能会看到诸如/index、/index.html等类似地址，其实这只是一种习惯做法，它们都代表首页。现在最常用的HTTP版本是1.1。虽然HTTP2.0已经发布，但是普及率仍然不是很高。所以现在不用担心版本问题了。从第二行开始，所有内容都是由Key:Value等键值对组成。我们称每组键值对为一个请求头字段，这些头字段的总和就是请求报告。文本的头部一般直接称为请求头部。最重要的请求头域是Host:www.jd.com这一行，因为只有这一行是HTTP协议规定的必填头域，其他请求头域都是可选的。Host:www.jd.com的作用是当服务器上部署了多个网站时，服务器会根据这一行的信息来判断浏览器要访问哪个网站。Connection：keep-alive代表长连接，User-Agent标识浏览器信息，Accept代表浏览器可以接收的消息格式，其他的请求头域我们使用之后就可以解释了。在HTTP请求报文中，还有一个空行和我们目前没有看到的请求体。实际上，虽然我们点击浏览器的查看源码功能可以查看请求报文信息，但仍然是浏览器处理后的数据，并不是原始数据，所以看不到空行。但是，此请求是GET请求。通常，GET请求没有请求体，因此省略了请求体。HTTPGET请求如下所示：GET/HTTP/1.1Host:www.jd.comConnection:keep-aliveUser-Agent:Mozilla/5.0(Macintosh;IntelMacOSX10_15_4)AppleWebKit/537.36(KHTML,likeGecko)Chrome/83.0.4103.61Safari/537.36Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9HTTPPOST请求如下所示：POST/loginHTTP/1.1Host:www.jd.comConnection:keep-aliveUser-Agent:Mozilla/5.0(Macintosh;IntelMacOSX10_15_4)AppleWebKit/537.36(KHTML,像Gecko)Chrome/83.0.4103.61Safari/537.36Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9username=test&password=pass在上面的POST请求例子中，username=test&password=pass就是请求体。需要注意的是，上述请求报文中的每一个换行符都带有\r\n标记，可以在后面的实际开发章节中实现。分析完请求报文，接下来分析响应报文。找到ResponseHeaders，点击右侧的viewsource，可以看到本次请求的responseheader信息。第一行HTTP/1.1200OK是状态行。同样由三部分组成：HTTP协议版本号、状态码、当前状态码对应的原因短语，分别对应HTTP/1.1、200、OK。每个部分仍然由一个空格分隔。状态码用于告知服务器返回的响应状态，是一个数字。状态码大致分为四类：2XX、3XX、4XX、5XX，分别对应成功、重定向、客户端错误、服务器错误。所以状态码200表示请求成功。原因短语OK其实不是很重要。主要是向客户端返回一个人类可读的短语来标识请求结果，对浏览器没有影响。响应头字段也是Key:Value对的形式，有的和请求头字段相同，称为通用头字段。例如，Connection:keep-alive也存在于响应头字段中。还有一些字段是和请求头字段结合使用的。可以看到，Content-Type字段是和请求头字段中的Accept结合使用的。accept是浏览器用来告诉服务器可以接收的数据格式，Content-TypeType:text/html表示服务器返回的数据格式是html。其他的响应头域我们后面用到的时候再解释。同样，响应消息中的空行不会在浏览器中显示，但在浏览器中可以看到响应主体。当前请求的响应体实际上是服务器返回的HTML源代码。一个HTTP响应是这样的：HTTP/1.1200OKConnection:keep-aliveContent-Type:text/htmlXXXURL介绍完HTTP协议的基础知识，我们来简单介绍一下URL。京东首页的网址是https://www.jd.com/，是一个网址。URL在中文里叫做UniformResourceLocator。URL的作用是在网络上唯一标识一个资源。您可能听说过URI，但URL实际上是URI的子集。在基础学习阶段，我们不需要搞清楚它们之间的区别，只需要将我们常用的URL统称为URL即可。一个URL的完整格式如下：scheme://user:passwd@host:port/path?query#fragment各部分含义如下：scheme：协议名，表示资源使用的协议，http代表HTTP协议，file代表文件协议。://：这个是固定的写法，记住就好，没必要深究。user:passwd@：身份信息，表示访问主机时需要提供的用户名和密码，但这种将隐私信息完全暴露在外的方式几乎不再使用。host:port：表示资源所在的主机名和端口号。主机名必须是IP地址或域名。HTTP协议默认端口号为80，可以省略。其他端口号不能省略。路径：标识资源的位置。它采用类Unix目录风格，必须以/开头。如果是多级路径，可以写成/a/b/c的形式。query：查询参数，从第一个？路径之后（不包括?）到#之前结束，所有内容都是查询参数，参数的格式为key=value，如果有多个参数，用&隔开。如果我们需要对数据进行分页，可以使用这个参数。例如page=1&offset=20表示需要获取第一页的数据，每页包含20条数据。这时候服务端就可以解析这个参数并返回相应的数据了。fragment：最后一部分是片段标识符。它也可以称为锚点。从#开始，浏览器可以根据锚点跳转到页面的指定位置，但是这个参数不会发送到服务器端，所以开发服务器端通常不需要关心它。让我们通过分析一个实际的URL地址来加强我们的理解。下图是在京东首页搜索Python书籍后浏览器地址栏中网址的截图。为了能够更清楚的说明问题，URL部分略有删减。我们可以复制网址：https://search.jd.com/Search?keyword=python%E4%B9%A6%E7%B1%8D&enc=utf-8以上网址按照标准格式拆分如下：scheme:httpshost:port:search.jd.compath:/Searchquery:keyword=python%E4%B9%A6%E7%B1%8D&enc=utf-8你应该注意到上面复制的URL和截图有些不同。首先，我们复制的网址是https开头的，但是浏览器是search开头的。事实上，浏览器隐藏https://是为了使URL更具可读性。事实上，它仍然存在。你可能会有疑问。上面我们一直在介绍HTTP协议。完整的URL以http开头。但实际上，京东网站的网址都是以https开头的。其实https是在http的基础上，只是在http的基础上加了一个安全的socket层。默认端口为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转义的具体规则可以通过查看相关文档了解。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与服务器建立连接。浏览器向服务器发送请求消息，服务器接收。请求消息后做相应的处理，将处理结果组装成响应消息返回给浏览器。在主页上查看京东的流程概览。如果你没有web开发的基础，看了我上面对HTTP协议的介绍，感觉不是很清楚，那我推荐你看一本书，名字是《图解HTTP》，看完之后，你就可以学习这个教程了达到事半功倍的效果。开发环境本教程项目的开发环境如下：Python：Python3.7浏览器：Chrome83开发工具：PyCharm2020.1操作系统：macOS10.15有Python基础的同学必须搭建开发环境，具体搭建过程就不说了这里介绍的太多了，有一点需要强调的是我只推荐Chrome或者Firefox作为浏览器，以获得更好的开发体验。联系我：微信：jianghushinian邮箱：jianghushinian007@outlook.com博客地址：https://jianghushinian.cn/
