prajnalab

菜单

hexon
发布于 2025-06-22 / 26 阅读
0

二、通过几次commit来认识工作区和暂存区

本文将通过对本地Git仓库的操作来认识Git中一些基本的操作和概念。

往仓库里添加文件

我们将通过4次提交，完成一个像模像样的静态网页制作。

  1. 加入 index.html 和 git-logo

  2. 加入 style.css

  3. 加入 script.js

  4. 修改index.html 和 style.css

对比项

工作区（Working Directory）

暂存区（Staging Area / Index）

定义

本地项目目录（你直接编辑文件的地方）

一个虚拟的中间区域，记录文件的变更状态

可见性

直接通过文件系统查看和修改

通过 git status或 git diff --cached查看

操作指令

手动编辑文件

git add 将工作区的变更添加到暂存区

与仓库的关系

未跟踪的变更属于工作区

暂存区的变更可通过 git commit提交到仓库

暂存区主要是能精细控制提交内容：直接提交工作区的所有改动可能导致无关变更混入（如调试日志、临时文件）。通过 git add 选择性暂存文件，确保每次提交只包含逻辑相关的变更。

下面我们会在之前创建的项目目录中添加一个index.html和一个logo：

<!DOCTYPE html>
<html>
  <head>
    <title>Git Demo</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
  </head>
  <body>
    <header>
      <img id="header-img" src="images/git-logo.png">
      <h1 id='header-words'>We are learning Git.</h1> 
    </header>

    <section>
      <div class="accordion"><h1>Terminologys</h1></div>
      <div class="panel">
        <ol>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>     
      </div>
      <div class="accordion"><h1>Basic Commands</h1></div>
      <div class="panel">
        <ol>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </div>
    </div>
    </section>

    <script src="js/script.js"></script> 
  </body>
</html>

下面是具体的操作命令：

$ pwd
/d/2025/Git/git_learning

$ ls -al
total 4
drwxr-xr-x 1 heath 197121 0 Jun 22 10:08 ./
drwxr-xr-x 1 heath 197121 0 Jun 22 09:59 ../
drwxr-xr-x 1 heath 197121 0 Jun 22 10:10 .git/
-rw-r--r-- 1 heath 197121 0 Jun 22 10:08 readme

$ vi index.html

$ mkdir images

$ cd images/

$ ls
git-logo.png

$ cd ..

$ git status
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        images/
        index.html

nothing added to commit but untracked files present (use "git add" to track)

$ git add index.html images
warning: in the working copy of 'index.html', LF will be replaced by CRLF the next time Git touches it

$ git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   images/git-logo.png
        new file:   index.html


$ ls -la
total 12
drwxr-xr-x 1 heath 197121    0 Jun 22 10:57 ./
drwxr-xr-x 1 heath 197121    0 Jun 22 09:59 ../
drwxr-xr-x 1 heath 197121    0 Jun 22 10:58 .git/
drwxr-xr-x 1 heath 197121    0 Jun 22 10:57 images/
-rw-r--r-- 1 heath 197121 1303 Jun 22 10:56 index.html
-rw-r--r-- 1 heath 197121    0 Jun 22 10:08 readme

$ git commit -m'Add index + logo'
[master fb9dd79] Add index + logo
 2 files changed, 49 insertions(+)
 create mode 100644 images/git-logo.png
 create mode 100644 index.html

$ git log
commit fb9dd79bb07a244f379c482457906c7f8fd009df (HEAD -> master)
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 10:59:51 2025 +0800

    Add index + logo

commit 695a4fc77a3be0dcfbf1c91cb86edb864ea4fe00
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 10:10:21 2025 +0800

    Add readme

此时的网页是这样的：

添加网页样式

我们需要添加一个css文件使用网页美化。在根目录创建styles文件夹里面创建style.css文件：

body{
  background-color: orange;
  font-family: 'Monaco', sans-serif;
  color: white;
}

body a{
  color: white;
}

