前后端交互 - Ajax 和 HTTP（1）- 必掌握知识点 - #博学谷IT学习技术支持#

本文链接：https://blog.youkuaiyun.com/weixin_44946585/article/details/125831458

本文深入探讨了Ajax与HTTP在前后端交互中的关键知识点，包括客户端与服务器通信过程、URL地址、接口设计、jQuery与axios的Ajax实现，以及跨域与JSONP策略。此外，还涵盖了HTTP协议的基础，如请求消息、响应消息、请求方法和状态码，以及Git基础操作和GitHub的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax

1. 客户端与服务器

1. 服务器

上网过程中，负责存放和对外提供资源的电脑，叫做服务器。

2. URL地址

定义：统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
URL地址一般由三部组成：
1. 客户端与服务器之间的通信协议
2. 存有该资源的服务器名称
3. 资源在服务器上具体的存放位置

3. 客户端与服务器的通信过程

图解客户端与服务器的通信过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zjFaHJ2j-1658038662605)(C:\Users\WZX\AppData\Roaming\Typora\typora-user-images\image-20220709183650262.png)]

注意：

1. 客户端与服务器之间的通信过程，分为请求 – 处理 – 响应三个步骤.

2. 网页中的每一个资源，都是通过请求 – 处理 – 响应的方式从服务器获取回来的。

基于浏览器的开发者工具分析通信过程
1. 打开 Chrome 浏览器
2. ctrl+shift+i 打开 Chrome 的开发者工具
3. 切换到 Network 面板
4. 选中 Doc 页签
5. 刷新页面，分析客户端与服务器的通信过程

4. 服务器对外提供了哪些资源

网页中如何请求数据

数据，也是服务器对外提供的一种资源。只要是资源，必然要通过请求 – 处理 – 响应的方式进行获取。
- 如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象
  - XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。
  - 最简单的用法 var xhrObj = new XMLHttpRequest()
资源的请求方式
- 客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。 get 或 post 请求
  - get 请求通常用于获取服务端资源（向服务器要资源）
  - pose 请求通常用于向服务器提交数据（往服务器发送资源）

5. Ajax

定义：Ajax 的全称是 Asynchronous Javascript And XML（异步 Javascript 和 XML）
通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax。
Ajax 能让我们轻松实现网页与服务器之间的数据交互

6. jQuery 中的 Ajax

jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。
jQuery 中发起 Ajax 请求最常用的三个方法如下：
1. $.get()
  - 语法 $.get(url, [data], [callback])
    - url：要请求的资源地址（str 类型）
    - data：请求资源期间要携带的参数（object）
    - callback：请求成功时的回调函数
```
$.get('http://www.liulongbin.top:3006/api/getbooks', {id: 1}, function(res) {
          console.log(res);
        })
```
2. $.post()
  - 语法$.post(url, [data], [callback])
  - url：要提交的资源地址（str 类型）
  - data：要提交的数据（object）
  - callback：提交成功时的回调函数
3. $.ajax()
  - 语法
```
$.ajax({
    type: '', // 请求的方式，例如 GET 或 POST
    url: '', // 请求的 URL 地址
    data: {}, // 这次请求要携带的数据
    success: function(res) {} // 请求成功之后的回调函数
})
```

7. 接口

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。
接口测试工具（PostMan）
1. 优点：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。
3. 注意：使用 get 时，参数在 Params 面板；使用 post 时，携带的数据在 body 填写
接口文档
1. 定义：接口的说明文档，它是我们调用接口的依据。
2. 组成部分
  1. 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
  2. 接口URL：接口的调用地址。
  3. 调用方式：接口的调用方式，如 GET 或 POST。
  4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
  5. 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
  6. 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。

form 表单与模板引擎

1. form 表单的基本使用

表单：html中负责数据采集功能

<form> 标签的属性

action
- 属性用来规定当提交表单时，向何处发送表单数据
- 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据（默认值是当前页面 URL）

target

用来规定在何处打开 action URL

它的可选值有 5 个，默认情况下，target 的值是 _self，表示在相同的

值	描述
`_blank`	在新窗口中打开
`_self`	默认。在相同的框架中打开。
`_parent`	在父框架集中打开。（很少用）
`_top`	在整个窗口中打开。（很少用）
`framename`	在指定的框架中打开。（很少用）

method
- 以何种方式把表单数据提交到 action URL
- 可选值：get 、post
- 默认情况下，method 的值为 get，表示通过 URL 地址的形式，把表单数据提交到 action URL
- 注意：
  - GET 方式适合用来提交少量的、简单的数据
  - POST 方式适合用来提交大量的、复杂的、或包含文件上传的数据
  - 实际开发中，表单的 post 提交方式用的最多，很少用 get

enctype

用来规定在发送表单数据之前如何对数据进行编码

其可选值有三个

值	描述
`application/x-www-form-urlencoded`	在发送前编码所有字符（默认）
`multipart/form-data`	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
`text/plain`	空格转换为“+” 加号，但不对特殊字符编码。（很少用）

