week11_day03_http
1回顾
1.1昨天
1, 启动项目的补充
2, 项目里,多组件实现 (组件间的嵌套和引用 最终实现一个页面)
3, *总线事务 (就是通过一个vue对象作为中转, 在不同组件间传值的问题)
4, json 数据的传输格式
5, axios vue的一个插件, 用来在vue语法中调用浏览器向后台发请求(数据请求)
浏览器发送一个请求，DNS域名服务首先将域名转换成ip，根据ip地址去访问前端服务器，前端服务器接收请求并解析请求，返回html、css、js代码给浏览器，并告诉浏览器数据的地址，浏览器进行解析。
然后浏览器就根据地址去后端服务器取数据。最后将前端页面和数据结合。
前端服务器把html、css、js传给浏览器，就没前端服务器啥事了，剩下的是前端代码，前端代码没有意义，根据前端代码生成的对象才有意义。
老师说的前端代码就是Vue项目中除了html、css、js的那些代码，如创建一个Vue对象、在创建成功后获取利用axios获取后端代码，这些都属于前端代码。
浏览器进行dom解析的时候生成对象在浏览器里发起请求调用浏览器向后台获取数据-浏览器发起请求获取返回值(java后台提供)把返回值又给到刚刚调用浏览器的对象-对象拿来使用
数据不是放到res 了吗 然后res放到这个对象里面的？
注意看昨天项目vue4，我们是在对象创建时利用axios获取一个res对象，这个对象时对从后台取出的数据的一个封装，这个res对象本身就是在App2.vue对外暴露出的对象里的。
上面蓝字部分：把返回值又给到刚刚调用浏览器的对象，返回值先给axios，axios将这些数据封装成res对象。
<script>
export default {
name: "App2.vue",
data() {
return {
obj: ''
}
},
//对象创建完之后，向后端发送请求，请求数据。
created() {
var _this = this
//发送一个get请求，请求java后台传数据
//then表示请求成功返回一个东西，把res.data.data返回给obj
//catch表示如果请求不成功
this.$axios.get('http://115.29.141.32:8084/api/mall/getGoodsByType?typeId=-1')
.then(res => {
console.log(res)
//不能用this，因为this现在指代的是这个方法
//res这个对象是经过axios封装后的一个对象，包含后台返回的对象，
//后台返回的对象在res中表现为data属性
//就像你生产手机，手机店卖的是手机，外面还套了个盒子形成商品（res），我们要的是商品中的手机，即res.data
//res.data返回的是一个axios封装的返回值
//我们实际封装的返回值在res.data.data里
_this.obj = res.data.data
})
.catch(error => {
console.log(error)
})
}
}
</script>
那最开始为啥说res属于前端呢 那不就是属于浏览器吗
啥叫前端？不是前端服务器，前端服务器只是一个服务器，返回html、css、js代码给浏览器的一个服务器。这个服务器里面有一些资源，即前端对应的页面和代码
那什么是前端呢？前端的代码才是前端。
前端服务器就像一个箱子，里面有html、css、js代码，vue对象的代码，浏览器只是从中获得这些代码，获得后解析，才形成一个页面。
对象本身就是浏览器的一部分，就像java对象和jdk一样。
来吧，再整一整。
完整版：
浏览器发送一个请求，DNS域名服务首先将域名转换成ip，根据ip地址去访问前端服务器。
前端服务器接收请求并解析请求，
a.返回html、css、js代码以及vue对象代码等给浏览器，
b.并告诉浏览器数据的地址。
浏览器进行解析html、css、js代码，生成一个页面的大致框架。
浏览器进行dom解析（解析vue对象代码）的时候生成对象在浏览器里发起请求调用浏览器向后台获取数据（根据前端服务器返回的数据的地址）-浏览器发起请求获取返回值(java后台提供)把返回值又给到刚刚调用浏览器的对象-对象拿来使用
最后将前端页面和对象结合。
谁在运行前端代码— 浏览器
和Java的一个显著区别
Java的服务器不是这个原理, 比这个功能更多
封装:
我们以后写java主要用来处理数据- 把这个数据给到别人(前端, java服务)使用
数据 - 数据库
数据怎么来的？用户记录，数据也就是用户记录。然后浏览器中的对象帮用户发起一个请求告诉后端服务器，后端服务器收到数据，放到数据库里。
封装-- 对数据库的数据转化处理改变-- 产生一个别人实际需要的数据。让前端拿到数据就能用。
1.2作业
实现一个导航点击改变页面的vue页面(在项目中), 要求显示一些向后端请求的数据(参考最后一节提示)
见vue-homework代码。
1回顾 1.1昨天 1, 启动项目的补充 2, 项目里,多组件实现 (组件间的嵌套和引用 最终实现一个页面) 3, *总线事务 (就是通过一个vue对象作为中转, 在不同组件间传值的问题) 4, json 数据的传输格式 5, axios vue的一个插件, 用来在vue语法中调用浏览器向后台发请求(数据请求)
浏览器发送一个请求，DNS域名服务首先将域名转换成ip，根据ip地址去访问前端服务器，前端服务器接收请求并解析请求，返回html、css、js代码给浏览器，并告诉浏览器数据的地址，浏览器进行解析。
然后浏览器就根据地址去后端服务器取数据。最后将前端页面和数据结合。
前端服务器把html、css、js传给浏览器，就没前端服务器啥事了，剩下的是前端代码，前端代码没有意义，根据前端代码生成的对象才有意义。
老师说的前端代码就是Vue项目中除了html、css、js的那些代码，如创建一个Vue对象、在创建成功后获取利用axios获取后端代码，这些都属于前端代码。
浏览器进行dom解析的时候生成对象在浏览器里发起请求调用浏览器向后台获取数据-浏览器发起请求获取返回值(java后台提供)把返回值又给到刚刚调用浏览器的对象-对象拿来使用
数据不是放到res 了吗 然后res放到这个对象里面的？
注意看昨天项目vue4，我们是在对象创建时利用axios获取一个res对象，这个对象时对从后台取出的数据的一个封装，这个res对象本身就是在App2.vue对外暴露出的对象里的。
上面蓝字部分：把返回值又给到刚刚调用浏览器的对象，返回值先给axios，axios将这些数据封装成res对象。
那最开始为啥说res属于前端呢 那不就是属于浏览器吗
啥叫前端？不是前端服务器，前端服务器只是一个服务器，返回html、css、js代码给浏览器的一个服务器。这个服务器里面有一些资源，即前端对应的页面和代码
那什么是前端呢？前端的代码才是前端。
前端服务器就像一个箱子，里面有html、css、js代码，vue对象的代码，浏览器只是从中获得这些代码，获得后解析，才形成一个页面。
对象本身就是浏览器的一部分，就像java对象和jdk一样。
来吧，再整一整。
完整版：
浏览器发送一个请求，DNS域名服务首先将域名转换成ip，根据ip地址去访问前端服务器。
前端服务器接收请求并解析请求，
a.返回html、css、js代码以及vue对象代码等给浏览器，
b.并告诉浏览器数据的地址。
浏览器进行解析html、css、js代码，生成一个页面的大致框架。
浏览器进行dom解析（解析vue对象代码）的时候生成对象在浏览器里发起请求调用浏览器向后台获取数据（根据前端服务器返回的数据的地址）-浏览器发起请求获取返回值(java后台提供)把返回值又给到刚刚调用浏览器的对象-对象拿来使用
最后将前端页面和对象结合。
谁在运行前端代码— 浏览器
和Java的一个显著区别
Java的服务器不是这个原理, 比这个功能更多
封装:
我们以后写java主要用来处理数据- 把这个数据给到别人(前端, java服务)使用
数据 - 数据库
数据怎么来的？用户记录，数据也就是用户记录。然后浏览器中的对象帮用户发起一个请求告诉后端服务器，后端服务器收到数据，放到数据库里。
封装-- 对数据库的数据转化处理改变-- 产生一个别人实际需要的数据。让前端拿到数据就能用。
1.2作业
实现一个导航点击改变页面的vue页面(在项目中), 要求显示一些向后端请求的数据(参考最后一节提示)
见vue-homework代码。
2HTTP
2.1网络三要素
url: 指示资源路径
html: 承载资源
http: 规定资源在网络中的传输方式
http: 超文本传输协议
http: 协议
2.2电脑的交互
站在0和1的角度：比特流，再底层：数字信号, 模拟信号, 光信号
我们可以近似的认为我们两台电脑交互, 网线中是0和1
图像转化为(必须按规定转化)- 0101010（比特流）— 转化(要按规定转化)图像
应用层层协议: http ftp dns
传输层(去学习一下): tcp(可靠传输, 面向连接, 有链接, 硬连接)
Udp( 不可靠传输, 无连接, 软连接, 尽最大能力交付)
http协议是基于下层的tcp协议的
网络层: ip协议
2.3如果要从屏蔽底层来理解
发送方发送一个请求，通过http协议转化，直接发到对方电脑，对方通过http反向转化为发送方发的东西。
这幅图中的网络请求都是http请求，甚至后台从数据库中获取数据的请求也是http请求。
2.4http请求(步骤)
第一步: 浏览器发送请求— http
第二部: 域名解析:
1, 浏览器的缓存, 有没有域名所对应的ip
2, 如果没有，检测操作系统的缓存
3, 如果还没有，检查hosts文件, 有没有配置
4, 如果还没有，请求域名服务器，域名解析有两种方式：1.递归, 2.迭代
拿到ip地址后，
第三步: 建立tcp连接
三次握手
四次挥手
浏览器：我要和你断开连接了
服务器：断吧。
然后浏览器断开了到服务器的连接
服务器：我也要和你断开
浏览器：断吧
然后服务器断开了到浏览器的连接
建立完连接后，
第四步: 发起请求http请求
第五步: (服务器)响应http请求
2.5http事务
什么是HTTP事务？一个完整的http请求
HTTP事务 = 请求命令 + 响应结果
发送http请求 和最后获得一个服务器的返回值: 整个流程是一个http请求
HTTP的工作流程
一次完整的HTTP事务是一个怎样的过程？
1.建立TCP连接后发起HTTP请求 http请求报文
2.服务器端响应HTTP请求 （回复http响应报文），浏览器得到HTML代码
3.浏览器拿到HTML文档后，开始解析HTML代码(dom解析)。
当遇到JS/CSS/图片等静态资源时，会自动向服务器端再(再发http请求)请求下载。
3http
3.1关注http请求，关注的是：报文
我们调用浏览器发送请求- 在网线中转化成0101010（比特流）
在转化的过程中, http协议是把一个请求封装成报文格式 , 交给下一层协议处理
3.2报文
直观的看到的是? 一个特殊格式的数据
我们要关注的http、报文，所关注的核心就是这个报文格式
一个http协议, 分为两部分, 一个请求 一个响应，这些代码就是两份报文：请求报文和响应报文
请求报文：
GET http://www.cskaoyan.com/forum.php HTTP/1.1
Host: www.cskaoyan.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 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
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: __cfduid=d7832dfca92da4e7e6283d971d4eba2781567604862; Hm_lvt_68c778cd43f08435bd12c4ee37790e40=1568274769,1568512531,1569381548,1569578185; Hm_lvt_2504f1c08c3a31e74bbfb16ecaff376b=1586697147; cZBD_2132_st_p=0%7C1587979476%7C03b71ad5024f5f78f6145c8ae88da9e7; cZBD_2132_viewid=tid_647945; Hm_lvt_2504f1c08c3a31e74bbfb16ecaff376b=1586697147; Hm_lpvt_2504f1c08c3a31e74bbfb16ecaff376b=1588216271; Hm_lpvt_2504f1c08c3a31e74bbfb16ecaff376b=1588218868
响应报文：
HTTP/1.1 200 OK
Date: Wed, 17 Jun 2020 03:46:08 GMT
Server: Apache/2.4.18 (Ubuntu)
Set-Cookie: cZBD_2132_saltkey=ZWiWkKY5; expires=Fri, 17-Jul-2020 03:46:08 GMT; Max-Age=2592000; path=/; HttpOnly
Set-Cookie: cZBD_2132_lastvisit=1592361968; expires=Fri, 17-Jul-2020 03:46:08 GMT; Max-Age=2592000; path=/
Set-Cookie: cZBD_2132_sid=oXhOOW; expires=Thu, 18-Jun-2020 03:46:08 GMT; Max-Age=86400; path=/
Set-Cookie: cZBD_2132_lastact=1592365568%09forum.php%09; expires=Thu, 18-Jun-2020 03:46:08 GMT; Max-Age=86400; path=/
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 7440
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/html; charset=gbk
从屏蔽底层的角度来理解，我们认为网线上跑的就是报文了。
3.3请求报文
一个http请求, 分为请求和响应
请求: 浏览器发起的, 到达服务器
响应: 服务器返回的, 到达浏览器
请求报文: 是给服务器看的
响应报文: 是给浏览器看的
3.3.1请求报文的格式
客户端连上服务器后，向服务器请求某个web资源，称之为客户端向服务器发送了一个HTTP请求。
一个完整的HTTP请求包括如下内容：
一个请求行、
若干消息头(请求头)、
一个空格行
以及请求正文。
空格行就是分隔消息头和正文的，如果没有正文，就没有空格行。
注意: 其中的一些消息头和正文都是可选的 (不固定的)，
消息头和正文内容之间要用空行隔开。
请求报文：
GET http://www.cskaoyan.com/forum.php HTTP/1.1
Host: www.cskaoyan.com
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 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
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: __cfduid=d7832dfca92da4e7e6283d971d4eba2781567604862; Hm_lvt_68c778cd43f08435bd12c4ee37790e40=1568274769,1568512531,1569381548,1569578185; Hm_lvt_2504f1c08c3a31e74bbfb16ecaff376b=1586697147; cZBD_2132_st_p=0%7C1587979476%7C03b71ad5024f5f78f6145c8ae88da9e7; cZBD_2132_viewid=tid_647945; Hm_lpvt_2504f1c08c3a31e74bbfb16ecaff376b=1588216271; cZBD_2132_saltkey=ZWiWkKY5; cZBD_2132_lastvisit=1592361968; cZBD_2132_sid=oXhOOW; cZBD_2132_lastact=1592365568%09forum.php%09; Hm_lvt_2504f1c08c3a31e74bbfb16ecaff376b=1592365570; Hm_lpvt_2504f1c08c3a31e74bbfb16ecaff376b=1592365570
3.3.2请求行
GET http://www.cskaoyan.com/forum.php HTTP/1.1
请求行分为三个内容
第一个: 请求方法
Get:
Post
Put :传输文件
Delete : 一般用来删除数据
Options : 用来测试连接
HEAD ：获取报文首部, 无正文, 用来确认url有效或者资源更新时间
实际上以上这些都可以用get和post请求方式代替，工作中这些不常用，常用的只有get和post两中。
第二部分: url
url又分三部分,
1.协议, http
2.ip(域名) +端口：www.cskaoyan.com ，但看上去好像没有端口号啊，我们每 个人电脑都有一个默认处理外部请求的端口号：80
3.url第三部分forum.php
第三部分又分为两部分：a.真正属于url一部分. b.参数, 两者之间以?分割
第三部分: http协议和版本，即：HTTP/1.1
3.3.2.1Get和post的区别
1: 请求参数
Get的参数, 放在url之后, 能放1k的内容
Post的参数, 一般放到正文里 没有限制大小
2: 安全
Get: 安全问题, 可以直接看到用户输入参数
Post: 别人无法直接观察到
3: 语义化的区别
Get: 一般用于获取数据
Post: 一般用于提交数据
3.3.3消息头
消息头是不固定的, 是可选的.
目前消息头的作用并没有那么明显，它提出的一些限制作用也没有那么明显，浏览器依然能解析。
下面标红的比较重要，其他的没那么重要。
•常用请求头：
•Accept:浏览器可接受的 MIME类型 / (大类型)/(小类型)
•Accept:
•text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3
注: MIME类型: 一般用于互联网邮件扩展
限制不是那么明显
•Accept-Charset: 浏览器通过这个头告诉服务器，它支持哪种字符集
•Accept-Encoding:浏览器能够进行解码的数据编码方式，比如gzip
•Accept-Language: 浏览器所希望的语言种类，当服务器能够提供一种以上的语言版本时要用到。 可以在浏览器中进行设置。
•Host:初始URL中的主机和端口
•Referer:包含一个URL，用户从该URL代表的页面出发访问当前请求的页面 （防盗链）
Content-Type:内容类型
•If-Modified-Since: Wed, 02 Feb 2011 12:04:56 GMT 服务器利用这个头与服务器的文件进行比对，如果一致，则告诉浏览器从缓存中直接读取文件。
•User-Agent:浏览器类型
•Content-Length:表示请求消息正文的长度
•Connection:表示是否需要持久连接。如果服务器看到这里的值为“Keep -Alive”，或者看到请求使用的是HTTP 1.1（HTTP 1.1默认进行持久连接 ）
持久连接：短时间内不断开连接（不挥手），超时之后再挥手，时间是由服务器来定的。
正常来说，发送http请求，2（请求报文、响应报文）+3（tcp三次握手）+4（tcp四次挥手），总共经历9次连接。开销很大。
http1.0和http1.1最重要的一个区别
http1.0是短连接，http1.1是持久连接。
•Cookie:这是最重要的请求头信息之一
•Date：Date: Mon, 22 Aug 2011 01:55:39 GMT请求时间GMT
两个问题:
1, 页面跳转的问题。即点击本页面的一个内容，跳转到另一个页面
2, 加密处理,
我们设置的一个信息, 用户的各种验证, 并且只有服务器能识别.
我们用户登录系统(数据给到服务器) – 服务器判断我们能不能登录 -
如果可以，那么它会给我们一个认证信息，就是cookie, 返回给我们 –
浏览器就会存储这个cookie , 当每一次再访问这个ip+端口的时候, 携带上这个cookie
3.3.4正文
一般post请求的参数放到正文里
3.4响应报文
3.4.1响应报文和请求报文共同点
•使用消息头，可以实现HTTP客户机与服务器之间的条件请求和应答，消息头相当于服务器和浏览器之间的一些暗号指令。
•每个消息头包含一个头字段名称，然后依次是冒号、空格、值、回车和换行符
•Host: cskaoyan.com
如： Accept-Encoding: gzip, deflate
•消息头字段名是不区分大小写的，但习惯上讲每个单词的第一个字母大写。
•整个消息头部分中的各行消息头可按任何顺序排列。
•许多请求头字段都允许客户端在值部分指定多个可接受的选项，多个选项之间以逗号分隔。
•有些头字段可以出现多次 .
3.4.2响应报文
一个状态行、
若干消息头、
空格
及响应正文，
其中的一些消息头和正文都是可选的，消息头和正文内容之间要用空行隔开。
3.4.2.1状态行
状态行
HTTP/1.1 200 OK
协议 状态码 原因短语(无任何意义, 可选)
404就是一个状态码
3.4.2.1.1状态码
100段: 基本上不用了
200段: 一般标识成功
300段: 重定向
400段: 资源不存在
500段: 服务器内部错误(服务器代码崩了)
一定要用好try–catch，不能让浏览器报500
200(正常)
表示一切正常，返回的是正常请求结果
206 表示分段的请求OK
301、302/307(临时重定向)
指出被请求的文档已被临时移动到别处，此文档的新的URL在Location响应头中给出。
304(未修改)
表示客户机缓存的版本是最新的，客户机可以继续使用它，无需到服务器请求。
404(找不到)
404服务器上不存在客户机所请求的资源。
400 服务器不支持这种请求方式
500(服务器内部错误)
服务器端的程序发生错误
重定向: 浏览器向服务器请求资源，服务器本身没这个资源，但服务器知道这个资源在哪，服务器告诉浏览器, 让浏览器去一个新的地方请求资源。浏览器重新发送请求。
分布式：浏览器向服务器请求资源，服务器本身没这个资源，但服务器知道这个资源在哪，服务器可以从某个地方获取资源，然后返回给浏览器
3.4.2.2消息头
•Location: http://www.cskaoyan.com/指示新的资源的位置
•一般用于重定向
•Server: apache tomcat 指示服务器的类型
Tomcat会将java代码打包，生成一系列对象，保证这些对象存活，我们就能访问这个服务器，进一步访问服务器内存活的对象。
•Content-Encoding: gzip 服务器发送的数据采用的编码类型
•Content-Length: 80 告诉浏览器正文的长度
•Content-Language: zh-cn服务发送的文本的语言
•Content-Type: text/html; 服务器发送的内容的MIME类型
•Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT文件的最后修改时间
•Refresh: 1;url=http://www.cskaoyan.com指示客户端刷新频率。单位是秒
服务器告诉浏览器, 你在多少秒时候刷新一个新地址页面,
•Content-Disposition: attachment; filename=aaa.zip指示客户端保存文件
•Set-Cookie: SS=Q0=5Lb_nQ; path=/search服务器端发送的Cookie
和请求报文的Cookie是一对，Cookie是服务器生成的，服务器要告诉浏览器这些Cookie，通过Set-Cookie告诉。
对你来说没有意义，只有对应的服务器才能识别
•Expires: 0
•Cache-Control: no-cache (1.1)
•关于缓存
•Connection: close/Keep-Alive
•Date: Tue, 11 Jul 2000 18:23:51 GMT
3.4.3响应正文
请求正文和响应正文都是可选的，但是请求正文不常用（如果不是post请求，一般用不到请求正文），响应正文非常常用。
浏览器发送一个请求获取一个html页面，获取一个json数据，这些数据都放在响应报文的正文里。
4重点
1, 理解http核心是什么?
发起一个请求, 以报文的格式
2, 注意报文的整体格式, 和标红的消息头, 尤其要注意请求行和响应行
(重要: 请求报文和响应报文的第一行)
3, 要学会再浏览器里观察http请求
打开浏览器控制台：Network -xhr-观察每一个请求(请求到java后台) -
0.请求方式
1.url对不对,是个啥
2.请求参数正确不正确 如：类型, key
3.响应状态码
4.响应返回值
all是所有的请求的内容，html页面请求、json数据请求等
Xhr: XML HTTP Request
以前我们传输数据都是用XML，如果你想了解这个页面发了多少个请求java后台的json请求，就应该观察xhr
4.1作业
在浏览器选择一个HTTP请求, 分析该请求的信息, 截图上传
5补充
5.1http1.1和http1.0的区别
是否是持久连接
5.2https
https是加密的http协议
5.2.1加密
对称加密, 非对称加密
5.2.1.1对称加密
以某种方式加密, 就以某种方式解密 (可以通过加密方式推断出, 解密方式)
1111 — +2 - 3333 -2 1111
5.2.1.2非对称加密
加密是一种方式, 解密是一种方式. 不可逆
公钥加密 私钥解密
111 -> 22
5.2.1.3混合加密
对称加密+非对称加密
5.2.2https和http区别
1, 证书: 一些权威结构颁发的证书
2, 加密: 混合加密
1： 客户端, 发起一个请求, 请求服务器的公钥(非对称加密的加密方式)
3: 服务器把服务器的公钥返回给客户端
4: 客户端, 用服务器的公钥加密自己的加密方式(浏览器对称加密)
5: 把自己经过加密(服务器公钥加密的) 自己加密的方式给服务器
6: 服务器开始解密,用私钥, 获得了浏览器的加密方式
7: 以后, 客户端就和服务器通过 浏览器的对称加密方式通信
3: 完整性保障
数据被改变, 可以立即被发现, 因为有证书认证
为啥不一直用非对称加密，费时间啊，要计算的。
推荐阅读