前后端是怎么进行交互的？

许多进行前后端开发的同学，在学习过程中也总会问我一个问题：前后端到底是怎么沟通的？

这个问题，可以说是许多学习开发的同学的共同的问题，也是阻碍大多数学习开发和团队协作路上的绊脚石。

但事实上，这个问题远比你想象得简单得多。

1，前后端的交互概述

我们在日常生活中，每天都会上网。无论是我们浏览网页，还是使用QQ、微信。

细心的同学已经发现了：无论是网页，还是我们的一些客户端例如QQ、微信等等，都会通过网络和后台服务器联络并获取最新的信息。

比如说每次打开掘金社区首页，就会推送不一样的最新内容，这是网页联络了其对应的服务端获取的数据：

比如说我们每次打开网易云音乐客户端，发现推送的歌单也不一样，也会包含最新内容，这也是客户端通过网络联络到后台服务端获取的数据：

那大家就很好奇了：这些网页、客户端是怎么和服务器联络的呢？服务器这边又做了什么？

其实答案很简单：无论是网页还是客户端等等，都通过网络请求和后台服务器联络。

就像我们平时通过QQ或者短信等给远在千里的朋友发消息聊天一样，事实上，网络请求就很像我们QQ或者是短信给别人发的一条条消息。

只不过，网络请求是网页或者电脑上的一些应用软件（下面我们统称为客户端）给服务器发的“消息”，并且在网络环境和服务端正常的情况下，客户端发的“消息”，服务端收到后是一定会“回复”的。

客户端发出的消息内容，叫做请求体，服务端回复的消息内容，叫做响应体。

我们以掘金首页为例，每次从打开掘金的首页，到我们看到上面推荐的最新内容，大致可以分为以下几步：

1. 加载掘金网页，网页就会先给它自己的服务器后台（掘金后台服务器）发送一个网络请求，这个请求会发送给后台那个获取所有推荐文章的网址（接口）上，以获取所有的推荐文章的列表
2. 后端服务器就会从数据库中找来这些文章，并把这些文章的信息比如说每个文章的地址、标题、封面图片url等等，组装成JSON形式，放在响应体中返回给网页
3. 网页获取到响应，便把信息解析并排版成好看的样子，可见这里，网页将这些文章信息给组装成了一个个小卡片

上图是在谷歌浏览器的开发者工具中查看的网络请求信息，可见很显然这个网络请求是用于获取掘金文章推荐文章的信息的，响应体中也可见服务端返回了这些文章的信息。

这就是我们平时上网的过程，是不是很简单呢？其实没有大家想象的那样复杂。

这张示意图给出了一种常见的前后端交互的例子：前端向后端发送查询信息的请求，以获取最新信息。

对于开发者来说，前端同学，开发网页的居多，在JavaScript中有发送网络请求的方法，可以发送网络请求。后端同学，开发Spring Boot居多，通常会在Spring Boot中开发相应的功能并创建接口，告诉前端同学接口地址、功能和响应数据体格式，这样前端同学就可以对后端发送请求并获得相应的数据，完成整个系统开发。

至此，相信大家明白了，咱们前后端同学到底是做什么的：

• 前端：负责开发呈现给用户看的界面
• 后端：负责开发系统的逻辑（例如说从数据库查出东西、进行处理规整、返回给前端）

相信大家现在知道了这个问题的结论：前后端交互的方式，就是通过网络请求。

可见，通过网络请求和后端进行交互，赋予了我们网页或者客户端更加动态的内容，使得网页不再单调。

2，网址 - URL

无论是我们平时上网，通常会指定浏览一个地址，比如说要求必应搜索引擎，我们就会输入网址：cn.bing.com

同样地，前端给后端发请求，也需要明确后端服务器的地址才能发送。

这个地址，我们通常称作URL。

URL是缩写，其英文全称是：Uniform Resource Locator（统一资源定位符）。

URL的格式规范规定了由哪几部分组成，以及各种符号的作用。下面来看一个网址：

可见一个完整的网址有如下内容：

• 协议：常用的是http和https，了解有这两种协议即可
• 域名：指向这个网站服务器地址的一串字符串
• 路径：以/开头，中间每一层也是使用/，路径就像是一层层的文件夹，不同的路径通常指向这个服务器下不同的网页或者API等等
• 参数：和路径之间以?分隔，?后面就是参数了，多个参数之间使用&分隔，每个参数是参数名=参数值的形式，可见上述URL中只有一个参数，参数名为spm_id_from，参数值为333.999.0.0

一些网址，以及我们平时本地开发调试的网址，可能会带端口号，因为使用了非标准端口：