注意：
- 设计到文件上传时，必须设置为 multipart/form-data
- 不涉及文件上传时，直接设置为application/x-www-form-urlencoded即可（不设置就可以了）

表单的同步提交及缺点
1. 表单同步提交：通过点击 submit 按钮，触发提交操作，页面跳转到 action URL 的行为
2. 表单同步提交的缺点：
  1. 整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差
  2. 页面之前的状态和数据会丢失
3. 解决方案：表单值负责采集数据，Ajax 负责将数据提交到服务器

2. 通过 Ajax 提交表单数据

监听表单提交事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件

$('#form1').submit(function(e) {
    alert('监听到了表单的提交事件')
})

$('#form1').on('submit', function(e) {
    alert('监听到了表单的提交事件')
})

阻止表单的默认行为

$('#form1').submit(function(e) {
   // 阻止表单的提交和页面的跳转
    e.preventDefault()
})

$('#form1').on('submit', function(e) {
   // 阻止表单的提交和页面的跳转
    e.preventDefault()
})

快速获取表单中的数据

serialize()函数

语法 $(selector).serialize()
优点：可以一次性获取到表单中的所有的数据

示例：

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>
<script>
    $('#form1').submit(function(e) {
   // 阻止表单的提交和页面的跳转
    e.preventDefault()
    var data = $(this).serialize()
    // 调用的结果：
    // username=用户名的值&password=密码的值
    console.log(data)
})
</script>

注意：在使用 serialize() 时，必须为每个表单元素添加 name 属性

3. 模板引擎的基本概念

定义：它可以根据程序员指定的模板结构和数据，自动生成一个完整的 HTML 页面
优点：
1. 减少了字符串的拼接操作
2. 代码结构更清晰
3. 使代码更易于阅读与维护

4. art-template 模板引擎

中文官网首页：http://aui.github.io/art-template/zh-cn/index.html

使用步骤

导入

<!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
<script src="./lib/template-web.js"></script>

定义数据
```
var data = {name: 'zs', age:20}
```

定义模板

<script type="text/html" id="tpl-user"></script>

调用 template 函数

var htmlStr = template('tpl-user'), data

渲染 HTML 结构
```
$('#container').html(htmlStr)
```

art-template 标准语法
1. 定义：art-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行变量输出，或循环数组等操作，这种 {{}} 语法在 art-template 中称为标准语法
2. 输出
```
{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
```
  在 {{}} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出
3. 原文输出
```
{{@ value}}
```
  如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。
4. 条件输出
  
  如果要实现条件输出，则可以在 {{}} 中使用 if…else if… /if 的方式，进行按需输出
```
{{if value}} 按需输出的内容 {{/if}}
{{if vl}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}
```
5. 循环输出
  
  在 {{}} 内，可以通过 each 语法循环数组，当前循环的索引的使用 $index 进行访问，当前的循环项使用 $$value 进行访问
```
{{each arr}}
	{{$index}} {{$value}}
{{/each}}
```
6. 过滤器（使用函数进行处理输出）
```
{{value | filterName}} // | 管道操作符，它的上一个输出作为下一个输入
```
  定义过滤器的基本语法
```
template.defaults.imports.filterName = function(vallue) {/* return 处理的结果 */}
```

5. 模板引擎的实现原理

正则与字符串操作

基本语法

exec() 函数用于检索字符串中的正则表达式的匹配，如果有匹配的值，则返回该匹配值，否则返回 null
```
var str = 'hello'
var pattern = /o/
var result = pattern.exec(str)
console.log(result)
```

分组

正则表达式中 () 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var result = pattern.exec(str)
console.log(result) //  ['{{name}}', 'name', index: 7, input: '<div>我是{{name}}</div>', groups: undefined]

字符串的 replace 函数

replace() 函数用于在字符串中用一些字符替换另一些字符
```
var result = '123456'.replace('123', 'abc')
console.log(result) // abc456
```

多次 replace

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str)

使用 while 循环 replace

ar str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = null
while(patternResult = pattern.exec(str)) {
    str = str.replace(patternResult[0], patternResult[1])
}
console.log(str)

replace 替换为真值

var data = { name: '张三', 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)

实现简易的模板引擎

实现步骤

定义模板结构

<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: 28, gender: '男', address: '北京顺义马坡' }
    // 调用模板引擎
    var htmlStr = template('tpl-user', data)
    // 渲染HTML结构
    document.getElementById('user-box').innerHTML = htmlStr
</script>

封装 template 函数

function(id, data) {
    // 获取 dom 结构
    var str = document.getElementById(id).innerHTML
    var pattern = /{{\s*([a-zA-Z]+)\s*}}/
    var pattResult = null
    while(pattResult = pattern.exec(str)) {
        str = str.replace(pattResult[0].data[pattResult[1]])
    }
    return
}

导入并使用自定义的模板引擎

Ajax 加强

1. XMLHttpRequest 的基本使用

作用：用于请求服务器上的数据资源

使用 xhr 发起 GET 请求（步骤）

