luffy-(5)

内容概览

  • 协同开发
  • 冲突解决
  • 线上分支合并
  • pycharm操作git
  • 为开源项目贡献代码
  • git面试题
  • 前台首页组件编写
  • 首页轮播图功能功能前后端连通
  • 登录注册功能设计
  • 补充

协同开发

"""在公司中,都是多人共同开发一个项目"""
	1. 组长本地创建出空项目,底层代码写完,提交到远程仓库
	2. 张三,李四,王五都要共同开发这个项目
	3. 我们要把代码clone到本地
		- 找一个位置右键:Git Bash Here
		- git clone 远程地址
		- 使用pycharm打开
		- 本地能够运行项目(运行不了可能的原因:依赖没装好,数据库链接不对)
	4. 写代码,提交到本地版本库,push到远端(推之前可以先pull一下)

"""多人协同开发一个项目"""
	- 作为项目创建者:本地搞好,远程搞好,推上去,把别人加为开发者
    - 作为协同开发者:远程账号,密码---》登录进去就能看到这个项目了

冲突解决

多人同一分支开发出现冲突
"""
出现冲突的原因
	- 别人跟我们改了同样的代码,但是他先提交到远程仓库了
	- 我们提交会报错,先拉取远端的代码,但是因为改动了同样代码,所以有冲突
	- 冲突的样子
		<<<<<<< HEAD
		print('xxxyyy')
		=======    # 上边是我们的代码,下边是别人的代码
		print('asd')
		>>>>>>> 58525417debfbcc0b4d3a127c2623aad402eee2d 
	- 修改代码直至不报错
	- 重新提交到本地版本库,推到远端
"""
分支合并出现冲突

在dev分支开发的时候,master分支提交了版本,刚好又和dev分支提交版本的代码冲突了,合并代码时就会冲突

1. 新建一个dev分支,切换到dev分支
	git branch dev
	git checkout dev
2. dev分支修改dev.py 第一行,提交到版本库
	git add .
	git commit -m '修改了dev.py'
3. dev分支修改home/views.py最后一行
	git add .
	git commit -m '最后一行添加注释'
4. 切回到master分支, 修改dev分支修改的位置,提交到版本库
	git checkout master
	git add .
	git commit -m 'master修改'
5. 合并代码,会出现冲突,解决冲突并提交
	git merge dev
	# 解决冲突
	git add .
	git commit -m '解决冲突'

线上分支合并(pr,mr)

1. 远程建立分支:在网站上点击操作
2. 把远程分支拉到本地
	git pull origin dev  # 拉下来但是看不到,直接切换即可
	git checkout dev
3. 本地dev分支修改代码
	git add .
	git commit -m '本地dev提交'
4. 本地dev推到远端
	git push origin dev
5. 远程合并分支:把dev合并到master
	- 提交pull request 的申请
	- 领导看到pr,审核,通过后点合并
	- 到此 远端dev分支就合并进master分支了

pycharm操作git

pycharm使用图形化界面操作git,之前所有的命令,都可以在pycharm中通过点击实现

clone

luffy-(5)_第1张图片
luffy-(5)_第2张图片

git add

右键点击目录,如果右键点击的是项目根目录等同于 git add .
luffy-(5)_第3张图片

git commit

luffy-(5)_第4张图片
luffy-(5)_第5张图片

git push

luffy-(5)_第6张图片

git pull

luffy-(5)_第7张图片

git branch操作

luffy-(5)_第8张图片

查看git操作记录 git log

luffy-(5)_第9张图片

本地代码与版本库比较

luffy-(5)_第10张图片
luffy-(5)_第11张图片
luffy-(5)_第12张图片

为开源项目贡献代码

"""
为开源项目贡献代码
	1 看到开源项目,点fork,你的仓库就有这个开源项目了
    2 在本地拉取【你仓库】fork的代码
    3 你继续写,提交到自己远程仓库
    4 提交pr合并,如果作者同意,你就可以合并进去了
"""

git 面试题

