Category Archive 未分类

By柏小白

教你怎么实现缩短网址功能

本文将简单介绍,如何去完成一个缩短网址的功能。

Node.js + MySQL + Redis版本的源码地址:github

Demo地址:www.ecool.fun/shortLink

文章阅读大概需要8分钟。

什么是短链接

短链接,通俗来说,就是将长的URL网址,通过程序计算等方式,转换为简短的网址字符串。

大家经常可以从微博或者各类营销短信中,看到短链接,形式一般类似于 t.cn/xxxxxx,点击后,就能跳转到对应的页面。

早期短链接广泛应用于图片上传网站,通过缩短网址URL链接字数,达到减少代码字符串的目的。更便于使用者引用网址,写入代码中,节省字符数空间。常见于网店图片分类的使用,因有字符限制,运用短链接,达到外链图片的目的,自微博盛行以来,在微博字数有限的特色下,短链接也盛行于微博网站,以节省字数,给博主发布更多文字的空间。

将长链接转成短链接,一般是为了方便记忆或者传播。

需要完成的功能

从上面的介绍中,我们得出,缩短网址需要完成以下两个功能点:

  • 将长网址缩短成短链接
  • 点击生成短链接,能正常跳转到原来的长网址页面

全流程设计

其实上述功能点的原理很简单,简单描述一下:

  • 用户输入长网址,服务端接收后进行处理,并根据长网址的内容,生成一个短码,并将映射关系进行存储。然后根据短码拼接出短链接,返回给用户;
  • 用户点击短链接,服务器端根据短链接中的短码,查找到对应的长网址,并302跳转到对应的页面。

知识点:为什么要使用302跳转,而不是301跳转呢?

301是永久重定向,302是临时重定向。短地址一经生成就不会变化,所以用301是符合http语义的。但是如果用了301, Google,百度等搜索引擎,搜索的时候会直接展示真实地址,那我们就无法统计到短地址被点击的次数了,也无法收集用户的Cookie, User Agent 等信息,这些信息可以用来做很多有意思的大数据分析,也是短网址服务商的主要盈利来源。

引自知乎-武林的回答,原文链接

整个流程的设计如下图所示:

短网址全流程

可以看到,我用到了MySQLRedis来存储长网址和短码之间的映射关系。

MySQL想必大家都能理解,但是为什么要用 Redis 呢,直接用数据库不就好了吗?

这个主要是考虑到生成短链接,在投放之后的访问量会比较大,使用 Redis 缓存后,能有效降低数据库的压力。

生成短码的方法

通过上面的全流程设计,会发现主要的问题就是如何通过长网址,去生成对应的短码。

短码一般是由 [a - z, A - Z, 0 - 9] 这62 个字母或数字组成,短码的长度也可以自定义,但一般不超过8位。比较常用的都是6位,6位的短码已经能有568亿种的组合:(26+26+10)^6 = 56800235584,已满足绝大多数的使用场景。

目前比较流行的生成短码方法有:自增id摘要算法普通随机数

  • 自增id

该方法是一种无碰撞的方法,原理是,每新增一个短码,就在上次添加的短码id基础上加1,然后将这个10进制的id值,转化成一个62进制的字符串。

一般利用数据表中的自增id来完成:每次先查询数据表中的自增id最大值max,那么需要插入的长网址对应自增id值就是 max+1,将max+1转成62进制即可得到短码。

但是短码 id 是从一位长度开始递增,短码的长度不固定,不过可以用 id 从指定的数字开始递增的方式来处理,确保所有的短码长度都一致。同时,生成的短码是有序的,可能会有安全的问题,可以将生成的短码id,结合长网址等其他关键字,进行md5运算生成最后的短码。

10进制转成62进制的具体实现:

function string10to62(number) {
    const chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ';
    const charsArr = chars.split('');
    const radix = chars.length;
    let qutient = +number;
    let arr = [];
    do{
        let mod = qutient % radix;
        qutient = (qutient - mod) / radix;
        arr.unshift(charsArr[mod]);
    }while(qutient);
    return arr.join('');
}
复制代码
  • 摘要算法

摘要算法又称哈希算法,它表示输入任意长度的数据,输出固定长度的数据。相同的输入数据始终得到相同的输出,不同的输入数据尽量得到不同的输出。

算法思路:

1、将长网址通过 md5 运算,生成 32 字符的 hex string,分为 4 段,每段 8 个字符;

2、对这四段循环处理,取 8 个字节,将其看成 16 进制串,并与 0x3fffffff(30位1) 与操作,即超过 30 位的忽略处理;

3、这 30 位分成 6 段,每 5 位的数字作为字母表的索引取得特定字符,依次进行获得 6 位字符串。

4、总的 md5 串可以获得 4 个 6 位串,取里面的任意一个就可作为这个长网址的短链接 url 地址。

虽然几率很小,但是该方法依然存在碰撞的可能性,解决冲突会比较麻烦。不过该方法生成的短码位数,是固定的,也不存在连续生成的短码有序的情况。

  • 普通随机数

该方法是从62个字符串中随机取出一个6位短码的组合,然后去数据库中查询该短码是否已存在。如果已存在,就继续循环该方法重新获取短码,否则就直接返回。

该方法是最简单的一种实现,不过由于Math.round()方法生成的随机数属于伪随机数,碰撞的可能性也不小。在数据比较多的情况下,可能会循环很多次,才能生成一个不冲突的短码。

具体实现:

// 获取唯一的Link
async getShortLink() {
    const shortLink = this.generateShortLink();

    // 查询数据库中是否存在该链接,如果存在,就直接返回
    const searchResult = await this.searchByLinkInMySQL(shortLink);

    if (searchResult && searchResult.length > 0) {
    // 如果shortLink已经存在,就遍历重新生成
        return this.getShortLink();
    }
    return shortLink;

}

// 生成随机的Link
generateShortLink() {
    let str = '';
    const arr = [
        '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
    ];

    for (let i = 0; i < 6; i++) {
        const pos = Math.round(Math.random() * (arr.length - 1));
        str += arr[pos];
    }
    return str;
}
复制代码

综上,比较推荐使用第一种方法来实现短码的生成。

广告时间

最后,欢迎大家star我们的人人贷大前端团队博客,所有的文章还会同步更新到知乎专栏掘金账号,我们每周都会分享几篇高质量的大前端技术文章。

作者:人人贷大前端技术中心
链接:https://juejin.im/post/5d2d33885188253a2e1b8626
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

By柏小白

vue中8种组件通信方式

vue中8种组件通信方式, 值得收藏!

之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明:

1563158686(1)

如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系; B与C之间是兄弟关系;A与D、A与E之间是隔代关系; D与E是堂兄关系(非直系亲属) 针对以上关系我们归类为:

  • 父子组件之间通信
  • 非父子组件之间通信(兄弟组件、隔代关系组件等)

本文会介绍组件间通信的8种方式如下图目录所示:并介绍在不同的场景下如何选择有效方式实现的组件间通信方式,希望可以帮助小伙伴们更好理解组件间的通信。

1563158701(1)

一、props / $emit

父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信。

1. 父组件向子组件传值

下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:['红楼梦', '西游记','三国演义']

// section父组件
<template>
  <div class="section">
    <com-article :articles="articleList"></com-article>
  </div>
</template>

<script>
import comArticle from './test/article.vue'
export default {
  name: 'HelloWorld',
  components: { comArticle },
  data() {
    return {
      articleList: ['红楼梦', '西游记', '三国演义']
    }
  }
}
</script>

复制代码
// 子组件 article.vue
<template>
  <div>
    <span v-for="(item, index) in articles" :key="index">{{item}}</span>
  </div>
</template>

<script>
export default {
  props: ['articles']
}
</script>
复制代码

总结: prop 只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且 prop 只读,不可被修改,所有修改都会失效并警告。

2. 子组件向父组件传值

对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。 通过一个例子,说明子组件如何向父组件传递数据。 在上个例子的基础上, 点击页面渲染出来的ariticleitem, 父组件中显示在数组中的下标

// 父组件中
<template>
  <div class="section">
    <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
    <p>{{currentIndex}}</p>
  </div>
</template>

<script>
import comArticle from './test/article.vue'
export default {
  name: 'HelloWorld',
  components: { comArticle },
  data() {
    return {
      currentIndex: -1,
      articleList: ['红楼梦', '西游记', '三国演义']
    }
  },
  methods: {
    onEmitIndex(idx) {
      this.currentIndex = idx
    }
  }
}
</script>
复制代码
<template>
  <div>
    <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
  </div>
</template>

<script>
export default {
  props: ['articles'],
  methods: {
    emitIndex(index) {
      this.$emit('onEmitIndex', index)
    }
  }
}
</script>
复制代码

二、 $children / $parent

1563158473(1)

上面这张图片是vue官方的解释,通过$parent$children就可以访问组件的实例,拿到实例代表什么?代表可以访问此组件的所有方法和data。接下来就是怎么实现拿到指定组件的实例。

使用方法

// 父组件中
<template>
  <div class="hello_world">
    <div>{{msg}}</div>
    <com-a></com-a>
    <button @click="changeA">点击改变子组件值</button>
  </div>
</template>

<script>
import ComA from './test/comA.vue'
export default {
  name: 'HelloWorld',
  components: { ComA },
  data() {
    return {
      msg: 'Welcome'
    }
  },

  methods: {
    changeA() {
      // 获取到子组件A
      this.$children[0].messageA = 'this is new value'
    }
  }
}
</script>
复制代码
// 子组件中
<template>
  <div class="com_a">
    <span>{{messageA}}</span>
    <p>获取父组件的值为:  {{parentVal}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageA: 'this is old'
    }
  },
  computed:{
    parentVal(){
      return this.$parent.msg;
    }
  }
}
</script>
复制代码

