5.git分支的创建-提交-合并，gulp4.0,跨域-前端解决-后端解决

前端（接到项目了）

角色

1. 总监
   1. 决定项目使用哪种开发工具， 使用哪个框架开发
      开发工具： gulp webpack(主流) 自动构建项目的快速开发工具
      框架：
      jq
      bs
      vue
      angular
      react
   2. 构建版本控制工具
      git svn
   3. 决定项目托管的地方
      github 码云（gitee）
   4. 创建码云的环境
   5. 创建分支
      默认直接创建好的 远程主分支（master）
      创建多个远程子分支
      项目组：
      组长： yyb master
      成员： 成员1 branch1
      成员2 branch2
      成员3 branch3
      成员4 branch4
      git冲突：
      指的是两个人同时操作了一个分支
      git 冲突解决；
      先拉取， 再上传
      git pull
      git push
2. 底层开发： 等安排
   1. 将项目下载下来之后， 切记不要直接操作原git内容， 我们应该备份， 然后操作备份内容(本地)
   2. 本地
   3. 主分支（默认）
   4. 子分支
   5. 项目开发
   6. 专业词
      https ： https协议
      ssh : 秘钥（ git协议 ）
      作业： 分组 --》 码云创建git仓库， 分支

gulp 4.0

npmjs中的gulp的插件 3.x gulp语法支持 不支持4.x

1. 前端服务器启动
2. sass编写
3. html产出
4. 静态资源拷贝
5. js压缩
6. gulp4.x 中 series parallel
7. 反向代理 （插件 http-proxy-middleware）

前后端的跨域： 后端Node.js

Access to XMLHttpRequest at 'http://localhost:3000/login' from origin 'http://localhost:9001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

1. jsonp jsonp + Node.js
   1.5 Node.js express跨域

router.get('/shopcar',function(req,res,next){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, PUT, PATCH, POST, DELETE");
res.header("Access-Control-Allow-Headers", req.header('access-control-request-headers'));
res.render('shopcar',{
goods: '商品1'
})
})

2. cors中间件跨域(两种写法)
   1. 全局放置 （能跨域 ， 但是接口有问题 —> 中间件至上而下执行， 匹配成功， 它就停留了）

app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

问题： 即使这样全局设置了， 也是不能跨域的
解决： 缺失了 cors中间件
     1. 安装cors
cnpm i cors -D
     2. 导入
const cors = requrie(‘cors’)
app.use(cors)
2. 直接在cors中书写配置项 ( 推荐 )

app.use(cors({
origin: ["http://localhost:8001","http://localhost:5000","http://localhost:8080","http://localhost:9001"], //允许所有前端域名
methods: "GET,HEAD,PUT,PATCH,POST,DELETE", //被允许的提交方式
allowedHeaders:['Content-Type','Authorization']//被允许的post方式的请求头
}))

3. 反向代理服务跨域
   0:什么叫反向代理？
   反向代理指的是在前端的服务器环境中， 短暂的开启一个后端服务器， 由后端服务器进行数据请求， 然后在将结果返回给前端
   1. 使用工程化工具自带的 反向代理服务 — 暂时不能用
      gulp
      webpack (自带的)
   2. 使用第三方提供的反向代理服务 --> http-proxy-middleware

const gulp = require('gulp')
const server = require('gulp-webserver')
const uglify = require('gulp-uglify')
const proxy = require('http-proxy-middleware')
var sass = require('gulp-sass');
 
sass.compiler = require('node-sass');
// 1. 启动一个静态服务器
gulp.task('server',function(){
  gulp.src('./')
    .pipe(server({
      port: 9001,
      host: 'localhost',
      livereload: true,
      // directoryListing: {
      //   enable: true,
      //   path: '/'
      // },
      open: true,
      allowEmpty: true,
      middleware: [
        // proxy(标记，配置项)
        proxy('/yyb',{
          target: 'http://localhost:3000',
          changeOrigin: true,
          pathRewrite: {
            '^/yyb':''
          }
        }),
        proxy('/login',{
          target: 'http://localhost:3000',
          changeOrigin: true
        })
      ]
    }))
})
//2. 编写sass
 
gulp.task('sass', function () {
  return gulp.src('./src/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dev'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./src/**/*.scss',gulp.series(['sass']));
});
// 3. html产出
gulp.task('html',function(){
  gulp.src('./*.html')
    .pipe(gulp.dest('./dev'))
})
gulp.task('html:watch',function(){
  gulp.watch('./*.html',gulp.series(['html']))
})
// 4. 静态资源拷贝
gulp.task('copystatic',function(){
  gulp.src('./src/libs/**/*')
    .pipe(gulp.dest('./dev/libs'))
})
//5. 压缩资源js
gulp.task('js:uglify',function(){
  gulp.src('./src/app.js')
    .pipe(uglify())                 // 直接压缩hello.js
    .pipe(gulp.dest('./dev'))
})
gulp.task(
  'default',
  gulp.parallel([
    'server',
    'copystatic',
    'js:uglify',
    gulp.parallel(['html','html:watch']),
    gulp.series(['sass','sass:watch'])]),
    function(){console.log('task is done~~~~')}
)

4. 总结：
   1. 后端解决跨域（设置请求头）
      1. express 原生
      2. cors中间件
   2. 前端解决跨域
      1. 反向代理（无论是自带的还是第三方的都得通过工程化工具解决）