创建 xhr 对象
```
var xhr = new XMLHttpRequest()
```

调用 xhr.open() 函数

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')

调用 xhr.send() 函数
```
xhr.send()
```

监听 xhr.onreadystatechange 事件

xhr.onreadystatechange = function () {
    // 4.1 监听 xhr 对象的 请求状态 readyState; 与服务器 响应的状态 status
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

xhr 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：

值	状态	描述
0	UNSENT	XMLHttpRequest 对象已被创建，但尚未调用 open 方法
1	OPENED	open() 方法已经被调用
2	HEADERS_RECEIVED	send() 方法已经被调用，响应头也已经被接收
3	LOADING	数据接收中，此时 response 属性中已经包含部分数据
4	DONE	Ajax 请求完成，这意味着数据传输已经彻底完成或失败

使用 xhr 发起带参数的 GET 请求

只需在调用 xhr.open 期间，为 URL 地址指定参数即可：
```
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
```
这种在 URL 地址后面拼接的参数，叫做查询字符串
查询字符串
1. 定义：是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）
2. 格式：将英文的 ? 放在 URL 的末尾，然后再加上参数 = 值，想加上多个参数的话，使用 & 符号进行分割。以这个形式，可以将想要发送给服务器的数据添加到 URL 中
3. GET 请求携带参数的本质
  
  无论使用 $.ajax()，还是 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的
URL 编码（使用英文字符去表示非英文字符）与解码
1. 定义：URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。如果包含中文这样的字符，则必须对中文字符进行编码（转移）。
2. URL 编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符
3. 编码与解码
  - 浏览器提供了 URL 编码与解码的 API，分别是
    - encodeURI() 编码的函数
    - decodeURI() 解码的函数
  - 注意：因为浏览器会自动对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作

使用 xhr 发起 POST 请求（步骤）

创建 xhr 对象
调用 xhr.open() 函数
设置 Content-Type 属性（固定写法）
调用 xhr.send() 函数，同时指定要发送的数据

监听 xhr.onreadystatechange 事件

// 1. 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
    // 3. 设置 Content-Type 属性(固定写法)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4. 调用 send 函数
    xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
    // 5. 监听事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }

2. 数据交换格式

XML
1. 定义：可扩展标记语言，被设计用来传输和存储数据，是数据的载体
2. 缺点：格式臃肿，和数据无关的代码多，体积大，传输效率低，在 JS 中解析 XML 比较麻烦
JSON
1. 定义：JS 对象表示法，言而言之，JSON 就是 JS 对象和数组的字符串表示法，它使文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串
2. 作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析
3. JSON 的两种结构（对象、数组）
  1. 对象结构：{} 括起来的内容，数据结构为 {key: value, key: value…} 的键值对结构。其中，key必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象 6 种类型
  2. JSON 语法注意事项
    1. 属性名必须使用双引号包裹
    2. 字符串类型的值必须使用双引号包裹
    3. JSON 中不允许使用单引号表示字符串
    4. JSON 中不能写注释
    5. JSON 的最外层必须是对象或数组格式
    6. 不能使用 undefined 或函数作为 JSON 的值
4. JSON 和 JS 对象的互转
  - 实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：
```
var obj = JSON.parse('{"a": "Hello", "b": "World"}')
// {a: "Hello", b: "World"}
```
  - JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
```
var json = JSON.stringify({a: "Hello", b: "World"}) 
// '{"a": "Hello", "b": "World"}'
```
5. 序列化和反序列化
  1. 把数据对象转换为字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化
  2. 把字符串转换为数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化

3. 封装自己的 Ajax 函数

定义 options 参数选项
1. itheima() 函数是我们自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以设置如下属性
  1. method 请求的类型
  2. url 请求的 URL 地址
  3. data 请求携带的数据
  4. success 请求成功之后的回调函数

处理 data 参数

需要把 data 对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义 resolveData 函数如下：

/*
处理 data 参数
@param {data} 需要发送到服务器的数据
@returns {string} 返回拼接好的查询字符串 name=zs&age=10
*/
function resolveData(data) {
  var arr = []
  for (var k in data) {
    var str = k + '=' + data[k]
    arr.push(str)
  }

  return arr.join('&')
}

定义 itheima 函数

在 itheima() 函数中，需要创建 xhr 对象，并监听 onreadystatechange 事件：

function itheima(options) {
  var xhr = new XMLHttpRequest()

  // 把外界传递过来的参数对象，转换为 查询字符串
  var qs = resolveData(options.data)
   xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}

判断请求的类型

不同的请求类型，对应 xhr 对象的不同操作，因此需要对请求类型进行 if … else …的判断：

if (options.method.toUpperCase() === 'GET') {
    // 发起GET请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    // 发起POST请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

4. XMLHttpRequest Level2 的新特性

旧版 XMLHttpRequest 的缺点
1. 只支持文本数据的传输，无法用来读取和上传文件
2. 传送和接收数据时，没有进度信息，只能提示有没有完成
XMLHttpRequest Level2 的新功能
1. 可以设置 HTTP 请求的时限
2. 可以使用 FormData 对象管理表单数据
3. 可以上传文件
4. 可以获取数据传输的进度信息
设置 HTTP 请求时限
1. 新版本增加了 timeout 属性，可以设置 HTTP 请求的时限：
  
  xhr.timeout=3000
  
  上面的语句，将最长等待时间设为 3000ms。过了这个时限，就自动停止 HTTP 请求。与之配套的还有一个 timeout 时间，用来指定回调函数：
```
xhr.ontimeout = function(event) {
    alert('请求超时！');
}
```

FormData 对象管理表单数据

// 1. 创建 FormData 实例
var fd = new FormData()
// 2. 调用 append 函数，向 fd 中追加数据
fd.append('uname', 'zs')
fd.append('upwd', '123456')
// 3. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 4. 指定请求类型与 URL 地址
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
// 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
xhr.send(fd)
}

FormData 对象也可以用来获取网页表单的值，示例如下：

// 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.liulongbin.top:3006/api/formdata')
    xhr.send(fd)

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText))
        }
    }
})