要注意边界情况,如在#app上拿$parent得到的是new Vue()的实例,在这实例上再拿$parent得到的是undefined,而在最底层的子组件拿$children是个空数组。也要注意得到$parent$children的值不一样,$children 的值是数组,而$parent是个对象

总结

上面两种方式用于父子组件之间的通信, 而使用props进行父子组件通信更加普遍; 二者皆不能用于非父子组件之间的通信。

三、provideinject

概念:

provideinject 是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。

注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据,而不局限于只能从当前父组件的props属性中回去数据

举例验证

接下来就用一个例子来验证上面的描述: 假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件,B是A的子组件

// A.vue

<template>
  <div>
	<comB></comB>
  </div>
</template>

<script>
  import comB from '../components/test/comB.vue'
  export default {
    name: "A",
    provide: {
      for: "demo"
    },
    components:{
      comB
    }
  }
</script>
复制代码
// B.vue

<template>
  <div>
    {{demo}}
    <comC></comC>
  </div>
</template>

<script>
  import comC from '../components/test/comC.vue'
  export default {
    name: "B",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    },
    components: {
      comC
    }
  }
</script>
复制代码
// C.vue
<template>
  <div>
    {{demo}}
  </div>
</template>

<script>
  export default {
    name: "C",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    }
  }
</script>
复制代码

四、ref / refs

ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据, 我们看一个ref 来访问组件的例子:

// 子组件 A.vue

export default {
  data () {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    sayHello () {
      console.log('hello')
    }
  }
}
复制代码
// 父组件 app.vue

<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.name);  // Vue.js
      comA.sayHello();  // hello
    }
  }
</script>
复制代码

五、eventBus

eventBus 又称为事件总线,在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件。

eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

在Vue的项目中怎么使用eventBus来实现组件之间的数据通信呢?具体通过下面几个步骤

1. 初始化

首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它.

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()
复制代码

2. 发送事件

假设你有两个组件: additionNum 和 showNum, 这两个组件可以是兄弟组件也可以是父子组件;这里我们以兄弟组件为例:

<template>
  <div>
    <show-num-com></show-num-com>
    <addition-num-com></addition-num-com>
  </div>
</template>

<script>
import showNumCom from './showNum.vue'
import additionNumCom from './additionNum.vue'
export default {
  components: { showNumCom, additionNumCom }
}
</script>

复制代码
// addtionNum.vue 中发送事件

<template>
  <div>
    <button @click="additionHandle">+加法器</button>    
  </div>
</template>

<script>
import {EventBus} from './event-bus.js'
console.log(EventBus)
export default {
  data(){
    return{
      num:1
    }
  },

  methods:{
    additionHandle(){
      EventBus.$emit('addition', {
        num:this.num++
      })
    }
  }
}
</script>
复制代码

3. 接收事件

// showNum.vue 中接收事件

<template>
  <div>计算和: {{count}}</div>
</template>

<script>
import { EventBus } from './event-bus.js'
export default {
  data() {
    return {
      count: 0
    }
  },

  mounted() {
    EventBus.$on('addition', param => {
      this.count = this.count + param.num;
    })
  }
}
</script>
复制代码

这样就实现了在组件addtionNum.vue中点击相加按钮, 在showNum.vue中利用传递来的 num 展示求和的结果.

4. 移除事件监听者

如果想移除事件的监听, 可以像下面这样操作:

import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})
复制代码

六、Vuex

1. Vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态来自不同视图的行为需要变更同一状态的问题,将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上

2. Vuex各个模块

  1. state:用于数据的存储,是store中的唯一数据源
  2. getters:如vue中的计算属性一样,基于state数据的二次包装,常用于数据的筛选和多个数据的相关性计算
  3. mutations:类似函数,改变state数据的唯一途径,且不能用于处理异步事件
  4. actions:类似于mutation,用于提交mutation来改变状态,而不直接变更状态,可以包含任意异步操作
  5. modules:类似于命名空间,用于项目中将各个模块的状态分开定义和操作,便于维护

3. Vuex实例应用

// 父组件

<template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>

<script>
  import ChildA from './components/ChildA' // 导入A组件
  import ChildB from './components/ChildB' // 导入B组件

  export default {
    name: 'App',
    components: {ChildA, ChildB} // 注册A、B组件
  }
</script>
复制代码
// 子组件childA

<template>
  <div id="childA">
    <h1>我是A组件</h1>
    <button @click="transform">点我让B组件接收到数据</button>
    <p>因为你点了B,所以我的信息发生了变化:{{BMessage}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        AMessage: 'Hello,B组件,我是A组件'
      }
    },
    computed: {
      BMessage() {
        // 这里存储从store里获取的B组件的数据
        return this.$store.state.BMsg
      }
    },
    methods: {
      transform() {
        // 触发receiveAMsg,将A组件的数据存放到store里去
        this.$store.commit('receiveAMsg', {
          AMsg: this.AMessage
        })
      }
    }
  }
</script>
复制代码
// 子组件 childB

<template>
  <div id="childB">
    <h1>我是B组件</h1>
    <button @click="transform">点我让A组件接收到数据</button>
    <p>因为你点了A,所以我的信息发生了变化:{{AMessage}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        BMessage: 'Hello,A组件,我是B组件'
      }
    },
    computed: {
      AMessage() {
        // 这里存储从store里获取的A组件的数据
        return this.$store.state.AMsg
      }
    },
    methods: {
      transform() {
        // 触发receiveBMsg,将B组件的数据存放到store里去
        this.$store.commit('receiveBMsg', {
          BMsg: this.BMessage
        })
      }
    }
  }
</script>
复制代码

vuex的store,js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  // 初始化A和B组件的数据,等待获取
  AMsg: '',
  BMsg: ''
}

const mutations = {
  receiveAMsg(state, payload) {
    // 将A组件的数据存放于state
    state.AMsg = payload.AMsg
  },
  receiveBMsg(state, payload) {
    // 将B组件的数据存放于state
    state.BMsg = payload.BMsg
  }
}

export default new Vuex.Store({
  state,
  mutations
})
复制代码

七、localStorage / sessionStorage

这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。 通过window.localStorage.getItem(key)获取数据 通过window.localStorage.setItem(key,value)存储数据

注意用JSON.parse() / JSON.stringify() 做数据格式转换 localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.

八 $attrs与 $listeners

现在我们来讨论一种情况, 我们一开始给出的组件关系图中A组件与D组件是隔代关系, 那它们之前进行通信有哪些方式呢?

  1. 使用props绑定来进行一级一级的信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一级级往上传递
  2. 使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低, 可读性也低
  3. 使用Vuex来进行数据管理, 但是如果仅仅是传递数据, 而不做中间处理,使用Vuex处理感觉有点大材小用了.

vue2.4中,为了解决该需求,引入了$attrs 和$listeners , 新增了inheritAttrs 选项。 在版本2.4以前,默认情况下父作用域的不被认作props的属性百年孤独,将会“回退”且作为普通的HTML特性应用在子组件的根元素上。接下来看一个跨级通信的例子:

// app.vue
// index.vue

<template>
  <div>
    <child-com1
      :name="name"
      :age="18"
      :gender="女"
      :height="158"
      title="程序员成长指北"
    ></child-com1>
  </div>
</template>
<script>
const childCom1 = () => import("./childCom1.vue");
export default {
  components: { childCom1 },
  data() {
    return {
      name: "zhang",
      age: "18",
      gender: "女",
      height: "158"
    };
  }
};
</script>
复制代码
// childCom1.vue

<template class="border">
  <div>
    <p>name: {{ name}}</p>
    <p>childCom1的$attrs: {{ $attrs }}</p>
    <child-com2 v-bind="$attrs"></child-com2>
  </div>
</template>
<script>
const childCom2 = () => import("./childCom2.vue");
export default {
  components: {
    childCom2
  },
  inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
  props: {
    name: String // name作为props属性绑定
  },
  created() {
    console.log(this.$attrs);
     // { "age": "18", "gender": "女", "height": "158", "title": "程序员成长指北" }
  }
};
</script>
复制代码
// childCom2.vue

<template>
  <div class="border">
    <p>age: {{ age}}</p>
    <p>childCom2: {{ $attrs }}</p>
  </div>
</template>
<script>

export default {
  inheritAttrs: false,
  props: {
    age: String
  },
  created() {
    console.log(this.$attrs); 
    // { "name": "zhang", "gender": "女", "height": "158", "title": "程序员成长指北" }
  }
};
</script>
复制代码

总结

常见使用场景可以分为三类:

  • 父子组件通信: props$parent / $childrenprovide / inject ; ref ; $attrs / $listeners
  • 兄弟组件通信: eventBus ; vuex
  • 跨级通信: eventBus;Vuex;provide / inject 、$attrs / $listeners

今天就分享这么多,如果对分享的内容感兴趣,可以关注公众号「程序员成长指北」,或者加入技术交流群,大家一起讨论。

加入我们一起学习吧!

转:https://juejin.im/post/5d267dcdf265da1b957081a3?utm_source=gold_browser_extension

By柏小白

webstorm插件

File -> settings -> Plugins 即可调出设置中的插件选项。

或者直接快捷键 ctrl + alt + s也可调出设置菜单。

具体的插件安装方法不再赘述,不会的同学建议先看一下明河的:《webstorm入门指南》

