初识前后端通信#

是什么？

• 前端和后端数据交互的过程
• 可以把整个过程理解成：前端（浏览器） ←→ HTTP协议 ←→ 后端（服务器） ←→ 数据库

前后端通信的过程与概念解释#

前后端通讯过程

概念解释

前端：用户能够直接看到和操作的部分。

后端：处理业务逻辑和数据的部分。

客户端：发起请求的一方。

服务器端：提供服务并响应请求的一方。

前后端的通信方式#

初识 HTTP#

什么是 HTTP？

• HTTP 全称：HyperText Transfer Protocol（超文本传输协议）
• 简单来说：HTTP 是浏览器（客户端）和服务器（服务端）之间通信的规则。

为什么需要 HTTP？

• 浏览器和服务器是两台不同的计算机，它们需要一套规则：怎么发消息？消息格式是什么？怎么返回数据？返回成功还是失败？这套规则就是 HTTP。

HTTP 的工作过程

• 打开百度网站，浏览器发送请求
• 服务器收到请求，返回响应
• 浏览器解析 HTML，显示页面。

HTTP 是请求-响应模型

• 特点：一次请求-一次响应-连接结束

HTTP 中两个最重要的概念

• 请求（Request）：浏览器发给服务器。
• 响应（Response）：服务器返回给浏览器。

HTTP 请求包含什么？

• 请求行：GET /user HTTP/1.1，请求方法GET ；请求路径/user；协议版本：HTTP/1.1
• 请求头（Headers）：告诉服务器更多信息。
• 请求体（Body）：通常POST、PUT会有请求体。

HTTP 响应包含什么？

• 状态行：HTTP/1.1 200 OK；协议版本，状态码，状态描述

• 响应头：

  1
  Content-Type: application/json
  2
  Content-Length: 100

• 响应体：

  1
  {
  2
    "name":"Tom"
  3
  }

HTTP 常见请求方法

• GET：获取数据
• POST：提交数据
• PUT：修改数据。
• DELETE：删除数据。

HTTP 报文#

可以理解成：浏览器和服务器之间传递的一封“信”。

1
浏览器  --------HTTP报文-------->  服务器
2
浏览器  <-------HTTP报文---------  服务器

用一张图理解

1
【请求报文】
2

3
请求行
4
请求头
5
空行
6
请求体
7

8

9
【响应报文】
10

11
状态行
12
响应头
13
空行
14
响应体

HTTP 方法#

• 发送请求时采用的方法，和响应无关
• 虽然有各自语义，但是并不是强制的

常用方法和语义：

RESTful 接口设计

RESTful 是一种接口设计风格，它把数据看作资源，使用 URL 表示资源，使用 HTTP 方法表示对资源的操作。

比如：

1
//注册用户：一个接口，通过HTTP 方法表示操作
2
//get
3
https://api.youzi177.cn/api/user?id=1  //获取用户信息
4
//post
5
https://api.youzi177.cn/api/user  //注册用户

GET 和 POST 方法的对比#

• get没有请求体，有请求头，用请求头发送数据
• post有请求体，用请求体请求数据

区别：

数据发送方式不同：

• GET：参数通常放在 URL 后面
• POST：参数放在请求体（Body）中

注意事项：

• 安全性：很多人认为GET 不安全，POST 安全，这是错误的，实际情况是，在HTTP下GET 和 POST 都是明文传输，都可以被抓包，真正的安全来自HTTPS，而不是 GET 或 POST，为什么大家觉得 GET 不安全？因为GET 参数出现在 URL 中，容易被浏览器记录，被历史记录保存，被日志记录，所以敏感数据不要用 GET。
• 数据长度限制：GET的，URL 有长度限制，IE：约 2083 个字符，现代浏览器虽然支持更长，但依然不建议传大量数据。POST理论上没有固定限制，真正限制在服务器配置、Nginx 配置、Tomcat 配置
• 是否缓存：GET浏览器会缓存，可能直接从缓存读取，POST默认不会缓存。
• 是否可以收藏：GET可以收藏，因为参数在url中，POST不能直接收藏。因为请求体不会保存到地址栏。
• 幂等性：什么是幂等？执行一次和执行多次，结果一样。GET获取用户信息，执行多次，不会改变数据，所以GET 是幂等的。POST创建三条订单，所以POST不是幂等
• GET 不能传大数据：这是错的，GET 的数据放在 URL 中，受 URL 长度限制，不适合传大量数据。
• POST 一定有请求体：这是错的，HTTP 规范并没有强制要求POST 必须有 Body，只是实际开发中通常会有
• GET 一定没有请求体，这也是错的，规范没有禁止 GET 带 Body，但大部分浏览器和服务器都不支持或忽略 GET Body，实际开发中GET 基本不使用 Body。

HTTP 状态码#