# 🥗flex布局
### flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）。
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。

```css

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

```



![image.png](/static/img/fb8944d6211232f7cb54bc3853898860.image.webp)

### flex-wrap
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

![image.png](/static/img/f422289dd63dd23420b5750782189c65.image.webp)

```css
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
```
它可能取三个值。

（1）nowrap（默认）：不换行。

![image.png](/static/img/b8b0e00f00a37183df9f170742688e47.image.webp)


（2）wrap：换行，第一行在上方。


![image.png](/static/img/d0e54a1386e1484372f52fb705d15ffa.image.webp)

（3）wrap-reverse：换行，第一行在下方。

![image.png](/static/img/84aa9500e6bd109f057f23bddb12ac15.image.webp)

### flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

```css
.box {
  flex-flow: <flex-direction> <flex-wrap>;
}
```
### justify-content
justify-content属性定义了项目在主轴上的对齐方式。

```css
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
```
![image.png](/static/img/d9a6eceaac44bbd8838a35e1ba96c6d7.image.webp)

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

### align-items
align-items属性定义项目在交叉轴上如何对齐。

```css
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
```

![image.png](/static/img/7ef66943c640b94ce29ed3d7c649083e.image.webp)

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

### align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

```css
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
```

![image.png](/static/img/ae2efcca1d8ef59a06877e34ee2f05ac.image.webp)

该属性可能取6个值。

- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。

常用flex布局写法

:::tip{title="💡实现"}
GSAP动画的封装，实现页面元素自动瀑布流切入切出且可以自定义切入切出方向及动画时间延时
:::

## 规则
- paused 时间线开始不自动执行
- ease 动画规则  "power4.in", // 先慢后快  "power2.inOut", // 先快后慢
- opacity 不透明度
- duration 所需时间
- , "<0.5" 后缀添加意义为上一动画后0.5秒运行
- , "<" 后缀添加意义为与上一动画同时运行
## 代码