接下来主要收录了一些常用的插件,方便查阅:

ideaVim

此插件可以让 webstorm 编辑器支持 vim。

.ignore

可以支持 .gitignore 的语法规则,并提供了一些自动将文件加入 .gitignore 中的功能。

eslint

语法检查的插件

AceJump

用于光标的快速定位与跳转,默认的快捷键是ctrl + ;,按快捷键之后,再按下自己想要将光标跳转到的目标的字母,这时会出现很多A,B,C,D,E…… 的序号,按下相应的字母即可跳转到相应的地方。(区分大小写)

1560500769-6514-ace-jump

点多次的话,好像对应不同的用法,待我再研究研究。。。。

Key Promoter

鼠标完成某项操作时,会提示相应的快捷键。

1560500772-5360-key-promoter

Markdown

支持 markdown 语法

AngularJS

支持 angularjs 的语法提示

activate-power-mode

atom 上的神器啊,抱着试一试的心态一搜,webstorm 上居然也有了,安装之后可以在 window -> activate-power-mode 中关闭震动以及开启彩色模式。

Material Theme UI

主题类的插件,可以改改界面颜色呀,文件图标啥的,至少比默认的稍微强那么点。。。。

1560500773-4107-material

CodeGlance

这也是强烈推荐的,用过 sublime 的同学会知道右侧有一个当前文件中代码的缩略图,这个插件可以让 webstorm 也具有此功能。

1560500771-1182-code-glance

 

Translation

  • 多翻译引擎
    • Google翻译
    • 有道翻译
    • 百度翻译
  • 多语言互译
  • 语音朗读
  • 自动选词
  • 自动单词拆分
  • 53e79ae43a865a4b83b62372089a3585
By柏小白

Invalid Host header 服务器域名访问出现的问题

项目是通过局域网访问来演示的,这个项目是采用Vue.js前后端分离的方式来做的,然而发现只能在本地访问,不能通过域名nginx反向代理访问。

通过服务器域名访问时是显示Invalid Host header,这是由于新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname不是配置内的,将中断访问。可以在build目录中的webpack.base.config.js中添加如下webpack-dev-server配置:devServer: { disableHostCheck: true, }

By柏小白

frps在win10下通过winsw启动自动运行

使用方法:
1、下载最新版的 Windows Service Wrapper 程序[winsw],比如我下载的名称是 “winsw-1.9-bin.exe”, 百度相关下载地址:https://www.cr173.com/soft/101797.html

然后,把它命名成你想要的名字(比如: “winsw.exe”,当然,你也可以不改名)

2、将重命名后的 winsw.exe 复制到 frp_0.13.0_windows_386 的安装目录(我这里是 “C:\Frps\frp_0.13.0_windows_386″)

3、在同一个目录下创建一个Windows Service Wrapper的XML配置文件,名称必须与第一步重命名时使用的名称一致(比如我这里是 “winsw.xml”, 如果,你没有重命名,则应该是 “winsw-1.9-bin.xml”)

文件内容如下:

<service>
<id>frp</id>
<name>frp</name>
<description>用frps外网穿透</description>
<executable>frpc</executable>
<arguments>-c frpc.ini</arguments>
<logmode>reset</logmode>
</service>

4、命令行下执行以下命令,以便将其安装成Windows服务。

C:\Frps\frp_0.13.0_windows_386> winsw.exe install

OK,至此,完工,确认一下:我的电脑 右键 -> 管理 -> 服务 -> 是否有了个 frp 服务呢?

8

补充:

Windows Servcie Wrapper的命令格式如下:

# 安装服务

CMD:\> winsw.exe install

# 卸载服务

CMD:\> winsw.exe uninstall

By柏小白

webstorm 通过ssh连接服务器

必要条件
服务器一台 ( 虚拟机也可以 ); 一般 linux 安装完成,配置好网络等相关参数之后,可以通过 ssh 工具来连接,连接之后就可以在本地电脑对远程服务器进行操作了. 今天无意间发现, webstorm 也自带了 ssh 连接工具;具体使用如下 :

1 在 Tools下拉菜单中,有个start ssh session.,如下图所示:

2

2 点击 Start SSH session , 跳出如下对话框 :

3

3 点击 Edit credentials … ,跳出如下对话框 :

1

4 配置相关参数, Host 是目标服务器的IP ,这里本人使用的是Centos 7 系统的虚拟机 ; Linux的 Port 默认是 22 ,用户名和密码就是你要连接的服务器的用户名和密码,配置好好之后点击 OK 按钮,即可连接 , 连接成功后,会自动打开Terminal 工具,显示如下

4

5 远程ssh连接的terminal乱码

5

By柏小白

有哪些鲜为人知,但是很有意思的网站?

扩展阅读

工具类

图片/视频工具

IT/AI/工具类

音乐/影视类

二次元/动漫类

文艺类

网盘/搜索类

文学/百科类

实用/行政类

趣味/无聊类

声音/太空类

怀旧类

游戏/测试类

网站之最

特别推荐

原文地址:

 

By柏小白

Linux中设置服务自启动的三种方式

有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统服务

主要用三种方式进行这一操作:

ln -s                       在/etc/rc.d/rc*.d目录中建立/etc/init.d/服务的软链接(*代表0~6七个运行级别之一)

chkonfig                命令行运行级别设置

ntsysv                   伪图形运行级别设置

 

注意:1.这三种方式主要用于以redhat为基础的发行版

2.如果还不知道运行级别是什么,那么最好先看看相关资料再实验

 

第一种方式:ln -s 建立启动软连接

在Linux中有7种运行级别(可在/etc/inittab文件设置),每种运行级别分别对应着/etc/rc.d/rc[0~6].d这7个目录

Tips:/etc/rc[0~6].d其实是/etc/rc.d/rc[0~6].d的软连接,主要是为了保持和Unix的兼容性才做此策

 

这7个目录中,每个目录分别存放着对应运行级别加载时需要关闭或启动的服务

由详细信息可以知道,其实每个脚本文件都对应着/etc/init.d/目录下具体的服务

K开头的脚本文件代表运行级别加载时需要关闭的,S开头的代表需要执行

因此,当我们需要开机启动自己的脚本时,只需要将可执行脚本丢在/etc/init.d目录下,然后在/etc/rc.d/rc*.d中建立软链接即可

[root@localhost ~]# ln -s /etc/init.d/sshd /etc/rc.d/rc3.d/S100ssh

此处sshd是具体服务的脚本文件,S100ssh是其软链接,S开头代表加载时自启动

如果需要在多个运行级别下设置自启动,则需建立多个软链接

这种方式比较繁琐,适用于自定义的服务脚本

如果系统中已经存在某些服务(比如安装apache时就会有httpd服务项),可以使用下面的两种方式

 

第二种方式:chkconfig

如果需要自启动某些服务,只需使用chkconfig 服务名 on即可,若想关闭,将on改为off

在默认情况下,chkconfig会自启动2345这四个级别,如果想自定义可以加上–level选项

上面我们先将sshd服务的所有启动级别关闭,然后使用–level选项启动自定义级别

Tips:–list选项可查看指定服务的启动状态,chkconfig不带任何选项则查看所有服务状态

 

第三种方式:ntsysv 伪图形

ntsysvchkconfig其实是一样的,只不过加上了图形而已

启动ntsysv有两种方式,一是直接在命令行中输入ntsysv,二是使用setup命令,然后选择系统服务

默认情况下,当前运行级别为多少,在ntsysv中设置的启动服务的级别便是多少

比如,我当前的运行级别是3,那么我在伪图形界面中选择启动服务后,它的运行级别也会是3

如果想自定义运行级别可使用ntsysv –level方式

 

以上三种操作需要保证服务脚本文件可执行,并且要有root权限

其中,第一种方式多用于自定义脚本,第二、三种多用于系统已存在的服务

比如ftp、samba、ssh、httpd等等

并且,要做相关设置需要弄清楚运行级别的问题

 

Tips:如果想手动启动某服务,传统的方式是 /etc/init.d 服务名 start

实际上还可以这样,service 服务名 start

转自:https://www.cnblogs.com/nerxious/archive/2013/01/18/2866548.html

By柏小白

jenkins配置记录(1)–添加用户权限

 

这样我直接用QQ截图直接粘贴就可以把简书的外链图片全部替换成本地图片链接了。

前一阵子在线上部署了一套jenkins环境,作为线上代码发布平台使用。
部署记录:http://web.xn--w0sz4as21fs7k.com/?p=1895

下面重点记录下jenkins安装后的一些配置:

(1)添加用户权限

jenkins初次登陆后,要先注册一个用户作为管理员:

依次点击“系统管理”->“Configure Global Security”

1548228117-5908-6-20161101155031049-98639631

 

如下:
选择“启用安全”模式,
“安全域”->“Jenkins专用用户数据库”->不选择“允许用户注册”(如果此处选择了”允许用户注册“,那么任何人都可以注册,只是注册后没有任何的操作权限,登陆后会提示“Access Denied,没有Overall/Read权限”,还是需要在管理员账号下授权后才能操作)。先注册一个管理员账号,然后在管理员下创建普通账号,再授予这些账号相应的操作权限。
“授权策略”->“项目矩阵授权策略”,添加账号。

1548228114-9862-20161101155821643-1395315569

 

 

首先添加一个admin账号作为管理员,先”应用“,注意这个时候千万别点击“保存”。由于admin用户还没有注册,所以这里添加到权限策略内会显示红色,等后面将这个admin用户注册后就会变成正常的绿色。

