角色
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. 底层开发: 等安排
- 将项目下载下来之后, 切记不要直接操作原git内容, 我们应该备份, 然后操作备份内容(本地)
- 本地
- 主分支(默认)
- 子分支
3. 专业词
https : https协议
ssh : 秘钥( git协议 )
gulp 4.0
npmjs中的gulp的插件 3.x gulp语法支持 不支持4.x
- 前端服务器启动
- sass编写
- html产出
- 静态资源拷贝
- js压缩
- gulp4.x 中 series parallel
- 反向代理 (插件 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.
- 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’
})
}) - cors中间件跨域(两种写法)
- 全局放置 (能跨域 , 但是接口有问题 —> 中间件至上而下执行, 匹配成功, 它就停留了)
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中间件 - 安装cors
cnpm i cors -D - 导入
const cors = requrie(‘cors’)
app.use(cors) - 直接在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方式的请求头
})) - 反向代理服务跨域
0: 什么叫反向代理?
反向代理指的是在前端的服务器环境中, 短暂的开启一个后端服务器, 由后端服务器进行数据请求, 然后在将结果返回给前端 - 使用工程化工具自带的 反向代理服务 — 暂时不能用
gulp
webpack (自带的) - 使用第三方提供的反向代理服务 --> http-proxy-middleware
// 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 }) ] })) })
- 总结:
- 后端解决跨域(设置请求头)
- express 原生
- cors中间件
- 前端解决跨域
- 反向代理(无论是自带的还是第三方的都得通过工程化工具解决)