上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件

实现步骤：

定义 UI 结构

<!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>
  <br />
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

验证是否选择了文件

// 1. 获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
// 2. 为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
    // 3. 获取到用户选择的文件列表
    var files = document.querySelector('#file1').files
    if (files.length <= 0) {
        return alert('请选择要上传的文件！')
    }
    console.log('用户选择了文件')
}

向 FormData 中追加文件

// 1. 创建 FormData 对象
var fd = new FormData()
// 2. 向 FormData 中追加文件
fd.append('avatar', files[0]) // 属性 avatar --> 头像类型

使用 xhr 发起上传文件的请求

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定请求类型与 URL 地址。其中，请求类型必须为 POST
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
// 3. 发起请求
xhr.send(fd)

监听 onreadystatechange 事件

xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败！' + data.message)
          }
        }
      }

显示文件上传进度

新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传速度

// 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 监听xhr.upload 的 onprogress 事件
xhr.upload.onprogress = function (e) {
    // e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
    if (e.lengthComputable) {
        // e.loaded 已传输的字节
        // e.total	需传输的字节
        // 计算出上传的进度
        var procentComplete = Math.ceil((e.loaded / e.total) * 100)
        console.log(procentComplete)
    }
}

监听上传完成的事件

xhr.upload.onload = function() {
    $('#percent')
    // 移除上传中的类样式
    .removeClass()
    // 添加上传完成的类样式
    .addClass('progress-bar progress-bar-success')
}

5. jQuery 高级用法

jQuery 实现文件上传

定义 UI 结构

验证是否选择了文件

$('#btnUpload').on('click', function () {
        var files = $('#file1')[0].files
        if (files.length <= 0) {
          return alert('请选择文件后再上传！')
        }

向 FormData 中追加文件

var fd = new FormData()
fd.append('avatar', files[0])

使用 jQuery 发起上传文件的请求

$.ajax({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
    data: fd,
    // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
    processData: false,
    // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
    contentType: false,
    success: function (res) {
        console.log(res)
    }
})

jQuery 实现 loading 效果
1. ajaxStart(callback)
  
  Ajax 请求开始时，执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中显示 loading 效果。
```
$(document).ajaxStart(function() {
    $("#loading").show()
})
```
  $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求
2. ajaxStop(callback)
  
  Ajax 请求结束时，执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中隐藏 loading 效果。
```
$(document).ajaxStop(function() {
    $("#loading").hide()
})
```

6. axios

简介
- axios 是专注于网络数据请求的库，相比于 XMLHttpRequest 对象，axios 简单易用
- 相比于jQuery，axios 更加轻量化，只专注于网络数据请求

axios 发起 GET 请求

axios.get('url', {params: {/* 参数 */}}).then(callback)

var url = 'http://www.liulongbin.top:3006/api/get'
var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function (res) {
    console.log(res.data)
})

axios 发起 POST 请求

axios.post('url', {/* 参数 */}).then(callback)

var url = 'http://www.liulongbin.top:3006/api/post'
var dataObj = { address: '北京', location: '顺义区' }
axios.post(url, dataObj).then(function (res) {
    console.log(res.data)
})

直接使用 axios 发起请求

axios({
    method: '请求类型',
    url: '请求的 URL 地址',
    data: {/* POST数据 */},
    params: {/* GET参数 */}
}).then(callback)

var url = 'http://www.liulongbin.top:3006/api/get'
var paramsData = { name: '钢铁侠', age: 35 }
axios({
    method: 'GET',
    url: url,
    params: paramsData
}).then(function (res) {
    console.log(res.data)
})

axios({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/post',
    data: {
        name: '娃哈哈',
        age: 18,
        gender: '女'
    }
}).then(function (res) {
    console.log(res.data)
})

跨域与JSONP

1. 了解同源策略和跨域

同源
1. 定义：如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。
2. 没写端口号，默认为 80
同源策略
1. 定义：是浏览器提供的一个安全功能
2. 通俗理解：浏览器规定，A 网站的 JS，不允许和非同源的网站 C 之间，进行资源交互，例如：
  1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
  2. 无法接触非同源网页的 DOM
  3. 无法向非同源地址发送 Ajax 请求
跨域
1. 定义：同源指的是两个 URL 的协议，域名和端口都相同，反之，则是跨域
2. 浏览器对跨域请求的拦截
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QuKmf1S-1658038662612)(C:\Users\WZX\AppData\Roaming\Typora\typora-user-images\image-20220713152849388.png)]
  - 注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到