1548228116-5046-20161101160747565-2035208245

如上,点击“应用”后,再点击回到“jenkins”首页,会提示进行注册,则使用上面添加的管理员账号admin进行注册

1548228113-2373-20161101161617236-510924690

 

注册成功后,就可以用管理员admin账号登陆了

1548228118-2462-20161101161240080-369601404

 

在管理员账号下就可以创建普通用户

依次点击“系统管理”->“管理用户”

1548228119-9716-20161101161442315-1791228697

 

1548228121-9704-20161101161518721-415777939

1548228122-1515-20161101161729580-1298369009

 

然后在“系统管理”->“Configure Global Security”的->“授权策略”->“项目矩阵授权策略”里授予wangshibo用户相应的权限。
由于wangshibo用户已经注册好了,所以这里添加进去后是绿色的

1548228124-1199-20161101162206315-1425033646

其他用户的添加步骤跟上面一样操作即可。

一般而言,除了运维人员(管理员)具有所有项目操作的权限外,一般只给开发人员(通常是项目组的负责人)Beta环境下的项目操作权限。如下,只给caogaokui和yuxiaogang这两个用户设置构建项目的权限。

 

“系统管理”->“管理用户”->“创建用户”

1548228125-4966-20161103011609580-190636434

“系统管理”->“Configure Global Security”->“授权策略”->“项目矩阵授权策略”

1548228126-7193-20161103012153799-1436603609

 

 

然后再相应的项目构建配置里,“启用项目安全”,将相应的用户添加进去,赋予操作权限,说明他们对该项目由构建的权限。如下:

1548228127-6465-20161103011954471-850219423

1548226500-9090-20161103011954471-850219423

 

By柏小白

Jenkins安装及入门配置

一、安装Jenkins

Jenkins是开源的,使用Java编写的持续集成的工具,在Centos上可以通过yum命令行直接安装。记录下安装的过程,方便以后查找。需要先安装Java,如果已经Java可以跳过该步骤。

安装Java

看到当前系统Java版本的命令:

java -version

如果显示Java版本号,说明已经正确安装,如果显示没有该命令,需要安装Java:
sudo yum install java

该命令如果检测到Java不存在可以直接安装Java,如果已存在则可以升级Java。

最新版本Jenkins安装**

首先要先添加Jenkins源:

sudo wget -O /etc/yum.repos.d/jenkins.repo http://jenkins-ci.org/redhat/jenkins.repo

sudo rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key

添加完成之后直接使用yum命令安装Jenkins:

yum install jenkins

历史版本安装

通过yum直接安装的是最新版本的Jenkins,必须使用JDK1.8,,由于我们使用的是jdk1.7,所以需要安装历史版本的jenkins。以下是安装步骤。

一、下载历史版本

https://jenkins.io/网站,点击下载进入下载页面

1548227927-8497-2223516-d8a8a896f5499066
image

选择对应操作系统

1548227928-8663-2223516-e4e498d842434397
image

选择版本,由于2.54以上的版本需要JDK1.8,所以我们选择选择低版本,这里选择使用2.46.3的版本

1548227931-5418-2223516-5c68677cb31029ef
image

将下载下来的rpm文件上传到服务器

1548227934-9764-2223516-e055089c2e917312
image

首先先添加Jenkins源:

sudo wget -O /etc/yum.repos.d/jenkins.repo http://jenkins-ci.org/redhat/jenkins.repo

sudo rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key

使用rpm命令安装jenkins

1548227932-4578-2223516-16b272eead3aae31
image

启动Jenkins

使用命令启动Jenkins:

sudo service jenkins start

Starting Jenkins [ OK ]

在浏览器中输入:http://<服务器ip>:8080/ 就可以进入Jenkins界面直接使用了 。

停止Jenkins服务的命令为:

sudo service jenkins stop

相关配置

Jenkins安装目录:

/var/lib/jenkins/

Jenkins配置文件地址:

/etc/sysconfig/jenkins

这就是Jenkins的配置文件,可以在这里查看Jenkins默认的配置。

cat jenkins

这里介绍下三个比较重要的配置:

  • JENKINS_HOME
  • JENKINS_USER
  • JENKINS_PORT

JENKINS_HOME是Jenkins的主目录,Jenkins工作的目录都放在这里,Jenkins储存文件的地址,Jenkins的插件,生成的文件都在这个目录下。

<pre class="md-fences md-end-block" lang="shell" contenteditable="false" cid="n105" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, &quot;Liberation Mono&quot;, Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background: var(--code-block-bg-color); background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;">## Path:    Development/Jenkins
## Description: Jenkins Continuous Integration Server
## Type:    string
## Default:   "/var/lib/jenkins"
## ServiceRestart: jenkins
#
# Directory where Jenkins store its configuration and working
# files (checkouts, build reports, artifacts, ...).
#
JENKINS_HOME="/var/lib/jenkins"</pre>

JENKINS_USER是Jenkins的用户,拥有$JENKINS_HOME和/var/log/jenkins的权限。

<pre class="md-fences md-end-block" lang="shell" contenteditable="false" cid="n108" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, &quot;Liberation Mono&quot;, Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background: var(--code-block-bg-color); background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;">## Type:    string
## Default:   "jenkins"
## ServiceRestart: jenkins
#
# Unix user account that runs the Jenkins daemon
# Be careful when you change this, as you need to update
# permissions of $JENKINS_HOME and /var/log/jenkins.
#
JENKINS_USER="jenkins"</pre>

JENKINS_PORT是Jenkins的端口,默认端口是8080,我们这里修改为8000。

<pre class="md-fences md-end-block" lang="shell" contenteditable="false" cid="n111" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, &quot;Liberation Mono&quot;, Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background: var(--code-block-bg-color); background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;">## Type:    integer(0:65535)
## Default:   8080
## ServiceRestart: jenkins
#
# Port Jenkins is listening on.
# Set to -1 to disable
#
JENKINS_PORT="8000"</pre>

主要问题

一、没有那个文件或目录

1548227935-5894-2223516-a5955ae08a2a75fb
image

这是由于找不到jdk目录报的错,只要修改/etc/init.d/jenkins配置文件,配置下jdk目录就好了。

1548227937-8885-2223516-b03bf8102d7619b6
image

保存,重新启动,启动成功

1548227938-4914-2223516-6dc3cab073eb5792
image

二、Jenkins的访问

验证jenkins是否运行正常,通过访问http://localhost:8000

这里有一个临时密码需要输入,在/home/tomcat/.jenkins/secrets/initialAdminPassword里面

1548227939-5880-2223516-6411c1e94adceae7
image

输入密码进入:

1548227941-1161-2223516-33c7ded732879540
image

这里选择把建议的插件全装上去

1548227942-3286-2223516-a03b47b94c74d5a6
image

–设置用户名和密码

1548227943-8985-2223516-84300bb4d31c1088
image

保存,进入主界面

1548227945-5214-2223516-10d4e95114675bb5
image

三、主要配置

系统配置

点击系统管理-系统设置配置邮件通知,通过Test测试,能收到邮件表明配置成功

1548227946-3405-2223516-c62e65781d022202
image

点击系统管理-管理插件,安装SSH插件

1548227948-8138-2223516-527b98d617bc4c88
image

这样,在配置邮件的下面就会有Publish over ssh选项

1548227949-3719-2223516-713f24e65b1910ca
image

配置远程ssh主机地址,通过Test返回success表示配置成功

1548227952-5047-2223516-51bfb993fe4c709a
image

点击保存

全局工具配置

系统管理-全局工具配置,配置JDK,Git,Maven等信息。

1548227954-7097-2223516-b0136eba51d2beec
image

四、新建项目

安装Git plugin插件,注意,由于我们使用的是旧版的jerkin,所以直接安装Git plugin插件是失败的,所以我们需要自己手动下载安装。

插件手动安装步骤

1、下载插件

首先,在可选插件上面过滤输入git,就可以搜索到Git plugin插件,点击此插件

1548227956-4589-2223516-cd7d49d118b052fa
image

进入后查看ID,知道ID为git。

1548227958-3467-2223516-cd21acfaa3bad49f
image

浏览插件网站http://updates.jenkins-ci.org/download/plugins/,找到对应插件git,点击进去。

1548227960-3429-2223516-aa13567c5a636dab
image

注意不要选择最新版本,我们这里选择历史版本,即3.5.0下载

1548227962-7282-2223516-4f882cce085be92a
image

下载到本地。

1548227964-8430-2223516-bee71e0a169d7edc
image

2、安装

还是系统管理-插件管理,选择高级,有上传插件选项,点击文件并上传。

1548227965-7604-2223516-57a523b11f50c926
image

上传之后,会开始安装,这里安装失败,点击查看原因,是缺少另外一个插件,这里需要先安装对应插件,按照上面的步骤。

1548227968-1497-2223516-7321b851ab95b5eb
image

插件安装过程中,如果需要重启jenkins的,可以直接在页面上出入restart重启

1548227970-7246-2223516-ea553e81048f2cc3
image

安装完成之后,在已安装插件中就可以找到对应插件

1548227971-3194-2223516-58050c7a3ac82d9b
image

项目创建

点击新建

1548227973-8848-2223516-58d43228387fb646
image

书写项目名称,选择风格

1548227974-6657-2223516-5a5b59732617a686
image

店家ok之后进入配置界面,在源码管理中选择git,输入项目url,设置分支。如果有账号密码,点击add添加

1548227976-5611-2223516-e8ca5e26b5f5340a
image

添加git的账号密码

