一、协同开发
我们在公司都是很多人共同开发同一个项目整体流程是这个样子
- 组长本地创建出空项目 底层代码写完(需要用到的方法 封装完)提交到远程仓库
- 张三李四王二麻子都要共同开发这个项目
- 我们要将代码Clone到本地 git clone 远程地址(确定好依赖安装以及数据库)
- 写代码提交到本地版本库 push到远端即可(推之前获取一下pull看是否有同事已经做了更改)
多人开发同一个项目
- 作为项目创建者本地创建好 远程创建好 push好 把别人添加成开发者
- 作为血统开发者 远程账号 密码 >>>> 登录进去就能看到这个项目了 Clone本地就可以开发
二、冲突解决
1)多人同一分支开发出现冲突
出现冲突的原因:
同事跟你改了同样的代码 但是他先提交到远程仓库
你要提交这个时候提交不上 需要先拉取下来 pull 因为改了同样的代码发起冲突 修改冲突即可
<<<<<<< HEAD
print('MJ')
======= # 上面是你的代码
print('MJ is handsome')
>>>>>>> f67f73948d175b186cd5f1319d7602fe004e285c # 别人代码
修改代码到不报错(如果代码相同 查看同事代码 是你的好还是他的好 商量留下谁的即可)
重新提交到本地版本库 就可以Push远端了
2)分支合并出现冲突
分支合并冲突细节解决方法:
1. 新建分支dev 切换dev分支
git branch dev
git checkout dev
2. dev分支修改文件第一行 提交到版本库
git add.
git commit -m 'Dev修改了某某某文件'
3. 修改dev文件最后一行
git add.
git commit -m 'Dev修改了某某某文件'
4. 切换到master分支修改dev修改的文件 最后一行提交到版本库
git checkout master
git add .
git commit -m 'Master修改了某某文件'
5. 合并代码 出现冲突 解决提交 (这个时候查看文件状态修改红色的 解决冲突提交)
git merge dev
git add .
git commit -m '解决冲突'
三、线上分支合并Pr Mr
前面写的全部都是线下分支操作本地的增删改查分支 现在说说线上分支
- 建立远程分支 Gitee上点击操作
- 把远程分支pull拉到本地
git pull origin dev // 这个时候已经拉取下来了 但是是看不到的
git checkout dev. // 切换到dev分支
- 本地dev分支添加代码
git add .
git commit -m '本地dev提交'
- 本地dev提交到远端
git push origin dev
- 把dev合并到master
我们已经将本地代码提交到了远端 这个时候算是提交了pull request请求(Pr Mr) // 这个时候跟我们已经没有关系了
我们的老大就能看到我们提交的Pr 之后审核通过 合并 到此就成功合并了
四、为开源项目贡献代码
我们都知道平时用的一些框架都是一些大神开源的源码项目代码 如果我们也想进行代码贡献呢?
- 看到开源项目,点fork,你的仓库就有这个开源项目了
- 在本地拉取fork的代码
- 我们可以在本地进行编程 提交到自己的本地仓库
- 提交pr合并 如果作者同意 你就可以合并进去了
五、Git面试题
以下为个人答案仅供参考:
- 你们公司分支方案是什么样的?
master dev but 三条分支
master: 主要用来发布版本 写好了某个版本的代码合并进去 不直接在master上开发
dev: 开发分支 项目的开发者 都在dev分支上开发
bug: bug分支 用来修复bug 发布小版本(1.1.2)
- 使用git开发遇到过冲突吗?
遇到过
多人在dev分支开发 出现的冲突
分支合并出现的冲突
把代码pull下来 直接解决冲突 商量结局是留我的代码还是同事的代码
- 你知道git变基?
分支合并:dev分支合并到master分支
merge或rebase合并
把多次提交合并成一个版本
- git pull 和git fetch的区别
pull和fetch都是拉取代码
pull=fetch+合并
- 你知道git flow吗?
git工作流 它是一个人提出的分支方案
我们没有用 我们用的就是master+dev+bug分支方案(这个都是大厂使用的分支方案)
- 使用git的操作流程
1.克隆到本地 git clong '地址'
2.写代码
3.git add .
4.git commit -m '注释'
5.git pull
6.git push
- 什么是gitee github:pr |gitlab:mr?
它们只是不同的叫法都是用来提交分支合并的请求
六、前台首页组件编写
我们根据官网图片可以分析出需要三个组件来完成比较方便(Header、Banner、Footer)
HomeView.vue
<template>
<div class="home">
<Header></Header>
<Banner></Banner>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<Footer></Footer>
</div>
</template>
<script>
import Header from '@/components/Header'
import Banner from '@/components/Banner'
import Footer from '@/components/Footer'
export default {
name: 'HomeView',
data() {
return {}
},
components: {
Header, Banner, Footer
}
}
</script>
Header.vue
<template>
<div class="header">
<div class="slogan">
<p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
</div>
<div class="nav">
<ul class="left-part">
<li class="logo">
<router-link to="/">
<img src="../assets/img/head-logo.svg" alt="">
</router-link>
</li>
<li class="ele">
<span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
</li>
<li class="ele">
<span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
</li>
<li class="ele">
<span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
</li>
</ul>
<div class="right-part">
<div>
<span>登录</span>
<span class="line">|</span>
<span>注册</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Header",
data() {
return {
url_path: sessionStorage.url_path || '/',
}
},
methods: {
goPage(url_path) {
// 已经是当前路由就没有必要重新跳转
if (this.url_path !== url_path) {
// 传入的参数,如果不等于当前路径,就跳转
this.$router.push(url_path)
}
sessionStorage.url_path = url_path;
},
},
created() {
sessionStorage.url_path = this.$route.path
this.url_path = this.$route.path
}
}
</script>
<style scoped>
.header {
background-color: white;
box-shadow: 0 0 5px 0 #aaa;
}
.header:after {
content: "";
display: block;
clear: both;
}
.slogan {
background-color: #eee;
height: 40px;
}
.slogan p {
width: 1200px;
margin: 0 auto;
color: #aaa;
font-size: 13px;
line-height: 40px;
}
.nav {
background-color: white;
user-select: none;
width: 1200px;
margin: 0 auto;
}
.nav ul {
padding: 15px 0;
float: left;
}
.nav ul:after {
clear: both;
content: '';
display: block;
}
.nav ul li {
float: left;
}
.logo {
margin-right: 20px;
}
.ele {
margin: 0 20px;
}
.ele span {
display: block;
font: 15px/36px '微软雅黑';
border-bottom: 2px solid transparent;
cursor: pointer;
}
.ele span:hover {
border-bottom-color: orange;
}
.ele span.active {
color: orange;
border-bottom-color: orange;
}
.right-part {
float: right;
}
.right-part .line {
margin: 0 10px;
}
.right-part span {
line-height: 68px;
cursor: pointer;
}
</style>
Banner.vue
<template>
<div class="banner">
<el-carousel :interval="5000" arrow="always" height="400px">
<el-carousel-item v-for="item in bannerList" :key="item.title">
<div v-if="item.image.indexOf('http')==-1">
<router-link :to="item.link"><img :src="item.image" alt=""></router-link>
</div>
<div v-else>
<a :href="item.link"><img :src="item.image" alt=""></a>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: "Banner",
data() {
return {
bannerList: []
}
},
created() {
this.$axios.get(this.$settings.BASE_URL + 'home/banner/').then(res => {
this.bannerList = res.data.result
})
}
}
</script>
<style scoped>
.el-carousel__item {
height: 400px;
min-width: 1200px;
}
.el-carousel__item img {
height: 400px;
margin-left: calc(50% - 1920px / 2);
}
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
Footer.vue
<template>
<div class="footer">
<ul>
<li>关于我们</li>
<li>联系我们</li>
<li>商务合作</li>
<li>帮助中心</li>
<li>意见反馈</li>
<li>新手指南</li>
</ul>
<p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>
</div>
</template>
<script>
export default {
name: "Footer"
}
</script>
<style scoped>
.footer {
width: 100%;
height: 128px;
background: #25292e;
color: #fff;
}
.footer ul {
margin: 0 auto 16px;
padding-top: 38px;
width: 810px;
}
.footer ul li {
float: left;
width: 112px;
margin: 0 10px;
text-align: center;
font-size: 14px;
}
.footer ul::after {
content: "";
display: block;
clear: both;
}
.footer p {
text-align: center;
font-size: 12px;
}
</style>
本文含有隐藏内容,请 开通VIP 后查看