首页 > 其他分享> 文章详细

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

2021-10-07 09:04:21 阅读：164 来源： 互联网

标签：index style 暂存区 20211006 js html git commit css

写在前面

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

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

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

个人微信二维码：x2675263825 （舍得）， qq：2675263825。
个人博客地址：www.onlyonexl.cn
个人微信公众号：云原生架构师实战
个人csdn

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

基础知识介绍

前端基础知识

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

实验环境

实验环境：
1、win10；
2、$ git version
   git version 2.17.0.windows.1

实验软件

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

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

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

/d/git_repository/git_learning

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

复制本次相关文件到项目仓库里

$ cd /d/git_repository/git_learning/
$ cp ../0-material/index.html.01 index.html
$ cp -a ../0-material/images/ .

查看git当前状态并执行git add命令

$ git status
$ git add index.html images/
$ git status

测试验证index.html文件

此时双击这个html文件，观察效果：

此时，我们把刚才的内容commit一下

$ git commit -m"Add index + git logo"
$ git log

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

考虑到刚才的index.html页面台low了，我们现在把css引进一下

$ mkdir styles
$ cp -a ../0-material/styles/style.css.01 style/style.css

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

$ vim styles/style.css

此时，我们刷新刚才的网页，来看一下效果

加了css后，发现页面变的好看了，此时我们将刚才更改的信息再做一次提交

$ git add styles/
$ git commit -m"Add style.css"

我们再观察一下git log信息

$ git log

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

此时，这个html页面还是有一定的问题，我们想要实现通过点击可以添加内容的，因此需要再加入js效果

$ cp -a ../0-material/js/ .
$ cat js/script.js #这个js的作用就是：当我们点击某个元素时，会出现不同的效果！

js文件添加完成后，我们来看下效果，刷新浏览器：=>符合预期。

这个html的效果我们还可以接受，因此这里进行提交代码操作

$ git add js/
$ git commit -m"Add js"

提交完成后，我们查看下git log

$ git log

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>

编辑本次index.html文件：

hg@LAPTOP-G8TUFE0T MINGW64 /d/git_repository/git_learning (master)
$ vim index.html

刷新网页查看效果

我想让它居右，此时需要再修改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;
}

编辑本次项目的style.css内容

$ vim styles/style.css

刷新网页后查看下效果：符合预期

此时，一个完整的项目已经完成了，我们将该项目目录下的all问价进行一次提交

$ git add -u #注意，如果当前目录下all文件已经被git管控，但又文件被修改时，我想可以用git add -u来进行将工作区内容添加到暂存区，而不需要再写文件名！！！
$ git commit -m"Add refering project"

查看当前项目下的git log信息

$ git log

此时，实验结束！完美

总结

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

标签：index,style,暂存区,20211006,js,html,git,commit,css
来源： https://blog.csdn.net/weixin_39246554/article/details/120632433

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9