3. 如何实现跨域数据请求（两种解决方案：JSONP 和 CORS）
  1. JSONP 是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。（现阶段学习）
  2. CORS 出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求，缺点是不兼容某些低版本的浏览器。（后阶段 node.js 学习）

2. JSONP

JSONP（JSON with padding）：是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
JSONP 实现原理

由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 <script> 标签不接受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。

因此，原理就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

自己实现一个简单的 JSONP

定义一个 success 回调函数

<script>
    function success(data) {
        console.log('获取到了 data 数据')
        console.log(data)
    }
</script>

通过 <script> 标签，请求接口数据

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success$name=zs&age=20"></script>

JSONP 的缺点
- 由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。
- 注意：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用的 XMLHttpRequest 这个对象
jQuery 中的 JSONP
- jQuery 提供的 $ajax() 函数，除了可以发起真正的 Ajax 数据请求以外，还能够发起 JSONP 数据请求
```
$.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 如果要使用 $ajax() 发起 JSONP 请求，必须指定 dataType 为 jsonp
    dataType: 'jsonp',
    success: function (res) {
        console.log(res)
    }
})
```
  默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx的参数，jQueryxxx 是随机生成的一个回调函数名称

自定义参数及回调函数名称

在使用 jQuery 发起 JSONP 请求时，如果想要自定义 JSONP 的参数以及回调函数名称，可以通过如下两个参数来指定

$.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    dataType: 'jsonp',
    // 发送到服务端的参数名称，默认值为 callback
    jsonp: 'callback',
    // 自定义的回调函数名称，默认值为 jQueryxxx 格式
    jsonpCallback: 'abc',
    success: function (res) {
        console.log(res)
    }
})

jQuery 中 JSONP 的实现过程
- jQuery 采用的是动态创建和移除<script> 标签的方式，来发起 JSONP 数据请求
  - 在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签
  - 在 JSONP 请求成功后，动态向 <header> 中移除刚才 append 进去的 <script> 标签

3. 防抖和节流

防抖
- 防抖策略是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
- 应用场景：用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。
节流
- 节流策略，可以减少一段时间内事件的触发频率
- 应用场景：
  - 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
  - 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
节流阀
- 节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。
- 当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了
- 每次执行操作前，必须先判断节流阀是否为空
总结防抖和节流的区别
1. 防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效！前面 N 多次的触发都会被忽略
2. 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件

HTTP 协议加强

1. HTTP 协议简介

通信
1. 定义：就是信息的传递和交换
2. 通信三要素：通信的主体、通信的内容、通信的方式
3. 互联网中的通信：服务器通过响应的方式把内容传递给客户端浏览器
通信协议
1. 定义：是指通信的双方完成通信所必须遵守的规则和约定
2. 通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议
3. 互联网中的通信协议
  - 客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。
  - 网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议，简称 HTTP 协议
HTTP
1. 定义：HTTP 协议即超文本传输协议，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式
2. 例如：
  - 客户端要以 HTTP 协议要求的格式把数据提交到服务器
  - 服务器要以 HTTP 协议要求的格式把内容响应给客户端
3. HTTP 协议的交互模型
  - HTTP 协议采用了 请求/响应 的交互模型

2. HTTP 请求消息

HTTP 请求消息
- 定义：客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息 （又称为 HTTP 请求报文）
HTTP 请求消息的组成部分
- 请求行、请求头部、空行、请求体
1. 请求行
  
  请求行由请求方式、URL 和 HTTP 协议版本 3 个部分组成，他妈之间使用空格隔开
2. 请求头部
  - 请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。
  - 请求头部 - 常见的请求头字段
3. 空行
  
  最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束。请求消息中的空行，用来分割请求头部与请求体。
4. 请求体
  
  请求体中存放的，是要通过 POST 方式提交到服务器的数据
  
  注意：只有 POST 请求才有请求体，GET 请求没有请求体！

3. HTTP 响应消息

HTTP 响应消息
- 响应消息就是服务器响应给客户端的消息内容，也叫做响应报文
- 组成：状态行、响应头部、空行、响应体
1. 状态行
  
  状态行由 HTTP 协议版本、状态码和状态码的描述文本 3 个部分组成，他们之间使用空格隔开
2. 响应头部
  
  响应头部用来描述服务器的基本信息。响应头部由多行键/值对组成，每行的键和值之间用英文的冒号分隔。
3. 空行
  
  在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户响应头部至此结束。响应消息中的空行，用来分隔响应头部与响应体。
