🥰🥰🥰来都来了，不妨点个关注叭！
👉博客主页：欢迎各位大佬!👈

1. HTTP 前置知识

1.1 HTTP 是什么

HTTP 是一个使用非常广泛的应用层协议，HTTP 请求发送出去，就需要从应用层到物理层，层层封装，接收方收到后，再从物理层到应用层，层层分用，最终才能够完成传输

应用层协议，经常需要进行"自定义协议"的，但是，很多时候也不一定非得从零开始设定，以可以基于一些已经有的设计好的协议，在这个基础上制定

1.2 HTPP 协议应用场景

HTTP 应用的非常广，主要原因就是 HTTP 可制定性非常强！

Q：既然说 HTTP 应用得非常广，哪些场景下使用了的呢？
A：只要你在上网，就在使用!!!
比如说，浏览器打开一个网页，手机 app 从网络上加载一份数据等等~

1.3 HTTP 协议工作过程

HTTP 是"一问一答"这种形式的协议，即一个请求一个响应

2. HTTP 协议格式

2.1 fiddler 抓包工具查看 HTTP 报文格式

学习 HTTP 协议，最主要的就是认识 HTTP 的报文协议格式，而要想认识报文格式，需要借助一些外部的工具，来把 HTTP 协议来显示出来

这个外部工具，即抓包工具，本质上相当于一个"代理"，借助这样的代理，可以看到网络传输的具体数据

当然，抓包工具有很多，本期内容使用的是 fiddler，专注与 HTTP，使用起来也比较简单~

fidder 安装：可以去官网直接安装
fidder 使用：左侧是抓到包的列表，列表中的内容，是在持续滚动的；点击要关注的包，右侧会显示详情，右上是请求，右下是响应
fiddler 小技巧：找自己发的包，先看颜色，黑色的包，响应是普通数据，蓝色的包，响应是 HTML；再看域名；还可以看看响应的数据长度，一般是找长度比较长的
fiddler 可能遇到的问题：
1）fiddler 作为一个代理，可能和电脑上其它的代理冲突
2） 没有勾选 HTTPS，没有安装根证书，无法解析 HTTPS 数据，这样可能抓到的东西就会很少

借助 fiddler 工具，来看一看~

借助上述抓包工具，就可以看到 HTTP 协议请求和响应的详细内容：

一个 HTTP 请求包含4个部分

• 首行
• 报头 header
• 空行
• 正文 body

一个 HTTP 响应包含4个部分

• 首行
• 报头 header
• 空行
• 正文 body

其中 HTTP 本身是文本格式，如果看到响应乱码，则是经过压缩，成了二进制文件，因为带宽比较贵，压缩能够减少网络传输的数据量，节省带宽，把数据压缩，本质上是用 CPU 资源换带宽资源，因此，很多网站会对数据进行压缩

接下来进一步研究这个格式的细节信息！

2.2 HTTP 报文格式

2.2.1 HTTP 请求报文结构

💚 请求行：方法+URL+版本号

【1.对于方法解释说明】

抓几次包，小伙伴们不难发现，怎么请求的方法只有 GET 呢~ 还有其它的嘛

一般请求都是 GET，当然也有 POST 的，如以下场景：

1） 登录的时候
2）上传文件的时候

最常的就是 GET 和 POST 啦

HTTP 方法描述了这个 HTTP 请求想干什么，HTTP协议有很多种方法，不同的方法，表示不同的语义，这里列举一些方法，如下：

方法	说明	支持的HTTP协议版本
GET	获取资源	1.0、1.1
POST	传输实体主体	1.0、1.1
PUT	替换指定资源	1.0、1.1
HEAD	获取报文首部	1.0、1.1
DELETE	删除指定资源	1.0、1.1
OPTIONS	返回所有可用方法	1.1
TRACE	追踪路径	1.1
CONNECT	要求用隧道协议连接代理	1.1
LINK	建立和资源之间的联系	1.0
UNLINE	断开连接关系	1.0

【注意!!!】GET 和 POST 的区别：

GET 和 POST 表示的是不同的语义，但是，实际上，也并非需要严格遵守，HTTP 方法的语义，只是一种建议，小伙伴们在使用的时候，也不一定非得遵守（注意建议~）对于 body 有没有的问题，GET 一般是没有 body 的，也可能有 body，非常少见，POST 一般有 body，当然，也可以没有 body，但比较少见！

