你还是一个密码闯天下么? 使用vue做一个密码生成器吧

在我们日常工作和生活中，经常一个密码走天下，殊不知这样做，某个网站/app密码泄露后，可能会引起撞库的风险，今天我们尝试使用vue做一个密码生成器，让每个密码都不一样吧，这样安全等级加加加。

效果展示

码上掘金

code.juejin.cn/pen/7141205…

运行后效果

初始化项目

如果你已经会用【码上掘金】，那么可以跳过该段落，直接跳过看下一段落就好。

我们打开码上掘金(code.juejin.cn/) ,选择【新建代码片段】【新建空白片段】

我们由于是编写vue，所以得引入外部依赖，点击Script左边的设置按钮，输入vue.js的地址即可。

接着，我们再编写vue测试代码，运行看看效果。

这样的话，我们整个项目初始化便算完成了。

如何拆解项目

该项目让用户选择密码类型，有 数字、大小写字母 以及 特殊字符， 再让用户选择一个密码长度， 最后是密码生成按钮。整个UI效果如下:

接着来介绍一下，这个项目最核心的点，是如何生成该密码。目前我们使用的是，建立一个大的字典池，如果用户勾选数字，那么我们就将0-9放入池子中，如果勾选的是大小字母、小写字母，那么我们就将A-Z、a-z放入池子中，如果勾选的是特殊字符，那么我们就将!、"、#、$、%、&、'、( ... 等特殊字符放入池子中。

如果要生成密码，我们将取到长度n，我们做n次循环，每次都在池子中选择一个随机值，最后将结果返回，这就是我们生成的密码了。

好了，现在有一个问题来了，我们是否需要提前定义数字、大写字母、小写字母、以及特殊字符呢？

答案是可以定义，那么你就要这样写了：

let lowerArr = ['a','b','c'...]

这样写的话，有点占用内存，而且写出来很麻烦，我们可以借助ascii来实现该需求，例如，我们要输出a-z:

我们来看看小写字母的ascii。

这里暂不解释编码规则。

在linux中，可以使用man ascii查看ascii编码。 你还可以使用百度 搜索"ascii 编码" 来获取相关信息。

我们可以看到，数字97对应的字母，正好的是a，后面以此类推，那么我们就可以使用如下语句打印a-z了：

for (let id=97;id<123;id++) {
    console.log(String.fromCharCode(id))
}

通过上面的ascii表其中97代表a，而122代表z，而String.fromCharCode()函数是将数字转为字符，我们尝试下。

其他字符，包括特殊字符，都是一样的。

我们拿到池子后，只需要遍历传入的个数，然后随机池子中间的字符，就可以完成该需求了。

我们画一个图来解释一下

代码编写

先看html部分

哦，对了，这里有个点来注意一下，checkbox在vue接收中，类型应该为数组，而非字符，对于本项目变量passwdTypes，我们定义的值应当为: passwdTypes: []。

后面便是vue的部分了，我们先来看看定义

我们给定的初始值为 密码长度为12位，密码类型为 数字、大小写字母 以及 特殊字符。

接下来，主要重点在于按钮，所执行的函数部分，代码如下:

methods:{
  buildPasswd() {
    let passwdArray = [];
    let randPass = "";
    for (let i=0;i<this.passwdTypes.length;i++) {
      // 数字
      if (this.passwdTypes[i] == "numbers") {
        for (let id=48;id<58;id++) {
          passwdArray.push(String.fromCharCode(id))
        }
      }
      // 小写字母
      if (this.passwdTypes[i] == "lower") {
        for (let id=97;id<123;id++) {
          passwdArray.push(String.fromCharCode(id))
        }
      }
      // 大写字母
      if (this.passwdTypes[i] == "upwer") {
        for (let id=65;id<91;id++) {
          passwdArray.push(String.fromCharCode(id))
        }
      }
      // 特殊字符
      if (this.passwdTypes[i] == "special") {
        for (let id=33;id<47;id++) {
          passwdArray.push(String.fromCharCode(id))
        }
      }
    }
    // 生成密码
    for (let id=0;id<this.passwdLen;id++) {
      let n = Math.floor(Math.random() * passwdArray.length)
      console.log(n)
      randPass = randPass.concat(passwdArray[n])
    }
    // 密码
    this.passwd = randPass
  }
}

如上代码我们先遍历passwdTypes中的值，而后根据值来将 用户以及选择的数字、大小字母、小写字母 以及 特殊字符 放到桶里面，而后再根据用户输入的密码长度n，来循环n次，每次都在池子里随机选择一个数，从而组装n个长度的密码，再返回到页面上。

总结

我们密码生成器就做完了，写的时候，我还知道谁是谁。 写完了，我一瞅id=33;id<47;id++，什么是33，什么是47，我人稍微有点麻，要是再过1个月看这个代码，不知道会不会骂街。不管如何，这个小玩意还是有点意思吧，动动你的小手指，快来试试吧。