```
//面板动画 - 切出
gsap.registerEffect({
    name: "panelEffectOut",
    effect: (targets, config) => {

        // 定义一个时间线来串联两个动画
        let tl = gsap.timeline();
        if (config.mode == "in") {
            
            if (config.direction == "left" || config.direction == "right") {

                //默认左方向
                let x1 = 100;
                let x2 = 0
                if (config.direction == "right") {
                    //右方向
                    x1 = -100;
                    x2 = 0
                }

                // 第一步动画
                tl.to(targets, {
                    x: x1,
                    opacity: 0.5,
                    duration: 0.8
                });

                // 第二步动画
                tl.to(targets, {
                    x: x2,
                    opacity: 1,
                    duration: 1
                });

            } else {

                //默认上方向
                let y1 = 100;
                let y2 = 0
                if (config.direction == "bottom") {
                    //右方向
                    y1 = -100;
                    y2 = 0
                }

                // // 第一步动画
                // tl.to(targets, {
                //     y: y1,
                //     opacity: 0.5,
                //     duration: 0.5
                // });

                // 第二步动画
                tl.to(targets, {
                    y: y2,
                    opacity: 1,
                    duration: 0.8
                });

            }
        } else {

            if (config.direction == "left" || config.direction == "right") {

                //默认左方向
                let x1 = 100;
                let x2 = -700
                if (config.direction == "right") {
                    //右方向
                    x1 = -100;
                    x2 = 700
                }

                // 第一步动画
                tl.to(targets, {
                    x: x1,
                    opacity: 0.5,
                    duration: 0.4
                });

                // 第二步动画
                tl.to(targets, {
                    x: x2,
                    opacity: 0,
                    duration: 1
                });

            } else {

                //默认上方向
                let y1 = 100;
                let y2 = -700
                if (config.direction == "bottom") {
                    //右方向
                    y1 = -100;
                    y2 = 700
                }

                // 第一步动画
                tl.to(targets, {
                    y: y1,
                    opacity: 0.5,
                    duration: 0.4
                });

                // 第二步动画
                tl.to(targets, {
                    y: y2,
                    opacity: 0,
                    duration: 1
                });

            }
        }

        return tl;


    },
    extendTimeline: true // 允许在 GSAP 时间线上直接调用这个效果
});

//元素动画 -元素切入
gsap.registerEffect({
    name: "elementsEffect",
    effect: (targets, config) => {
        // console.log("🚀元素切入 ~ targets, config:", targets, config)
        

        // 创建时间线以添加延迟
        let tl = gsap.timeline();

        // 使用 .forEach 遍历每个目标元素
        targets.forEach(target => {
            let delay = 0;
            let direction = "";

            // 从类名中提取延迟时间
            const classList = target.classList;
            classList.forEach(className => {
                const match = className.match(/hl-effect-(left|right|top|bottom)-(\d+)/);
                if (match != null) {
                    direction = match[1]
                    delay = parseInt(match[2], 10) / 1000; // 将毫秒转换为秒
                }
            });

            // 根据方向设置初始位置
            if (direction === "left") {
                gsap.set(target, { x: -300, opacity: 0 });
            } else if (direction === "right") {
                gsap.set(target, { x: 300, opacity: 0 });
            } else if (direction === "bottom") {
                gsap.set(target, { y: 300, opacity: 0 });
            } else if (direction === "top") {
                gsap.set(target, { y: -300, opacity: 0 });
            }

            // 添加动画到时间线
            if (direction === "left" || direction === "right") {

                tl.to(target, {
                    x: 0,
                    opacity: 1,
                    duration: 0.6,
                }, "<" + delay)

            } else if (direction === "top" || direction === "bottom") {

                tl.to(target, {
                    y: 0,
                    opacity: 1,
                    duration: 0.6,
                }, "<" + delay);
            }
        });

        return tl;

    },
    extendTimeline: true // 允许在 GSAP 时间线上直接调用这个效果
});



//隐藏传入元素
const hiddenelement = (element, direction = "x", px = 300) => {

    if (direction == "x") {
        gsap.set(element, {
            x: px,
            opacity: 0,
        });
    }

    if (direction == "y") {
        gsap.set(element, {
            y: px,
            opacity: 0,
        });
    }

}

//切出动画
export const cutOut = () => {
   
    // 创建一个时间线
    const tl1 = gsap.timeline({
        paused: true,
        ease: "power4.in", // 先慢后快
    });
    // 创建一个时间线
    const tl2 = gsap.timeline({
        paused: true,
        ease: "power4.in", // 先慢后快
    });

    // 创建一个时间线 面板3
    const tl3 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 面板4
    const tl4 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 图例
    const tl5 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 顶部
    const tl6 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });


    tl1.panelEffectOut("#main-box1", { direction: "left", mode: "out" })
    tl2.panelEffectOut("#main-box2", { direction: "right", mode: "out" })

    // var el1 = '.header-left';
    // var el2 = '.header-right';
    // var el3 = '.header-box';
    // var el4 = '.masklayer-main';
    // tl6.to(el4, {
    //     x: 0,
    //     opacity: 0,
    //     duration: 0.4
    // }).to(el1, {
    //     x: 100,
    //     opacity: 0.5,
    //     duration: 0.4
    // }, "<").to(el2, {
    //     x: -100,
    //     opacity: 0.5,
    //     duration: 0.4
    // }, "<").to(el1, {
    //     x: -300,
    //     opacity: 0,
    //     duration: 0.4
    // }, "<0.4").to(el2, {
    //     x: 300,
    //     opacity: 0,
    //     duration: 0.4
    // }, "<").to(el3, {
    //     y: -300,
    //     opacity: 0,
    //     duration: 0.6
    // }, "<0.4");

    tl1.play();
    tl2.play();
    // tl4.play();
    // tl6.play();
    // gsap.delayedCall(0.4, () => {
    //     tl2.play()
    //     tl3.play()
    // }
    // );
    // gsap.delayedCall(0.8, () => {
    //     tl5.play()
    // }
    // );

}

//切入动画
export const cutIn = (e) => {

    // 创建一个时间线 面板1
    const tl1 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });
 

    // 创建一个时间线 面板3
    const tl3 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 面板4
    const tl4 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });
    // 创建一个时间线 面板4
    const tl5 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });


    // 创建一个时间线 顶部
    const tl6 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });


    tl1.panelEffectOut("#main-box1", { direction: "left", mode: "in" })
    const elemetlist1 = document.getElementById('main-box1').querySelectorAll('[class*="hl-effect-"]');
    tl1.elementsEffect(elemetlist1, {}, "<0.2")


    tl4.panelEffectOut("#main-box2", { direction: "right", mode: "in" })
    const elemetlist4 = document.getElementById('main-box2').querySelectorAll('[class*="hl-effect-"]');
    tl4.elementsEffect(elemetlist4, {}, "<0.2")


    if(e==0){
        tl3.panelEffectOut("#main-box4", { direction: "right", mode: "in" })
        tl5.panelEffectOut("#main-box5", { direction: "bottom", mode: "in" })
    }
    


    // var el1 = '.header-left';
    // var el2 = '.header-right';
    // var el3 = '.header-box';
    // var el4 = '.masklayer-main';
    // tl6.to(el4, {
    //     x: 0,
    //     opacity: 1,
    //     duration: 0.4
    // }).to(el3, {
    //     y: -300,
    //     opacity: 0,
    //     duration: 0.2
    // }, "<").to(el3, {
    //     y: 0,
    //     opacity: 1,
    //     duration: 0.6
    // }, "<0.2").to(el1, {
    //     x: 100,
    //     opacity: 0.5,
    //     duration: 0.6
    // }, "<0.6").to(el2, {
    //     x: -100,
    //     opacity: 0.5,
    //     duration: 0.6
    // }, "<").to(el1, {
    //     x: 0,
    //     opacity: 1,
    //     duration: 0.6
    // }, "<0.6").to(el2, {
    //     x: 0,
    //     opacity: 1,
    //     duration: 0.6
    // }, "<")

    tl1.play();
    tl4.play();
    tl6.play();
    
    if(e==0){
        gsap.delayedCall(1.5, () => {
            tl5.play();
            tl3.play();
        })
    }




}

export const hideBox = () => {
    hiddenelement("#main-box1", 'x', -300)
    hiddenelement("#main-box2", 'x', -300)
    hiddenelement("#main-box4", 'x', -300)
    hiddenelement("#main-box5", 'y', 100)
}

export const hideBox1 = () => {
    hiddenelement("#main-box1", 'x', -300)
    hiddenelement("#main-box2", 'x', -300)
}


```