1 你们公司分支方案是什么样的?
	-master,dev,bug 三条分支
    -master主要用来发布版本,写好了某个版本的代码合并进去,不直接在master上开发
    -dev:开发分支,项目的开发者,都在dev分支上开发
    -bug:bug分支,用来修改bug,发布小版本

2 使用git开发,遇到过冲突吗?
	-遇到过
    -多人在dev分支开发,出现的冲突
    -分支合并出现的冲突
    -把代码拉下来,直接解决冲突,保留我的代码,保留同事的代码
3 你知道git 变基?
	-分支合并:dev分支合并到master分支
    -merge或rebase 合并
    -把多次提交合并成一个
    
4 git pull 和git fetch的区别
	-pull 和 fetch都是拉取代码
 	-pull=fetch+合并
    
5 你知道git flow吗?git 工作流,它是一个别人提出的分支方案
    我们没有用,我们用的就是master+dev+bug分支方案
6 使用git 的操作流程
	- 如果是普通开发者:git clone下来,写代码,git add ., git commit, git pull, git push
7 什么是gitee,github:pr,gitlab:mr?
	-不同叫法:提交分支合并的请求

前台首页组件编写

"""
HomeView.vue 页面组件
Header.vue   头部组件
Banner.vue   轮播图组件
Footer.vue   尾部组件
"""
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>
    <Footer>Footer>
  div>
template>

<script>
import Header from "@/components/Header";
import Banner from "@/components/Banner";
import Footer from "@/components/Footer";

export default {
  name: 'HomeView',
  methods: {},
  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">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}h3>
      el-carousel-item>
    el-carousel>
  div>
template>

<script>
export default {
  name: "Banner",
}
script>

<style scoped>
.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号-1p>
  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>

首页轮播图功能前后端连通

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.link.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>

登录注册功能设计

"""
后端接口
	1 账号/手机号/邮箱+密码登录接口
	2 手机号+验证码登录接口
	3 发送手机验证码接口  (第三方发送短信)
	4 注册接口--》手机号,验证码,密码
	5 判断手机号是否存在接口
"""

补充

1 cgi fastcig WSGI uwsgi uWSGI  
	# cgi:通用网关接口(Common Gateway Interface/CGI)是一种重要的互联网技术,可以让一个客户端,从网页浏览器向执行在网络服务器上的程序请求数据。CGI描述了服务器和请求处理程序之间传输数据的一种标准。
     一句话总结: 一个标准,定义了客户端服务器之间如何传数据
    
    # fastcig:快速通用网关接口(Fast Common Gateway Interface/FastCGI)是一种让交互程序与Web服务器通信的协议。FastCGI是早期通用网关接口(CGI)的增强版本
      一句话总结: CGI的升级版
      常用的fastcgi软件: 
            Apache HTTP Server (部分)    :LAMP  LNMP
            Nginx(主流):nginx是一个符合fastcgi协议的软件,处于浏览器和web程序之间,主要做请求转发和负载均衡,也可以称之为服务器中间件
            Microsoft IIS:windows server
           

   # WSGI:Web服务器网关接口(Python Web Server Gateway Interface,缩写为WSGI)是为Python语言定义的Web服务器和Web应用程序或框架之间的一种简单而通用的接口。自从WSGI被开发出来以后,许多其它语言中也出现了类似接口
	一句话总结: 为Python定义的web服务器和web框架之间的接口标准
    wsgiref:性能很低,python实现的,django内置了,测试阶段用,上线不用
    uWSIG:性能高,c实现的
    gunicorn:python实现的
    
  # uWSGI:是一个web服务器,类似的web服务器还有部署java web应用的tomcat,符合wsgi协议的web服务器,上面标准的具体实现

  # uwsgi:uWSGI服务器实现的一个自有的协议,是uWSGI 的一种内部协议(之前的协议都是使用字符串,而采用二进制来存储和解析数据的uwsgi的速度更快)
    
    

3 Apache
	-Apache 公司
    -Apache  web服务器
    -Apache  开源协议
    	-Kafka :apache顶级开源项目
        -echars:原来是百度开发的,交给了apache孵化

你可能感兴趣的:(git,python,开发语言)