本质上没有区别，但是在使用习惯上有区别

1. GET 习惯上用来表示’'获取一个数据"，POST 则习惯用来表示 “提交一个数据”
2. GET 一般没有 body，需要携带数据则放到 URL 中，POST 一般有 body
3. GET 请求通常会设计成幂等的，POST 则无要求
4. GET 可缓存的（前提是幂等），POST 则不能
5. GET 请求可以被浏览器收藏，POST 则不能

【2.对于 URL 解释说明】

URL 即 唯一资源定位符，描述了网络上唯一的一个资源
（这个概念严格的说，并非是 HTTP 里的概念，很多协议都会用到 URL，比如 MySQL 中的 JDBC，就用到过 URL）

URL 的结构如下：协议名 + 域名 + 端口号（可省略）+ 带层次结构的路径 + query string 参数（查询字符串）

补充：端口号省略并不是没有，而是浏览器会自动加上默认的端口号，对于 HTTP来说，默认端口号是80，对于 HTTPS来说，默认端口号是443

举一个栗子，更好的理解 URL ，如下：

小万特别喜欢吃煎饼果子，以后小万不做程序猿啦，在学校食堂开了一家煎饼果子店，如何找到小万呢？

URL 结构，是不是一目了然啦~ 同时，我们也会在计算机网络中，听到 URI 这个词，这里作出解释：

【URI 和 URL 的区别】：

• URI 是唯一资源标识符，可以唯一标识一个资源；
• URL 是唯一资源定位符，可以提供该资源的路径；

联系：URL 是一种具体的URI，URL 不仅可以标识一个资源，还能提供该资源的路径

举例：URI 的作用就像身份证一样，可以唯一标识一个人，而 URL 的作用则像家庭住址，不仅可以唯一标识一个人，还提供了定位该资源的信息

【3.对于版本号解释说明】

HTTP 版本有 HTTP/1.0、HTTP/1.1、HTTP/2.0、HTTP/3.0

最常见的版本号是 HTTP/1.1，最主流的版本~

HTTP 1.0 默认短连接，HTTP 1.1 默认长连接，HTTP 2.0 采用多路复用

（这里作简单了解）

💚 请求报头 header

请求行，占一行，下面的信息就是请求头，以空行为分隔~ 是键值对结构，每个键值对占一行，键和值之间，使用冒号空格分隔，这里的键值对可以有 N 行，会用空行作为结束标记，空行就类似于链表的 null

header 中的键值对，大部分都是 HTTP 协议规定的，当然，这里也可以添加自定义键值对，所以，可制定性强~

下面介绍一下，请求行里面部分属性的内容~

1）Host

Host 这个属性描述了浏览器这个请求要访问的服务器是谁，这里写的不仅仅是地址，也可以是端口号~

有的小伙伴就会问了，在 URL 中已经写了当前要访问的服务器是谁，为什么在请求头这里的 Host 要再写一次呢？

这是因为，大多数情况下，Host 中的值和 URL 中的域名是一致的（言外之意，还有不一致的情况~）比如当前我们访问的服务器不是直接访问，而是通过"代理"来访问，此时 Host 和 URL 可能就不一致了，Host 是最终目标，URL 中的是当前目标，可以一致，可以不一致滴!

2）Content-Type / Content-Length

• Content-Type ：描述了 body 的数据格式
• Content-Length ：描述了 body 的长度（字节）

这两个属性，都是跟着 body 走的，GET 请求一般没有 正文body，所以上述的图片中，没有看到这两个属性，而 POST 一般有 body，因此，如果有 body 的话，会有这两个属性

可以看到，body 的长度是 707 字节，类型是 application/json 数据的格式，描述数据是按照 json 格式来组织的~

json 格式是用 { } 来表示的，里面包含若干键值对，键值对之间使用，分割；键和值使用：分割，格式如下：

{
	"username":"xxxx",
	"password":"xxxx",
	"status": 0
}