GSAP动画封装

# 🍉需求
实现概化图(SVG)或者拓扑图中，两个节点之间连线的单向流动效果
# 🍑实现
思路
- 通过动态用js给指定标签添加删除css类
- css类为时间过渡动画还有裁剪位置

# 代码
横向从下到上


```js
//标签默认添加的css
.cls-wyh2 {
    fill: #73e2fb;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 4s linear;
    /* 动画过渡效果 */

}

//动态添加删除的css
.cls-wyh2dh {
    fill: #2f95ac;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

//js代码.
//初始化的时候根据id获取页面元素
onMounted(() => {
    wyhriver.value = getelmenet('#_卫运河-2')
    qyhriver.value = getelmenet('#_七一河-2')
    lwriver.value = getelmenet('#_六五河-2')

})

//获取元素工具类
const getelmenet = (rvid) => {
    const weiyunheGroup = document.querySelector(rvid);
    const pathElement = weiyunheGroup.querySelector('path');
    return pathElement
}

//动画开始

const start = () => {
    startProgress()

    wyhriver.value.classList.add('cls-wyh2dh');
    qyhriver.value.classList.add('cls-qyh2dh');
    setTimeout(() => {
        lwriver.value.classList.add('cls-lwh2dh');
    }, 3600);
}

//动画结束
const reset = () => {
    jindu.value = 0

    wyhriver.value.classList.remove('cls-wyh2dh');
    qyhriver.value.classList.remove('cls-qyh2dh');
    lwriver.value.classList.remove('cls-lwh2dh');

    wyhriver.value.style.transition = 'none';
    qyhriver.value.style.transition = 'none';
    lwriver.value.style.transition = 'none';

    setTimeout(() => {
        wyhriver.value.style.transition = 'clip-path 4s linear';
        qyhriver.value.style.transition = 'clip-path 8s linear';
        lwriver.value.style.transition = 'clip-path 5.5s linear';
    }, 30);
}
```
纵向从左到右的css，逻辑相同css不同

```css

.cls-qyh2 {
    fill: #73e2fb;
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0); /* 默认状态，水流完全隐藏 */
    transition: clip-path 8s linear;

}

.cls-qyh2dh {
    fill: #2f95ac;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); /* 水流从左到右 */
}
```

通过css裁剪实现svg或者div的推进动画

### 目录

+   一：Git
+   二：SVN与Git的的区别
+   三、安装Git
+   四：常规操作
+   五：远程仓库
+   六：创建与合并分支
+   七：bug分支
+   八：多人协作
+   九：git可视化工具

Git 是一种分布式[版本控制系统]，用于管理软件项目的源代码。它是由 Linux 之父 [Linus]Torvalds 开发的，并已经成为了现代[软件开发]领域中最流行的版本控制系统之一。

使用 Git 可以追踪代码的历史修改记录，方便团队协作、代码共享和代码重构。Git 的基本工作流程如下：

1.  在开始编写代码之前，首先需要创建一个 Git 仓库（repository），用于存储代码和版本历史记录。
2.  在编写代码时，可以通过 `git add` 命令将更改的文件添加到 Git 的暂存区（staging area）中。
3.  通过 `git commit` 命令将暂存区中的更改提交到 Git 仓库中，并生成一个新的版本号（commit hash）。
4.  如果需要撤销某个提交，可以使用 `git revert` 命令来创建一个新的提交，该提交将会抵消先前的提交效果。
5.  如果需要合并不同分支的代码，可以使用 `git merge` 命令进行合并。
6.  如果需要查看代码的历史提交记录，可以使用 `git log` 命令来获取详细信息。
7.  如果需要将代码推送到远程仓库，可以使用 `git push` 命令将本地代码推送到远程仓库。
8.  如果需要从远程仓库中获取代码，可以使用 `git pull` 命令将远程代码拉取到本地。

