Ajax：
ajax介绍
客户端与服务器
URL地址的概念及组成部分
图解客户端与服务器通信的过程
开发者工具查看客户端与服务器的通信过程
数据也是一种资源
网页中如何请求数据
资源的请求方式
介绍Ajax的概念
Ajax的典型应用场景
ajax的使用场景
表单验证
搜索提示
分页
数据的增删改查
了解jQuery中的Ajax
$.get()函数的语法
$.get()发起不带参数的请求
$(function () {
$('#btnGET').on('click', function () {
// get请求方式('请求地址', 回调函数(res请求成功))， 将请求成功的数据打印
$.get('http://www.xiaolongxia.top:3006/api/getbooks', function (res) {
console.log(res)
})
})
})
//{status: 200, msg: "获取图书列表成功", data: Array(1)}
// data: [{…}]
// msg: "获取图书列表成功"
// status: 200
// __proto__: Object
$.get()发起带参数的请求
$(function () {
$('#btnGETINFO').on('click', function () {
// $.get('请求地址'， {url地址后面携带的查询参数}， 回调函数(res成功返回的数据) {将请求成功的数据打印})
$.get('http://xiaolongxia.top:3006/api/getbooks', { id: 1 }, function (res) {
console.log(res)
})
})
})
// {status: 200, msg: "获取图书列表成功", data: Array(0)}
// data: []
// msg: "获取图书列表成功"
// status: 200
// __proto__: Object
$.post函数的语法
$.post()向服务器提交数据
post添加图书
1：请求方式为post
2：请求地址后缀为addbook
3：参数二，是一个对象，对象中的属性值，就是要添加的图书信息
4：回调函数中，答应请求响应
$(function () {
$('#btnPOST').on('click', function () {
// $.请求方式('请求地址'), {要提交到数据库的一条新的数据，注意属性名和数据表中的一致}, 回调函数(请求成功的信息),将请求成功的数据打印
$.post('http:www.xiaolongxia.top:3006/api/addbook', {bookname:'小红书', author:'阿里粑粑', publisher:'中国淘宝大学出版社'}, function(res) {
console.log(res); //{status: 201, msg: "添加图书成功"}
})
})
})
$.ajax()函数的语法
ajax综合配置
1 type： 请求类型
2 url 请求地址
3 data 请求携带的数据
4 success 请求成功的回调函数
$.ajax()发起GET请求
ajax方式发起get请求
ajax综合配置：
1：请求类型
2：请求地址
3：携带的数据
4：成功后的回调函数
$(function () {
$('#btnGET').on('click', function () {
// $.ajax属于综合请求方式，支持GET和POST方式，参数1：请求类型，参数2：请求地址，参数3：data:{要携带的查询参数}，success成功的回调函数,res成功的响应信息
$.ajax({
type: 'GET',
url: 'http://www.xiaolongxia.top:3006/api/getbooks',
data: {
id: 1,
},
success: function (res) {
console.log(res) //{status: 200, msg: "获取图书列表成功", data: Array(0)}
},
})
})
})
$.ajax发起POST请求
ajax的post方法
ajax综合配置
1：请求类型
2： 请求地址
3： 要携带的参数
4： 成功后的回调函数
$(function () {
$('#btnPOST').on('click', function () {
// type请求类型，ulr请求地址，data要提交到服务器的数据，success成功的回调函数，res成功的响应信息
$.ajax({
type: 'POST',
url: 'http://www.xiaolongxia.top:3006/api/addbook',
data: {
bookname: '小蓝书',
author: '阿里粑粑',
publisher: '淘宝前端大学出版社',
},
success: function (res) {
console.log(res) //{status: 201, msg: "添加图书成功"}
},
})
})
})
接口的概念
接口的请求概念
被请求的地址就叫接口，他有自己的请求方式
比如： post 和 get
分析接口的请求过程
接口的处理过程
都是：请求--处理--响应--的过程
了解接口测试工具
接口测试工具
必须要写一行代码，用测试过就，即可拿到接口响应返回的数据结果
使用PostMan测试GET接口
按照代码测试接口--get方式
1：选择get
2：请求地址
3：params请求参数
4：send发送请求
5: body 响应结果
使用PostMan测试POST接口
post接口测试
1：请求方式
2：请求地址
3：携带参数--body--x-www-from-urlencoded
4：输入 key 和 value
5：点击sned body响应数据结果
接口文档
接口文档说明： 解释了接口的URL，参数以及输出内容，我们照接口文档，就知道如何调用
1：接口名称--干嘛的
2：接口URL--请求地址
3：调用方式--get还是post或者其他
4：参数格式 参数名称，类型，是否必填，参数说明等，重要细节
5：响应格式： 返回值的详细描述--数据名称+类型+说明
图片右侧就是接口文档实例：
名称：图书列表 --> 接口地址：http://www.xx --> 调用方式 GET -->参数格式： 名称+类型+是否必填+参数说明 --> 响应格式：数据名称+类型+说明 -->返回示例
图书列表案例
聊天机器人
form表单
什么是表单
表单就是采集用户信息，提交用户数据的
表单的组成部分
表单的组成
forn 表单标签
input 表单域
button 表单按钮
form标签的属性-action
如果action没有指定提交地址：会默认将表单提交到当前页面的URL地址栏中
如果指定了地址，会跳转到指定的地址【页面去】
form标签的属性-target
target如何打开窗口
_blank 另外的新窗口中打开页面
_self 在本窗口中跳转页面【不会打开新窗口】
form标签的属性-method
method 提交方式
get会把信息暴露再url'地址栏中
post不会把信息暴露再url地址栏中，体智能通过网络面板-form-data中才能查看的到
【实际开发中，form表单一般用的是post提交方式，因为post安全高，数据量大】
form标签的属性-enctype
anctype 发送前如何对表单编码
默认是 x-www 在发送前对所有字符编码
如果form中的控件涉及长传，必须设置成multipart/form-data
表单的同步提交及缺点
同步提交的缺点是，页面会直接跳转到action指定的页面，如果点击返回时，表单控件中的内容会丢失。
解决方式是，就是表单只负责采集数据， ajax负责将数据提交到服务器
通过Ajax提交表单数据-监听表单的提交事件
监听表单的提交事件
方式1： 直接将form表单调用submit将表单提交过去
方式2：将form表单通过on绑定到submit事件上，回调函数中也能拿到表单的数据
$(function () {
// 表单提交方式一
$('#f1').submit(function (e) {
e.preventDefault()
console.log('123')
})
// 表单提交方式二
$('#f1').on('submit', function (e) {
e.preventDefault()
console.log('321')
})
})
通过Ajax提交表单数据-阻止表单的默认提交行为
阻止表单跳转
e.preventDefault( )
$(function () {
$('#f1').submit(function (e) {
e.preventDefault()
console.log('111')
})
$('#f1').on('submit', function (e) {
e.preventDefault()
console.log('321')
})
})
通过Ajax提交表单数据-快速获取表单中的数据
serialize 获取表单中欧所有表单中的值
前提是每个控件必须有自己的name属性。才能调用serialize获取表单的内容
获取到的内容是 属性名=属性值 & 符号分隔开的
$(function () {
$('#f1').submit(function (e) {
e.preventDefault()
var str = $(this).serialize()
console.log(str) // user_name=zs&password=123
})
$('#f1').on('submit', function (e) {
e.preventDefault()
var str = $('#f1').serialize()
console.log(str)
}) // user_name=hello&password=123456
})
评论列表案例：
模板引擎
模板引擎的基本概念
了解并安装art-template
使用传统方式渲染UI结构
介绍模板引擎的使用步骤
渲染过程
1： 在页面中定义渲染元素
2： 创建script 模板 ， 类型为text/html
3：普通js： 1 创建数据 2 调用template方法(要使用的模板， 要拼接的数据) 3：【模板已经处理好数据， 将数据填充到元素的html中展示】
总结： 【过程和普通渲染差不多，就是多了一个 script type=text/html包装数据而已，将包装的数据，在普通js中添加即可】
标准语法-输出
标准输出 {{}}
1: 值输出 {{ value }}
2: 对象中的某个属性 {{obj.key}} 或者 {{obj['key']}}
3：三元表达式 {{ a ? b : c }}
4: 或者 {{ a || b }}
5: 运算 {{ a + b }}
<!--5： 数据展示的容器 -->
<div id="container"></div>
<!-- 3：定义模板加工位置，就是为了将数据和html融合 -->
<script type="text/html" id="tpl"> <!-- 1：必须声明type="text/html"支持html语法模式， 2：声明id用来指定接收 -->
<h1>{{name}} --- {{age}}</h1> <!-- 直接将对象的属性名渲染即可，展示的是属性值 -->
</script>
<script>
// 1：定义数据
var data = { name: 'zs', age: 20 }
// 2：使用template向tpl模板中注入data数据
var htmlStr = template('tpl', data)
// 4：加工完成的数据，渲染到页面容器中展示
$('#container').html(htmlStr)
</script>
标准语法-原文输出
原文输出 {{@ value }}
<!--5： 数据展示的容器 -->
<div id="container"></div>
<!-- 3：定义模板加工位置，就是为了将数据和html融合 -->
<script type="text/html" id="tpl">
<!-- 1：必须声明type="text/html"支持html语法模式， 2：声明id用来指定接收 -->
<h1>{{@ text }}</h1>
<!--{{@ text}} 注意@的空格位置，@必须和{{花括号贴在一起不能有空格-->
</script>
<script>
// 1：定义数据
var data = { text: '<h1>原文输出</h1>' }
// 2：使用template向tpl模板中注入data数据
var htmlStr = template('tpl', data)
// 4：加工完成的数据，渲染到页面容器中展示
$('#container').html(htmlStr)
</script>
标准语法-条件输出
条件输出
{{if xx == x}} 语句 {{else if xx == x}} 语句 {{/if}}
<!--5： 数据展示的容器 -->
<div id="container"></div>
<!-- 3：定义模板加工位置，就是为了将数据和html融合 -->
<script type="text/html" id="tpl">
<!-- 1：必须声明type="text/html"支持html语法模式， 2：声明id用来指定接收 -->
<h1>
{{if flag === false}} flag 的值是false
{{else if flag === true}} flag的值是true <!--页面展示：flag 的值是true -->
{{/if}}
</h1>
<!--{{@ text}} 注意@的空格位置，@必须和{{花括号贴在一起不能有空格-->
</script>
<script>
// 1：定义数据
var data = { flag: true }
// 2：使用template向tpl模板中注入data数据
var htmlStr = template('tpl', data)
// 4：加工完成的数据，渲染到页面容器中展示
$('#container').html(htmlStr)
</script>
标准语法-循环输出
循环输出， 循环输出数组中的每一项
{{each 遍历的数组或对象}}
{{$ index索引}} {{$value 值}}
{{/each}}
<!--5： 数据展示的容器 -->
<div id="container"></div>
<!-- 3：定义模板加工位置，就是为了将数据和html融合 -->
<script type="text/html" id="tpl">
<!-- 1：必须声明type="text/html"支持html语法模式， 2：声明id用来指定接收 -->
<ul>
{{each baby}} <!--遍历数据 -->
<li>索引是：{{$index}} --- 属性值是:{{$value}}</li> <!--value 和index是固定写法， 前面都必须加上$ -->
{{/each}}
</ul>
<!--{{@ text}} 注意@的空格位置，@必须和{{花括号贴在一起不能有空格-->
</script>
<script>
// 1：定义数据
var data = { baby: ['吃饭', '睡觉'] }
// 2：使用template向tpl模板中注入data数据
var htmlStr = template('tpl', data)
// 4：加工完成的数据，渲染到页面容器中展示
$('#container').html(htmlStr)
</script>
标准语法-什么是过滤器
标准语法-定义过滤器和调用过滤器的基本语法
标准语法-定义格式化时间的过滤器
1: 声明过滤器函数 template.defaults.过滤器的名字 = function (要处理的属性的值)， 函数中把处理的值返回
2：创建数据，
3： 在模板中展示数据 {{原始数据 | 调用过滤器}} ， 此时在页面上展示了该值。
<!--5： 数据展示的容器 -->
<div id="container"></div>
<!-- 3：定义模板加工位置，就是为了将数据和html融合 -->
<script type="text/html" id="tpl">
<!-- a:展示的原始时间 |过滤符 过滤器函数名。 即可将时间过滤出来 -->
<h3>{{times | dateFormat}}</h3> <!-- 页面展示： 2020-11-21 -->
</script>
<script>
// 6： 封装过滤器函数：
// template.defaults.imports.过滤器名称，这是固定写法，向template模板中导入格式化函数
template.defaults.imports.dateFormat = function (date) { //此时的(date)就是times
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d
}
// 1：定义数据
var data = { times: new Date() }
// 2：使用template向tpl模板中注入data数据
var htmlStr = template('tpl', data)
// 4：加工完成的数据，渲染到页面容器中展示
$('#container').html(htmlStr)
</script>
新闻列表案例:
正则与字符串操作
正则与字符串操作-介绍正则的exec函数
exec 检索字符串， 正则表达式通过调用它实现查找【能返回该文字，原文1内容， 和序号】
总结： 正则表达式调用exec，查找字符串中是否包含该字，返回改文字和序号，以及原文，找不到返回null--> 找单个字符
var str = 'hello'
var pattern = /o/ // 定义正则表达式
var result = pattern.exec(str)// 调用exec进行查找是否包含该字符串
console.log(result) // ["o", index: 4, input: "hello", groups: undefined]
正则与字符串操作-提取分组
分组【利用正则同时找多个字符】
1： 创建字符串 {{name}}
2： /{{[a-zA-Z]}}/ 查找到 该内容
3：正则表达式调用exec ，查找多个字符【其实就是正则表达式同时匹配了多个字符串而】
4：打印结果： 1：打印的结果 2：（[a-zA-Z]）匹配到括号中的内容 3： 返回序号 4；返回原内容
ar str = '<div>{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/ //查找出{{}}双花括号中的字母，返回该文字
var result = pattern.exec(str)
console.log(result) //(2) ["{{name}}", "name", index: 5, input: "<div>{{name}}</div>", groups: undefined]
正则与字符串操作-字符串的replace函数
replace 方法替换
1: 写一个字符串
2：写一个正则表达式找出字符串中的所有字母
3: 字符串调用replace替换掉(原数据, 新数据),将替替换掉的结果返回给str
4：通过打印 能看出字符串中的name已经替代掉了{{name}}
// 将{{}}去除掉，返回真实的字符串
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1]) //patternResult[0]-->{{name}}, patternResult[1]-->name
console.log(str) // <div>我是name</div>
正则与字符串操作-对字符串进行多次replace操作
1: 正则表达式 /{{\s*([a-zA-Z]+)s*\}}/ 注意 \s*表示匹配多个空格
2：正则表达式调用replace将数组中的第一项，被第二项给替换掉
3: 连续替换几次就可以把，字符串中{{}}的字母都给替换成 真正的字母，替换到没有可以替换的，再次调用就会提示 null
var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/ // 注意/s大小写
var res1 = pattern.exec(str)
str = str.replace(res1[0], res1[1])
console.log(str) //<div>name今年{{ age }}岁了</div>
var res2 = pattern.exec(str)
str = str.replace(res2[0], res2[1])
console.log(str) //<div>name今年age岁了</div>
正则与字符串操作-使用while循环进行字符串的replace操作
解题思路：
while循环中(每次patter.exec都会把循环体内的替换结果拿到， 如果循环体中已经替换完了，会默认返回null，此时exec的返回值就是null, patterResult的返回值就是null，就不会再执行循环体内的代码l)， 此时打印的就是2次替换的结果。
var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
// 使用循环替换掉所有的{{}}，替换为真实的字符串
var patternResult = null
while ((patternResult = pattern.exec(str))) {
str = str.replace(patternResult[0], patternResult[1])
}
console.log(str) //<div>name今年age岁了</div>
正则与字符串操作-将正则匹配到的内容替换为真值
解题思路：
str.replace每次都会把第一个字符串，替换为data数据中真实的数据，将替换的结果通过exec赋值给patternResult，直到替换为null，全部替换完成。|
【将对象中的数据，替换到字符串中的字母】
// 将对象中的属性替换到真实的元素中，显示真实的个人身份信息
var data = { name: 'zs', age: 20 }
var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = null
while ((patternResult = pattern.exec(str))) {
str = str.replace(patternResult[0], data[patternResult[1]]) //替换掉的是对象中的第一项
}
console.log(str) //<div>zs今年20岁了</div>
实现简易的模板引擎
封装模板：
1： 渲染模板 template把模板与对象进行拼接，这样模板就能直接{{渲染数据}}, 它们的渲染结果会返回给htmlStr，这样页面的元素，就能直接把htmlStr渲染到自己的innerHTML中了
2：封装模板： 封装template模板：
1：根据id获取元素的内容，
2：创建正则表达式，patternResult用来接受返回的结果，
3：在while中 str循环体中每次都会把数据替换成真实点的数据， exec把替换的结果给到patternResult，直到替换完毕为止。在循环外面将str替换的结果返回给template函数
<div id="user-box"></div>
<!-- 将js对象中的属性渲染到html模板中 -->
<script type="text/html" id="tpl-user">
<!-- 使用{{}}显示接收到的属性 -->
<div>姓名：{{ name }}</div>
<div>年龄：{{ age }}</div>
<div>性别：{{ gender }}</div>
<div>住址：{{ address }}</div>
</script>
<script>
// 定义数据对象
var data = { name: 'zs', age: 18, gender: '男', address: '常德市华阳区' }
// 使用template将数据传递到模板中
var htmlStr = template('tpl-user', data)
// 将加工的数据渲染到页面中
document.getElementById('user-box').innerHTML = htmlStr
</script>
xhr的基本使用
xhr的基本使用-什么是XMLHttpRequest
xhr的基本使用-使用xhr发起GET请求
用xhr 发起get请求
1 创建 xhr 对象
2 调用 xhr.open 指定请求方式 与请求地址
3 调用 send 函数 发起ajax请求
4 监听xhr.onreadystatechange 事件， 事件中监听 xhr的请求状态4， 与服务器的响应状态200， 打印xhr.responsetext请求到的数据
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.xiaolongxia.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
xhr的基本使用-了解xhr对象的readyState属性
readyState请求所处的状态
0 对象已经创建， 但未调用 open 方法
1 open 方法已经调用
3 数据接收中， 此时 response 属性中已经包含了部分数据
4 请求完成， 数据彻底完成， 要么成功， 要么失败
xhr的基本使用-使用xhr发起带参数的GET请求
查询字符串
在请求地址后面的 ? 携带 查询条件即可
$.get(
'http://www.xiaolongxia.top:3006/api/getbooks',
{ id: 1, bookname: '西游记' },
function (res) {
console.log(res)
}
)
xhr的基本使用-了解xhr对象的readyState属性
readyState请求所处的状态
0 对象已经创建， 但未调用 open 方法
1 open 方法已经调用
3 数据接收中， 此时 response 属性中已经包含了部分数据
4 请求完成， 数据彻底完成， 要么成功， 要么失败
xhr的基本使用-使用xhr发起带参数的GET请求
查询字符串
在请求地址后面的 ? 携带 查询条件即可
xhr的基本使用-了解查询字符串的概念
查询字符串，是在请求地址后面? 开始。 每个查询条件是 = 形式， & 符号隔开
xhr的基本使用-GET请求携带参数的本质
get请求本质
请示$.get等价于 $.ajax的综合写法
他如果网络面板能看到， 他们都是把请求地址携带在请求地址后面
$.ajax({
method: 'GET',
url: 'http://www.xiaolongxia.top:3006/api/getbooks',
data: {
id: 1,
bookname: '西游记'
},
success: function (res) {
console.log(res)
}
})
xhr的基本使用-什么是URL编码
编码就是 使用英文字符去表示非英文数字
xhr的基本使用-如何对URL进行编码与解码
encodeURI 编码
decodeURL 解码
var str = '奥运冠军'
var str2 = encodeURI(str)
console.log(str2) // %E5%A5%A5%E8%BF%90%E5%86%A0%E5%86%9B
var str3 = decodeURI('%E5%A5%A5%E8%BF%90%E5%86%A0%E5%86%9B')
console.log(str3) //奥运冠军
xhr的基本使用-使用xhr发起POST请求
post请求：
1 需要设置 请求头信息 xhr.setRequestHeader
2 查询字符串的形式： 属性名=属性值&符号隔开
// 1:new XMLHttpRequest --> open(请求地址) -->setRequestHeader(设置请求头) -->send发送请求 -->onreadystatechange监听返回状态 -->readyState请求走到第几部-->status状态码-->xhr.responseText()返回的数据
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.xiaolongxia.top:3006/api/addbook')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
数据交换格式
什么是数据交换格式
我们前端一般是用json格式交换数据
数据交换格式-XML
XML是用来传输，和存储数据的， 但是数据少，标签比数据还多。少用
数据交换格式-什么是JSON
json 就是 jacascript object notation 就是js对象和数组的字符串表示法
JSON的本质就是字符串， 轻量级主流的数据交换格式
数据交换格式-JSON的两种结构
json的两种结构
1 对象结构： 属性必须是""引号包裹， 值如果是字符串也必须用""引号包裹， 值 除非是 布尔值和数值可以不用包裹
2 数组结构： 数组中的字符串必须用""引号包裹， 数值用逗号隔开， 一个数组中可以有多个对象， ，或者数组中嵌套数组，但是数组中的字符串还是必须""引号包裹， 数字逗号隔开
数据交换格式-JSON语法注意事项
json 语法注意事项
1 属性名必须用""包裹
2 字符串也必须用“”包裹
3 json中不能使用' '单引号
4 json中不能有字符串
5 json外层对象，必须是[ ], 或者是 { }
6 属性值不能是 undefined ， 可以是 null ,或者6种数据类型， 6 选 1 【字符串， 数值， 布尔值，数组， 对象， null 】
json是用来传输数据的， 用字符串来表示 js 对象或数组数据
数据交换格式-JSON和JS对象的关系
json本质就是对js的字符串表示法
一般格式是 外单内双，对象中的属性名和属性值用""包裹， 逗号隔开
数据交换格式-JSON和JS对象的互转
默认接口返回的数据是一个json字符串，需要用 JSON.parse转换为对象类型
转换的2种方式
1 转为 json字符 JSON.stringify
2 转换为 json 对象 JSON.parse
var jsonStr = '{"a":"Hello", "b":"world"}'
var obj = JSON.parse(jsonStr) //06.JSON和JS对象之间的转换.html:12 {a: "Hello", b: "world"}
console.log(obj)
var objStr = { a: 'Hello', b: 'world', c: false }
var str = JSON.stringify(objStr) //转换为json1字符串 {"a":"Hello","b":"world","c":false}
console.log(str)
数据交换格式-序列化和反序列化
序列化和反序列化
序列化： 将对象转为字符串 JSON.stringify( )
反序列化： 将字符串转换为对象， JSON.parse( )
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.xiaolongxia.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText) // json字符串：{"status":200,"msg":"获取图书列表成功","data":[{"id":1,"bookname":"西游记","author":"吴承恩","publisher":"北京图书出版社"},]}
console.log(typeof xhr.responseText) //string
console.log(JSON.parse(xhr.responseText)) //转为对象 {status: 200, msg: "获取图书列表成功", data: Array(4)}
}
}
总结xhr GET和POST区别
封装自己的Ajax函数
XHR Level2的新特性
XHR Level2的新特性-了解新版xhr中支持的新功能
版本2：
可以设置请求时限
可以使用 formData管理表单数据
可以上传文件
可以获取数据传输的进度信息
XHR Level2的新特性-设置HTTP请求时限
在创建ajax对象以后
1: 可以设置超时时间： xhr.timeout = 30
2: xhr.ontimeout 监听是否超时函数， 如果超时则会触发该事件函数
var xhr = new XMLHttpRequest()
// 设置 超时时间
xhr.timeout = 30 // 0就会立马执行， 1也会提示，请求超时了！
// 设置超时以后的处理函数
xhr.ontimeout = function () {
console.log('请求超时了！') // 请求超时了！[后续代码不再执行了，被打断了]
}
xhr.open('GET', 'http://www.xiaolongxia.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
XHR Level2的新特性-使用FormData对象管理表单数据
formData函数 3步
1： 通过 new FormData 对象
2： 给对象中添加属性(属性名， 属性值)
3： 在send 发送请求时，把formData对象给携带上
控制台打印：
Object
message: "测试FormData表单提交成功！"
data: {uname: "zs", upwd: "123456"}
__proto__: Object
// 1. 创建 FormData 实例
1: new FormData()创建表单对象 ---> 2：append 向该表单中添加属性 --> 3：post时将表单携带到后台
var fd = new FormData()
// 2. 调用 append 函数，向 fd 中追加数据
fd.append('uname', 'zs')
fd.append('upwd', '123456')
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.xiaolongxia.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText)) // {message: "测试FormData表单提交成功！", data: {uname: "zs", upwd: "123456"}}
}
}
XHR Level2的新特性-使用FormData快速获取表单中的数据
formData获取表单数据
1： 获取到表单对象
2： 监听form表单的submit事件
3： 阻止表单默认提交行为， 用 new 创建一个表单对象
4： 发送post请求， 在send中将 表单对象给传递给接口
5： 监听数据响应状态， 将数据转换为对象，在控制台中打印
总结：监听form提交事件， 阻止表单提交行为， 创建表单对象， send携带表单对象
// 1. 通过 DOM 操作，获取到 form 表单元素
var form = document.querySelector('#form1')
form.addEventListener('submit', function (e) {
// 阻止表单的默认提交行为
e.preventDefault()
// 创建 FormData，快速获取到 form 表单中的数据
var fd = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.小龙虾.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText)) // {message: "测试FormData表单提交成功！", data: {uname: "hello1", upwd: "enheng"}}
}
}
})
上传文件
XHR Level2的新特性-定义上传文件页面的UI结构
XHR Level2的新特性-验证是否选择了待上传的文件
XHR Level2的新特性-向FormData中追加文件
XHR Level2的新特性-使用xhr发起上传文件的请求
XHR Level2的新特性-完成上传文件的功能
上传文件进度条
XHR Level2的新特性-计算文件的上传进度
XHR Level2的新特性-基于bootstrap绘制进度条效果
XHR Level2的新特性-动态设置进度条
XHR Level2的新特性-监听上传完成的事件
jQuery高级用法
点击上传按钮实现文件上传
渲染页面结构并验证是否选择了文件
使用jQuery发起上传文件的请求
jQuery高级用法-通过jQuery实现loading效果
axios
axios-什么是axios
axios专注于网络请求， 简单易用，轻量化。
axios-使用axios发起GET请求
axios-使用axios发起POST请求
axios-直接使用axios发起GET和POST数据请求
axios的使用
1: GET （点击将url和data通过axios的get方式发送出去）
获取按钮绑定点击事件，设置url地址， 设置{}对象， 通过axios.get(请求地址， {params： 请求参数}),then回调函数中将数据打印到控制台中
2：POST (点击中将url和data】通过axios的post方式发送出去)
获取按钮绑定点击事件，设置url地址， 设置params对象， 调用axios发起post请求，(请求地址， 要携带的参数).zai1.then回调函数中将数据打印到控制台中
【get和post区别就是： get要通过{params:}对象形式，而post是直接将要携带的参数名写上即可】
3: axios之GET
获取按钮绑定点击事件， 设置请求地址，设置要携带的对象， 钓调用axios发起请求， 设置请求方式， 设置url地址，设置要携带的参数， 在.then中将数据打印到控制台中
4: axios之POST
获取按钮绑定点击事件，调用axios发起数据请求，设置请求方式，请求地址，直接在data中携带参数数据。在.then中将数据打印到控制台中
【get和post请求区别： get的请求参数，需要先定义好，在params中传递的。 而post是直接在data中定义的，post会更简单写】
同源策略
什么是同源
同源就是： 端口，域名，协议， 3者都相同，才叫同源， 如有一个不一样，都属于不同源
什么是同源策略
同源策略：是浏览器的一种安全功能，目的就是不让a操作b的cookie，和本地存储，以及数据交互。无法接触的非同源的 DOM, 无法向非同源的地址发送ajax请求
跨域
什么是跨域
端口，协议，域名，一者不同就属于跨域，浏览器是不允许跨域请求数据的
浏览器对跨域请求的拦截
浏览器对跨域的拦截：
浏览器能发出去，服务器也会把数据返回来， 但是返回来的数据会被同源策略拦截到，所以页面无法获取数据
如何实现跨域数据请求
实现跨域的2中方式
jsonp 只支持get请求
cors 是w3c标准的，不支持低版本浏览器，跨域get和post
Jsonp
了解JSONP的概念以及实现原理
script的src属性，请求跨域的数据接口， 并通过函数调用的形式， 节后跨域接口响应回来的数据
演示跨域Ajax数据请求存在的问题
跨域的报错信息
原因是： 我们 浏览器的URL地址file协议，而请求的接口地址是http协议
剖析JSONP的实现原理-将函数的定义和调用分离为两个script标签
在一个标签内定义了一个函数， 在另外一个标签内使用了函数。
如： 在一个标签内定义了 success函数， 而在另一个标签内调用了success函数，并在调用中传递了实参， 上面定义的函数，内部就能拿到传递过来的实参， 并打印查看
剖析JSONP的实现原理-将函数的调用抽离为单独的JS文件
如果另一个js文件写在了别处， 我们本页面可以通过 script src属性 "./js/文件名.js?callback回调函数=abc"【去该文件下找一个abc的函数，去调用它】。 本页面通过callback接收到了该函数的实参， 在abc函数中，打印查看获得到的数据
JSONP的缺点
剖析JSONP的实现原理-通过callback指定回调函数的名称
JSONP-自己实现一个简单的JSONP
JSONP-了解JSONP的缺点
使用 jquery中的$.ajax方法发起jsonp请求：
JSONP-使用jQuery发起JSONP数据请求
JSONP-jQuery中自定义JSONP参数以及回调函数名称
JSONP-jQuery中JSONP的实现过程
jquery中的$.ajax 实现jsonp的过程
就是向页面添加了一个script， 数据访问完成后又从页面中给删除script标签
淘宝搜索案例
防抖和节流
输入框的防抖-什么是防抖
防抖就是，事件触发后， 延迟n秒再执行回调
输入框的防抖-防抖的应用场景
防抖示例。
现实中的防抖， 就如输入框一样， 每个字母都触发了数据请求
输入框的防抖-实现输入框的防抖
输入框防抖
1： 定义一个定时器标识
2： 封装演示发起数据请求：延时0.5秒才调用接口函数去获取数据
3： 在输入框弹起时， 马上清空定时器先清空延时器， 调用函数传递数据。 执行延时器中的函数，每次调用时都会清空定时器，去调用延时器， 每个延时器都会延时5秒请求数据
【总结：没次输入时就把定时器清空，在重新调用新的定时器，新定时器在0.5秒请求数据， 此时我们又在输入，重新清除定时器，调用函数再次延迟0.5秒， 反复清除和调用，每次新的调用都会在0.5秒后请求前数据】
缓存搜索的建议列表
缓存实现过程
1： 定义一个空对象
1.1： 把请求到的户数缓存到这个对象的k属性上
2：输入框弹起的时候， 相爱难判断输入框中的户数是否已经拿到，【就是cacheObj中的keywords中如果已经有了数据， 直接调用渲染函数，把cacheObj存起来的数据，拿到函数中去渲染】
防抖和节流-什么是节流
节流能防止事件， 在一定事件内触发的频率
防抖和节流-节流的应用场景
节流的概念， 和案例中的实际节流
防抖和节流-渲染UI效果
防抖和节流-不使用节流实现鼠标跟随效果
防抖和节流-节流阀的概念
防抖和节流-使用节流优化鼠标跟随效果
节流的概念， 和案例中的实际节流
1： 先创建一个 节流阀 值为空
2：开启定时器， 0.16秒执行一次， 执行完毕将定时器清空
3：执行完毕将定时器清空
4：判断节流阀是否为空， 不管不是空，则节流阻止代码向下执行。 如果是空就继续执行下面代码【实现节流功能】
防抖和节流-总结防抖和节流的区别
防抖：不管点了多少次，只会触发最后一次
节流：减少事件触发的频率， 因此节流是 有选择性的 执行一部分事件
Http：
HTTP协议简介
HTTP协议简介-什么是通信
通信的主体就是 服务器与客户端浏览器
通信的内容是 服务器返回的内容
通信的方式是 响应
HTTP协议简介-什么是通信协议
通信协议就是双方必须遵守的约定于规则， 以特定的方式来发送和接收消息， 就叫通信协议
互联网中的通信协议， 客户端与服务器之间， 必须遵守网页内容的传输协议才能实现通信
HTTP协议： 它规定了客户端与服务器之间， 网页传输内容时必须遵守的传输格式
HTTP协议简介-什么是HTTP协议
HTTP协议
就是超文本传输协议，它规定了客户端与服务器之间进行网页内容传输是所必须遵守的格式
HTTP协议简介-HTTP协议的交互模型
多次数据的传输，就会有多次数据的请求与响应
HTTP请求消息
什么是HTTP请求消息
请求消息， 也称为请求报文
客户端发起的请求也叫HTTP请求， 客户端发送到服务器的消息也叫 HTTP请求消息
HTTP请求消息的4个组成部分
HTTP请求消息的4个组成部分
请求行 + 请求头部 + 空行 + 请求体
请求行
在 network中 ---> view parsed 查看请求行
请求头部
主要记住红色的 4大字段即可
空行
空行就是为了， 告诉服务器 请求头部到此为止
请求体
注意只有post才有请求体， get是没有请求体的
总结HTTP请求消息的组成部分
HTTP请求消息的4个组成部分
请求行 + 请求头部 + 空行 + 请求体
【看图 请求头部（请求报文， 请看图）。注意只有post才有请求体， get是没有请求体的】
HTTP响应消息
响应消息的概念以及组成部分
响应消息 有4部分组成
状态行 响应头部 响应体
状态行
状态行 的 3个组成部分
协议版本 HTTP/1.1
状态码 200
状态码描述 OK
响应头部
响应头部就是用来描述 服务器的基本信息
常见字段看图
空行
空行是用来通知 客户端响应头部至此结束！
响应体
响应体 就是服务器响应给客户端的资源内容 【response】
总结HTTP响应消息的组成部分
响应消息 有4部分组成
状态行 响应头部 响应体
HTTP响应状态码
HTTP请求方法
get 查询
post 新增
put 修改
delete 删除
什么是HTTP响应状态码
HTTP响应状态码 用来标识响应的状态
通过状态码就能知道是成功 或者失败了
状态码 200 标识成功 。 ok 状态描述
HTTP响应状态码的组成及分类
状态码是由 3个十进制的数字组成， 第一个状态码用来定义状态码类型。 后面的2个状态码用来细分。 总共分为 5种类型
1** 很少遇到
2** 成功
3** 重定向， 需要进一步操作以完成请求
4** 客户端错误， 请求语法错误，或者 无法完成请求
5** 服务器端错误， 服务器在处理请求是发生了错误
2xx成功相关的响应状态码
2** 一把表示 成功
200 一般是get 或者 post请求
201 一般是 修改和创建 psot和put
3xx重定向相关的响应状态码
3** 重定向相关
表示服务器要求客户端重定向， 需要客户端进一步操作完成资源的请求
301： 永久移动【资源已被移动到新的URL， 今后任何新的请求都需要使用新的URL代替】
302： 临时移动 与301类似， 但资源只是临时移动， 客户端应继续使用原有的URL
303： 未修改：所请求的资源未修改， 服务器返回此状态码时，不会返回任何资源(响应消息中不不含响应体) 客户端通常会缓存访问过的资源
4xx客户端错误相关的响应状态码
4** 客户端相关 错误
400 语义有误， 请求参数有误
401 当前需要用户验证
403 服务器已经理解请求， 但是拒绝执行他【比如跨域】
404： 服务器无法根据客户端的请求找到资源
405：请求超时， 服务器等待客户端发送的请求事件过长， 超时，服务器直接响应超时
5xx服务端错误相关的响应状态码
5** 客户端相关错误
500： 服务器内部错误， 无法完成请求
501 服务器不支持该请求方法， 只有gethead 请求方法是要求每个服务器必须支持的， 其他请求方法不支持服务器上会返回 501
503 由于超载或者系统维护， 服务器暂时的无法处理刻画单的请求
git：
使用版本控制软件的好处
传统拷贝： 操作麻烦，命名不规范，任意丢失，协作困难
git 版本控制软件也叫版本控制系统
版本控制软件的好处
操作简单，记住几行命令捷克
易于对比 能够方便的比较稳健的细节变化，从而找出导致问题的原因
易于回溯。 可以将文件文件回溯到之前的状态， 甚至整个项目都能退回到过去某个时间状态
不易丢失， 在版本控制软件中，被用户误删除的文件， 可以轻松的恢复回来
协作方便， 通过那个纸功能， 可以轻松实现多人协作开发， 和代码合并的操作
版本控制系统的分类
本地版本控制系统 ： 单击运行， 维护文件版本的操作工具化
集中化的版本控制系统： 联网运行， 支持多人协作， 性能差， 用户体验不好
分布式版本控制系统 联网运行， 支持多人协作开发， 心性能优秀， 用户体验好
了解三大类版本控制系统各自的特点
本地： 单机不支持多人，数据库故障后，会更新所有记录
集中化： 属于服务器和客户端的运行模式， 保存文件的所有更新记录
，客户端值保留最新的文件版本。 不支持离线提交版本更新，服务器崩溃后， 所有人都无法工作， 数据库故障后， 所有历史更新记录会丢失
分布式： 保存所有文件的更新版本， 客户端是服务器端的完整备份， 并不是只保留文件的最新版本。支持多人，支持离线本地提交版本更新， 服务器故障后， 可以任何一个客户端的进行恢复
Git基础概念
什么是Git
git是开源分布式控制系统， 是目前世界上最先进，最流行的版本控制系统， 可以快速高效的处理项目版本管理
快速高效： 直接记录快照， 而非差异比较。 近乎所有操作都是本地执行
Git直接记录快照而非差异比较
SVN 和 Git 的比较
svn 虽然节省磁盘空间， 但还耗时，效率低，
Git 是生成备份， 保留一个连接指向执勤啊存储的文件， 缺点磁盘占用较大， 但是有点也很明显， 版本切换非常快。 直接回复目标版本即可。 总结：就是空间换时间
近乎所有操作都是本地执行的
近乎所有操作操作都是本地执行， 断网后依旧可以独一项目进行版本管理，只要联网后， 把本地修改的记录同步到云端服务器即可
Git中的三个区域
git 有32个区域： 工作区， 暂存区， git仓库
工作区： 处理工作的区域。 暂存区： 临时存放， 等待被提交。 git仓库 最终存放的区域
Git中的三种状态
git 中的3种状态
已修改 modified
已暂存 staged
已提交 committed
工作区域的文件修改了， 但还没有放到暂存区， 就是已修改的状态
如果文件已修改并放入暂存区， 就属于已赞存状态
如果git仓库中保存着特定版本的文件， 就属于已提交的状态
Git的基本工作流程
git工作流程
在工作区中修改文件
将想要提交的，放在暂存区
将暂存区的文件，存储到git仓库中
安装并配置Git
在Windows中下载并安装Git
去官网下载对应版本即可，点击安装，一直点击 Next， 最后 Install。 安装完成取消 复选框， 关闭对话框。
鼠标右键显示 Git Bash here 就表示安装成功
安装并配置Git-配置用户信息
安装好后， 第一件事就是配置自己的用户名和邮箱， 使用--global，配置一次，永久生效
Git的全局配置文件
刚在配置好的用户信息，会存在c盘的 .gitconfig文件
文件中能看到刚才配置的个人信息，都在该文件中
使用Git命令检查全局配置信息
查看git 当前的全局用户 ： git config --list --global
查看当前的用户名： git config user.name
查看当前的邮箱： git config user.email
获取帮助信息
git help config 能打开本地一个页面， 是一个详细的 git命令介绍
git config -h 是在控制台中 大约一个简易的 命令说明
Git的基本操作
获取Git仓库的两种方式
1：将尚未进行版本控制的本地目录转换为git仓库
2：从其他服务器克隆一个已经 存在的git仓库
这2种方式都可以
在现有目录中初始化仓库
在自己的项目中， 鼠标右键 Git base here 打开命令行窗口， 运行命令 git init
会在当前项目中， 创建一个隐藏的.git文件夹。 那即是仓库
工作区中文件的4种状态
两大类： 未被igit管理 和已被Git管理
4种状态： 未跟踪--未修改--已修改--已暂存
检查文件的状态
如果在自己的工作目录中有修改， 通过git status 能在 Untracked files中查看 有修改的文件
以精简的方式显示文件的状态
精简方式显示文件的状态
git status -s
跟踪新文件
将文件添加进缓存区
git add index.html
git status -s
提交更新
git commit -m 文件名称
必须git status 【git status -s 是没有信息返回的】
对已提交的文件进行修改
如果项目中的文件发生了修改， 通过 git status 能看到 modified： xx
git status -s 能看到精简信息 -M xx
暂存已修改的文件
再次把 修改的文件 添加到暂存区： git add xx
git status 绿色 modifile xx，表示印尼添加到缓存区了
git status -s 绿色M xx
提交已暂存的文件
二次提交到本地仓库 git commit -m '描述信息'
提交完成后 git status查看得到，not too commit 没有需要提交的
撤销对文件的修改
如果写了很多，想撤回到上次commit提交的哪个版本， 通过 git checkout -- 文件名， 项目内的文件和内容就能撤销回到上次提交到仓库中的状态
【我们一般少用， 原来就是，把git仓库中的，覆盖我们目前的， 撤销回退后， 之前的修改都会丢失， 用甚用！】
向暂存区中一次性添加多个文件
如果项目中发生了多个文件修改， 可以使用 git add . 将徐偶有修改的文件，一次性提交到缓存区中
取消暂存的文件
如果想把之前提交到暂存区域的文件，从暂存区中拿出来， 就得使用 git reset HEAD 文件名, 就可以了。
也可以一次性将所有的缓存文件给拿出来， git reset HEAD . ， 所有文件就成了未缓存的红色状态了
跳过使用暂存区域
直接将修改的单个文件，直接入库 git commit -a -m '描述'
注意不能一次提交到多个修改文件
移除文件
1： 直接把仓库中的文件删除【也会把当前项目中的该文件删除，慎用！！】 git rm -f xx文件名
2： 从仓库中拿出来， 放到未缓存的工作区： git rm --cached xx 【仓库不再有， 以回到提交缓存的状态】
Git忽略文件和glob匹配模式
。gitignore忽略文件的具体配置信息和参数详解
.gitignore使用示例
1： gitignore文件忽略的使用参数详解
2： 在当前项目下新建.gitignore文件， 只要写在该文件里面的忽略项， 忽略项都不会被git检测到， 但是git能检测到.gitignore这个文件【因为虽然你能包养别人， 但是你自己还是要出来混的， 要被git管理的】，所以将它从缓存提交到仓库至缓存干净为止
查看提交历史
git log 仓查看所哟提交日志
git log -2 只看最新的2条
git log -2 --pretty=oneline 一行上显示2条信息
git log -2 --pretty=format:"%h | %an | %ar | %s" 以自定义方式显示最近2条信息
回退到指定的版本
git log --pretty=oneline 提交历史记录
git reset --hard 拷贝 想要回退的版本号【回到某个年龄段，该年龄发生的文件都会删除消失】
git reflog --pretty=oneline 【注意因为回到了最初版本，通过git log --pretty=oneline中只能看到自己的提交记录， 往后发生的都已经看不到了， 只能通过reflog才能看到】
git reset --hard 拷贝要回退的版本号，【由于我们拷贝的是最后一次提交， 所以git log,能够看到该项目之前所有的提交记录了！】
Git的基本操作 - 小结
掌握该 4个命令， 基本完成日常操作
git init 在项目中创建本地的git仓库
git status 查看文件的缓存和修改状态
git add . 一次性将所有的修改文件添加到缓存区域
git commit -m '提交描述' 在仓库中生成提交的版本记录
github：
开源相关的概念
了解开源和闭源的概念
开源就是代码公开， 任何人都可以去修改， 查看， 和使用
闭源就是代码是封闭的， 只有作者能看到， 也只有作者能修改
【开源不仅仅是提供程序还提供了程序的源代码，闭源就是只提供了程序，不提供源代码】
开源许可协议
开源许可协议：
常见的5 种开源许可协议
BSD Apache GPL LGPL MIT
GPL: 具有传染性的协议， 不允许修改后和衍生的代码， 作为闭源的商业软件发布和销售: 代表作Linux
MIT：是目前限制最少的协议， 唯一的条件就是， 在修改后的代码或者发行包中， 必须包含原作者的许可信息。 使用MIT软件的项目有 Jquery Node.js
为什么要拥抱开源
开源的思想就是：我为人人， 人人为我。 开源给使用者更多的控制权， 开源让学习变得更容易， 开源有真正的安全。 因为有安全漏洞， 人人都可以去修改完善。
开源是软件的大趋势， 拥抱开源就像站在了巨人的肩膀上，不用自己重复造轮子， 让开发变得更容易。
了解什么是开源项目托管平台
主要有3个开源的项目托管平台
Github 全球最大，最终牛
Gitlab 企业用的比较多，代码私有性比较好
Gitee 码云，国产开源项目托管平台， 速度快，纯中文。
【开源项目只能托管git管理的开源项目， 所以都是以 Git 开头命名的】
什么是GitHub
Star 为自己喜欢的 点赞 打call
pull Request为自己喜欢的开源项目做贡献
lssues 讨论和提需求
Fork 复制项目
什么是GitHub
github
注册GitHub账号
注册流程：
去官网--> sing up --->注册也买进填写个人信息-->Create 创建用户 -->自动向我们的邮箱发送一份邮件 --> 我们邮箱点开链接 ---> 激活--> Your email你的邮箱已激活
【表示完成注册， 返回登录页面， 登录即可】
远程仓库的两种访问方式
https 每次度需要输入 github账号换个密码才能访问
SSH: 需要进行额外配置， 但是配置成功后， 每次访问仓库后， 不需要重复输入 Github 的账号和密码【实际开发中，我们一般使用的就是 SSH】
基于HTTPS将本地仓库上传到GitHub
看图创建仓库， 非常简单
仓库名称 ---> 仓库描述 --> public公开的-->readme不允许生成该文件-->点击创建
1: 本地没有仓库的创建流程
1.1: git init 创建一个本地仓库
1.2：git add 将项目中的文件添加到暂存区
1.3： git commit -m 'xx' 提交到自己的本地仓库中
1.4： git remote add origin https://github.com/tanwei0414/test_01.git 将本地和远程仓库关联， 拉好红线，
1.5: git push -u origin master 将本地仓库中的项目， 推送到远程仓库中
2： 本地已有仓库， 仓库已有提交到项目。
2.1：git remote add origin https://github.com/tanwei0414/test_01.git 将本地和远程仓库关联， 拉好红线，
2.2：git push -u origin master 将本地仓库中的项目， 推送到远程仓库中
由于我们之前的项目已经有了本地仓库采用 方式二 进行推送远程
1： 拷贝 git remote add origin https://github.com/tanwei0414/git_day1.git
2： git push -u origin master
3： 第一次连接该仓库，需要大量账户和密码， 以后就不用了，
4：大量成功后， 命令行提示成功推送，刷新github的仓库， 即可看到自己的项目在云端了
了解git push命令的作用
我们再次对自己项目开发了一些功能， 第二次提交就不用像第一次提交那么麻烦了， 将本地项目提交掉本地仓库中后直接： git push 就直接推送成功了【因为已经被记住了】
生成SSH key
SSH Key 钥匙生成
打开 git bash 运行如下命令： ssh-keygen -t rsa -b 4096 -C "该github账号的注册邮箱"
再连续按 3次回车
会在 C盘/user/Administratar/.ssh/ 会生成 .ssh文件夹，里面就有 id_rsa 私钥【放电脑中】 id_rsa.pub公钥，需要配置到Github中
配置SSH key
1： 将.ssh/id_rsa.pub中的内容拷贝
2：回到github-->settings-->
检测SSH key是否配置成功
检查 sshkey 是否配置成功
1： 在 Git base here 中输入：ssh -T git@github.com
2： 回复 yes ， 当看到 Hi 你的用户名，就表示配置成功了
基于SSH将本地仓库上传到GitHub
将本地仓库通过ssh免密方式，提交到仓库中
1： 自己的项目已经提交到本地仓库中了
2： git remote add origin '拷贝您的ssh地址'
3： git push -u origin master
4: 成功免密提交， 刷新页面即可
将远程仓库克隆到本地
将github项目克隆到自己电脑中
1； 打开项目 --> Code ---> Clone with SSH --->拷贝该地址
2： 在电脑中打开 git base here --> git clone ssh克隆地址
3： 克隆完成页面就多了该项目文件夹， 全套克隆了
分支
了解分支的概念以及分支在实际开发中的作用
一个主线可以存在多个分支， 每个分支都可以开发不同功能，开发完毕，在将分支合并到主分支上
master主分支
master主分支， 用来保存和记录整个项目完成的功能代码
因此我们程序员是不允许在master分支上修改代码的，因为只要有可能程序会崩溃
功能分支
程序员不能在master上进行肝开发，所以就有了功能分支， 专门用来开发功能的， 他是临时从master上分出来的支， 当新功能开发并且测试完毕后， 最后才合并主分支上
查看分支列表
在项目中，右键打开 git base here ---> git branch --->当前正处在master分支上
创建新分支
基于master分支上， 创建一个开发分支 git branch login
查看分支是否创建成功， git branch 【创建并未切换，所以当前还处master分支上】
快速创建和切换分支
创建并切换 git checkout -b 分支名称·
【注意事项，必须先切换回master主分支， 才能创建切换分支， 因为所有都是它的儿子】
合并分支
1：分支上的功能开发完成后需要 git commit -m '提交说明', 提交到本地仓库中
2：先必须切换回要合并给目标的分支上， git checkout master
3： 在主分支上， 将子分支合并 git merge login 提示合并成
删除分支
注意： 想要删除分支，自己首先需要切换到其他分支上，才能将要删除的分支删除
1: 先切换回主分支上 master
2: 在主分支上 将 login子分支 给删除掉。 git branch -d login 删除成功
3： 查看剩余分支： git branch ， login分支已经消失了
遇到冲突时的分支合并
合并冲突： 冲突的形成原因（由于2条分支修改了同一个文件， 各自修改后都能提交到本地仓库中， 【冲突开始来了】在主分支上讲用户a合并能成功，因为先到， 但是在主分支上合并后一个分支：自动合并失败；请修复冲突，然后提交结果。 ）
此时打开vscode，会自动打开报错的这个文件，可以点击采用谁的， 就会保留谁的。 合并后再次提交到本地仓库中
将本地分支推送到远程分支
如果本地分支和远程分支上的分支或者文件不一样是 git merge 不成功的， 会提示Already up to date【已经是最新的了】
如果是第一次提交： git push -u origin 本地分支名:远程分支名， 提交成功后刷新一次仓库-->点击下拉菜单就多了提交的分支
如果希望远程分支的名称和本地分支名称一致 git push -u origin 分支名即可
查看远程分支列表
git remote show origin 显示远程仓库中的分支
跟踪分支
跟踪分支就是本地同名分支已被删除， 用远程分支把分支挽救回来。【远程分支复活本地分支】
先删除本地分支， 才能使用远程同名分支，把该删除分支给召唤回来
1: 方法1： git checkout 远程分支名称【会把远程分支，变换到本地分支上】
2: 方法2： git checkout -b 本地分支名称 远程仓库名称/远程分支名称【就是通过拿到远程仓库中的分支， 把它下载到本地分支前换一个名字而已！】
拉取远程分支的最新代码
如果远程仓库中的文件比本地项目中的版本要新， 通过 git pull 就能把远程仓库中的代码更新到本地代码中。【但是注意你要更新到那个分支上！！】
删除远程分支
删除远程分支 git push origin --delete 远程分支名称
再把本地同名分支删除--直接切换到master分支上去删除， 会报错，因为分支还未合并到主分支， 如果你想强制删除 就使用 -D强制删除该分支
强制删除未合并的本地分支： git branch -D 本地分支名称
git 总结：
git 基本使用命令：
git init 创建本地仓库
git add . 将修改的文件添加到本地存储中
git commit -m '版本记录描述信息'
git创建和维护远程仓库
1： 生成 ssh Key， 在把 ssh Key添加到github中
2：能够把本地仓库上传到 github中
能够掌握git分支的基本使用
git checkout -b 新建本地分支名称
git push -u origin 新增远程分支名称
git checkout 分支名称 【切换名称】
git branch 查看分支
下一篇：web前端 - 系统化知识入门系列四： Vue、webpack
由于时间原因：后续补录Node + Express + Mysql，知识偏后端，前端用较少，后续抽时间补录完。
已经更新完成完成：↓↓↓