4. 响应体
  
  响应体中存放的，是服务器响应给客户端的资源内容。

4. HTTP 请求方法

属于 HTTP 协议中的一部分，请求方法的作用是：用来表明要对服务器上的资源执行的操作。最常用的请求方法是 GET 和 POST。

5. HTTP 响应状态代码

HTTP 响应状态码，也属于 HTTP 协议的一部分，用来标识响应的状态
HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分。

git

1. git 起步

git 中的三个区域

使用 Git 管理的项目，拥有三个区域，分别是工作区、暂存区、Git 仓库。
Git 中的三种状态

已修改（修改了文件，但是还没有放入暂存区）、已暂存（对已修改的文件做了标记，使之包含在下次提交的列表中）、已提交（文件已安全保存在本地的 Git 仓库中）

注意：
- 工作区的文件被修改了，但还没有放到暂存区，就是已修改状态
- 如果文件已修改并放入暂存区，就属于已暂存状态
- 如果 Git 仓库中保存着特定版本的文件，就属于已提交状态
基本的 Git 工作流程
1. 在工作区中修改文件
2. 将你想要下次提交的更改进行暂存
3. 提交更新，找到暂存区的文件，将快照永久性存储到 Git 仓库

2. git 基础

安装 git
配置用户信息

安装完 Git 之后，要做的第一件事就是设置自己的用户名和邮箱地址。因为通过 Git 对项目进行版本管理的时候，Git 需要使用这些基本信息，来记录是谁对项目进行了操作：
```
git config --global user.name "xxx"
git config --global user.email "xxx@qq.com"
```
注意：如果使用了 --global 选项，那么该命令只需要运行一次，即可永久生效。

通过以上方式配置的用户名和邮箱地址，会被写入到 C:/User/用户名文件夹/.gitconfig 文件中。这个文件是 Git 的全局配置文件，配置一次永久生效

还可以用如下的终端命令，快速的查兰 Git 的全局配置信息：

# 查看所有的全局配置项
git config --list --global
# 查看指定的全局配置项
git config user.name
git config user.email

获取帮助信息

可以使用 git help <verb> 命令，无序联网即可在浏览器中打开帮助手册，例如：

# 想要获取 git config 命令的帮助手册
git help config
# 想要获取 git config 命令的快速参考
git config -h

3. Git 的基本操作

获取 Git 仓库的两种方式
1. 将尚未进行版本控制的本地目录转换为 Git 仓库
2. 从其它服务器克隆一个已存在的 Git 仓库
在现有目录中初始化仓库

如果自己有一个尚未进行版本控制的项目目录，想要用 Git 来控制它，需要执行如下两个步骤：
1. 在项目目录中，通过鼠标右键打开 ”Git Bash“
2. 执行 git init 命令将当前的目录转化为 Git 仓库
  
  git init 命令会创建一个名为 .git 的隐藏目录，这个 .git 目录就是当前项目的 Git 仓库，里面包含了初始的必要文件，这些文件是 Git 仓库的必要组成成分
工作区中文件的 4 种状态
1. 工作区中的每一个文件可能有 4 种状态，这四种状态共分为两大类
  
  Git 操作的终极结果：让工作区种的文件都处于 ”未修改“ 的状态
检查文件的状态

可以使用 git status 命令查看文件处于什么状态
以精简的方式显示文件状态

git status 命令输出的状态报告很详细，但有些繁琐。如果希望以精简的方式显示文件的状态，可以使用如下两台哦完全等价的命令，其中 -s 是 –short 的简写形式：
```
# 以精简的方式显示文件状态
git status -s
git status --short 
```
未跟踪文件前面有红色的 ?? 标记
跟踪新文件

git add 命令开始跟踪一个文件。
```
# 跟踪 index.html 文件
git add index.html
```
此时再运行 git status 命令，会看到 index.html 文件在 Changes to be committed 这行的下面，说明已被跟踪。

以精简的方式显示文件的状态：新添加到暂存区中的文件前面有绿色的 A 标记
提交更新

现在暂存区中有一个 index.html 文件等待被提交到 Git 仓库中进行保存。可以执行 git commit 命令进行提交，其中 -m 选项后面是本次的提交消息，用来对提交的内容做进一步的描述
```
git commit -m "新建了index.html文件"
```
对已提交的文件进行修改

目前，index.html 文件已经被 Git 跟踪，并且工作区和 Git 仓库中的 index.html 文件内容保持一致。当我们修改了工作区中 index.html 的内容之后，再次运行 git status 和 git status -s 命令

index.html 文件在 Changes to be committed 这行的下面，说明已跟踪文件的内容发生了变法，但还没有放到暂存区。

注意：修改过的，没有放入暂存区的文件前面有红色的 M 标记
暂存已修改的文件

index.html 文件已被修改，如果要暂存这次修改，需要再次运行 git add 命令，这个命令是个多功能命令，主要有 3 个功效：
1. 可以用它开始跟踪新文件
2. 把已跟踪的、且已修改的文件放到暂存区
3. 把有冲突的文件标记为已解决状态
提交已暂存的文件