![image.png](/static/img/6498cf0bf9f38dc4e610c0d71f3615f6.image.webp)
+   Workspace：工作区
+   Index / Stage：暂存区
+   Repository：仓库区（或本地仓库）
+   Remote：远程仓库

### [SVN]与Git的的区别

SVN和Git都是版本控制系统，但它们有以下区别：

1.  分布式 vs 集中式：Git 是一种分布式版本控制系统，而 SVN 是一种集中式版本控制系统。在 Git 中，每个开发者都拥有本地代码库的完整副本，可以离线工作并在不同的工作流程之间自由转换。而在 SVN 中，所有开发者共享同一个中央代码库，并且需要有网络连接才能进行版本控制操作。
2.  分支管理：Git 在分支管理方面比 SVN 更加强大和灵活。Git 的分支非常轻量级，创建和合并分支也很容易，因此可以轻松实现多人协作和并行开发。而在 SVN 中，分支比较重量级（即创建和合并分支需要花费相对更多的时间和资源），因此往往只用于重要的版本分支。
3.  版本号：Git 使用 SHA-1 哈希值来标识每个提交，而 SVN 采用递增的数字版本号来标识每个提交。SHA-1 哈希值保证了每个提交的唯一性，而递增版本号则简化了版本控制过程。
4.  整体性：由于 SVN 是一种集中式版本控制系统，因此所有数据都存储在中央代码库中。如果中央代码库损坏或丢失，可能会导致数据丢失或无法恢复。而 Git 是一种分布式版本控制系统，每个开发者都拥有完整的代码库副本，保证了代码的整体性和可靠性。
5.  性能：Git 比 SVN 更快，特别是在处理大型仓库、分支合并以及比较代码差异时。Git 使用基于内容的哈希算法来检测文件是否修改，而 SVN 则需要检查文件的元数据（如时间戳和文件大小）来确定是否修改。

总之，虽然 SVN 和 Git 都是版本控制系统，但它们的设计和实现方式存在较大差异，开发人员应根据自身需求选择最适合的版本控制系统。

### 常规操作

#### 创建版本库

首先，打开终端或命令行界面，进入要创建版本库的目录下。

接着，使用以下命令初始化一个空的 Git 仓库：

```csharp
git init
```

然后，将需要管理的文件添加到暂存区：

```cobol
git add <file>
```

你也可以使用以下命令一次性将所有变更添加到暂存区：

```csharp
git add .
```

接下来，提交暂存区中的变更到本地仓库，并添加一个描述信息：

```sql
git commit -m "Initial commit"
```

现在，你已经成功地创建了一个版本库。你可以使用其他 Git 命令来管理它，例如：

+   `git status`：查看当前工作区和暂存区的状态。
+   `git log`：查看提交记录。
+   `git branch`：管理分支。
+   `git remote`：管理远程仓库。

#### 版本回退

要将Git存储库版本回退，请使用git reset命令。如果您想要撤消上次提交并返回到上一个提交，则可以使用以下命令：

```cobol
git reset HEAD~1
```

这将使HEAD指向上一个提交，但不会删除您最新的更改。如果您希望完全返回到以前的提交并放弃所有更改，则可以添加--hard选项：

```cobol
git reset --hard HEAD~1
```

请注意，此操作将永久删除您最新的更改，请谨慎使用。如果您已经将更改推送到远程存储库，则在执行此操作之前应先备份这些更改。

#### **理解工作区与暂存区的区别**

Git有三个主要的工作区域：工作区（working directory）、暂存区（staging area）和版本库（repository）。

工作区是指您电脑文件系统上用于修改文件的目录。在这里，您可以创建、编辑和删除文件。

暂存区是一个中间状态，它充当了您提交更改的缓冲区。在Git中，您必须明确地将文件添加到暂存区，然后才能将其提交到版本库中。这样做的好处是，您可以对每个更改进行精细控制，并确保只提交需要保存的更改。

版本库包含Git存储库的所有历史记录和元数据。它是Git存储库的核心组成部分，是由Git自动维护的。

简而言之，工作区是您正在处理的实际文件，而暂存区是下一次提交所需更改的文件列表。它们之间的区别在于，您可以对工作区中的任何文件进行修改，但只有将它们添加到暂存区并将其提交到版本库中，它们才会成为Git跟踪的部分。