header{
  text-align: center;
  margin-top: 50px;
}

h3{
  color: red;
}

header-img{
  width: 400px;
}

header-words{
  line-height: 10px;
  font-size: 50px;
  font-family: 'Monaco', sans-serif;
  margin-bottom: 75px;
}

section{
  padding: 0 50px 0px 50px;
  text-align: left;
}

div.accordion {
  cursor: pointer;
  border: none;
  outline: none;
}

div.accordion.active, div.accordion:hover {
  background-color: white;
  color: #1D2031;
}

div.panel {
  padding: 0 18px 0 0;
  display: none;
}

此时刷新网页后有了变化：

然后我们再进行一次提交，整个操作的命令如下：

$ ls -al
total 12
drwxr-xr-x 1 heath 197121    0 Jun 22 10:57 ./
drwxr-xr-x 1 heath 197121    0 Jun 22 09:59 ../
drwxr-xr-x 1 heath 197121    0 Jun 22 10:59 .git/
drwxr-xr-x 1 heath 197121    0 Jun 22 10:57 images/
-rw-r--r-- 1 heath 197121 1303 Jun 22 10:56 index.html
-rw-r--r-- 1 heath 197121    0 Jun 22 10:08 readme

$ mkdir styles

$ vi style.css

$ ls -a
./  ../  .git/  images/  index.html  readme  style.css  styles/

$ mv style.css styles/

$ cd git_learning/

$ git status
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        styles/

nothing added to commit but untracked files present (use "git add" to track)

heath@LAPTOP-O0L6ES0F MINGW64 /d/2025/Git/git_learning (master)
$ git add styles
warning: in the working copy of 'styles/style.css', LF will be replaced by CRLF the next time Git touches it

$ git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   styles/style.css


$ git commit -m'Add style.css'
[master d428362] Add style.css
 1 file changed, 51 insertions(+)
 create mode 100644 styles/style.css

$ git log
commit d42836287e39ab5470cfc668afcfda7dbf3e73ff (HEAD -> master)
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 11:06:33 2025 +0800

    Add style.css

commit fb9dd79bb07a244f379c482457906c7f8fd009df
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 10:59:51 2025 +0800

    Add index + logo

commit 695a4fc77a3be0dcfbf1c91cb86edb864ea4fe00
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 10:10:21 2025 +0800

    Add readme

最后使用git log查看日志，能看到目前为止，我们进行了三次提交。

给列表添加点击事件

目前的网页点击列表显示不出子项，所以我们再添加个script.js文件来完成这个点击事件。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  }
}

此时，刷新网页后列表项可以点击：

操作命令如下：

$ ls -al
total 12
drwxr-xr-x 1 heath 197121    0 Jun 22 11:05 ./
drwxr-xr-x 1 heath 197121    0 Jun 22 09:59 ../
drwxr-xr-x 1 heath 197121    0 Jun 22 11:06 .git/
drwxr-xr-x 1 heath 197121    0 Jun 22 10:57 images/
-rw-r--r-- 1 heath 197121 1303 Jun 22 10:56 index.html
-rw-r--r-- 1 heath 197121    0 Jun 22 10:08 readme
drwxr-xr-x 1 heath 197121    0 Jun 22 11:05 styles/

$ mkdir js

$ cd js

$ vi script.js

$ cd ..

$ git status
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        js/

nothing added to commit but untracked files present (use "git add" to track)

$ git add js
warning: in the working copy of 'js/script.js', LF will be replaced by CRLF the next time Git touches it

$ git commit -m'Add js'
[master b284333] Add js
 1 file changed, 15 insertions(+)
 create mode 100644 js/script.js

$ git log
commit b284333cb67961eb3310f78e9ca9c226ce3b8063 (HEAD -> master)
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 11:16:14 2025 +0800

    Add js

commit d42836287e39ab5470cfc668afcfda7dbf3e73ff
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 11:06:33 2025 +0800

    Add style.css

