Loading...
墨滴

舍得

2021/10/07  阅读:33  主题:绿意

实战:通过几次commit来认识工作区和暂存区(成功测试-博客输出)-20211006

image-20211006081050450
image-20211006081050450

目录

写在前面

本文,我将带你实战演示通过几次commit来认识工作区和暂存区实验。

我的博客主旨:我希望每一个人拿着我的博客都可以做出实验现象,先把实验做出来,然后再结合理论知识更深层次去理解技术点,这样学习起来才有乐趣和动力。并且,我的博客内容步骤是很完整的,也分享源码和实验用到的软件,希望能和大家一起共同进步!

各位小伙伴在实际操作过程中如有什么疑问,可随时联系本人免费帮您解决问题:

  1. 个人微信二维码:x2675263825 (舍得), qq:2675263825。

    image-20211002091450217
    image-20211002091450217
  2. 个人博客地址:www.onlyonexl.cn

    image-20211002092057988
    image-20211002092057988
  3. 个人微信公众号:云原生架构师实战

    image-20211002141739664
    image-20211002141739664
  4. 个人csdn

    https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

    image-20211002092344616
    image-20211002092344616

基础知识介绍

  • 前端基础知识

    html页面:最基本的网页文件 css:美化html页面 js:动画效果

实验环境

实验环境:
1、win10;
2、$ git version
   git version 2.17.0.windows.1
image-20211007084938413
image-20211007084938413

实验软件

链接:https://pan.baidu.com/s/1Gt6n5nrF4_mKyhwij-O0Rw 提取码:nkjv

1、准备好本次实验所需要的软件

相关的css,html,js等文件:

image-20211006080205444
image-20211006080205444

2、准备好自己的测试目录环境

/d/git_repository/git_learning

image-20211005070218189
image-20211005070218189

3、第一次提交(添加基本的html文件)

  • 复制本次相关文件到项目仓库里
image-20211005070427017
image-20211005070427017
cd /d/git_repository/git_learning/
$ cp ../0-material/index.html.01 index.html
$ cp -a ../0-material/images/ .
image-20211005070626551
image-20211005070626551
  • 查看git当前状态并执行git add命令
$ git status
$ git add index.html images/
$ git status
image-20211005070751946
image-20211005070751946
  • 测试验证index.html文件

此时双击这个html文件,观察效果:

image-20211005070934167
image-20211005070934167
image-20211005071013805
image-20211005071013805
  • 此时,我们把刚才的内容commit一下
$ git commit -m"Add index + git logo"
$ git log
image-20211005071342922
image-20211005071342922

4、第二次提交(添加css美化页面)

  • 考虑到刚才的index.html页面台low了,我们现在把css引进一下
$ mkdir styles
$ cp -a ../0-material/styles/style.css.01 style/style.css
image-20211005072559276
image-20211005072559276

我们先来看一下css的内容:

$ vim styles/style.css
image-20211005072619415
image-20211005072619415
  • 此时,我们刷新刚才的网页,来看一下效果
image-20211005072655083
image-20211005072655083
  • 加了css后,发现页面变的好看了,此时我们将刚才更改的信息再做一次提交
$ git add styles/
$ git commit -m"Add style.css"
image-20211005072900743
image-20211005072900743
  • 我们再观察一下git log信息
$ git log
image-20211005073000481
image-20211005073000481

5、第三次提交(添加js动画效果)

  • 此时,这个html页面还是有一定的问题,我们想要实现通过点击可以添加内容的,因此需要再加入js效果
$ cp -a ../0-material/js/ .
$ cat js/script.js #这个js的作用就是:当我们点击某个元素时,会出现不同的效果!
image-20211005073335198
image-20211005073335198
  • js文件添加完成后,我们来看下效果,刷新浏览器:=>符合预期。
image-20211005073528624
image-20211005073528624
  • 这个html的效果我们还可以接受,因此这里进行提交代码操作
$ git add js/
$ git commit -m"Add js"
image-20211005073649688
image-20211005073649688
  • 提交完成后,我们查看下git log
$ git log
image-20211005073742715
image-20211005073742715

6、第四次提交(添加参考项目信息)

最后,我们这个项目是从github上参考过来的,因此我需要在html页面后上添加上参考项目信息:

为了方便起见,这里直接提供了2个修改后的文件,index.html.02和style.css.02,大家可以把里面的相应内容粘贴出来到本次项目的相关文件里去,也可以直接替换相应文件,我本次是在原文件基础上进行编辑:

$ vim ../0-material/index.html.02 #查看参考文件内容

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

编辑本次index.html文件:

hg@LAPTOP-G8TUFE0T MINGW64 /d/git_repository/git_learning (master)
$ vim index.html
image-20211005075924549
image-20211005075924549
  • 刷新网页查看效果
image-20211005080128211
image-20211005080128211
  • 我想让它居右,此时需要再修改style.css文件
$ vim ../0-material/styles/style.css.02
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;
}
image-20211005080234538
image-20211005080234538
  • 编辑本次项目的style.css内容
$ vim styles/style.css
image-20211005080431412
image-20211005080431412
  • 刷新网页后查看下效果:符合预期
image-20211005080604369
image-20211005080604369
  • 此时,一个完整的项目已经完成了,我们将该项目目录下的all问价进行一次提交
$ git add -u #注意,如果当前目录下all文件已经被git管控,但又文件被修改时,我想可以用git add -u来进行将工作区内容添加到暂存区,而不需要再写文件名!!!
$ git commit -m"Add refering project" 
image-20211005080736143
image-20211005080736143
  • 查看当前项目下的git log信息
$ git log
image-20211005080953654
image-20211005080953654

此时,实验结束!完美

总结

​ 好了,关于通过几次commit来认识工作区和暂存区实验就到这里了,感谢大家阅读,最后贴上我的美圆photo一张,祝大家生活快乐,每天都过的有意义哦,我们下期见!

image-20211006083723439
image-20211006083723439

舍得

2021/10/07  阅读:33  主题:绿意

作者介绍

舍得