#### **Git撤销修改和删除文件操作**

要撤销对文件的修改，可以使用git checkout命令：

```cobol
git checkout -- <filename>
```

此命令将覆盖工作树中指定文件的更改，还原为最近提交或上次检出的状态。

要删除文件并将此更改提交到Git存储库中，可以使用git [rm命令](https://so.csdn.net/so/search?q=rm%E5%91%BD%E4%BB%A4&spm=1001.2101.3001.7020)：

```cobol
git rm <filename>git commit -m "Remove file"
```

这将从工作树和版本历史记录中删除指定的文件。如果只是想从Git版本库中删除文件但保留在工作树中，则可以使用git rm命令的--cached选项：

```cobol
git rm --cached <filename>git commit -m "Remove file from repository"
```

这将从版本历史记录中删除指定的文件，但保留在工作树中。

### **远程仓库**

#### **如何添加远程仓库**

要将本地代码库连接到远程仓库，可以使用以下git命令：

1.  首先，将本地代码库初始化为Git仓库（如果尚未完成）：  
    git init
2.  添加远程仓库的URL，其中`<remote-name>`是自定义名称，`<remote-url>`是远程仓库的URL：  
    git remote add <remote-name> <remote-url>
3.  可以使用以下命令确认远程仓库是否已成功添加：  
    git remote -v

此后，您就可以使用`git push`命令将代码推送到远程仓库，或使用`git pull`命令从远程仓库拉取代码。

#### **如何从远程库克隆**

要从远程仓库克隆代码到本地，可以使用以下git命令：

```cobol
git clone <remote-url>
```

其中`<remote-url>`是远程仓库的URL。执行此命令后，Git将在当前目录下创建一个新目录，其中包含克隆的代码库副本。如果想指定不同的目录名，可以将目录名作为可选参数添加到命令中：

```cobol
git clone <remote-url> <directory-name>
```

在执行`git clone`命令时，还可以通过添加其他标志来更改默认行为，例如指定要克隆的分支、禁用克隆时自动检查的文件等。有关详细信息，请参阅相应的文档。

### **创建与合并分支**

创建一个新的分支可以使用以下命令：

```cobol
git branch <branch_name>
```

这将在当前所在的提交上创建一个名为 `<branch_name>` 的新分支。

要切换到新创建的分支，可以使用以下命令：

```cobol
git checkout <branch_name>
```

创建并立即切换到该分支，可以使用以下命令：

```cobol
git checkout -b <branch_name>
```

合并分支可以使用以下命令：

```cobol
git merge <branch_name>
```

这将将 `<branch_name>` 分支中的更改合并到当前分支。

#### 处理冲突

当两个分支上的代码修改了同一部分，并且尝试将这两个分支合并时，就会发生代码冲突。Git提供了以下步骤来解决冲突：

1.  运行 `git status` 命令查看哪些文件包含冲突。
2.  编辑有冲突的文件，手动解决文件中的冲突。
3.  对编辑后的文件进行 `git add`，标记为已解决冲突的文件。
4.  使用 `git commit` 提交更改，Git 会自动生成一个合并提交，其中包含各自分支中的更改。

注意：在解决冲突前，最好先备份当前的代码状态，以免不小心破坏代码库。另外，在处理冲突之前，可以通过运行 `git diff` 命令来查看冲突的源代码，以便更好地理解要解决的问题。

#### **分支管理策略**

在 Git 中，常见的分支管理策略包括以下几个方面：

1.  主分支：主分支通常是最稳定的分支，用于发布生产版本。在 Git 中，主分支通常是 master 分支或者 main 分支。
2.  开发分支：开发分支通常从主分支派生而来，在其上进行新功能或修复错误的开发。在 Git 中，通常使用 develop 分支作为开发分支。
3.  特性分支：特性分支是为了开发单独的功能而创建的分支。这些分支通常从开发分支派生而来，并在实现目标后被合并回开发分支。在 Git 中，通常使用 feature/ 分支命名约定来表示特性分支。
4.  发布分支：发布分支是用于准备发布版本的分支，通常从主分支派生而来。这些分支应该包含与发布相关的所有更改，并且应该经过全面测试和审核后再合并回主分支。在 Git 中，通常使用 release/ 分支命名约定来表示发布分支。
5.  热修复分支：热修复分支通常用于快速修复紧急问题，例如安全漏洞或崩溃。这些分支通常从主分支派生而来，并且只包含必要的更改。在 Git 中，通常使用 hotfix/ 分支命名约定来表示热修复分支。

通过采用合适的 Git 分支管理策略，可以帮助团队更好地组织和管理代码，提高团队的协作能力和生产效率。除了上述常见的分支管理策略，还可以根据团队的具体需求和工作流程定制适合自己的分支管理策略。

### **bug分支**

在 Git 中，通常使用 bug 分支用于修复代码中的错误或缺陷。当发现 bug 时，可以从当前开发分支（如 develop 分支）创建一个 bug 分支，在该分支上进行错误修复。修复完成后，可以将更改提交到 bug 分支，并将其合并回开发分支和主分支。

以下是一个典型的使用 Git bug 分支的流程：

1.  从当前开发分支（如 develop 分支）创建一个新的 bug 分支：

```bash
git checkout -b bug/fix-xxx
```

1.  在 bug 分支上进行错误修复，包括必要的测试和代码审查。
2.  提交更改并推送到远程仓库：

```cobol
git add .git commit -m "Fix xxx bug"git push origin bug/fix-xxx
```

1.  将 bug 分支合并回开发分支（如 develop 分支）：

```sql
git checkout developgit merge --no-ff bug/fix-xxx
```

1.  测试修复是否正确，如果一切正常，则将开发分支合并回主分支（如 master 分支）：

```sql
git checkout mastergit merge --no-ff develop
```

通过使用 Git bug 分支，可以帮助团队更好地管理和修复代码中的错误和缺陷，同时保持代码库的稳定性和可靠性。

### **多人协作**

Git 是一个优秀的多人协作工具，以下是 Git 多人协作的一些最佳实践：

1.  使用分支：使用分支可以帮助团队成员在不影响主分支的情况下进行开发和测试，避免代码冲突和错误。建议采用主分支、开发分支、特性分支、发布分支、热修复分支等分支管理策略。
2.  提交规范：每次提交代码时应该附加有意义的提交信息，描述本次提交的更改内容和目的。建议采用语义化版本号和提交信息模板等规范，以便更好地记录和追踪代码变更历史。
3.  定期合并：团队成员应该定期将自己的分支合并回主分支或者开发分支。这可以避免较大的代码冲突和错误，并且保持代码库的整洁和可维护性。
4.  代码审查：通过代码审查可以确保代码的质量和一致性，并且可以识别和纠正潜在的问题和错误。建议采用 pull request 和 code review 等工具和流程，以便团队成员对彼此的代码进行审查和反馈。
5.  团队协作：团队成员之间应该保持及时和有效的沟通，共享技术和经验，并尽可能避免个人行为和偏见对项目和团队产生不良影响。

通过采用上述最佳实践，可以帮助团队高效协作、保证代码质量和稳定性，并提高团队的生产力和创造力。

#### **推送分支**

在 Git 中，推送分支指将本地的分支提交到远程仓库中，使得其他团队成员可以访问和获取该分支的代码。以下是在 Git 中推送分支的一些常用命令：

1.  推送当前分支到远程仓库，并与远程分支关联：

```cobol
git push -u origin <branch-name>
```

1.  推送当前分支到远程仓库，并与远程分支合并：

```cobol
git push origin <branch-name>
```

1.  强制推送当前分支到远程仓库：

```cobol
git push -f origin <branch-name>
```

1.  删除远程分支：

```ruby
git push origin :<branch-name>或git push --delete origin <branch-name>
```

在推送分支时，通常会遇到冲突等问题。如果发生冲突，需要先解决冲突，然后再进行推送。

另外，在多人协作项目中，建议采用 pull request 和 code review 等工具和流程来对分支进行审查和反馈，以确保代码质量和稳定性。同时，也应该避免直接向主分支（如 master 分支）提交代码，而是应该使用分支管理策略来组织和管理代码。

#### **抓取分支**

在 Git 中，抓取分支指从远程仓库拉取最新的代码和分支信息，并在本地创建相应的分支。以下是在 Git 中抓取分支的一些常用命令：

1.  拉取所有远程分支并更新本地分支：

```sql
git fetch --all
```

1.  拉取一个特定的远程分支到本地：

```cobol
git fetch origin <branch-name>
```

1.  在本地创建基于远程分支的新分支：

```cobol
git checkout -b <new-branch-name> origin/<remote-branch-name>
```

1.  拉取远程分支并自动与本地分支关联：

```cobol
git checkout --track origin/<remote-branch-name>或git checkout -t origin/<remote-branch-name>
```

抓取分支时，需要注意避免覆盖当前分支中未提交的更改。如果本地分支和远程分支存在冲突，需要解决冲突后才能将更改合并到本地分支中。

通过抓取分支可以使得开发者获取最新的代码和分支信息，在本地进行代码修改和测试，并将更改推送回远程仓库以进行协作开发。

### git可视化工具

Git 可视化工具可以帮助开发者更直观地查看和管理代码[版本控制](https://edu.csdn.net/cloud/sd_summit?utm_source=glcblog&spm=1001.2101.3001.7020)历史，以下是几个常用的 Git 可视化工具：

1.  GitKraken：GitKraken 是一款简单易用的 Git 可视化工具，支持 Windows、Mac 和 Linux 等多个平台。它提供了强大的图形界面，包括代码历史记录、分支管理、合并冲突解决等功能。
2.  Sourcetree：Sourcetree 是由 Atlassian 公司开发的一款免费 Git 可视化工具，支持 Windows 和 Mac 平台。它提供了友好的用户界面，可以轻松地进行代码提交、分支管理和冲突解决等操作。
3.  GitHub Desktop：GitHub Desktop 是 GitHub 公司出品的一款免费 Git 可视化工具，支持 Windows 和 Mac 平台。它提供了清晰明了的界面，可视化显示代码历史记录、分支管理、拉取请求（pull request）等功能，以及与 GitHub 网站的集成支持。
4.  Git GUI：Git GUI 是 Git 官方提供的一个图形化界面的工具，支持 Windows、Mac 和 Linux 等多个平台。它虽然不如前面提到的工具那样友好易用，但是对于习惯命令行操作的开发者来说，Git GUI 可以提供便捷的图形化界面。

使用 Git 可视化工具可以帮助开发者更直观地理解和管理 Git 中的代码版本控制历史，提高协作效率和代码质量。

Git使用操作指南

### 1、swagger添加授权框


在program.cs里面加上如下代码

```c#
#region swagger jwt认证授权框
builder.Services.AddSwaggerGen(options =>
{

    options.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme()
    {
        Description = "在下框中输入请求头中需要添加Jwt授权Token：Bearer Token",
        Name = "Authorization",
        In = ParameterLocation.Header,
        Type = SecuritySchemeType.ApiKey,
        BearerFormat = "JWT",
        Scheme = "Bearer"
    });
    options.AddSecurityRequirement(new OpenApiSecurityRequirement
    {
        {
            new OpenApiSecurityScheme
            {
                Reference = new OpenApiReference {
                    Type = ReferenceType.SecurityScheme,
                    Id = "Bearer"
                }
            },
            new string[] { }
        }
    });
});
#endregion
复制代码
```

### 2、jwt配置

安装以下nuget包

![Snipaste_2022-06-16_23-23-02.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc6837cca3cb4c338158e5186fdc2ee7~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?) 如果下载不成功可以尝试换一下程序包源：

![Snipaste_2022-06-16_23-25-53.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70ef79e7aab1452f95c87edf7b3412dd~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)

新建一个JwtHelper类

```c#
     public class JwtHelper
    {
        /// <summary>
        /// 创建Jwt字符串
        /// </summary>
        /// <param name="model"></param>
        /// <returns></returns>
        public static string CreateJwt(TokenModelJwt model)
        {
            var claims = new List<Claim>
                {
                 /*
                 * 特别重要：
                   1、这里将用户的部分信息，比如 uid 存到了Claim 中，如果你想知道如何在其他地方将这个 uid从 Token 中取出来，请看下边的SerializeJwt() 方法，或者在整个解决方案，搜索这个方法，看哪里使用了！
                   2、你也可以研究下 HttpContext.User.Claims ，具体的你可以看看 Policys/PermissionHandler.cs 类中是如何使用的。
                 */
                new Claim("UserId",model.UserId.ToString()),
                new Claim("UserName",model.UserName),
                //new Claim(ClaimTypes.Role,tokenModel.Role),//为了解决一个用户多个角色(比如：Admin,System)，用下边的方法
               };

            // 可以将一个用户的多个角色全部赋予；
            // 作者：DX 提供技术支持；
            if (!string.IsNullOrWhiteSpace(model.Role))
            {
                claims.AddRange(model.Role.Split(',').Select(s => new Claim(ClaimTypes.Role, s)));
                claims.Add(new Claim("Role", model.Role));
            }

            //秘钥 (SymmetricSecurityKey 对安全性的要求，密钥的长度太短会报出异常)
            var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(model.Secret));
            var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);

            var jwt = new JwtSecurityToken(
                issuer: model.Issuer,
                audience: model.Audience,
                expires: DateTime.Now.AddSeconds(model.Expires),
                signingCredentials: creds,
                claims: claims
            );

            var jwtHandler = new JwtSecurityTokenHandler();
            var token = jwtHandler.WriteToken(jwt);

            return token;
        }

        /// <summary>
        /// 解析
        /// </summary>
        /// <param name="jwtStr">如果为null将报错</param>
        /// <returns></returns>
         public static TokenModelJwt SerializeJwt(string jwtStr)
        {
            //截取字符串 把bearer 去掉不然解析失败
            string str = "";
            if (jwtStr.Contains("Bearer "))
            {
                str = jwtStr.Substring("Bearer ".Length, jwtStr.Length - "Bearer ".Length);
            }
            else
            {
                str = jwtStr;
            }

            //尝试解析token
            try
            {
                var jwtToken = new JwtSecurityTokenHandler().ReadJwtToken(str);
                var tokenJwt = JsonConvert.DeserializeObject<TokenModelJwt>(jwtToken.Payload.SerializeToJson());
                return tokenJwt;
            }
            catch (Exception)
            {
                return null;
            }

        }

    }
    /// <summary>
    /// 令牌
    /// </summary>
    public class TokenModelJwt
    {

        public int UserId { get; set; }
        public string UserName { get; set; }
        public string Issuer { get; set; }
        public string Audience { get; set; }
        public string Secret { get; set; }
        public int Expires { get; set; }
        public string Role { get; set; }
    }
复制代码
```

在appsetting.json里面配置加密字符串

```json
"Jwt": {
    "Secret": "skumallliulingshsoxijs", //不要太短，有可能会报异常
    "Issuer": "LL",
    "Audience": "LL"
}
复制代码
```

program.cs里面加上以下代码：

```c#
#region Jwt
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        var tokenModel = builder.Configuration.GetSection("Jwt").Get<TokenModelJwt>();
        var secretByte = Encoding.UTF8.GetBytes(tokenModel.Secret);
        options.TokenValidationParameters = new TokenValidationParameters()
        {
            ValidateIssuer = true,
            ValidIssuer = tokenModel.Issuer,

            ValidateAudience = true,
            ValidAudience = tokenModel.Audience,

            ValidateLifetime = true,

            IssuerSigningKey = new SymmetricSecurityKey(secretByte)
        };
        options.Events = new JwtBearerEvents
        {
            OnChallenge = context =>
            {
                //此处代码为终止.Net Core默认的返回类型和数据结果，这个很重要哦，必须
                //context.HandleResponse();

                //自定义自己想要返回的数据结果，我这里要返回的是Json对象，通过引用Newtonsoft.Json库进行转换

                //自定义返回的数据类型
                //context.Response.ContentType = "text/plain";
                ////自定义返回状态码，默认为401 我这里改成 200
                ////context.Response.StatusCode = StatusCodes.Status200OK;
                //context.Response.StatusCode = StatusCodes.Status401Unauthorized;
                ////输出Json数据结果
                //context.Response.WriteAsync("expired");
                return Task.FromResult(0);
            },
            //403
            OnForbidden = context =>
            {
                //context.Response.ContentType = "text/plain";
                ////自定义返回状态码，默认为401 我这里改成 200
                ////context.Response.StatusCode = StatusCodes.Status200OK;
                //context.Response.StatusCode = StatusCodes.Status401Unauthorized;
                ////输出Json数据结果
                //context.Response.WriteAsync("expired");
                return Task.FromResult(0);
            }

        };
    });
#endregion
复制代码
```

在控制器接口上添加认证 Authorize

![1asd.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/66e6455700234240a19f9194bf1486ac~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)

运行项目try一下，应该会返回401未授权状态码。

### 3、模拟登录返回token

在控制器中加入以下方法测试：

```c#
        /// <summary>
        /// 测试是否能返回token 
        /// </summary>
        /// <param name="account"></param>
        /// <param name="password"></param>
        /// <returns></returns>
        [HttpPost(Name = "Login")]
        public string Login(string account , string password)
        {
            //仅为模拟用户输入登录的情况
            if(account == "123456" && password == "123456")
            {
                //这一段为获取appsettings.json定义的数据 , 可以忽视,后面用依赖注入的方法会更加方便
                IConfiguration configuration = new
                 ConfigurationBuilder().SetBasePath(Directory.GetCurrentDirectory()).Add(new JsonConfigurationSource
                {
                    Path = "appsettings.json",
                    ReloadOnChange = true
                }).Build();;
                TokenModelJwt tokenModel = configuration.GetSection("Jwt").Get<TokenModelJwt>();

                tokenModel.UserId = 1;
                tokenModel.Role = "Admin";
                tokenModel.UserName = "用户名";
                return JwtHelper.CreateJwt(tokenModel);
            }
            return "账号密码错误";
        }
复制代码
```

运行调用接口获取到token

![token.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28eea5166f54443290a1c7a3fb5a57eb~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)

复制得到的token，在swagger中认证然后测试获取数据

![jwt.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4bcff4188b744d5a31fd6350cf912bb~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)

![tian.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d2df2af7b174d6f81e263b48c558e54~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)

成功获取。