在进行前后端交互(浏览器和 HTTP 服务器），json 是常用的格式~

Content-Type 还会有其它的格式，如：
application/x-www-form-urlencoded —— form表单提交数据的时候，会生成这种格式的 body，此时，body 的格式就是和 query string 是一样的，username:xxxx&password:xxxx&status: 0

作为请求，Content-Type 就是 json 和 application/x-www-form-urlencoded ，这两种写法比较多
作为响应，Content-Type 有 text/html、text/css、application/javascript、appliccation/json、image/jpg、image/png…

有了上述的格式描述，浏览器/HTTP服务器，才能够认识到当前的 body，并正确的进行解析~

Q：为什么找不到 text/css、application/javascript 这种格式？
A：浏览器缓存问题！ 浏览器中直接按 F5 刷新，按 Ctrl + F5，是强制刷新，会把缓存的数据页重新加载，比如 css，js，图片，字体等，每次访问一个页面，都需要把依赖的这些资也加载到浏览器这边，加载这些资源，都需要有一定的网络开销，由于上述 css，js 都是固定的，很少变化，就可以把这些资源在加载一遍之后，保存在浏览器所在机器的本地硬盘上，此时后续再访问服务器，访问页面，就只加载 html 即可，其它这些资源就不必加载了，此时就可以认为，本地主机的硬盘，就是远端服务器的一个"缓存"

3）User-Agent (简称UA)

User-Agent：描述用户使用的客户端是什么样的，主要描述了浏览器是什么版本，系统是什么版本

（细心的小伙伴观察到这里是 win10，但其实笔者用的是 win11，猜测可能是 win10 和 win11 是一样的内核版本~）

• Q：为什么要有 UA 呢？
• A：早期电脑硬件配置比较差，当时浏览器上网功能比较原始，最早浏览器只能显示文本，再后来可以显示图片，接着又可以显示视频/音频，再后来可以支持 js，再后来可以支持 flash，再发展，又有了新的很多很多特性~ 这个就导致，同一时期，浏览器的种类繁多，功能参差不齐，对于网站开发来说，难度就大大提升了，于是，就发明了 User-Agent，就可以在请求中，告诉网站服务器，当前我们当前上网的设备是啥，此时，服务器就可以根据客户端的种类，返回不同的页面~

不过，随着时间的推移，浏览器过了快速发展的阶段了，现在的浏览器，之间的区别已经越来越小了，此时，UA 这个属性存在的价值，就大打折扣了~ UA 现在一个重要的用途，就是要区分用户是手机/PC/平板

虽然 UA 能够做到这一点，但是实际上，现在还有更好的解决方案，CSS3 里提供了 “媒体查询” 功能，可以根据浏览器窗口大小，来设置不同样式，这种页面开发方式，称为 “响应式布局”~

4）Referer

Referer：描述了当前这个页面，从哪个页面跳转过来的~

• 如果直接在地址栏输入 url，此时请求中没有 referer （如果点收藏夹里面的，效果也是一样的，没有 referer）
• 在搜索结果页中，就可以看到 referer 就是笔者的 gitee 主页 ，这个是从笔者主页跳转来的~

• Q：这个 referer 有什么用呢！
• A：用处不是多，但是很关键~ 比如在广告方面
  
  比如我在这个广告平台上一点广告，就跳转到了广告主的页面，此时，广告主服务器这个访问，就会带有这个广告平台的 referer，广告主可能会通过多个平台投放广告，因此，就可以通过 referer 来区分，看当前这次访问是哪个平台导入的流量~

但是有没有一种可能，广告主这里收到了请求 referer 被篡改了~

明明是通过这个平台跳转过去的，应该带这个广告平台的 referer，但是被改成了别的广告平台

答案是肯定有可能的，比如运营商（中国移动、中国联通、中国电信），它们是有能力的，网络通信设备是运营商提供的，我这边的访问广告主的网站，我的请求、我的数据、都是通过运营商的交换机/路由器转发的，只要运营商在它的设备上部署一个小小的抓包程序，识别特定的包，就可以做出修改，当然，也是有动机的，因为运营商也有自己的广告平台！

因此，需要通过技术手段，进行反制，让运用商篡改不了，就可以啦！

办法就是，加密，HTTPS！现在互联网绝大部分网站都是 HTTPS 的，有效保护数据不被篡改，当然，任何加密手段都不是万无一失，如果破解成本超出了数据本身价值，这个时候就是安全的！（这里 HTTPS 闪亮登场，下期讲解 HTTPS ，敬请期待~）

5）🔥Cookie

Cookie ： 是客户端保存用户信息的一种机制~ Cookie 的值，也是键值对，键值对之间使用；分割，键和值之间使用 = 分割，这里 Cookie 的键值对具体是什么含义，我也不知道，只有这个网站的开发者知道，这里的键值对都是程序员自定义的数据，不同的网站就有不同的键值对，也就有了不同的含义和用途~

我们当前在 HTTP 中遇到很多键值对，这里作一下总结：

• url 中的 query string
• header 部分，每一行是一个键值对
• body 部分，如果 Content-Type 为 x-www-form-urlencoded 或者 json，body 的内容也是键值对
• Cookie 里面存储的数据还是键值对

这些键值对，都是允许用户自定义的，这些自定义的键值对，都是 HTTP 留给程序员进行扩展的地方~（这就是为什么 HTTP 流传这么广泛，这个场景这样定义，那个场景那样定义一下）

Cookie 的本质是浏览器在本地存储用户自定义数据的一种关键机制

如何理解这句话呢？结合这张图进行讲解与理解~

既然浏览器自身也需要存储数据，那么怎么存呢？

1）直接存储到硬盘文件上，是不是就行了？ —— 这个事情是万万不行的，如果允许网页能够操作你电脑的文件系统，那么一旦你不小心点到了一个奇怪的网站，很可能网站就做一些恶意的事情，比如把你硬盘上的学习资料都一锅端了~ 所以，为了保证用户上网能够比较安全，浏览器会做出限制，禁止网页能够直接访问硬盘~

2）浏览器虽然禁止直接访问硬盘，但是浏览器提供了 Cookie 机制，允许网页往浏览器这边存储一些自定义的键值对，这些数据通过浏览器提供 api，写入特定的文件中

由于网页有很多，比如我访问百度，是需要存储一些数据，我访问搜狗，也需要存一些数据
针对这种情况，做法是分开存储的，每个网站都存储自己的 Cookie（cookie 是按照域名维度进行存储的）
即同一网站（百度主页和百度搜索结果页…）共享同一份 Cookie
不同网站（百度、淘宝等）则是各自有各自的 Cookie

从 3 个方面，彻底弄清 Cookie！

• Cookie 从哪里来
  从服务器来，当我们的浏览器访问服务器的时候，服务器就会在 HTTP 响应中，通过 Set-Cookie字段，把 Cookie 的键值对，返回给浏览器，浏览器收到这个数据，就会在本地存储
• Cookie 到哪里去
  会在下次请求的时候，将 Cookie 带给服务器，Cookie 在浏览器这边，只能算是"暂存"，真正让这个数据发挥作用的还是得由服务器来使用
• Cookie 的作用
  是浏览器本地存储数据的机制，存的数据不一定非得是角色，任何想存的数据都行，前提是必须得是字符串，由于Cookie 存储空间有限，一般也不会用 Cookie 存太大的，最典型应用就是保存用户的登录状态

1）Cookie 在哪儿看？

点击浏览器这里的小锁，可以看到里面有 Cookie 和站点数据，如下：

点进去，可以看到如下：

从这张图，我们也可以知道，以域名为维度区分的~

点击一个进入查看~

可以看到，Cookie 存储的内容有：

• 名称
• 内容
• 域
• 路径
• 发送
• 已创建
• 到期

2）Cookie 最典型的应用 —— 存储用户的身份信息（即用户登录之后的身份）

由于客户端有很多，每个客户端提供的服务可能还不太一样，比如说，普通用户和管理员，他们权限就不一样！因此，服务器就可以通过 Cookie 来进行区分，比如客户端在登录的时候，服务器就识别好客户端的角色，把角色信息返回给浏览器，在 Cookie 中保存，后续客户端访问的时候，带着这个 Cookie 就可以了，此时，服务器就直接知道这个客户端是干嘛的了~

其实在生活中，这就像买东西的发票，有了发票，就有了一份售后保证，可以凭借发票与商家沟通售后问题~

再具体举一个生活中的栗子~ 去医院看病的流程（当然，希望小伙伴们健健康康，平平安安~）

1）第一步：去医院先是挂号，挂号的同时，医院会给你一张就诊卡，办理就诊卡需要你的身份证，电话之类的个人信息
2）第二步：挂号完成，可以去诊室看病， 医生第一句话就是刷一下就诊卡，这个就诊卡就包括了身份信息，如你的姓名、身份证、年龄、性别…还有以往的病例，当前开出的额诊断，当前开的药…
3）接着来到检验科，刷一下就诊卡，检验科的医生会根据就诊卡来确定具体做什么检查
4）来到影像科，刷一下就诊卡，同样的，影像科的医生会根据就诊卡来确定具体做什么检查

此时，这个就诊卡就是 Cookie~

💚 请求正文 body

正文中的内容格式和 header 中的 Content-Type 密切相关，上面也罗列了 3 种情况（这里不作详细介绍）

1）application/x-www-form-urlencoded
2）multipart/form-data
3）application/json

2.2.2 HTTP 响应报文结构

💚 响应行：版本号+状态码+状态码描述

1）版本号：和请求中相同
2）状态码：数字，通过这个数字来表示这次请求执行成功还是失败，如果是失败，给出失败的原因
3）状态码描述：通过一个或者一组单词，描述这个状态码的含义

状态码有很多，如下：

（ps：图片来自搜狗百科！）

虽然状态码种类繁多，但是常用的就那几个！下面具体介绍常用的状态码~

• 200 OK 表示请求成功
• 404 Not Found 表示要访问的资源不存在
• 403 Forbidden 表示访问被拒绝（没有权限）
• 500 Internal Server Error 表示服务器内部错误（比如你的服务器出 bug 的，抛异常没有 catch 到，就会出现 500）
• 504 Gateway Timeout 表示服务器访问超时（浏览器给服务器发请求，服务器要返回响应，结果服务器迟迟没有响应）
• 302 Move temporarily 表示临时重定向（临时，代表下次要不要继续重定向，是不确定的）
• 301 Moved Permanently 表示永久重定向（以后都重定向）
  重定向：就是访问旧的地址被自动引导到新的地址上

了解上述常用的状态码即可，其它的去查就好啦，尽管状态码很多，但是可以分为以下这五类：

	类别	原因短语
1xx	informational（信息性状态码）	接收的请求正在处理
2xx	Success （成功状态码）	请求正常处理完毕
3xx	Redirection（重定向状态码）	需要进行附加操作以完成请求
4xx	Client Error（客户端错误状态码）	服务器无法处理请求
5xx	Server Error （服务器错误状态码）	服务器处理请求出错

💚 响应报头 header

响应报头的基本格式和请求报头的格式基本一致，类似于 Content-Type，Content-Length 等属性含义和请求中的含义一致

响应报头 Content-Type 常见有以下几种：

• text/html : body 数据格式是 HTML
• text/css : body 数据格式是 CSS
• application/javascript : body 数据格式是 JavaScript
• application/json : body 数据格式是 JSON

💚 响应正文 body

根据响应报头 Content-Type 的属性决定~ 上面也罗列了 4 种情况（这里不作详细介绍）

• text/html
• application/javascript
• application/javascript
• application/json

以上就是关于 HTTP 协议，整体格式的介绍啦~

3. 如何构造 HTTP 请求

3.1 直接通过浏览器地址栏输入一个 url

这样直接构造出一个 get 请求~

3.2 html 一些特殊标签也会触发 GET 请求

• link
• script
• img
• a

比如有一个页面，有一个 img 标签，此时，当页面加载好之后，浏览器就会根据 img 标签的 src 属性，给服务器发起一个 GET 请求，来获取到图片的内容~（当然，你访问的资源得是网络资源，如果是本地资源，自然不会发起 GET 请求）

3.3 form 表单可以发 GET 和 POST 请求

1）form 发送 GET 请求，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>form 表单</title>
</head>
<body>
    <form action="http://www.baidu.com/myPath" method="GET">
        <input type="text" name="aaa">
        <input type="text" name="bbb">
        <input type="submit" value="提交">
      </form>
</body>
</html>

form 其中的属性解释：

• action ： 表示要访问的 URL
• method ： HTTP 请求的方法
• input 的 name ：对应 query string 的 key
• input 的 内容 ： query string 的 value

对应关系参考下图（其实不难理解的，需要用心去看~）

2）form 发送 POST 请求，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>form 表单</title>
</head>
<body>
    <form action="http://www.baidu.com/myPath" method="POST">
        <input type="text" name="aaa">
        <input type="text" name="bbb">
        <input type="submit" value="提交">
      </form>
</body>
</html>

对应参考如下（POST 请求 input 内容在 body 里，GET 请求 input 内容在 query stirng 里）

form 表单只支持 get 和 post，其它 put、delete 等 http 方法，form 表单就无能为力了~ 而且使用 form 的话，版本号固定是 HTTP/1.1

3.4 ajax

ajax 现在是最主流的前后端交互方式~

ajax 全称：Asynchronous Javascript And XML，是 2005 年提出的一种 JavaScript 给服务器发送 HTTP 请求的方式~

1）Asynchronous

synchronized 是同步，Asynchronous 加个 a 前缀，是异步~

在计算机中，一个术语，很可能存在多种含义，需要结合上下文

• 同步和互斥（加锁的场景），把同步理解为互斥可能更好一点，加了 synchronized 这个锁之后，加锁之后就变成互斥的了
• 同步和异步（IO的场景），主要是网络上的 IO，比如这里的同步，可以理解成我来到饭馆，老板来个蛋炒饭，接下来我就一直在这个出餐口等着，一直等到老板把饭做好，我把饭端走，而异步，则是我找了个地方坐下来，玩手机，该干嘛干嘛，等饭做好了，老板直接给我端上来~ 异步，则是请求发起者不关心结果，而是由被请求的这一方面计算出结果后，把结果发送给发起者（就是看是否是自己取的啦）

2）xml
网络应用层，自定义协议，和 json 一起登场的~ 是一种自定义数据格式的方式，基于标签的形式，很多配置文件也会用到 xml，比如 pom.xml、web.xml 等（html 和 xml 都是由标签构成，html 来说，支持哪些标签，标签是什么含义，都是标准委员会规定的，xml 来说，标签都是自定义的~）

ajax 是前端和后端异步交互的方式~

• 那 ajax 如何写呢？
• js 给提供了原生了 ajax 的 api，这个 api 挺难用的，这里采用 jquery 中 提供的 ajax api

$：在 jquery 中是一个特殊的全局变量，jquery 中的各种 api 都是 $ 的方法，是变量名的一部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>ajax</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
    <script>
     $.ajax ({
        url:"https://www.baidu.com",
        type:"GET", // 可以写 get、post、delete
        success:{
            // 回调函数，写处理响应的代码
        }
     });
    </script>
</body>
</html>

回调函数：会在服务器返回一个正确的响应的时候，被浏览器自动执行，这个执行过程就是“异步”的
在我们页面中的 js，把请求发出去就不管了，就继续执行后续的代码，直到说，响应回来之后，浏览器就会把这个响应喂给我们的代码，浏览器调用上述这个回调函数，执行处理响应的逻辑~

还有哪些关于回调函数呢~

• 函数指针 ——> 回调函数
• 集合类，优先级队列，Comparable(compareTo)，Comparator(compare) ——> 回调函数
• 多线程，重写 run 方法/ lambda 表达式 ——> 回调函数
• …

即回调函数不会立刻就调，等到合适得到机会再调~

相比之下，ajax 比 form 功能更灵活，更丰富，尽管 ajax 有很多优势，但是还存在一个很重要的问题！

看看这个代码，能否跑起来~ 直接报错，如下：

这个属于 ajax 的一个非常典型问题，跨域问题，假设现在运行的 ajax 代码页面的域名是 adc.com，但是 ajax 里的请求，访问的域名是 def.com，这两个域名不一致的话，哪怕服务器给你的响应数据，浏览器还是不能处理，还是要报错~ 就是为了防止 a 网站的页面请求 b 网站的数据，后面自己写了服务器，自己的页面请求自己的服务器，自然就不会涉及跨域了~ 而 form 则允许跨域

3.5 构造 HTTP 请求工具 —— Postman

不写代码，现成的工具也可以直接构造 HTTP 请求 —— Postman（这里就不展开讲解~在官网下载安装十分方便，操作简单）

💛💛💛本期内容回顾💛💛💛

✨✨✨本期内容到此结束啦~