再次运行 git commit -m “提交消息”命令，即可将暂存区中记录的 index.html 的快照，提交到 Git 仓库中进行保存
撤销对文件的修改

撤销对文件的修改指的是：把对工作区中对应文件的修改，还原成 Git 仓库中所保存的版本。

操作的结果：所有的修改会丢失，且无法恢复！危险性比较高，请谨慎操作！

使用 git checkout – index.html 命令，撤销对 index.html 文件的修改

撤销操作的本质：用 Git 仓库中保存的文件，覆盖工作区中指定的文件
向暂存区中一次性添加多个文件

如果需要被暂存的文件个数比较多，可以使用如下的命令，一次性将所有的新增和修改过的文件加入暂存区
```
git add .
```
- 在后续开发中，会经常使用该命令，将新增和修改过后的文件加入暂存区
取消暂存的文件

如果需要从暂存区中移除对应的文件，可以使用如下的命令：
```
git reset HEAD 要移除的文件名称
```
跳过使用暂存区域

Git 标准的工作流程是工作区——>暂存区——>Git 仓库，但有时候这么做略显繁琐，此时可以跳过暂存区，直接将工作区中的修改提交到 Git 仓库，这时候 Git 工作的流程简化为了工作区——> Git 仓库

Git 提供了一个跳过使用暂存区的方式，只要在提交的时候，给 git commit 加上 -a 选项，Git 就会自动把所有已经跟踪过的文件暂存起来一并提交，从而跳过 git add 步骤：
```
git commit -a -m "描述信息"
```
移除文件

从 Git 仓库中移除文件的方式有两种：
1. 从 Git 仓库和工作区中同时移除对应的文件
2. 只从 Git 仓库中移除指定的文件，但保留工作区中对应的文件
```
# 从 Git 仓库和工作区中同时移除对应的文件
git rm -f index.js
# 只从 Git 仓库中移除指定的文件，但保留工作区中对应的文件
git rm --cached index.css
```
忽略文件

一般我们总会有些文件无序纳入 Git 管理，也不希望它们总出现在未跟踪文件列表。在这种情况下，我们可以创建一个名为 .gitignore 的配置文件，列出要忽略的文件的匹配模式。

文件 .gitignore 的格式规范如下：
1. 以 # 开头的是注释
2. 以 / 结尾的是目录
3. 以 / 开头防止递归
4. 以 ! 开头表示取反
5. 可以使用 glob 模式进行文件和文件夹的匹配（glob 指简化了的正则表达式）
glob 模式
1. 星号 * 匹配零个或多个任意字符
2. [abc] 匹配任何一个列在方括号中的字符（此案例匹配一个 a 或匹配一个 b 或匹配一个 c）
3. 问号 ? 只匹配一个任意字符
4. 在方括号中使用短划线分隔两个字符，表示所有在这两个字符范围内的都可以匹配
5. 两个星号 ** 表示匹配任意中间目录（比如 a/**/z 可以匹配 a/z 、a/b/z 或 a/b/c/z 等）
.gitignore 文件的例子
查看提交历史

如果希望回顾项目的提交历史，可以使用 git log 这个简单且有效的命令
回退到指定的版本

Github

1. 了解开源相关的概念

常见的 5 种开源协议
1. BSD
2. Apache Licence 2.0
3. GPL
  1. 具有传染性的一种开源协议，不允许修改后和衍生的代码作为闭源的商业软件发布和销售
  2. 使用 GPL 的最著名的软件项目是：linux
4. MIT
  1. 是目前限制最少的协议，唯一的条件：在修改后的代码或者发行包中，必须包含原作者的许可信息
  2. 使用 MIT 的软件项目有： jQuery、Node.js
开源项目托管平台

专门用于免费存放开源项目源代码的网站，叫做开源项目托管平台。

比价出名的：Github、Gitlab、Gitee
Github

全球最大的开源项目托管平台。因为只支持 Git 作为唯一的版本控制工具，故名 Github。
1. 关注自己喜欢的项目（start）
2. 为自己喜欢的开源项目做贡献（Pull Request）
3. 和作者讨论 Bug （issues）
4. 把喜欢的项目复制一份作为自己的项目进行修改（Fork）
5. 创建属于自己在的开源项目
6. ……

2. 远程仓库的使用

新建空白远程仓库
远程仓库的两种访问形式

Github 上的远程仓库有两种访问形式：HTTPS 和 SSH。它们的区别是：
1. HTTPS：零配置；但是每次访问仓库时，需要重复输入 Github 的账号和密码才能访问成功
2. SSH：需要进行额外的配置；但是配置成功后，每次访问仓库时，不需重复输入 Github 的账号和密码
  
  注意：在实际开发中，推荐使用 SSH 的方式访问远程仓库
基于 HTTPS 将本地仓库上传到 Github
1. git push 修改后同步，第二次提交直接使用该命令
SSH key

