[toc]

Git工作区域

git工作区域切换

image-20230514210822401

文件状态

image-20230514210855185

1
2
3
4
Untracked      # 没有被管理
Staged         # 通过git add放入暂存区
Unmodified     # 没有被修改的状态
Modified       # 文件被修改了

分支切换及合并示例

需求一

老板：给我写一个官网
程序猿：花了一天一夜，做出来了，请老板过目

编写代码

  • html代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # vim index.html
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>代码迭代过程-曾老湿</title>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<div id="demo">澳门皇家DC</div>
    	<div id="demo2"></div>
    	<script src="main.js"></script>
    </body>
    </html>

  • css代码

    1
    2
    3
    4
    # vim style.css
    #demo2{
    	margin-top: 50px;
    }

  • js代码

    1
    2
    3
    4
    5
    6
    7
    8
    # vim main.js
    const string = '官网内容：澳门首家线上DC，性感荷官在线发牌，快来注册吧.'
    let n = 1
    demo2.innerHTML = string.substring(0,n)
    setInterval(()=>{
    	n+=1
    	demo2.innerHTML = string.substring(0,n)
    },200)

git操作

1
2
3
4
5
6
7
8
9
10
11
# 添加到暂存区
git add .

# 查看状态
git status

# 放入版本库
git commit -m '新官网

# 代码上线
scp ./* 10.0.0.7:/code/web

image-20230514211516133

需求二

老板：有点丑，我希望背景颜色是yellow，醒目一些。
老板秘书：我觉得不错，要是字体能做彩色的就好了。
程序猿：MMP，你们的意见就不能统一一下么？

用git 分支功能

  • 老板的需求：黄色背景

    • 分支操作

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      # 创建ceo分支
      git branch ceo_branch

      # 查看分支(星星在哪里就是代表你在哪里)
      git branch
        ceo_branch
      * master

      # 切换到ceo分支
      git checkout ceo_branch

    • 修改代码

      • html文件

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        # vim index.html
        <!DOCTYPE html>
        <html lang="zh">
        <head>
        	<meta charset="UTF-8">
        	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        	<title>代码迭代过程-曾老湿</title>
        	<link rel="stylesheet" href="style.css">
        </head>
        <body>
        	<div id="demo">澳门皇家DC</div>
        	<div id="demo2"></div>
        	<script src="main.js"></script>
        </body>
        </html>

      • css代码

        1
        2
        3
        4
        5
        6
        7
        # vim style.css
        body{
        	background-color: yellow;
        }
        demo2{
        	margin-top: 50px;
        }

      • js代码

        1
        2
        3
        4
        5
        6
        7
        8
        # vim main.js
        const string = '官网内容：澳门首家线上DC，性感荷官在线发牌，快来注册吧.'
        let n = 1
        demo2.innerHTML = string.substring(0,n)
        setInterval(()=>{
        	n+=1
        	demo2.innerHTML = string.substring(0,n)
        },200)

    • git管理

      1
      2
      3
      4
      5
      6
      7
      8
      # 添加暂存区
      git add .

      # 添加到版本库
      git commit -m '新官网v1.2(背景为黄色)'

      # 代码上线
      scp ./* 10.0.0.7:/code/web

      image-20230514212615132

  • 秘书的需求：彩色字体

    • 分支操作

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      # 创建秘书分支
      git branch ms_branch

      # 切换到秘书分支
      git checkout ms_branch

      # 查看分支(星星在哪里就是代表你在哪里)
      git branch
        ceo_branch
        master
      * ms_branch

    • 修改代码

      • css代码

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        # vim styles.css
        #demo2{
        	margin-top: 50px;
        }
        #demo2{
        	margin-top: 50px;
        }
        #demo,#demo2 {
        	display: block;
        	/*渐变背景*/
        	background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%,
        #d71345 20%, #f7acbc 30%,
        	#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%,
        #3498db);
        	color: transparent; /*文字填充色为透明*/
        	-webkit-text-fill-color: transparent;
        	-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
        	background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样
        background-position才有移动与变化的空间*/
        	/* 动画 */
        	animation: masked-animation 4s infinite linear;
        }
        @keyframes masked-animation {
        	0% {
        		background-position: 0 0; /*background-position 属性设置背景图像的起始位
        置。*/
        	}
        	100% {
        		background-position: -100% 0;
        	}
        }

    • git管理

      1
      2
      3
      4
      5
      6
      7
      8
      # 添加暂存区
      git add .

      # 提交代码
      git commit -m "新官网v1.3（字体为彩色）"

      # 代码上线
      scp ./* 10.0.0.7:/code/web

      image-20230514212946266

  • 合并分支

    • 明确保留哪个分支

      • 主分支

    • 分支合并

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      # 查看当前所在分支
      git branch
        ceo_branch
        master
      * ms_branch

      # 切换到主分支
      git checkout master

      # 查看当前分支
      git branch
        ceo_branch
      * master
        ms_branch

      # 合并老板分支，先进入master再把老板的分支合并到master
      git merge ceo_branch

      # 合并秘书
      git merge ms_branch

    • 分支合并报错

      image-20230514213247199

      • 输入:wq忽略并跳过错误

    • 上线

      1
      2
      3
      4
      5
      # 查看状态
      git status

      # 代码上线
      scp ./* 10.0.0.7:/code/web

      image-20230514213457970

分支划分图示

image-20230514214141553

image-20230514214148829

image-20230514214154351

image-20230514214200187

图形化git版本控制软件

https://www.gitkraken.com/
不过这里要强调的是，6.5.1版本之后是要收费的，所以我们用6.5.1就行。
个人站点下载地址(Windows版)：TP
个人站点下载地址(Mac版)：TP

Git标签创建

1
2
3
4
5
# 打标签
git tag -a 'v1.3' -m '新官网v1.3（字体为彩色）'

# 推送标签
git push origin master --tags