发表于 | 分类于

安装

第一步就是要安装gulp-babel

1
npm install --save-dev gulp-babel

使用

1
2
3
4
5
6
7
8
var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});
阅读全文 »

发表于 | 分类于

综述

flexbox是一个完整的模块而不是一个单独的属性，它包含了两个部分 父元素flex container，子元素flex items，这两个是属于一个包含关系

IMAGE

如图所示，flexbox有一个主轴main axis,还有一个侧轴cross axis

  • main axis flex item排列的方向，当然这个方向是取决于flex-direction属性，并不是绝对的水平
  • main start | main end 主轴的开始位置与结束位置
  • main size 在主轴方向的宽度或高度就是项目的主轴长度
  • cross axis 与主轴垂直方向的轴叫做侧轴
  • cross start | cross end 侧轴的开始位置与结束位置
  • cross size 侧周方向的宽度和高度就是项目的测轴长度
阅读全文 »

发表于 | 分类于

response拦截器自动刷新token并重新发起请求

业务场景：后台api接口返回code:-2 就代表着token不存在或者失效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// respone拦截器
service
  .interceptors
  .response
  .use(response => {
    const res = response.data
    if (response.data.code === -2) {
      const originalRequest = response.config//获取请求的config配置
      const token = sessionStorage.getItem('token')
      if (token && token !== '') { //token不存在的时候，会在router before中获取，这里只针对token失效的情况
        return getToken().then(async(data) => { //重新获取token
          sessionStorage.setItem('token', data.data.token)
          originalRequest.params.token = data.data.token
          //由于Promise对象不支持返回值，这里选用了es新特性 async await 关键字
          let res = await axios(originalRequest)
          return res.data
        })
      }
    }

    if (res.code !== 0 && res.code !== -2) {
      Toast({mes: res.msg, timeout: 1500, icon: 'error'})

      return Promise.reject('error')
    } else {
      return response.data
    }
  }, error => {
    Toast({mes: error, timeout: 1500, icon: 'error'})

    return Promise.reject(error)
  })

发表于 | 分类于

现如今的前端真的是百家争鸣，百花齐放。各路新奇的技术，框架层出不穷，Javascript这门编程语言也被推向了神坛。Javascript在前端，后端，客户端各个领域都想要蚕食一块资源，为前端开发者们带来了新的春天，让很多切图仔们摇身一变，变成了神坛之上的所谓的前端大佬。前端自动化工作流正是这众多前端发展道路上耀眼的一个领域。

阅读全文 »

发表于 | 分类于

history模式下 配置rewrite规则

1
2
3
location / {
  try_files $uri $uri/ /index.html;
}

配置接口的反向代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
server {
    listen 80;
    server_name a.com;
    root /wwwroot/test;
    autoindex off;
    index index.html index.htm index.php;

    # 将a.com/api的所有请求反向代理到b.com
    location  /open/api {
      proxy_pass http://b.com;
    }

    location ~ /\.ht {
       deny  all;
    }
}

发表于 | 分类于

child_process.exec(command[, options][, callback])
参数一表示 ：使用cmd执行的命令

在Windows环境下使用的命令是

  • rd/s/q 盘符:\某个文件夹 （强制删除文件文件夹和文件夹内所有文件）
  • del/f/s/q 盘符:\文件名 （强制删除文件，文件名必须加文件后缀名））

在linux环境下使用的命令是

  • rm -rf

代码示例

1
2
3
4
5
6
7
8
9
//删除文件夹里面的git信息
if(os.platform() === 'darwin'){
    child = exec('rm -rf .git',{cwd: '/document'}, function(err, out) {
        console.log(out);
        err && console.log(err);
    });
}else if(os.platform() === 'win32'){
    child = exec('rd/s/q .git',{cwd: "D:/document"});
}

发表于 | 分类于

最近几个晚上都在编写dotflow(一个前端工作流平台)，想尝试一次新技术，就选择了React+Electron技术栈。React是一个前端UI渲染框架，结合React全家桶做SPA也是一把好手；Electron是基于Nodejs的一个编写客户端软件的框架，ps:呵呵，万能的js。

阅读全文 »

发表于 | 分类于

背景

近几日将公司项目开了一个新坑，使用Nodejs进行服务端渲染，为公司团队前后端分离往前推进了一大步，本文就介绍了如何将开发好的Node程序在服务器上完成高逼格自动化部署

技术架构

  • 开发环境：MacOS 10.13
  • 程序：Koa+requirejs
  • 服务器：公司内网服务器 Centos6.8
  • 代码托管：公司内部gitlab
  • 程序端口：3000端口 使用pm2进行托管部署
阅读全文 »