SSH key 的作用：实现本地仓库和 Github 之间免登录和加密数据传输

SSH key 的好处：免登录身份认证、数据加密传输

SSH key 由两部分组成，分别是：
1. id_rsa（私钥文件，存放于客户端的电脑中即可）
2. id_rsa.pub（公钥文件，需要配置到 Github 中）
生成 SSH key
1. 打开 Git Bash
2. 粘贴如下的命令，并将 your_email@example.com 替换为注册 Github 账号是填写的邮箱：
  - ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
3. 连续敲击 3 次回车，即可在 C:\User\用户名文件夹\.ssh 目录中生成 id_rsa 和 id_rsa.pub 两个文件
配置 SSH key
1. 使用记事本打开 id_rsa.pub 文件，复制里面的文本内容
2. 在浏览器中登录 Github，点击头像 ——> Settings ——> SSH and GPG Keys ——> New SSH key
3. 将 id_rsa.pub 文件中的内容，粘贴到 Key 对应的文本框中
4. 在 Title 文本框中任意填写一个名称，来标识这个 Key 从何而来
检测 Github 的 SSH key 是否配置成功

打开 Git Bash，输入命令并回车执行：ssh -T git@github.com

输入 yes 之后，如果能看到类似于下面的提示消息，证明 SSH key 已经配置成功了
基于 SSH 将本地仓库上传到 Github
将远程仓库克隆到本地

打开 Git Bash，输入命令并回车执行：git clone 远程仓库的地址

Git 分支

1. master 主分支

在初始化本地 Git 仓库的时候，Git 默认已经帮我们创建了一个名字叫做 master 的分支。通常我们把这个 master 分支叫做主分支。

在实际工作中，master 主分支的作用是：用来保存和记录整个项目已完成的功能代码

因此，不允许程序员直接在 master 分支上修改代码，因为这样做的风险太高，容易导致整个项目崩溃。

2. 功能分支

功能分支指的是专门用来开发新功能的分支，它是临时从 master 主分支上分叉出来的，当新功能开发且测试完毕后，最终需要合并到 master 主分支上

3. 本地分支操作

查看分支列表：git branch

注意：分支名字前面的 * 号表示当前所处的分支
创建新分支
1. 使用如下命令，可以基于当前分支，创建一个新分支，此时，新分支中的代码和当前分支完全一样
2. git branch 分支名称
  
  注意：不会切换到新分支
切换分支：git checkout 分支名称
分支的快速创建和切换
1. 使用如下的命令，可以创建指定名称的新分支，并立即切换到新分支上：
2. ```
# -b 表示创建一个新分支
# checkout 表示切换到刚才新建的分支上
git  checkout -b 分支名称
```
合并分支 git merge 分支名称
```
# 1. 切换到 master 分支
git checkout master
# 2. 在 master 分支上运行 git merge 命令，将 login 分支的代码合并到 master 分支
git merge login
```
注意：要把 C 分支的代码合并到 A 分支，则必须先切换到 A 分支上，再运行 git merge 命令，来合并 C 分支
删除分支：git branch -d 分支名称（要保证自己不在那个要删除的分支上）

遇到冲突时的分支合并

如果在两个不同的分支中，对同一个文件进行了不同的修改，Git 就没法干净的合并它们。此时，我们需要打开这些包含冲突的文件然后手动解决冲突。

# 假设：在把 reg 分支合并到 master 分支期间，代码发生了冲突
git checkout master
git merge reg

# 打开包含冲突的文件，手动解决冲突之后，再执行如下的命令
git add .
git commit -m "解决了分支合并冲突的问题"

4. 远程分支操作

将本地分支推送到远程仓库

如果是第一次将本地分支推送到远程仓库，需要运行命令

# -u 表示把本地分支和远程分支进行关联，只在第一次推送的时候需要带 -u 参数
git push -u 远程仓库的别名 本地分支名称：远程分支名称

# 实际案例：
git push -u origin payment:pay

# 如果希望远程分支的名称和本地分支名称保持一致，可以对命令进行简化：
git push -u origin payment

注意：第一次推送分支需要带 -u 参数，此后可以直接使用 git push 推送代码到远程分支

查看远程仓库中所有的分支列表
```
git remote show 远程仓库名称
```

跟踪分支

跟踪分支指的是：从远程仓库中，把远程分支下载到本地仓库中。

# 从远程仓库中，把对应的远程分支下载到本地仓库，保持本地分支和远程分支名称相同
git checkout 远程分支的名称
# 示例：
git checkout pay

# 从远程仓库中，把对应的远程分支下载到本地仓库，并把下载的本地分支进行重新命名
git checkout -b 本地分支名称 远程仓库名称/远程分支名称
# 示例：
git checkout -b payment origin/pay

拉取远程分支的最新的代码

# 从远程仓库，拉去当前分支最新的代码，保持当前分支的代码和远程分支代码一致
git pull

删除远程分支

# 删除远程仓库中，指定名称的远程分支
git push 远程仓库名称 --delete 远程分支名称
# 示例：
git pull origin --delete pay