1548227978-7010-2223516-f0ad49fd2fbf2ac1
image

构建,选择之前配置的maven,并配置要执行的操作,保存。

1548227980-5316-2223516-f9f0df87f5cec44f
image

点开立即构建,即开始构建项目

1548227982-6524-2223516-8187fa2df9edf5b8
image

构建成功后显示为蓝色,如果有问题显示为红色或黄色。点击任何一次可以进入。

1548227984-8122-2223516-a8bf894695bfa3bf
image

点击Console Output可以查看对应的控制台输出

By柏小白

frp-linux下配置运行

群晖NAS+frp发挥更大作用
Posted by SunnyRx on October 21, 2016
原文地址:http://www.sunnyrx.com/2016/10/21/simple-to-use-frp/

该文章于2018年7月7日将frp版本从0.13.0更新到0.20.0,下文针对frp 0.20.0配置。

NAS没有公网IP是一件很不方便的事情,尤其是在国内的网络环境,学校和小区内的用户通常都没有公网IP。为了解决这个问题,则需要内网穿透,而内网穿透的方法有很多种,例如使用花生壳ngrok等,该文章要介绍的是使用frp让群晖实现内网穿透。

实际上frp有官方的中文文档,上面的内容已经非常详尽,对相关操作比较熟悉的人可以直接阅读官方的中文文档。

什么是frp

frp 是一个高性能的反向代理应用,可以帮助您轻松地进行内网穿透,对外网提供服务,支持 tcp, http, https 等协议类型,并且 web 服务支持根据域名进行路由转发。

准备

在使用frp之前,需要一台有公网IP的服务器(下文称外网主机),一台需要实现内网穿透的机器(下文称内网主机),SSH工具,以及一个域名(如果只是建立SSH反向代理则不需要域名)。

该文章中笔者所使用的服务器是朋友推荐的Vultr服务器,虽然服务器是在国外,但胜在带宽够,有需要的朋友可以注册一个。而需要实现内网穿透的机器则是笔者用上网本搭建的黑群晖。SSH工具使用的是Xshell 5。而域名笔者则是使用自己个人网站的域名。

开始使用

根据机器的操作系统,在Release页面中找到对应的frp程序,然后分别在外网主机和内网主机中下载它。

下面的所示范用的frp程序版本是以笔者的服务器为主的。

外网主机

SSH连接上外网主机后,使用wget指令下载frp。

wget https://github.com/fatedier/frp/releases/download/v0.20.0/frp_0.20.0_linux_amd64.tar.gz

使用tar指令解压tar.gz文件

tar -zxvf frp_0.20.0_linux_amd64.tar.gz

使用cd指令进入解压出来的文件夹

cd frp_0.20.0_linux_amd64/

外网主机作为服务端,可以删掉不必要的客户端文件,使用rm指令删除文件。

  1. rm -f frpc
  2. rm -f frpc.ini

接下来要修改服务器配置文件,即frps.ini文件。使用vi指令对目标文件进行编辑。

vi frps.ini

打开frps.ini后可以看到默认已经有很多详细的配置和示范样例,该文章仅以达到内网穿透为目的,所以这里选择删掉或注释掉里面的所有内容,然后根据群晖的情况,按照官方的中文文档添加以下配置。(这里的操作都使用vi命令,关于vi命令的使用方式这里不作详细介绍,可以自行搜索相关使用方法。)

  1. [common]
  2. bind_port = 7000
  3. vhost_http_port = 8080

[common]部分是必须有的配置,其中bind_port是自己设定的frp服务端端口,vhost_http_port是自己设定的http访问端口。

保存上面的配置后,使用以下指令启动frp服务端。(如果需要在后台运行,请往下翻阅关于后台运行的部分。)

./frps -c ./frps.ini

服务端的工作就到此结束了。

客户端

客户端前面的操作和服务端是一模一样的,这里不一一解释。

  1. wget https://github.com/fatedier/frp/releases/download/v0.20.0/frp_0.20.0_linux_amd64.tar.gz
  2. tar -zxvf frp_0.20.0_linux_amd64.tar.gz
  3. cd frp_0.20.0_linux_amd64
  4. rm -f frps
  5. rm -f frps.ini
  6. vi frpc.ini

客户端的配置如下

  1. [common]
  2. server_addr = x.x.x.x
  3. server_port = 7000
  4. [ssh]
  5. type = tcp
  6. local_ip = 127.0.0.1
  7. local_port = 22
  8. remote_port = 6000
  9. [nas]
  10. type = http
  11. local_port = 5000
  12. custom_domains = no1.sunnyrx.com
  13. [web]
  14. type = http
  15. local_port = 80
  16. custom_domains = no2.sunnyrx.com

上面的配置和服务端是对应的。

[common]中的server_addr填frp服务端的ip(也就是外网主机的IP),server_port填frp服务端的bind_prot

[ssh]中的local_port填群晖的ssh端口。

[nas]中的type对应服务端配置。local_port填群晖的DSM端口。custom_domains为要映射的域名,记得域名的A记录要解析到外网主机的IP。

[web]同上,local_port填群晖的web端口。这里创建了两个http反向代理是为了分别映射群晖两个重要的端口,500080,前者用于登录群晖管理,后者用于群晖的Web StationDS Photo

保存配置,输入以下指令运行frp客户端。(同样如果需要在后台运行,请往下翻阅关于后台运行的部分。)

./frpc -c ./frpc.ini

此时在服务端会看到”start proxy sucess”字样,即连接成功。

现在可以用SSH通过外网主机IP:6000和群晖建立SSH连接。通过浏览器访问no1.sunnyrx.com:8080打开群晖nas的管理页面,访问no2.sunnyrx.com:8080打开群晖Web Station的网站,DS Photo app可以连接no2.sunnyrx.com:8080进入DS Photo管理。

让frp在后台运行

虽然现在frp运作起来了,内网穿透也实现了,但这还是不够的。此时如果断开与服务端或者客户端的SSH连接(比如关掉了Xshell)也就中止了frp的运行。

保持frp运行是关键是让服务端的frp和客户端的frp在后台运行,这里提两个方法供参考,一个是使用screen指令,另一个是使用nohup指令。由于群晖的系统默认是没有screen指令的,这里也不提供安装screen的方法,所以推荐群晖直接使用nohup

其实服务端也直接用’nohup’就好了。

使用screen让frp在后台运行

下面的示范是运行服务端的frp,客户端就不示范了,前面提过群晖的系统没有screen指令。

首先使用screen指令创建一个会话。

screen -dmS frp

然后进入这个会话。

screen -r frp

最后使用运行frp的指令,在后面加上” &”。(如果之前断开了SSH连接,记得用cd指令进入frp的目录先。)

./frps -c ./frps.ini &

这样就让frp在后台运行了。

使用nohup指令

nohup指令的使用方法相对简单,只需要在nohup后面加上frp的运行指令即可。下面示范的指令是运行frp客户端。(同样,如果之前断开了SSH连接,记得用cd指令进入frp的目录先。)

nohup ./frpc -c ./frpc.ini &

这样就成功让frp在后台运行了。

By柏小白

世界,您好!

欢迎使用WordPress。这是您的第一篇文章。编辑或删除它,然后开始写作吧!

By柏小白

webstorm下的sass自动编译

1、安装Ruby

2、安装sass

3、webstorm配置file watcher

4、移动端自适应

1、安装Ruby

1

安装Ruby,有多种方式,打开官网下载

因为,使用的是window选择RubyInstall,下载地址  https://rubyinstaller.org/downloads/

2

RubyInstall下载地址

3

选择对应系统的版本,下载完成,安装

4

添加到path,建议勾上,安装完成后,打开开始面板,会有一个Start Command Prompt with Ruby,命令行工具。

安装完毕后打开cmd,输入:$ ruby -v显示如下说明ruby安装成功:

使用RubyInstaller的同时也安装了rubyGems,我们测试下gem是否安装成功:

2、安装sass

个人偏好sass,也可以选择less或stylus,打开上一步安装的Ruby命令行

5

输入gem list 看一下安装了那些包,接着gem install sass

6

3、webstorm配置file watcher

打开webstorm,File -> settings -> Tools -> File Watchers

7

选择+号,新建scss

8

在输出参数位置,一般会加上–style *;展开格式nestedexpandedcompactcompressed,最传统的选择--style expanded,括号上下换行

工作文件夹和输出位置,可以根据项目来选择,放在同级目录,或者父级,点击insert macros

常见的有文件路径,父文件路径等等,可以自己尝试下,加深理解

 

 

备注:

ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法

sass文件编译时候使用ruby环境,无论是界面化的koala工具还是命令行模式的都无法通过,真是令人烦恼。

容易出现中文注释时候无法编译通过,或者出现乱码,找了几天的解决方法终于解决了。

这个问题的奇葩之处在于在xp环境中没有任何问题,只是在windows7环境中才出现的这个。

sass编译时候出现如下错误的解决方法:

Syntax error: Invalid GBK character "\xE5"
        on line 8 of E:\work\sass\sass\_big_box.scss
        from line 16 of E:\work\sass\sass\main.scss
  Use --trace for backtrace.

或者

Syntax error: Invalid GBK character "\xE5"
        on line 2 of E:\work\sass\sass\main.scss
  Use --trace for backtrace.

 

解决办法:

1.koala可视化编译工具,

找到安装目录里面sass-3.3.7模块下面的engine.rb文件,例如下面路径:

C:\Program Files (x86)\Koala\rubygems\gems\sass-3.3.7\lib\sass

