前端第16天

最新推荐文章于 2024-11-04 17:05:06 发布

来地球玩啊

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量94

点赞数

文章标签：前端 javascript ajax

本文链接：https://blog.csdn.net/l_11789/article/details/129140482

版权

跨域与JSONP

一.了解同源策略和跨域

1.同源

如果两个页面的协议(http/https)，域口(www/blog)和端口(:80/:3006/…)都相同，则两个页面具有相同的源，叫做同源

同源策略

是浏览器提供的一个安全功能，浏览器规定。A网站的JavaScript，不允许和非同源的网站C之间，进行资源的交互，例如：

1.无法读取非同源网页的Cookie、LocalStorage和IndexedDB

2.无法接触非同源网页的DOM

3.无法向非同源地址发送Ajax请求

2.跨域

如果两个页面的协议(http/https)，域口(www/blog)和端口(:80/:3006/…)总不满足一个就是跨域，与同源是对立面。

浏览器对跨域请求的拦截

浏览器允许发起跨域请求，但是跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！

如何实现跨域数据请求

有两种方案：JSONP和CORS

JSONP：出现的早、兼容性好（兼容低版本的IE），是前端程序员被迫设计出来的一种临时解决方案。但是只能发送GET请求，不支持POST请求！

CORS：出现的晚，是W3C标准，跨域Ajax请求的根本解决方案，支持GET和POST请求，缺点不兼容低版本浏览器！

二.JSONP

1.概述

JSONP是JSON的一种”使用模式“，可用于解决主流浏览器的跨域数据访问问题

2.JSONP实现原理

由于浏览器同源策略的限制，网页总无法通过Ajax请求非同源的接口数据。但是

3.缺点

JSONP只支持GET请求，不支持POST请求！！！

JSONP和Ajax之间没有任何关系，JSONP没有用到XMLHttpRequest对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现简单的JSONP数据请求</title>
</head>

<body>
    <script>
        //ajax请求不通过 
        $.ajax({
            method: 'GET',
            //No 'Access-Control-Allow-Origin' header is present on the requested resource.
            //出现跨域
            url: 'http://www.liulongbin.top:3006/api/jsonp',
            data: {
                name: 'zs',
                age: 20
            },
            success: function(res) {
                console.log(res);
            }
        })
        //JSONP请求
        function tyx(data) {
            console.log('JSONP响应回来的数据');
            console.log(data);
        }
    </script>
    
    <script src="http://www.liulongbin.top:3006/api/jsonp?callback=tyx&name=ls&age=30">
    	//保证callback中的函数名和上面的一样！
    </script>
</body>

</html>

4.jQuery中发起JSONP请求

jQuery提供的$.ajax()函数，除了可以发起真正的Ajax数据请求之外，还能发起JSONP数据请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery中JSONP</title>
    <script src="./lib/jquery.min.js"></script>
</head>

<body>
    <script>
        $(function() {
            //发起JSONP请求
            $.ajax({
                //这个值必须是JSONP
                dataType: 'JSONP',
                url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
                success: function(res) {
                    console.log(res);
                }
            });
            //在jQuery中发起JSONP请求时，会自动携带一个callback函数=jQuery....的参数，
            //jQuery....是随机生成的的回调函数名称
        })
    </script>
</body>

</html>

5.jQuery中自定义参数及回调函数名称

在使用jQuery发起JSONP请求时，想要自定义JSONP的参数以及回调函数，可以通过两个参数(jsonp和jsonpCallback)来自定义！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery中自定义参数及回调函数名称</title>
</head>

<body>
    <script>
        $(function() {
            //发起JSONP请求
            $.ajax({
                //dataType 这个值必须是JSONP
                dataType: 'JSONP', 
                //会把默认的callback名字改为cb 一般不会改！！
                jsonp:'cb', 
                //会把回调函数的名称改为abc 默认值为jQuery....
                jsonpCallback:'abc', 
                url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
                success: function(res) {
                    console.log(res);
                }
            });
        })
    </script>
