jQuery中的Ajax
浏览器提供的XMLHttpReque用法放比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列的Ajax相关函数，极大的降低了Ajax的使用难度。
jQuery中的Ajax有三种常用方式：$.get(),$.post(),$.ajax()
$.get(
url:string类型（必选的）
data:object，（非必选的，请求资源期间要携带的参数）
callback：function（），非必选的，请求成功时的回调函数
)
$.get(
url:'http://baidu.com',(id:1),function(res){ //res表示形参接收实参
console.log(res);
}
)
//代码表示为输出id值为1的传递过来的参数$.post(
url:string类型（必须）
(data：)携带的数据（非必须）
callback，表示执行成功时的回调函数 （非必须）
)
$.post(
url:'http://baidu.com',(name:zs,age:20),function(res){
console.log(res);//向接口上传数据，后把数据输出到页面上
}
)$.ajax({
type://请求方式
url：//请求地址
（data：）携带的数据
success：function（）{}请求成功之后的回调函数
})
$.ajax({
type:'get',
url:'http://baidu.com',
data:{name:zs,age:20},
success:function(res){
console.log(res);
}
})接口测试工具：
接口文档：
案例图书管理：
首先：通过接口或得数据利用$.ajax（{}）方法获取数据
form表单的基本使用
主要负责数据采集功能；
表单有三个部分组成：表单标签，表单域，表单按钮
action属性用来规定当前提供表单时，向那个链接提交
target属性用来规定在何处打开页面：_blank在新窗口打开，_self默认是，在相同框架中打开，_parent在父框架中打开，_top在整个窗口中打开，framename在指定的框架中打开。
method属性规定以何种方式把表单数据提交到action URL，默认是get（get 和 post）
表单的同步提交
缺点：表单提交后，整个页面会发生转变，跳转到action URL所指的地址；
页面之前填写的数据和状态会丢失。
解决方法：表单只负责采集数据，Ajax负责将数据提交到服务器。
监听表单提交事件：
//方法一
$('#form1').submit(function(e){
alert("表单的提交事件");
})
//方法二
$('#form1').on('submit',function(e){
alert("监听表单的提交事件");
})阻止表单默认提交事件：e.preventDefault()
快速获取表单中的数据：serialize
<form id="form1">
<input type = "text" name ="username">
<input type = "password" name = "password">
<button type = "submit">提交</button>
</form>
<script>
$('#form1').serialize();//输出结果为：username:“输入的文本”&password = "输入的密码"
</script>
发表评论案例：
模板引擎的基本概念
根据程序员指定的模板结构和数据，自动生成一个HTML界面
使用模板引擎步骤：
<head>
<script src = "./lib/template-web.js"></script>
</head>
<body>
<div id = 'container'></div>
<script type = "text/html" id = tpl-user>
<h1>{{name}}</h1> ;//HTML标签结构
<h3>{{regTime | dateFormat}}</h3> //标准语法过滤器
</script>
<script>
//定义过滤器基本语法
template.defaults.import.dateFormat = function(regTime){
var y = date.getFullYear();
var m = date.getFullMonth() + 1;
var d = date.getDate();
return y + "-"+ m + "-" +d;
}
var data = {name:'zs',regTime:new date()}; //需要渲染的数据
var htmlStr = template('tpl-user',data);
$('#container').html(htmlStr); //渲染数据
</script>
</body>一：导入模板引擎包<script src="./lib/template-web.js"></script>
二：定义需要渲染的数据 var data = { name:zs}
三：在body中定义一个<script type = "text/html" id= "tp-userl"></script>标签（默认script为javascript样式）
四：调用模板样式 var htmlStr = template('tpl-user',data);
五：渲染html结构 $('#container').html(htmlStr)
art-template标准语法
在标准语法中可以进行：变量输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除表达式输出。
art-template——原文输出：{{@value}} 输出的是渲染完成的数据
art-template——条件输出：if...else.../if
art-template——循环输出：
<script>
<ul>
{{each hobby}}
<li>索引号是：{{$index}},循环数据是：{{$value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = hobby:['篮球','读书','写字'];
</script>{{each arr}}
{{$index}} 输出的索引
{{$value}} 输出的是数据
{{/each}}
标准语法——过滤器
{{value | filterName}} （实参）
<div>
注册时间：{{regTime | dateFormat}}
</div>{{"输入值" | "过滤后输出值"}}
定义过滤器的基本语法：
template.defaults.imports.filterName = function(value){ /*return处理后的结果*/}
(形参) （形参）
template.defaults.import.dateFormat = function(dateFormat){
var y = date.getFullYear();
var m = date.getFullMonth() + 1;
var d = date.getDate();
return y + "-"+ m + "-" d;
}（使用标准语法art-template就需要加上template,）
模板引擎的实现原理
exec（）函数用于检索字符串中的正则表达式中的匹配值。
若存在则返回匹配的值，否则返回null。
RegExpObject.exec(string)
例如：
var str= 'hello';
var pattern = /o/;
console.log(pattern.exec(str));
//输出的结果是 ["o",index:4,input:"hello",groups:underfined]正则表达式——分组
正则表达式中“（）”包起来的表示一个分组，可以通过分组来提取自己想要的内容，
var str= '<div>我是{{name}}</div>';
var pattern = /{{(a-zA-Z)}}/；
var patternResult = pattern.exec(str);
console.log(patternResult); //得到name相关的分组信息
//输出结果为["{{name}}","name",index:7,input:"<div>我是{{name}}</div>",groups:underfined]正则表达式replace函数
var result = '123456'.replace('123','abc')；//得到的是"abc456";正则的表达式：多次replace
方法一：
var str = "<div>{{name}}今年{{age}}岁了</div>"；
var pattern = /{{\s*([a-zA-Z])\s*}}/
//"\s*"表示前边后边任意个空格(>=0)
var patt = pattern.exec(str);
console.log(patt);
方法二：
var str = '<div>{{name}}今年{{age}}岁了</div>'；
var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
var patt = null;
while(patt = pattern.exec(str)){
str = str.replace(patternResult[0],patternResult[1])
}
console.log(str); //输出的结果为<div>name今年age岁了</div>正则与字符串操作——replace替换为真值
var data = {name：'张三'，age：20}；
var str ='<div>{{name}}今年{{age}}岁了</div>'；
var pattern = /{{\s*([a-zA-Z]\s*}}/;
var patt = null;
while(patt = pattern.exec(str)){
str = str.replace(patternResult[0],data(patternResult[1]));
}
console.log("str"); //输出的结果是：“张三今年20岁了”封装自己的简易模板引擎：
第一步创建模板引擎
第二个创建自己封装的匹配函数：
XMLHttpRequeset(xhr)
通过xhr可以请求服务器上的资源，xhr和Ajax函数与请求方式三者之间的关系：
使用xhr发起GET请求：
1，创建xhr对象
var str= new XMLHttpRequest();
2，调用xhr.open()函数；
xhr.open('get','http://www.liulongbin.top:3006/api/getbooks')3，调用xhr.send（）函数
xhr.send();4，监听xhr.onreadystatechange事件；
xhr.responseText获取服务器数据
xhr.onreadystatechange = function(){
if(xhr.readyStates ===4 && xhr.status ===200){ //监听xhr对象的请求状态与相应状态
console.log(xhr.responseText);
//获取服务器相应数据
}
}了解xhr对象的readyState属性：
xhr对象发起带参数的get请求
使用xhr对象发起带参数的Get请求时，只需要在调用xhr.open期间，为URL地址指定参数即可：
var xhr = new XMLHttpRequest();
xhr.open('get','http://www.liulongbin.top:3006/api/getbooks?id=1');
xhr.send();
xhr.onreadyStatechange = function(){
if(xhr.readyStates ===4 && xhr.status ===200){
console.log(xhr.responseText);
}
}使用xhr发起POST请求：
创建xhr对象：
var xhr = new XMLHttpRequest();调用open（）：
xhr.open("post","http://www.liulongbing.top:3006/api/addbook");设置Content-Type属性（固定写法）：
xhr.setRequestHeader("Content-Type"，"application/x-www-form-urlencoded")；调用send()，同时将数据以查询字符串的形式，提交给服务器：
xhr.send('bookname="水浒传"&author="施耐庵"&publisher="图书出版社"');监听onreadystatechange事件：
xhr.onreadyStatechange = function(){
if(xhr.readyState ===4&xhr.state ===200){
console.log(xhr.responseText);
}
}数据交换格式
前端经常使用的就是XML和JSON;
XML的缺点：格式臃肿，与数据无关代码多，体积大，传输慢；在JavaScript解析慢；（不做重点）
JSON:更小，更快，更便捷。
JSON本质：就是用字符串来表示JavaScript的对象和数组。JSON中包含对象和数组两种结构。
JSON的作用是：在计算机和网络之间存储和传递数据；
一：对象结构：用大括号“{}”包起来的内容，数据结构为{"key":value...}键值对键值对形式。value的数据类型只能是：数字，字符串，布尔型，数组，对象，null六种，其中除数字，null和布尔型不需要使用英文双引号，其他三个都需要。key属性名必须用英文双引号包住。
二：数组结构：用“[ ]” 包起来的内容，数据结构为["java",100,null,false];数据类型只能是：数字，字符串，布尔型，数组，对象，null六种，其中除数字，null和布尔型不需要使用英文双引号，其他三个都需要。
JSON的注意项：
1.属性名必须使用双引号包裹；
2.字符串类型的值必须使用双引号包裹；
3.JSON中不允许使用单引号表示字符串；
4.JSON中不能出现注释；
5.JSON中不能使用规定的类型之外的格式；
JSON和JS对象的关系：
JS对象：
var obj = {a:'hello'}
//这是一个js对象JSON对象：
var json = '{"a":"abc","b":123}'
//这是一个JSON对象JSON和JS对象的转换：
JSON转为JS对象：JSON.parse（）；
var obj = JSON.prise('{"a":"hello"}');
console.log(obj); //输出结果为 {a:"hello"}JS对象转为JSON对象：JSON.stringify();
var json = JSON.stringify('{a:"hello"}');
console.log(json); //输出结果为：{"a":"hello"}封装自己的Ajax函数：
function resolveData(data){
var arr = [];
for(var k in data){
var str = k +'='+data[k];
arr.push(str);
}
return arr.join('&');
}
var res = resolveData({name:'zs',age:25});
console.log(res);此函数输出的结果为：name='zs'&age=25
接收传递过来的值：
function itheima(option){
var xhr = new XMLHttpRequest();
var qs = resolveData(options.data); //把获取的值用&隔开
if(options.method.toUpperCase() ==='GET'){
xhr.open(option.method,option.url+'?'+qs);
xhr.send();
}else if(options.method.toUpperCase() ==='POST'){
xhr.open(options.method,options.url);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(qs);
}
xhr.onreadystatechange = function(){
if(xhr.readyState ===4 & xhr.states ===200){
var result = JSON.parse(xhr.responseText);
options.success(result);
}
}
}测试调用上边的函数：
<script>
itheima({
method:'get',
url:'http://www.liulongbin.top:3006/api/getbooks',
data:{
id:1
},
success:function(res){ //接收上边函数传递的，执行成功的回调函数值
console.log(res);
}
})
</script>XMLHttpRequest的新特性：
1.可以设置请求时限
语法为：
xhr.timeout:3000; //三秒后此语法有配套的timeout事件，当请求时限到了请求失败后，用以指定回调函数：
<script>
var xhr = new XMLHttpRequest();
xhr.timeout = 3000;
xhr.ontimeout = function(event){
alert('请求超时');
}
xhr.open('get','http://www.liulongbin.top:3006/api/getbooks');
xhr.send();
xhr.oneadystatechange = function(){
if(xhr.readyState ===4 & xhr.state ===200){
console.log(xhr.responseText);
}
}
</script>新特性——formData对象管理数据
一，提交表单数据,添加表单数据
var fd = new FormData();
fd.append('uname','zs');
fd.append('pwd','123456');
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.state ===200){
console.log(JSON.parse(xhr.responseText)); //获取数据转换为JS对象
}
}二.获取表单数据
<body>
<form id= 'form1'>
<input type = 'text' name = 'uname' autocomplete ='off'/>
<input type = 'password' name = 'upwd'>
<button type = submit>提交</button>
</form>
<script>
var form = document.querySelector('#form1');
form.addEventListener('submit',function(e)){
e.preventDefault();
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.state===200){
console.log(JSON.parse(xhr.responseText));
}
}
}
</script>
</body>新特性——选择文件通过Formdata追加
定义UI结构
<body>
<input type = 'file' id = 'filel' />
<button id = btnUpload>上传文件</button>
<div class="progress"> //传入进度条样式
<div class="progress-bar progress-bar-striped active" role="progressbar" aria- valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
<br/>
<img src= '' alt='' id = 'img' width = '800'>
</body>验证是否选择了文件，并进行追加：
var btnUpload = document.querySelector('#btnUpload');
btnUpload.addEventListener('click',function(){
var files = document.querySelector('#file1').files; //获取到文件的数量
if(files <= 0){
return alert("请选择文件");
}
var fd = new formData();
fd.append('avatar',files[0]); //avatar是一个文件头部，把选择的文件索引号为0的放进去
var xhr = new XMLHttpRequest();
xhr.open("post","http://www.liulongbing.top:3006/api/upload/avatar");
xhr.send(fd);
xhr.onreadystatechange = function(){
if(xhr.readyState ===4 & xhr.state ===200){
var data = JSON.parse(xhr.responseText); //解析为JS对象格式
if(data.status===200) {
document.querySelector('#img').src = 'http://www.liulongbing.top:3006'+data.url; //需要加上根路径再加上响应的地址
}else {
console.log("上传失败"+data.message);
}
}
}
});新特性——显示文件上传进度
可以通过监听xhr.upload.onprogress()事件，来获取上传进度，并显示进度条。
var xhr = new XMLHttpRequest(); //创建XHR对象
xhr.upload.onprogress = function(e){ //监听xhr.upload的onprogress事件
if(e.lengthComputable){ //e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算长度
//e.loaded表示已传输的字节；
//e.total表示需要传输的字节
var procentComplete = Math.ceil((e.loaded / e.total)* 100);
console.log(procentComplete); //输出百分比进度
$('#percent').attr('style','width:'+procentComplete+'%;').html(procentComplete+'%');
}
}
xhr.upload.onload=function(){
$('#percent').removeClass().addClass('progress-bar progress-bar-striped')
}jQuery高级用法——实现文件上传
1.定义UI结构
<head>
<script src = '.lib/jQuery.js'></script>
</head>
<body>
<input type = "file" id = 'file1'>
<button id = "btnUpload">上传文件</button>
<script>
$(function(){
$('#btnUpload').on('click',function(){
var files = $("#file1")[0].files;
if(files.length<=0){
return alert("请选择文件");
}
var fd = new FormData();
fd.append('avatar',files[0]);
$.ajax({
method:'post',
url:'http://www.liulongbin.top:3006/api/upload/avatar',
data:fd,
processData:false,
contentType:false,
success：function(res){
console.log(res);
}
})
})
})
</script>
</body>jQuery高级——AjaxStart(callback)开始执行函数，请求开始时执行
AjaxStart该方法只能在dom文档中使用。（注意：$(document).ajaxStart(）函数会监听当前文档中所有的Ajax请求
$(document).ajaxStart(function(){
$('#loading').show();
// 请求开始时执行函数，只能在文档中使用
})ajaxStop(callback)函数：
Ajax请求结束时，执行ajaxStop函数，可以在ajaxStop的callback中隐藏loading效果
axios
专注于网络数据请求的库。
axios发起get请求的语法：axios.get('/*url*/' , {params:/*参数*/}).then(callback);
(res.data是服务器返回的数据真实存在)
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);
})axiso发起post请求的语法：axiso.post('url',{/*参数*/}.then(callback))
var url = 'http://www.liulongbin.top:3006/api/post',
var dataObj ={location:'北京'，address:'顺义'}，
axiso.post(url,dataObj).then(function(res){
var result = res.data;
console.log(result);
})axios也提供了类似jQuery中$.ajax的函数：
document.querySelector("#btn").addEventListener('click',function(){
var url = 'http://www.liulongbin.top:3006/api/get',
var paramsData = {name:zs,age:20},
axios({
method:'GET',
url:url,
params:paramsData
}).then(function(res){
console.log(res.data);
})
})跨域和JSONP
同源策略和跨域：如果两个页面的协议，域名和端口号都相同，则两个页面为同源策略。
http:协议，
www：域名，
端口号：若不指定端口号，默认为80。
http：//www.test.com/index.html同源策略：是浏览器提供的一个安全功能。
MDN官方解释：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个的源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
跨域：实现不用的网页之间进行数据共享。目前主要有两种解决方案：JSONP和CORS。
JSONP：出现的早，兼容性好；缺点是只支持GET请求。
CORS：是W3C的标准解决方式，GET和POST都支持；缺点不兼容某些低版本浏览器。
JSONP的实现原理：
通过<script>标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的JS脚本。并通过函数调用的形式，接收跨域接口相应回来的数据。
<body>
<script>
function abc(data){
console.log(data);
console.log("拿到了data数据");
}
</script>
<script src = "./js/getdata.js?callback=abc"> //调用getdata.js文件中的，函数名为abc的回调函数。
</script>
</body>jQuery提供的$.ajax()函数，除了可以发起真正的Ajax数据之外，还能够发起JSONP数据请求。
$.ajax({
url:'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
dataType:'jsonp',
success:function(res){
console.log(res);
}
})默认情况下使用jQuery发起JSONP请求会自动携带一个"callback=jQueryXXX"的参数，jQuery后边的参数是随机生成的一个回调函数名称。
如果想要自定义一个JSONP的参数以及回调函数名称，可以添加使用如下两个参数来指定：
jsonp:'callback',
jsonpCallback:'abc',
jQuery中的JSONP的实现过程
jQuery中的JSONP，也是通过<script>属性实现跨域数据访问的，只不过jQuery采用的是动态创建和移除<script>标签的方式，来发起JSONP数据请求。
1.在发起JSONP请求的时候，动态向<header>中的append一个<script>标签；
2.在JSONP请求成功以后，动态从<header>中移除刚才append进去的<script>标签
案例淘宝案例：
防抖和节流
输入框的防抖：防抖政策，当事件被触发后，延迟n秒后再执行回调，如果在这个n秒事件又被触发，则重新计时。
var timer = null；
function debounceSearch(keywords){
timer = setTimeout(function(){
getSuggestList(keywords);
},500)
}
$('#ipt').on('keyup',function(){
clearTimeout(timer);
debounceSearch(keywords);
})节流：指的是可以在一段时间内事件的触发频率。
$(function(){
var angel = $('#angel');
var timer = null;
$(document).on('mousemove',function(e){
if(timer){return}
timer = setTimeout(function(){
$(angel).css('left',e.pageX + 'px').css('top',e.pageY + 'px');
timer = null;
},50)
})
})HTTP协议简介
通信，就是信息的传递和输出，通信的双方必须遵循的网页内容传输协议。
网页内容又叫超文本，因此网页内容的传输协议又叫超文本传输协议（http）.
http传输的协议交互模型采取了请求/相应交互模型。
http客户端发起的请求叫http请求；客户端发送到服务器的消息叫：http请求消息。
（http请求消息又叫http请求报文）
http请求消息：请求行，请求头，空行和请求体组成。
（注意：只有POST请求才有请求体，GET请求没有请求体。）
http相应消息：由状态行，相应头部，空行和响应体组成。
http请求方法
属于HTTP协议中的一部分，请求方法的作用是：用来表明对服务器上的资源执行的操作。最常用的方法是GET、POST、PUT和DELETE。
HTTP相应状态码：属于HTTP协议的一部分，用来标识相应的状态。状态码由三个十进制数组成，第一个十进制数定义了状态码的类型，后连个数字决定了对状态码进行细分。
2**范围的状态码：200表示请求成功，一般用于GET和POST请求。
201表示已创建。
3**范围的状态码：301表示永久移动；302表示临时移动；304表示未修改。
4**范围的状态码：400表示语法有误或者请求参数有误；401表示当前用户需要验证；
403表示服务器已经理解请求，但拒绝执行；404表示服务器无法根据客户端的需求找到资源；408表示请求超时。
5**范围的状态码：500表示服务器内部错误；501表示服务器不支持请求该方法；503表示由于系统维护，服务器暂时的无法处理客服端的请求。
GIT：
使用版本控制软件的好处：1、操作简便 2、易于对比 3、易于回溯 4、不易丢失 5、协作方便
版本控制系统的分类：本地版本控制系统、集中化版本控制系统、分布式版本控制系统
一、本地控制系统：
1、单机运行，不支多人协作；
2、版本数据库故障后，所有历史更新会丢失；
二、集中式版本控制系统：基于服务器，客户端的运行模式；
1、不支持离线提交；
2、中心服务崩溃后，所有人无法工作；
3、版本数据故障后，数据丢失；
三、分布式版本控制系统：基于服务器，客户端的运行模式；
1、服务器保存文件所有更新版本；
2、客户端是服务器的完整备份，并不是保留文件最新版本；
优点：联网运行、支持多人协作开发；客户端断网后支持本地提交版本更新；服务器故障后，可使用任何一个客户端备份进行恢复；
Git是一个开源分布式版本控制系统，是目前最新进的系统。
Git之所以快速高效是因为：1、直接记录快照，而非差异比较；2、近乎所有操作都是本地执行；
传统的版本控制系统（SVN）：是基于差异的版本控制系统，它们存储的是一组基本文件和每个文件随时间逐步积累的差异。
好处：节省磁盘空间：
缺点：耗时，效率低；
Git的记录快照：在原有的基础上重新生成一个新的文件。类似于备份；
优点：版本切换速度快；
缺点：占用空间大；
Git中的三个区域：使用Git管理的项目，拥有三个区域：工作区、暂存区、Git仓库；
Git中三个状态：
一、已修改（modified）:表示修改了文件，但还没有把修改的结果放到暂存区；
二、已暂存（staged）:表示对已修改的文件的当前版本做了标记，使其包含在下次提交的列表中；
三、表示文件已经安全地保存到本地的Git仓库中；
基本的Git工作流程：1.在工作区中修改文件；2.将想要下次提交的文件进行暂存；3.提交更新，将快照永久性存储到Git仓库中；
Git的配置：配置用户名与邮箱地址：Git config --global user.name 和 Gi config --global user.email
配置完成后会被写入到本地磁盘用户文件的 /./dgitconfig文件中。
检查配置信息：
Git config --list --global：查看全局配置项；
Git config user.name:查看用户名；
Git config user.email：查看邮箱；
Git help<verb>打开帮助手册
获取Git仓库的两种方式：
1、将尚未进行版本控制的本地目录转换为Git仓库；
2、从其他服务器克隆一个已存在的Git仓库；
在现有的目录中初始化仓库：在项目目录中，通过鼠标右键打开“Git Bash”;执行Git init 命令将当前的目录转化为git仓库；
（注意：
）
Git工作区中的四种状态： 
检查文件的状态：
可以使用Git status命令查看文件处于什么状态：
可以使用简洁方式显示文件的状态：可以使用Git status -s或者Git status --short
Git跟踪新文件：
使用命令：git add开始跟踪一个文件。
此时运行git status命令查看文件状态，会看到：
也可以使用简洁方式：git status -s
新添加到暂存区的文件前边有绿色的A标记；
提交暂存：
提交成功后使用Git status命令查看文件状态:
对已提交的文件进行修改：
当我们对提交的文件进行修改，并使用Git status和git status -s命令时候，会看到如下内容：
文件出现在Changes not staged for commit这行下面，说明文件内容发生了变化，但未放入暂存区。
（注：修改过，但未放入暂存区的文件前边有红色M标记）
暂存已修改的文件：
1、可以用它开始跟踪新文件；
2、可以把已跟踪、且已修改的文件放到暂存区；（放入暂存区后会有绿色的M标志）；
此时再次运行git commit -m
3、把有冲突的文件标记为已解决状态
撤销对文件的修改：
指对工作区中文件的修改全部撤销，还原成Git仓库中保存的版本。此操作所有修改会丢失，且无法回复。
本质：用Git仓库中保存的文件，覆盖掉此时工作区的指定的文件。
Git向暂存区中添加多个文件：
Git add . 此命令一次性把所有的新增和修改过的文件加入暂存区。
取消暂存的文件：
若想要从暂存区中移除对应的文件，使用：Git reset HEAD "加上要移除文件名称"
Git reset HEAD . 移除暂存区中全部文件；
跳过使用暂存区：
Git的工作流程是：工作区--》暂存区---》Git仓库。
使用:git commit -a -m "描述信息"命令可以把所有已跟踪的文件直接暂存起来一并提交，跳过了Git add 添加到暂存区命令。
git——移除文件
方式一：从Git仓库和工作区同时移除相应的文件；Git rm -f index.js
方式二：只从Git仓库中移除指定文件，但保留工作区相应文件；git rm --cached index.css
Git——忽略文件
希望一些文件不总出现在跟踪列表和未跟踪列表，我们可以创建一个名为：.gittignore的配置文件。语法如下：
1、以 # 开头的是注释；
2、以 / 结尾的是目录；
3、以 / 开头的是防止递归；
4、以 ！开头表示取反；
5、可以使用glob模式进行文件和文件夹的匹配。（glob简化了正则表达式）
glob模式：星号（*）匹配零个或多个任意字符；
[abc]表示匹配任何一个列在方括号中的字符；
？问好表匹配一个任意字符；
在方括号中用短划线分隔的两个字符，表示所有在这两个字符范围内的都可以匹配。；
两个星号（**）表示匹配任意中间目录（a/**/z可以匹配a/z、a/b/z等）；
案例；
查看提交历史：
可以使用git log这个简答且有效的命令，按时间先后顺序列出所有的提交历史，最近的提交排在最上面。；
只展示最新的两条提交历史，数字可以按需进行填写：git log -2；
在一行上展示最近两条历史的信息：git log -2 --pretty=oneline；
在一行上展示最近两条提交的历史的信息，并自定义输出的格式：%h 提交的简写哈希值
%an作者名字；%ar作者修订日期按多久以前的方式显示；%s 提交的说明
回退到指定的版本：
在一行中展示所有的提交历史：git log --pretty=oneline
根据指定的提交ID回退到指定版本：git reset --hard <CommitID>
在旧版本使用 git reflog --pretty-oneline命令，查看命令操作的历史：git reflog --pretty-oneline
再次根据最新的提交ID跳转到最新版本：git reset --hard <CommitID>
github
常见的五种开源协议：BSD、Apache LIcence、GPL、LGPL、MIT
GPL：具有传染性的一种开源协议，不允许修改后和衍生的代码的作为闭源的商业软件发布和销售；使用此协议最著名的就是Linux。
MIT：是目前限制最少的协议，唯一的条件是：在修改后的代码或者发布包中，必须包含坐着的许可信息。
Github——远程仓库的使用
分贝时：HTTPS和SSH
HTTPS：零配置；但是每次访问仓库时，需要重复输入GitHub账号和密码才能访问成功；
SSH：需要进行额外的配置，但是配置成功后，每次访问时，不需要重新输入账号和密码；（推荐）
使用HTTPS方式将本地仓库上传到GitHub:
当第一次向远程仓库提交数据时，需要使用完整命令：
Git push -u origin master;
之后再提交时不用全写，只需写Git push
使用SSH方式访问远程仓库：
作用：实现本地仓库和Github之间的免登录的加密数据传输；
好处：免登录身份认证、数据加密传输。
SSH key 由两部分组成，分别是：
1、id_rsa（私匙文件，存放于客户端的电脑即可）
2、id_rsa.pub（公匙文件，需要配置到Github）
配置SSH key：
检测Github的SSH key 是否配置成功：
Git分支——本地分支操作
master主分支：
初始化GIt仓库时，Git默认给我们创建了一个名字叫master 的分支，通常我们把这个叫做主分支。
master的主要作用：用来保存和记录整个项目已完成的功能代码。因此我们不允许程序员直接在master上修改分支，因为这样做风险大。
功能分支：专门用来开发新功能的分支。
本地分支——查看分支列表：Git branch 命令
（注意：分之前会有一个'*'星号表示当前所有分支，唯一的）
本地分支——创建新分支：Git branch 分支名称
基于当前分支，创建一个新分支。此时当前用户所处的还是在原来分支上，（*）星号所在的分支不变。
Git本地分支——切换分支：Git checkout "分支名"
Git本地分支——快速创建和切换指定分支：git checkout -b "分支名"（-b表示创建一个新分支；checkout表示切换到此分支）
Git本地分支——合并分支：
步骤一：使用git checkout master 命令切换到主分支上；
步骤二：在master主分支上运行git merge "分支名"合并到master主分支上；
git本地分支——删除分支：git branch -d "分支名称"
（注意：删除时不能删除'*'标识的当前分支）
git branch -D "分支名称"：此命令删除的是未合并的分支。
git本地分支——遇到冲突时的合并分支:
首先把分支合并到主分支上：git checkout master；
合并分支：git merge reg；
git本地分支——将本地分支推送到远程仓库：
git push -u "远程仓库名称"（默认为origin） "本地分支名称"："远程分支重命名的名称"
如果是第一次推动需要写全部参数，之后只需要写git push命令就行；
如果希望远程仓库的名称和本地分支名称一样，可以对命令进行简化：
git push -u origin payment；
git本地分支——查看远程仓库中所有分支类别：git remote show "远程仓库名称"
Git分支——远程分支操作：
一、跟踪分支：从远程仓库中，把远程分支下载到本地仓库中。
命令为：git checkout "远程分支名"
实例：git checkout pay
从远程仓库中，把对应的远程分支下载到本地仓库中，并把下载的进行重命名：
git checkout -b "本地分支名称（重命名）" "远程仓库名称"/ "远程分支名称"
实例：git chechout -b master origin/pay
git分支——拉取远程分支最新代码：git pull
从远程仓库，拉取当前分支最新代码，保持当前分支代码和远程分支代码一致；在哪个分支上使用此代码，更新哪个分支。
git分支——删除远程分支：git push "远程仓库名称" --delete "远程分支名称"
实例；git push origin --delete pay
总结：
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