但是为什么好像很少平时上网会见到有网址带端口号呢？因为大多数网站都是使用的标准端口，用http协议访问的网址就是80端口，而https访问的网址就是443端口的，使用80和443端口的服务端，访问它就是不需要带上端口号的。因为浏览器访问http网址的时候就会自动访问其80端口，而https的网址浏览器自动访问其443端口，所以我们就不需要带着端口号了！

网址是我们平时非常常见的东西了。不过大家知道网址实际上的作用吗？

其实，我们每一台接入互联网的设备，无论是计算机还是服务器，都会被分配一个IP地址。这个IP地址就像你家的详细地址门牌号一样，就像我知道了你家的地址我才能到你家来一样，需要有IP地址，我们才能够访问到指定的服务器上面去。

不过IP地址并不方便记忆，因此人们设计出来了域名，可以说就是网址，并通过域名解析服务器（DNS，Domain Name System）将域名和IP地址相映射，这样，每次我们访问一个网址，就可以找到对应服务器的IP并访问指定服务器，大家就能浏览到网页了！

所以说，一些网址我们无法访问，可能是DNS找不到这个网址所在的IP或者是受到了DNS污染：

域名对应着一个IP，你访问到了这个服务器，但是这个服务器下面有多个页面，因此使用路径来标明每个网页，就和我们平时使用电脑的文件路径一样。不过为什么大多数时候，我们访问一个域名但是没有写后面的路径部分，就能够访问到一个网站主页呢？因为只访问地址不加路径的时候，默认访问网址根路径，而大多数网站为了方便起见，把主页放在根路径下了。

3，API

API即为接口，就像一个黑盒一样，开发者可以直接访问而无需知道其内部原理。

我们访问一个API的时候，和浏览一个网页一样，也是去访问一个URL。

只不过我们访问网页的URL的时候，服务器会返回一个网页文件，浏览器把这个网页显示出来。而访问API的URL的时候，大多数时候返回的是一些文本数据而非网页。

比如说在浏览器中访问：cn.bing.com

很显然这是一个网页的URL，浏览器显示出了网页：

如果我们在浏览器中访问一个API的地址：api.iyk0.com/7rtq/?city=南京

这是网上一个免费的天气查询接口，在这个接口URL后的city参数填上你要查询的城市即可查到该城市七日天气。

总的来说，平时访问的网站和这里访问的API，区别如下：

• 我们访问的网站的URL，会返回网页，浏览器会解析并显示网页内容
• 访问API的URL，会返回一些数据，这些数据就通常是后端从数据库查询并组织成JSON格式并返回的

API可能返回的是文本，也可能是图片、文件等等。

相信大家现在知道了，前后端交互是前端将网络请求发给后端的API，后端API返回数据，网页再将其解析为好看的样子。

无论是Spring Boot还是其它后端框架，基本上都可以轻而易举地解析出请求的URL参数、请求体的信息、请求体等，大多数情况下，基本上查询作用的API接口，都是后端根据URL中的请求的参数或者是路径去查询指定的内容，然后返回。

API通常不是给用户访问的，我们平时上网也很少去拿浏览器访问一个API，而是给前后端交互使用的。

在最开始的例子中，掘金网页（前端）向后端某个网址发了请求获取最新文章，后端就返回了最新推荐的文章信息，这个网址就是掘金后端用于获取最新文章的API。

前面也讲述了前后端交互的过程，就是前端向后端对应功能的API发送请求，后端返回数据给前端。那么开发API，也是后端开发者的工作之一。

我们大致了解API是什么即可，实际上开发的时候大家就明白了。

4，网络请求结构和类型

网络请求其实有很多，我们常用的是GET和POST请求。

网络请求通常有以下部分构成：

• 请求行：记录一个请求最基本的信息，例如请求的类型、请求的url和协议等等
• 请求头：主要存放请求的标识信息或者元数据之类的，例如浏览器UA、请求内容格式（是表单还是json）等等
• 请求体：存放请求的数据内容（一般是键值对），一个请求可以没有请求体

当然，后端接收到请求后返回的响应，组成结构和请求是一样的，也是三部分：

• 状态行：由HTTP协议版本号，状态码，状态消息三部分组成
• 响应头：响应的基本信息或者元数据，其中包含了响应体的格式
• 响应体：服务端返回给客户端的数据，例如访问网页时响应体就是网页，访问API时访问体就是一些JSON格式的文本数据或者是文件图片等等

这些内容大家事实上都可以在谷歌开发者工具中去查看，非常简单。

我们常见的网络请求有两种类型：GET请求和POST请求。

(1) GET请求

我们平时在浏览器输入网址访问一个网站，以及使用很多查询类API都是发送了GET请求。

就像我们上述的天气查询API一样，直接通过浏览器就是对其发送了GET请求。

这个接口说明文档如下：

根据API，比如我要查询南京天气，我们的请求地址如下：