</body>

</html>

6.jQuery中JSONP的实现过程

也是通过script标签中的src属性来实现的，只不过jQuery是通过动态创建和删除script标签的方式，来发起JSONP数据请求。

在发起JSONP请求的时候，动态向header中append一个script标签

在JSONP请求成功后，动态的从header中删除刚才添加进去的script标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery中JSONP的实现过程</title>
    <script src="lib/jquery.min.js"></script>
</head>

<body>
    <button id="btnJSONP">发送JSONP数据请求</button>
    <script>
        $(function() {
            $('#btnJSONP').on('click', function() {
                $.ajax({
                    url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
                    dataType: 'JSONP',
                    jsonpCallback: 'abc',
                    success: function(res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>
</body>

</html>

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

三.案例-淘宝搜索

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

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入页面的基本样式 -->
    <link rel="stylesheet" href="./css/search.css" />
    <!-- 导入 jQuery -->
    <script src="./lib/jquery.min.js"></script>
    <!-- 导入模板引擎 -->
    <script src="./lib/template-web.js"></script>
</head>

<body>
    <div class="container">
        <!-- Logo -->
        <img src="./images/1.jpg" alt="" class="logo" />

        <div class="box">
            <!-- tab 栏 -->
            <div class="tabs">
                <div class="tab-active">宝贝</div>
                <div>店铺</div>
            </div>
            <!-- 搜索区域（搜索框和搜索按钮） -->
            <div class="search-box">
                <input id="ipt" type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">
          搜索
        </button>
            </div>
            <!-- 搜索建议列表 -->
            <div id="suggest-list"></div>
        </div>
    </div>


    <!-- 模板结构 -->
    <script type="text/html" id="tpl-suggextList">
        {{each result}}
        <!-- 搜索建议项 -->
        <div class="suggest-item">{{$value[0]}}</div>
        {{/each}}
    </script>

    <script>
        $(function() {
            //实现输入框防抖
            //定义延时器的id
            var timer = null;

            //缓存实现
            var cacheObj = {};

            //定义防抖函数
            function debounceSearch(kw) {
                timer = setTimeout(function() {
                    getSuggestList(kw);
                }, 500)
            }
  

            //绑定keyup事件
            $('#ipt').on('keyup', function() {
                //3.清空timer 
                clearTimeout(timer)
                var keywords = $(this).val().trim()
                if (keywords.length <= 0) {
                    return $('#suggest-list').empty().hide()
                }

                //判断缓存里有没有数据
                if(cacheObj[keywords]){
                    return renderSuggedtList(cacheObj[keywords])
                }

                //TODO:获取搜索建议列表
                // console.log(keywords);
                debounceSearch(keywords);
            });

            //得到淘宝提示搜索项列表
            function getSuggestList(kw) {
                $.ajax({
                    url: 'http://suggest.taobao.com/sug?q=' + kw,
                    dataType: 'JSONP',
                    success: function(res) {
                        console.log(res);
                        renderSuggedtList(res);
                    }
                })
            }

            //渲染列表建议
            function renderSuggedtList(res) {
                if (res.result.length <= 0) {
                    return $('#suggest-list').empty().hide()
                }
                var html = template('tpl-suggextList', res);
                $('#suggest-list').html(html).show();

                //将搜索结果保存到缓存对象中
                var key = $('#ipt').vai().item()
                cacheObj[key] = res
            }


        })
    </script>
</body>

</html>

四.防抖和节流

1.防抖概述

防抖策略是当事件被触发后，延迟n秒后在执行回调，如果在这n秒内事件又被触发，则重新计时。能够保证频繁触发某些事件的时候，不会频繁的执行回调，保证回调只执行一次！提高浏览器的性能。

防抖的应用场景

用户在输入框中连续输入一串字符串时，可以通过防抖策略，只在输入完后，才执行查询请求，这样可以有效减少请求次数，缓解浏览器的压力，节约请求资源。（淘宝案例里面有）

2.节流概述

减少一段时间内事件的触发频率

节流的应用场景

1.鼠标连续不断地触发某个事件（如点击），只在单位时间内只触发一次

2.懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算频率，而不必浪费cpu资源

节流阀

如果节流阀为空表示可以执行下次操作；不为空，表示不能执行下一次操作。当操作执行完毕，必须将节流阀设置为空，表示可以执行下一次操作了。每次执行操作前要判断节流阀是否为空！

节流案例-鼠标跟随效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流案例-鼠标跟随效果</title>
    <script src="lib/jquery.min.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        #yelan {
            position: absolute;
            width: 150px;
        }
    </style>
</head>

<body>
    <img src="./夜兰.jpg" alt="" id="yelan">
    <script>
        $(function() {
            //获取当前图片
            var yelan = $('#yelan');
            //1.定义节流阀
            var timer = null;

            //绑定mousemove事件
            $(document).on('mousemove', function(e) {
                //3.判断timer是否为空
                if (timer != null) {
                    return
                }
                //2.开启延时器 改变timer的值
                timer = setTimeout(function() {
                    //给图片设置位置
                    yelan.css('top', e.pageY + 'px');
                    yelan.css('left', e.pageX + 'px');
                    //执行完timer设置为null
                    timer = null;
                }, 16)
            })
        })
    </script>
</body>

</html>

总结

防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效！前面多次的触发都会被忽略

节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择地执行一部分事件

HTTP协议加强

一.HTTP协议简介

1.通信

信息的传递和交换

三要素：主体是服务器和客户端浏览器，通信的内容，通信的方式

2.通信协议

客户端和服务器之间要实现网页内容传输时，通信双方必须遵守的规定和约定。

网页内容叫超文本，因此网页内容的传输协议又叫做超文本传输协议，简称HTTP协议。

3.HTTP协议

规定了客户端和服务器之间进行内容传输时，必须遵守的传输格式。

客户端要以HTTP协议要求的格式把数据提交到服务器

服务器要以HTTP协议要求的格式把内容响应给客户端

HTTP协议交互模型

采用了请求/响应的交互模型，一次请求一次响应

二.HTTP请求消息

由于HTTP协议属于客户端浏览器和服务器之间的通信协议。因此，哭护短发起请求叫做HTTP请求，客户端发送到服务器的消息，叫做HTTP请求消息。

HTTP请求消息组成部分：由请求行、请求头部、空行和请求体4个部分组成。

1.请求行

由请求方式、URL、和HTTP协议版本3个部分组成，他们之间使用空格隔开

2.请求头部

请求头部用来描述客户端的基本信息，从而把客户端相关的信息告诉服务器。

头部字段	说明
Host	要请求的服务器域名
Connection	客户端与服务器的连接方式
Content-Length	用来描述请求体的大小
User-Agrent*	表示当前是什么浏览器
Content-Type*	表示发送到服务器以什么格式
Accept*	用来描述客户端能够接受什么类型的返回内容
Accept-Encoding	客户端接受的内容压缩编码形式
Accept-Language*	用来描述客户端希望接受那种人类语言的文本内容

请求头部由多行键/值对组成，每行的键和值之间用英文的冒号分隔

3.空行

最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束

请求消息中的空行，用来分隔请求头部和请求体。

4.请求体

请求体中存放的是通过POST方式提交到服务器的数据

只有POST请求才有请求体，GET请求没有请求体！

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

三.HTTP响应消息

响应消息就是服务器响应给客户端的消息内容，也叫响应报文

由（响应）状态行、响应头部、空行、响应体4个部分组成

1.状态行

由HTTP协议版本、响应状态码和状态码描述文本3各部分组成，他们之间用空格隔开

2.响应头部

用来描述服务器的基本信息。响应头部由多行键值对组成的，每行的键和值之间用英文冒号分隔开

。。。有很多常见的响应头部的字段没写

3.空行

在最后一个响应头部字段结束后，会紧跟一个空行，用来通知客户端响应头部到此结束，响应消息中的空行，用来分割响应头部和响应体

4.响应体

在响应体中存放的是服务器响应给客户端的资源内容，GET和POST都有！

总结

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

四.HTTP请求方法

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

1.HTTP的请求方式

一共有9种

方法	描述
GET	(查询)发送服务器来获得服务器上的资源，请求体种不会包含请求数据，请求数据放在协议头上
POST	(新增)向服务器提交资源，表单上传或文件上传。数据被包含在请求体中提交给服务器
PUT	(修改)向服务器提交资源，并使用提交的新资源，替换掉服务器对应的旧资源
DELETE	(删除)请求服务器删除指定的资源
HEAD	HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体
OPTIONS	获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如Ajax跨域时的预检
CONNECT	建立一个到由目标资源标识的服务器隧道
TRACE	沿着到目标资源的路径执行一个消息的回环测试，主要用于测试与诊断
PATCH	是对PUT方法的补充，用来对已知资源进行局部更新

五.HTTP响应状态代码

也是HTTP协议的一部分，用来标识响应的状态。响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就知道这次HTTP请求的结果是成功还是失败。

HTTP状态码由三位十进制数字组成，第一个数字定义了状态码类型，后两个数字用来对状态码进行细分

HTTP状态码的五种分类

分类	描述
1**	信息，服务器收到请求，需要请求者继续执行操作（很少用到）
2**	成功，操作被成功接受并处理
3**	重定向，需要进一步操作完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

2**成功相关的响应状态码

表示服务器已经成功接受到请求并进行处理

状态码	状态码英文名称	中文描述
200	OK	请求成功。一般用于GET或POST请求
201	Created	已创建。请求成功并创建了一个新资源，通常用于POST或PUT请求

3**重定向相关的响应状态码

服务器要求客户端进行重定向，要求客户端进一步的操作以完成资源的请求

状态码	状态码英文名称	中文描述
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新URL，返回信息会包括新的URL，浏览器会自动定向到新URL。今后任何新的请求都会使用新的URL代替
302	Found	临时移动，于301类似，但资源只是临时被移动。客户端应继续使用原来的URL
303	Not Modidied	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源（响应消息中不包含响应体）。客户端通常会缓存访问过的资源

4**客户端错误相关的响应状态码

客户端中含有非法内容，从而导致请求失败

状态码	状态码英文名称	中文描述
400	Bad Request	语义有误，服务器不理解请求的语法。请求参数有误
401	Unauthorized	请求要求身份验证。对于需要登录的网页，服务器可能返回此响应
403	Foribidden	（禁止）服务器拒绝请求
404*	Not Found	（未找到）服务器找不到请求的网页资源
408	Request Timeout	（请求超时）服务器等候请求时发生超时

5**服务器错误相关的响应状态码

服务器未能正常处理客户端的请求而出现的意外错误

状态码	状态码英文名称	中文描述
500	Internal Server Error	服务器遇到错误，无法完成请求。
501	Not Implemented	服务器不支持该请求方法，无法完成请求。只有GET和HEAD请求方法是要求每个服务器必须支持的，其他请求方法在不支持的服务器上可能会返回此代码501。
503	Service Unavailable	（服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

GIT

起步

1.版本控制软件/系统概述

控制文件版本，操作简便、易于对比、易于回溯、不易丢失、协作方便

2.版本控制系统的分类

本地版本控制系统

单机运行，使维护文件版本的操作工具化。很少使用

集中化的版本控制系统—SVN

联网运行，支持多人协作开发；性能差，用户体验不好。基于服务器客户端的运行模式，在客户端只保留最新的文件。

不支持离线版本更新，中心服务器太关键了。典型代表SVN，现在不满足需求了

分布式版本控制系统—Git

基于服务器、客户端的运行模式，服务器保存文件的所有更新版本，客户端是服务器的完整备份，并不是只保留最新版本

联网运行，支持多人协作开发；性能优秀，用户体验好；断网以后支持离线本地版本更新；服务器发生故障或者损坏后，可使用任何一个客户端的备份进行恢复。

一.GIT基础

1.概述

是一个开源的分布式版本控制系统。项目越大越复杂，越能体现Git的高性能和高可用！

2.两个特性

①直接记录快照，而非差异比较

差异比较：原理就是原始文件+差异=最新的版本。优点就是节省磁盘空间，缺点是耗时、效率低

记录快照：在原有文件版本基础上重新生成一个新文件，类似备份。如果文件没有修改Git不会再重新存储该文件，而是保留一个链接指向之前的储存文件。缺点占用磁盘空间较大，优点：版本切换时非常快，空间换时间

②近乎所有操作都是本地执行

在Git中的绝大部分操作都只需要访问本地文件和资源，一般不需要来自网络上其他计算机信息。

断网之后还可以在本地对项目进行版本管理；联网后，把本地修改的记录同步到云端服务器即可

3.Git中的三个区域

工作区(处理工作的区域)

暂存区(已完成的工作的临时存放区，等待被提交)

Git仓库(最终的存放区)。

4.Git三种状态

已修改modified：表示修改了文件，但是还没将修改的结果放到暂存区

已暂存staged：表示对已修改文件的当前版本做了标记，使它包含在下次提交的列表中，把文件放到了暂存区

已提交committed：表示文件已经完全的保存在Git仓库中

PS：如果文件被修改，但是还没有放到暂存区，就是已修改状态。如果文件已修改并放入暂存区，就属于已暂存状态。如果Git仓库中保存着特定版本的文件，就属于已提交的状态。

5.基本的Git工作流程

第一步：在工作区中修改文件

第二步：将下次提交的更改暂存

第三步：提交更新，找到暂存区的文件，将快照永久性存储到Git仓库

6.Git的基本操作

1.配置用户信息

$ git config --global user.email “3140357276@qq.com” 配置邮箱

$ git config --global user.那么 “tyx” 配置用户名

PS：使用–global选项，那么该命令只需要运行一次，即可以永久生效。

2.Git全局配置文件

“C:\Users\t-y-x.gitconfig”。这个就是配置完成的文件

检查全局配置项

$ git config --list --global

检查指定全局配置

$ git config user.名称

3.获取帮助信息

$ git help config：打开config对应帮助手册

$ git config -h：-h选项获得更简明的帮助输出

4.获取Git仓库的两种方式

方式一：将尚未进行版本控制的本地目录转换为Git仓库

进入到项目的根目录中，鼠标右键打开Git Bash，执行git init命令将当前的目录转化为Git仓库。

PS：git init命令会创建一个名为.git的隐藏目录，这个.git就是Git仓库，包含了初始的必要文件是创建Git仓库的必要组成部分。

方式二：从其他服务器克隆一个已存在的Git仓库

git clone 远程仓库地址

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

5.工作区中文价的4种状态

工作区的文件可能有4种状态，分为两大类

第一类：未被Git管理：

未跟踪 untracked files（不知道这个文件的存在，新建的文件…）

第二类也被Git管理：

未修改（工作区文件内容和git仓库种一致）

已修改（工作区文件内容与git仓库文件内容不一致）

已暂存 Changes to be committed（工作区种被修改的文件放入暂存区，准备将文件保存到git仓库里去）

Git操作的最终结果就是让工作区的文件都处于“未修改”的状态

检查文件的状态

git status：查看文件处于什么状态

git status -s/–short：（简写形式）查看文件的状态，未跟踪的文件前面有红色的？？标记！

跟踪新建文件

git add 文件名：文件会变成已暂存 Changes to be committed状态，说明文件被跟踪，文件前面会有绿色的A标记

提交更新

git commit -m “文件备注信息”：提交文件，把文件变成未修改的状态

对已提交的文件进行修改

如果文件被Git跟踪，并且工作区和Git仓库种该文件的内容一致。当我们修改了该文件后，使用git status命令查看该文件处出现下面的状况，说明文件内容发生了变化，但还没有放到暂存区。使用git status -s查看文件前面会有一个红色的M。

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

暂存已修改的文件

再次执行git add 文件名命令，这个命令有三个功能：

1.可以用它跟踪新建文件，

2.可以把已跟踪的、且修改的文件放到暂存区中

3.把有冲突的文件标记为已解决的状态

撤销对文件的修改

git checkout – 文件名

ps：–两边有空格！

把工作区中文件的修改，还原成Git仓库里面的版本。不可逆！本质就是用Git仓库中的内容，替换掉工作区中对应文件的内容！

向暂存区域一次性添加和提交多个文件

git add . 可以实现

取消已暂存的文件

git reset HEAD 要移除的文件名：取消指定文件

git reset HEAD . ：移除全部

跳过使用暂存区

直接工作区到 Git仓库

get commit -a -m “描述信息”

移除文件

方式一：从git仓库中和工作区同时移除对应文件

git rm -f 文件名

方式二：只从git仓库中移除指定文件，保留工作区中对应的文件

git rm --cached 文件名

忽略文件.gitignore

一些文件无须纳入Git管理，不希望它出现在跟踪文件列表中。在这种情况下，我们可以创建一个名为.gitignore的配置文件，列出要忽略的文件的匹配模式。规范如下：

以#开头是注释

以/结尾的是目录

以/开头的是防止递归

以!开头表示取反

可以使用glob模式进行文件和文件夹匹配

.gitignore例子

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

glob模式

指简化的正则表达式

*匹配零个或者多个任意字符

[abc] 匹配任何一个列在方括号中的字符

?只匹配一个任意字符

在方括号中使用短划线分割两个字符，表示所有在这两个字符范围内的都可以匹配(例如[0-9] 匹配所有0到9的数字)

两个星号** 表示匹配任意中间目录（例a/**/z可以匹配a/z,a/b/z或a/b/c/z）

查看整个提交历史

按键q退出

git log：按照时间顺序列出所有提交李四，最近的提交在最上面

git log -2：只展示最近两条提交历史数据

git log -2 --pretty=oneline：在一行上展示提交的历史信息

git reflog --protty=oneline：在旧版本中使用！！！查看命令操作历史

回退/前进到指定版本

git reset --hard 唯一ID值：根据提交的id值回退到指定版本

6.小结

初始化Git仓库命令

git init

查看文件状态的命令

git status 或 git status -s

一次性将文件加入暂存区的命令

git add .

将暂存区的文件提交到Git仓库中的命令

git commit -m “备注的信息”

二.Github

1.开源

代码公开，不仅提供程序还提供源代码

开源协议

为了限制使用者的适用范围和保护作者的权力，每个开源项目都应该遵守开源协议

常见的五种开源协议

BSD

Apache

GPL：强制开源，具有传染性的一种开源协议，不允许修改后和衍生代码做比原的商业软件发布和销售。著名的软件就是Linux

LGPL

MIT：目前限制最少的协议，唯一条件就是再修改后的代码或者发行包中，必须包含原作者的信息。例如：jquery、Node.js

开源项目托管平台

Github、Gitlab和Gitee代码只能托管以Git管理的项目源代码

2.Github概述

一个只能托管Git项目的网站！

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

3.远程仓库的两种访问方式

Github上的远程仓库有两种访问方式分别是HTTPS和SSH

HTTPS：零配置；但是每次访问仓库时，需要重复输入Github账号密码才能访问成功

SSH：需要额外的配置；配置成功过后，每次访问仓库时，不用重复输入Github账号和密码。推荐使用这个

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

git push：本地文件修改后，第二次提交到Github上用这个方法

通过SSH访问（用这个方法！！！！！！）

Git Bash中输入这个：$ ssh-keygen -t rsa -b 4096 -C “3140357276@qq.com”，按三次回车；再到github中的SSH复制到github上（完成）

在输入$ ssh -T git@github.com这个命令

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

成功！！

三.Git分支

1.概述

在进行多人协作开发的时候，为了防止相互干扰，提高协同开发的体验，每个开发者都要基于分子进行项目功能开发

main主分支

在初始化Git仓库的时候。Git会帮我们创建一个叫mian的分支，我们称这个main分支叫做主分支！

主要作用是用来记录整个项目已完成的功能代码，不要在main分支上修改代码

功能分支

指专门用来开发新功能的分支，临时从master主分支上分叉出来的，开发测试完成后，最终会合并到main主分支上

2.分支的操作

查看分支列表

git branch：查看所有分支，前面的*代表当前所处分支

创建一个新分支

git branch 分支名称：基于当前的分支创建一个新的分支。完全等于主分支代码，创建完还是处于主分支上的

切换分支

git checkout 分支的名称

分支的快速创建与切换

创建指定名称的新分支，并且直接切换到分支上

git checkout -b 分支名称

ps：分支名称用英文名，要在主分支上创建新分支

合并分支

第一步：先切换到主分支上：git checkout main

第二步：在主分支上输入这个命令合并分支：git merge 要合并的分支名

删除分支

git branch -d 分支名称：删除指定的分支名，不能处于要删除的分支上

遇到冲突时的分支合并

如果在不同的分支中，对同一个文件进行了不同的修改，git就没法干净的合并他们。此时需要打开这些包含冲突的文件然后手动解决。解决之后执行：git add . 和 git commit -m “”。就可以合并提交了！

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

git push -u 远程仓库的别名分支名:上传后的分支名：远程仓库的别名默认是origin，也可以不重命名上传分支。只有第一次上传才用输入-u，第二次上传不用输入-u，直接使用git push就能提交。

查看远程仓库的所有分支列表

git remote show 远程仓库名称(origin)

跟踪分支

从远程仓库中，把远程分支下载到本地仓库中。用这个命令：git checkout 远程分支名称

重命名时的命令：git checkout -b 本地分支的名字远程仓库名称/远程分支名称

拉取远程分支的最新代码

git pull：保持当前分支代码和远程分支代码一致，在那个分支上运行这个命令就会拉取到对应的分支！

删除远程仓库的分支

git push 远程仓库名称(origin) --delete 远程分支名称

Git总结

2.分支的操作

查看分支列表

git branch：查看所有分支，前面的*代表当前所处分支

创建一个新分支

git branch 分支名称：基于当前的分支创建一个新的分支。完全等于主分支代码，创建完还是处于主分支上的

切换分支

git checkout 分支的名称

分支的快速创建与切换

创建指定名称的新分支，并且直接切换到分支上

git checkout -b 分支名称

ps：分支名称用英文名，要在主分支上创建新分支

合并分支

第一步：先切换到主分支上：git checkout main

第二步：在主分支上输入这个命令合并分支：git merge 要合并的分支名

删除分支

git branch -d 分支名称：删除指定的分支名，不能处于要删除的分支上

遇到冲突时的分支合并

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

查看远程仓库的所有分支列表

git remote show 远程仓库名称(origin)

跟踪分支

从远程仓库中，把远程分支下载到本地仓库中。用这个命令：git checkout 远程分支名称

重命名时的命令：git checkout -b 本地分支的名字远程仓库名称/远程分支名称

拉取远程分支的最新代码

git pull：保持当前分支代码和远程分支代码一致，在那个分支上运行这个命令就会拉取到对应的分支！

删除远程仓库的分支

git push 远程仓库名称(origin) --delete 远程分支名称

Git总结

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

来地球玩啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