在这个文件里面engine.rb,添加一行代码

Encoding.default_external = Encoding.find('utf-8')

放在所有的require XXXX 之后即可。

2.命令行工具同理

找到ruby的安装目录,里面也有sass模块,如这个路径:

C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass

在这个文件里面engine.rb,添加一行代码(同方法1)

Encoding.default_external = Encoding.find('utf-8')

放在所有的require XXXX 之后即可。

3. 自动缓存 .sass-cache 文件关闭

默认情况下,Sass 会自动缓存编译后的模板(template)与 partials,这样做能够显著提升重新编译的速度,在处理 Sass 模板被切割为多个文件并通过 @import 导入,形成一个大文件时效果尤其显著。

如果不使用框架的情况下,Sass 将会把缓存的模板放入 .sass-cache 目录。

在 Rails 和 Merb 中,缓存的模板将被放到tmp/sass-cache 目录。

此目录可以通过:cache_location 选项进行自定义。

如果你不希望 Sass 启用缓存功能,

修改相关路径  C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.7.3\lib\sass\engine.rb

:cache => true, 选项设置为 :cache => false

 

 

By柏小白

NAS群晖frp自动启动

frp 自动启动

客户端

NAS 群晖

创建脚本文件

1.创建脚本文件

在目录/根目录下,建立子目录install,并且只有文件主有读、写和执行权限,其他人无权访问

mkdir -m 700 /install

在install目录中建立frps.sh,权限设置为文件主可读、写、执行,同组用户可读和执行,其他用户无权访问

touch frps.sh

设置权限

chmod +x frps.sh

2.客户端

# 下载版本请兼容线上安装版本
wget https://github.com/fatedier/frp/releases/download/v0.12.0/frp_0.12.0_linux_386.tar.gz
tar -zxvf frp_0.12.0_linux_386.tar.gz
cd frp_0.12.0_linux_386
rm -f frps
rm -f frps.ini
vi frpc.ini
[common]
#远程服务器ip
server_addr = ***.**.**.***
server_port = 7000
#设置frps密码
privilege_token = ****
[companyMainWin]
privilege_token = true
type = tcp
#本地端口
local_port = **** 
#远程端口
remote_port = ****

 

 

并且进入frps.sh 脚本中

vim frps.sh
#!/bin/bash

cd /install
cd frp_0.12.0_linux_386
./frpc -c ./frpc.ini

设置自启动

  1. 登录群晖 NAS 系统
  2. 进入控制面板 -> 任务计划
  3. 创建一个触发的任务 -> 用户定义的脚本
  4. 常规
    • 设置名称名称,如:frps
    • 用户账号:root
    • 事件:开机

    1

  5. 任务设置
    • 用户定义的脚本,上面创建的脚本: /install/frps.sh

    2

Read More

By柏小白

Git提交不用每次输入用户名和密码的方法

点git->编辑本地.git/config(L)

[credential]
helper = store
就这两行就可以,这样子追加之后,本项目只需要第一次输入用户名密码,以后就可以不用添加了
如果你没有安装客户端也没问题,我们用git bash

在项目目录,右键->“git bash here”,执行下面命令:(前提你要右键的git没有被你屏蔽了)
echo “[credential]
helper = store” >> .git/config
上面那条含有换行符,如果觉得不行的话,可以换成两句执行

echo “[credential]” >> .git/config
echo ” helper = store” >> .git/config

 

By柏小白

慢慢,收集css代码块(持续更新……)

1./*两端对齐 若单行,至少要3个字符,只有两个字符的,中间补一个空格*/
.text_justify {
   text-align: justify; text-justify: distribute-all-lines;/*ie6-8*/
   text-align-last: justify;/* ie9*/
   -moz-text-align-last: justify;/*ff*/
   -webkit-text-align-last: justify;/*chrome 20+*/ }
   @media screen and (-webkit-min-device-pixel-ratio:0) {/* chrome*/
   .aaa:after { content: "."; display: inline-block; width: 100%; overflow: hidden; height: 0; }
}
2./*滚动条*/
#nicescroll1{overflow-y:auto;overflow-x:hidden;height:580px;
scrollbar-arrow-color:#302D30; /*三角箭头的颜色*/
scrollbar-face-color:#000; /*立体滚动条的颜色(包括箭头部分的背景色)*/
scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色(左阴影?)*/
scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/
scrollbar-track-color:#302D30; /*立体滚动条背景颜色*/
scrollbar-base-color:#302D30; /*滚动条的基色*/}
#nicescroll2{overflow-y:auto;overflow-x:hidden;height:396px;
scrollbar-arrow-color:#302D30; /*三角箭头的颜色*/
scrollbar-face-color:#000; /*立体滚动条的颜色(包括箭头部分的背景色)*/
scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色(左阴影?)*/
scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/
scrollbar-track-color:#302D30; /*立体滚动条背景颜色*/
scrollbar-base-color:#302D30; /*滚动条的基色*/}
#commend_list{overflow-y:auto;overflow-x:hidden;height:229px;
scrollbar-arrow-color:#f8f9fb; /*三角箭头的颜色*/
scrollbar-face-color:#000; /*立体滚动条的颜色(包括箭头部分的背景色)*/
scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色(左阴影?)*/
scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/
scrollbar-track-color:#f8f9fb; /*立体滚动条背景颜色*/
scrollbar-base-color:#302D30; /*滚动条的基色*/}
 
