在我们日常工作和生活中，经常一个密码走天下，殊不知这样做，某个网站/app密码泄露后，可能会引起撞库的风险，今天我们尝试使用vue做一个密码生成器，让每个密码都不一样吧，这样安全等级加加加。
效果展示
码上掘金
运行后效果
初始化项目
如果你已经会用【码上掘金】，那么可以跳过该段落，直接跳过看下一段落就好。
我们打开码上掘金(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个月看这个代码，不知道会不会骂街。不管如何，这个小玩意还是有点意思吧，动动你的小手指，快来试试吧。