commit fb9dd79bb07a244f379c482457906c7f8fd009df
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 10:59:51 2025 +0800

    Add index + logo

commit 695a4fc77a3be0dcfbf1c91cb86edb864ea4fe00
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 10:10:21 2025 +0800

至此，我们完成了第3次提交。

添加参考项目

接下来我们还要添加下参考的项目信息。编辑index.html在底部添加上footer标签：

<footer>
    <p>
        <a href="https://github.com/TTN-js/unforGITtable">参考项目01</a> 
    </p>
</footer>

另外修改下style.css文件，增加如下内容：

footer {
  right: 0;
  bottom: 0;
  position: relative;
  padding: 10px 1rem 10px 0;
  margin-top: 50px;
  font-size: 0.7em;
  text-align: right;
}

footer p {
  margin-bottom:0;
}

刷新界面后，参考项目就出来了：

操作如下：

$ vim index.html

$ vi styles/style.css

$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html
        modified:   styles/style.css

no changes added to commit (use "git add" and/or "git commit -a")

$ git add -u
warning: in the working copy of 'index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'styles/style.css', LF will be replaced by CRLF the next time Git touches it

$ git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        modified:   index.html
        modified:   styles/style.css


$ git commit -m'Add refering projects'
[master 955e38a] Add refering projects
 2 files changed, 20 insertions(+)

$ git log
commit 955e38ae3b7db6825b0ac0ffd023e4eb2a68b078 (HEAD -> master)
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 11:25:01 2025 +0800

    Add refering projects

commit b284333cb67961eb3310f78e9ca9c226ce3b8063
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 11:16:14 2025 +0800

    Add js

commit d42836287e39ab5470cfc668afcfda7dbf3e73ff
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 11:06:33 2025 +0800

    Add style.css

commit fb9dd79bb07a244f379c482457906c7f8fd009df
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 10:59:51 2025 +0800

    Add index + logo

commit 695a4fc77a3be0dcfbf1c91cb86edb864ea4fe00
Author: hexon <hexon1958@gmail.com>
Date:   Sun Jun 22 10:10:21 2025 +0800

    Add readme

已跟踪 VS 已暂存

1、已跟踪（Tracked）

  • 定义：文件已经被 Git 纳入版本控制管理（无论当前是否被修改）。

  • 包括：

  • 所有 曾经被 git add 并提交过的文件（即使后来被修改了）。

  • 所有 当前在暂存区（staged）的文件（即使尚未提交）。

  • 特点：

  • Git 会持续追踪这些文件的变化（修改、删除）。

  • 未跟踪（Untracked）文件：新创建的文件，从未被 git add 过。

2、已暂存（Staged）

  • 定义：文件的最新变更已经通过 git add 添加到 暂存区（Index），等待下次提交。

  • 特点：

  • 只有 已跟踪文件 的变更才能被暂存（未跟踪文件需要先 git add 才能成为“已跟踪+已暂存”）。

  • 执行 git commit 时，只会提交 已暂存的变更。

关键区别

状态

例子

是否被 Git 管理

是否在暂存区

未跟踪（Untracked）

新创建的 new.txt

❌ 否

❌ 否

已跟踪但未暂存

修改了旧的 old.txt（未 git add）

✅ 是

❌ 否

已暂存（Staged）

执行了 git add old.txt

✅ 是

✅ 是

git add命令小结

上面我们用到了一个新命令：

# 添加所有已跟踪文件的修改（包括删除），但不包括未跟踪的新文件
git add -u

对比其他相关命令：

命令

作用

git add -u

更新所有已跟踪文件的修改（修改/删除），不涉及未跟踪文件

git add .

添加所有修改和未跟踪的文件（除 .gitignore 忽略的）

git add -A

添加所有修改、未跟踪和删除的文件（相当于 git add .+ git add -u）

git add <file>

仅添加指定文件的修改

git add 后面可以跟多个文件或者目录（空格隔开）

全面理解JVM虚拟机
一、Git的安装和最小配置