3./*chrome滚动条*/
::-webkit-scrollbar-track-piece{
 -webkit-border-radius:0;
}
::-webkit-scrollbar{
 width:8px;
 height:8px;
}
::-webkit-scrollbar-thumb{
 height:50px;
 background-color:#000;
 -webkit-border-radius:4px;
 outline-offset:-2px;
 border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover{
 height:50px;
 background-color:#000;
 -webkit-border-radius:4px;/*两端对齐 若单行,至少要3个字符,只有两个字符的,中间补一个空格*/
.text_justify {
   text-align: justify; text-justify: distribute-all-lines;/*ie6-8*/ 
   text-align-last: justify;/* ie9*/ 
   -moz-text-align-last: justify;/*ff*/ 
   -webkit-text-align-last: justify;/*chrome 20+*/ }
   @media screen and (-webkit-min-device-pixel-ratio:0) {/* chrome*/
   .aaa:after { content: "."; display: inline-block; width: 100%; overflow: hidden; height: 0; }
}

4./* 实现背景固定的效果 */
.背景图相对于元素固定{
    background-attachment: fixed;
    width: 100%;
    height: 300px;
    background: url(https://s.w.org/images/home/collage-min.jpg?3) center top;
    background-size: cover;
    box-shadow: inset 0 0 8px rgba(0,0,0,.4);
    height: 600px;
    background-attachment: fixed;
    }

 

5. 1px 方案

做过移动端需求的前端肯定是避免不了处理 1px 细线问题,这个问题的原因就是 UI 对页面美观度的要求越来越高(不要和我说这是 retina 屏的问题)。

据小生所知好像没有什么兼容性特别好的方案,这里我只是提供两种种相对较好的方案。

使用伪类 + transform

.border_bottom { 
    overflow: hidden; 
    position: relative; 
    border: none!important; 
}
.border_bottom:after { 
    content: ".";
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    background-color: #d4d6d7; 
    -webkit-transform-origin: 0 0;  
    transform-origin: 0 0; 
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

使用 box-shadow 模拟

.border_bottom {
  box-shadow: inset 0px -1px 1px -1px #d4d6d
 
By柏小白

nvm安装和配置详细备忘录

一.win下安装

新电脑新配置,以前配置不小心忘记了,今天做一个备忘总结:

nvm是nodejs的版本管理工具,为什么要用nvm,nodejs官方更新的速度非常快,有时候业务需要需要用某某版本,如果用的是msi安装,虽然安装的时候挺简单,但是后面模块就麻烦了.

我用的win64系统,先安装nvm,接着nodejs,最后npm

nvm百度网盘下载地址:链接:http://pan.baidu.com/s/1bDWuBW 密码:vmpm

C盘建立 【Develop】 文件 下载解压 nvm_x64文件在当前
1

确保目录下有一个setting.txt文件(图片是我配置好后的截图,默认没有那些内容)

2

root: C:\Develop\nvm // nvm 文件地址路径
path: C:\Develop\nodejs // nodejs 文件地址 先填写上和nvm 文件路径一致,我们马上运行命令会生成这个文件夹
arch: 64 // 系统版本号 我这是win7_x64 位系统
proxy: // 可不填 有的大概是 none

cmd 命令行输入nvm回车看到nvm的版本号表示nvm安装成功

我报如下错误:nvm报错 ERROR open \settings.txt: The system cannot find the file specified

没关系,报错就好办了,这边是 环境变量没有配置 如下:

二:环境变量配置:点击我的电脑》属性》高级设置》环境变量》
1.删除系统自带的nvm变量:NVM_HOME和NVM_SYMLINK
2.打开path:删除nvm自动添加的变量C:\Develop\nvm;C:\Develop\nodejs
3.配置用户变量:
NVM_HOME = C:\Develop\nvm
NVM_SYMLINK = C:\Develop\nodejs
Path = %NVM_HOME%;%NVM_SYMLINK%
配置完成保存

注:上面添加环境变量没有用,我直接添加:Path = C:\Develop\nvm;C:\Develop\nodejs 就在环境变量中
下载需要的nodejs版本,解压后改名(如v8.2.1)放到nvm目录,注意里面如果有嵌套文件夹就把文件拿到外层

cmd 打开 输入nvm 出现以下就为正常:

3

nvm ls 查看当前版本带星号8.2.1 为正在使用版本:

4

nvm use 5.7.0  切换到指定版本:

5

nodejs快捷键中查看属性,查看 ‘目标’文件路径是不是改变

7

接下来打开命令窗口安装一个包测试一下,npm install -g gulp,安装完成后会看到npm 》node_modules目录下有新下载的包,由于npm和nodejs是分离的,无论你切换到任何版本,都不需要重新安装这些包了

 

一.linux下安装

github官网 https://github.com/creationix/nvm

 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
  wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

next:
vim ~/.bashrc 写入下面代码

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

下一步即可安装node
如 v6.11.0版本

nvm i 8.2.1

具体安装sh脚本:

 

#/bin/bash
# -*- codeing: utf-8 -*-
   cd ~
   mkdir .nvm
   cd .nvm
   curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
   source ~/.bashrc
   nvm install v8.2.1
   node -v
   nvm --version
   nvm ls

 

 

以上用到以下命令:

     nvm uninstall 6.11.0     // 移除 node 6.11.0
     nvm use 6.11.0           // 使用 node 6.11.0
     nvm ls                   // 查看目前已安装的 node 及当前所使用的 node
     nvm ls-remote            // 查看目前线上所能安装的所有 node 版本
     nvm alias default 6.11.0 // 使用 6.11.0 作为预设使用的 node 版本

nvm 查看是否安装成功
nvm ls 查看当前版本带星标 为正当前运行版本
nvm use 5.7.0 切换到指定版本
node -v 查看当前nodejs版本
gulp -v 查看当前gulp版本
webpack -v 查看当前webpack版本

By柏小白

快速激活webstorm JetBrains系列产品

随着 JetBrains 新版本的发布,注册机已然不行了。

 

注册时选择 License server,填 http://idea.xn--w0sz4as21fs7k.com/,然后点击 OK,就搞定了。如有异常联系我

License server分享:

http://www.qidianban.site:1203/

http://idea.enjoysala.top/

http://idea.lianghongbo.com/license
http://idea.qinxi1992.cn
http://idea.lanyus.com/

 

 

使用网上传统的那种输入网址的方式激活不了,使用http://idea.lanyus.com/这个网站提供的工具进行,有效期已经更新了

1、进入hosts文件中:C:\Windows\System32\drivers\etc\hosts

2、将“0.0.0.0 account.jetbrains.com”添加到hosts文件中

注意:添加只有重新打开hosts文件进行确认之后在进行下一步操作。

修改成功后如图所示:

注:将这条数据加入之后会提示保存,然后确认之后,重新打开hosts文件确认是否添加成功,有时候会提示确认两次。

另可以直接将hosts文件复制到桌面,然后就可以直接进行编辑,保存操作,编辑之后再复制到原地址中,然后在cmd命令窗口执行: ipconfig /flush dns即可。

3、进入http://idea.lanyus.com/站点,点击获得注册码,然后将注册码复制,粘贴到IDEA中

 

注:爱前端 || 爱老婆

 

By柏小白

js开发过程中的小函数……陆续更新

1 获取指定范围内的随机数

当我们需要获取指定范围(min,max)内的整数的时候,下面的代码非常适合。

    function getRadomNum(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

 

测试
2016-03-26-2

2 随机获取数组中的元素

    function getRadomFromArr(arr){
        return arr[Math.floor(Math.random() * arr.length)];
    }

 

测试
2016-03-26-3

3 生成从0到指定值的数字数组

  var arr = [], length = 100, i = 1;
    for (; arr.push(i++) < length;) {
    }
    console.log(arr)

 

测试

3

4 打乱数字数组的顺序

   var arr = [1, 2, 3, 4, 5, 6, 7, 'a', 'dsfs', 8, 9, 'v'];
    arr.sort(function (){
        return Math.random() - 0.5
    });

 

测试
4

5 对象转换为数组

//注意对象必须是以下格式的才可以通过此方式转化为数组
//获取的DOM集合,以及函数的arguments也可以通过此方式转化为数组
    /**
     * 对象转换为数组
     * @type {{0: string, 1: string, 2: string, 3: string, length: number}}
     */
    var obj = {
        0: 'qian',
        1: 'long',
        2: 'chu',
        3: 'tian',
        length: 4
    }
    var _slice = [].slice;
    var objArr = _slice.call(obj);

 

测试
5

6 验证是否为数组

   function isArray(obj){
        return Object.prototype.toString.call(obj) === '[object Array]';
    }

测试

6

7 获取数组中最大或者最小值

    function maxAndMin(arr){
        return {
            max: Math.max.apply(null, arr.join(',').split(',')),
            min: Math.min.apply(null, arr.join(',').split(','))
        }
    }
//该方法适合一维或者多维数组求最大最小值的情况

测试
7

8 清空数组

//方式一 通过将长度设置为0
    var arr = [1, 2, 3, 4, 5];
    arr.length = 0;
//方式二 通过splice方法
    var arr = [1, 2, 3, 4, 5];
    arr.splice(0, arr.length);
//方式三 通过将空数组 [] 赋值给数组(严格意义来说这只是将ary重新赋值为空数组,之前的数组如果没有引用在指向它将等待垃圾回收。)
    var arr = [1, 2, 3, 4, 5];
    arr = [];

 

9 保留指定小数位

   var num =4.345678;
    num = num.toFixed(4);  // 4.3457 第四位小数位以四舍五入计算

 

10 不要直接使用delete来删除数组中的元素

    * 数组在js中也是对象,有时候我们可能会通过delete来删除数组中的元素,但是其实仅仅是将数组的元素的值赋值为了undefined。
     */
    var arr=[1,2,3,4,5,'谦龙','雏田'];
    delete arr[5];
    console.log(arr,arr[5],arr.length);

 

测试

10

可以通过splice来删除数组中的某一项

   var arr=[1,2,3,4,5,'谦龙','雏田'];
    arr.splice(5,1);
    console.log(arr,arr[5],arr.length);

测试

10-2

11 生成指定长度的随机字母数字字符串

    function getRandomStr(len) {
        var str = "";
        for( ; str.length < len; str  += Math.random().toString(36).substr(2));
        return  str.substr(0, len);
    }

测试
11

12 null 与 undefined

    function test(obj){
        if(obj!=null){// obj除了undefined 和 null 之外都会走这里
        //....这里写代码逻辑
        }
    }

 

13 找出数组中出现次数最的元素,并给出其出现过的位置

    function getMaxAndIndex( arr ){
        var obj = {};
        arr.forEach(function(item,index){
            if(!obj[item]){
                obj[item]= {indexs: [index]}
            }else{
                obj[item]['indexs'].push(index);
            }
        });
        var num=0;//记录出现次数最大值
        var str='';//记录出现次数最多的字符
        var reArr;//返回最大值的位置数组
        for(var attr in obj){
            var temp=obj[attr]['indexs'];
            if(temp.length>num){
                num=temp.length;
                str=attr;
                reArr=temp;
            }
        }
        return {
            maxStr:str,
            indexs:reArr
        }
    }

 

测试结果13

String Skill

时间对比:时间个位数形式需补0

const time1 = "2019-02-14 21:00:00";
const time2 = "2019-05-01 09:00:00";
const overtime = time1 > time2;
// overtime => false

格式化金钱

const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = ThousandNum(20190214);
// money => "20,190,214"

生成随机ID

const RandomId = len => Math.random().toString(36).substr(3, len);
const id = RandomId(10);
// id => "jg7zpgiqva"

生成随机HEX色值

const RandomColor = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
const color = RandomColor();
// color => "#f03665"

生成星级评分

const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
const start = StartScore(3);
// start => "★★★"

操作URL查询参数

const params = new URLSearchParams(location.search.replace(/\?/ig, "")); // location.search = "?name=young&sex=male"
params.has("young"); // true
params.get("sex"); // "male"

Number Skill

取整:代替正数的Math.floor(),代替负数的Math.ceil()

const num1 = ~~ 1.69;
const num2 = 1.69 | 0;
const num3 = 1.69 >> 0;
// num1 num2 num3 => 1 1 1

补零

const FillZero = (num, len) => num.toString().padStart(len, "0");
const num = FillZero(169, 5);
// num => "00169"

转数值:只对null、""、false、数值字符串有效

const num1 = +null;
const num2 = +"";
const num3 = +false;
const num4 = +"169";
// num1 num2 num3 num4 => 0 0 0 169

时间戳

const timestamp = +new Date("2019-02-14");
// timestamp => 1550102400000

精确小数

const RoundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;
const num = RoundNum(1.69, 1);
// num => 1.7
复制代码

判断奇偶

const OddEven = num => !!(num & 1) ? "odd" : "even";
const num = OddEven(2);
// num => "even"

取最小最大值

const arr = [0, 1, 2];
const min = Math.min(...arr);
const max = Math.max(...arr);
// min max => 0 2
复制代码

生成范围随机数

const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
const num = RandomNum(1, 10);

Boolean Skill

短路运算符

const a = d && 1; // 满足条件赋值:取假运算,从左到右依次判断,遇到假值返回假值,后面不再执行,否则返回最后一个真值
const b = d || 1; // 默认赋值:取真运算,从左到右依次判断,遇到真值返回真值,后面不再执行,否则返回最后一个假值
const c = !d; // 取假赋值:单个表达式转换为true则返回false,否则返回true

判断数据类型:undefined、null、string、number、boolean、array、object、symbol、date、regexp、function、asyncfunction、arguments、set、map、weakset、weakmap

function DataType(tgt, type) {
    const dataType = Object.prototype.toString.call(tgt).replace(/\[object /g, "").replace(/\]/g, "").toLowerCase();
    return type ? dataType === type : dataType;
}
DataType("young"); // "string"
DataType(20190214); // "number"
DataType(true); // "boolean"
DataType([], "array"); // true
DataType({}, "array"); // false

是否为空数组

const arr = [];
const flag = Array.isArray(arr) && !arr.length;
// flag => true

是否为空对象

const obj = {};
const flag = DataType(obj, "object") && !Object.keys(obj).length;
// flag => true

满足条件时执行

const flagA = true; // 条件A
const flagB = false; // 条件B
(flagA || flagB) && Func(); // 满足A或B时执行
(flagA || !flagB) && Func(); // 满足A或不满足B时执行
flagA && flagB && Func(); // 同时满足A和B时执行
flagA && !flagB && Func(); // 满足A且不满足B时执行

为非假值时执行

const flag = false; // undefined、null、""、0、false、NaN
!flag && Func();

数组不为空时执行

const arr = [0, 1, 2];
arr.length && Func();

对象不为空时执行

const obj = { a: 0, b: 1, c: 2 };
Object.keys(obj).length && Func();

函数退出代替条件分支退出

if (flag) {
    Func();
    return false;
}
// 换成
if (flag) {
    return Func();
}

switch/case使用区间

const age = 26;
switch (true) {
    case isNaN(age):
        console.log("not a number");
        break;
    case (age < 18):
        console.log("under age");
        break;
    case (age >= 18):
        console.log("adult");
        break;
    default:
        console.log("please set your age");
        break;
}

Array Skill

克隆数组

const _arr = [0, 1, 2];
const arr = [..._arr];
// arr => [0, 1, 2]

合并数组

const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2];
// arr => [0, 1, 2, 3, 4, 5];

去重数组

const arr = [...new Set([0, 1, 1, null, null])];
// arr => [0, 1, null]

混淆数组

const arr = [0, 1, 2, 3, 4, 5].slice().sort(() => Math.random() - .5);
// arr => [3, 4, 0, 5, 1, 2]

清空数组

const arr = [0, 1, 2];
arr.length = 0;
// arr => []

截断数组

const arr = [0, 1, 2];
arr.length = 2;
// arr => [0, 1]

交换赋值

let a = 0;
let b = 1;
[a, b] = [b, a];
// a b => 1 0

过滤空值:undefined、null、””、0、false、NaN

const arr = [undefined, null, "", 0, false, NaN, 1, 2].filter(Boolean);
// arr => [1, 2]

异步累计

async function Func(deps) {
    return deps.reduce(async(t, v) => {
        const dep = await t;
        const version = await Todo(v);
        dep[v] = version;
        return dep;
    }, Promise.resolve({}));
}
const result = await Func(); // 需在async包围下使用

数组首部插入成员

let arr = [1, 2]; // 以下方法任选一种
arr.unshift(0);
arr = [0].concat(arr);
arr = [0, ...arr];
// arr => [0, 1, 2]

数组尾部插入成员

let arr = [0, 1]; // 以下方法任选一种
arr.push(2);
arr.concat(2);
arr[arr.length] = 2;
arr = [...arr, 2];
// arr => [0, 1, 2]

统计数组成员个数

const arr = [0, 1, 1, 2, 2, 2];
const count = arr.reduce((t, c) => {
    t[c] = t[c] ? ++ t[c] : 1;
    return t;
}, {});
// count => { 0: 1, 1: 2, 2: 3 }

解构数组成员嵌套

const arr = [0, 1, [2, 3, [4, 5]]];
const [a, b, [c, d, [e, f]]] = arr;
// a b c d e f => 0 1 2 3 4 5

解构数组成员别名

const arr = [0, 1, 2];
const { 0: a, 1: b, 2: c } = arr;
// a b c => 0 1 2

解构数组成员默认值

const arr = [0, 1, 2];
const [a, b, c = 3, d = 4] = arr;
// a b c d => 0 1 2 4

获取随机数组成员

const arr = [0, 1, 2, 3, 4, 5];
const randomItem = arr[Math.floor(Math.random() * arr.length)];
// randomItem => 1

创建指定长度数组

const arr = [...new Array(3).keys()];
// arr => [0, 1, 2]

创建指定长度且值相等的数组

const arr = new Array(3).fill(0);
// arr => [0, 0, 0]

reduce代替map和filter

const _arr = [0, 1, 2];

// map
const arr = _arr.map(v => v * 2);
const arr = _arr.reduce((t, c) => {
    t.push(c * 2);
    return t;
}, []);
// arr => [0, 2, 4]

// filter
const arr = _arr.filter(v => v > 0);
const arr = _arr.reduce((t, c) => {
    c > 0 && t.push(c);
    return t;
}, []);
// arr => [1, 2]

// map和filter
const arr = _arr.map(v => v * 2).filter(v => v > 2);
const arr = _arr.reduce((t, c) => {
    c = c * 2;
    c > 2 && t.push(c);
    return t;
}, []);
// arr => [4]

Object Skill

克隆对象

const _obj = { a: 0, b: 1, c: 2 }; // 以下方法任选一种
const obj = { ..._obj };
const obj = JSON.parse(JSON.stringify(_obj));
// obj => { a: 0, b: 1, c: 2 }

合并对象

const obj1 = { a: 0, b: 1, c: 2 };
const obj2 = { c: 3, d: 4, e: 5 };
const obj = { ...obj1, ...obj2 };
// obj => { a: 0, b: 1, c: 3, d: 4, e: 5 }

对象字面量:获取环境变量时必用此方法,用它一直爽,一直用它一直爽

const env = "prod";
const link = {
    dev: "Development Address",
    test: "Testing Address",
    prod: "Production Address"
}[env];
// link => "Production Address"

对象变量属性

const flag = false;
const obj = {
    a: 0,
    b: 1,
    [flag ? "c" : "d"]: 2
};
// obj => { a: 0, b: 1, d: 2 }

创建纯空对象

const obj = Object.create(null);
Object.prototype.a = 0;
// obj => {}

删除对象无用属性

const obj = { a: 0, b: 1, c: 2 }; // 只想拿b和c
const { a, ...rest } = obj;
// rest => { b: 1, c: 2 }

解构对象属性嵌套

const obj = { a: 0, b: 1, c: { d: 2, e: 3 } };
const { c: { d, e } } = obj;
// d e => 2 3

解构对象属性别名

const obj = { a: 0, b: 1, c: 2 };
const { a, b: d, c: e } = obj;
// a d e => 0 1 2

解构对象属性默认值

const obj = { a: 0, b: 1, c: 2 };
const { a, b = 2, d = 3 } = obj;
// a b d => 0 1 3

Function Skill

函数自执行

const Func = function() {}(); // 常用

(function() {})(); // 常用
(function() {}()); // 常用
[function() {}()];

+ function() {}();
- function() {}();
~ function() {}();
! function() {}();

new function() {};
new function() {}();
void function() {}();
typeof function() {}();
delete function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();

隐式返回值:只能用于单语句返回值箭头函数,如果返回值是对象必须使用()包住

const Func = function(name) {
    return "I Love " + name;
};
// 换成
const Func = name => "I Love " + name;

一次性函数:适用于运行一些只需执行一次的初始化代码

function Func() {
    console.log("x");
    Func = function() {
        console.log("y");
    }
}

惰性载入函数:函数内判断分支较多较复杂时可大大节约资源开销

function Func() {
    if (a === b) {
        console.log("x");
    } else {
        console.log("y");
    }
}
// 换成
function Func() {
    if (a === b) {
        Func = function() {
            console.log("x");
        }
    } else {
        Func = function() {
            console.log("y");
        }
    }
    return Func();
}

检测非空参数

function IsRequired() {
    throw new Error("param is required");
}
function Func(name = IsRequired()) {
    console.log("I Love " + name);
}
Func(); // "param is required"
Func("You"); // "I Love You"

字符串创建函数

const Func = new Function("name", "console.log(\"I Love \" + name)");

优雅处理错误信息

try {
    Func();
} catch (e) {
    location.href = "https://stackoverflow.com/search?q=[js]+" + e.message;
}

优雅处理Async/Await参数

function AsyncTo(promise) {
    return promise.then(data => [null, data]).catch(err => [err]);
}
const [err, res] = await AsyncTo(Func());

优雅处理多个函数返回值

function Func() {
    return Promise.all([
        fetch("/user"),
        fetch("/comment")
    ]);
}
const [user, comment] = await Func(); // 需在async包围下使用

DOM Skill

显示全部DOM边框:调试页面元素边界时使用

[].forEach.call($$("*"), dom => {
    dom.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

自适应页面:页面基于一张设计图但需做多款机型自适应,元素尺寸使用rem进行设置

function AutoResponse(width = 750) {
    const target = document.documentElement;
    target.clientWidth >= 600
        ? (target.style.fontSize = "80px")
        : (target.style.fontSize = target.clientWidth / width * 100 + "px");
}

过滤XSS

function FilterXss(content) {
    let elem = document.createElement("div");
    elem.innerText = content;
    const result = elem.innerHTML;
    elem = null;
    return result;
}

存取LocalStorage:反序列化取,序列化存

const love = JSON.parse(localStorage.getItem("love"));
localStorage.setItem("love", JSON.stringify("I Love You"));

作者:JowayYoung
链接:https://juejin.im/post/5cc7afdde51d456e671c7e48
来源:掘金