我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
相信在座的很多大佬们还在使用excel直接存储明文密码。如果泄漏了，那将是毁灭性的打击哦。本篇文章使用vue实现对数据最简单的加解密(这里解释了最简单的加解密，大佬误杠！)，快来使用一下，给你的安全等级加加加吧。
前端大佬莫笑话，运维小弟献丑了。
项目展示
码上掘金
项目截图
将
“是以圣人处无为之事，行不言之教，万物作焉而不辞，生而不有，为而不恃，功成而弗居。夫惟弗居，是以不去。”
加密。
解密加密后的字符串
初始化项目
如果你已经使用过【码上掘金】这个工具，可以略过本段落，直接看下一段落【项目核心概念】。
我们打开【码上掘金(code.juejin.cn/)】，创建一个新的【空白片段】。
点击【新建代码片段】【新建空白片段】，我们就可以创建一个空白项目了。
我们点击Script右侧的设置按钮，可以添加依赖。
由于我们是编写vue的程序，所以我们添加vue的地址。
而后，我们编写一个最简单的vue实例来验证环境的正确性。
如上，我们使用vue来计算一个表达式3+2-5+12，点击运行后，结果为12，由此证明我们已经将环境搭建好了。
项目核心概念
其实如果你查看vue代码的编写，会发现项目代码非常简单。由此我们来讲解一下，我们是如何进行加密解密的。其中最核心的概念是异或运算(xor)，符号为: ^。
由此，我们介绍下相关原理： 所谓的异或运算是指二进制运算， 如果对应的二进制位相同(同为0或者同为1)的时候，结果为0，否则为1，在进行运算时，高位不足需要补0。
我们来演示一下:
假设我们 12 xor 24 == 20 ， 这个20是如何得来的呢? 我们来看下
12的二进制为: 1100
而24的二进制位: 11000
由于高位不足需要补0，所以12的二进制同等于 01100
所以我们执行异或结果为:
如果二进制位相同，则为0，否则为1。
我们再将结果10100转换为10进制，结果为: 20，所以这就是最终的结果。
我们有了如上的基础，我们再来思考一个问题:
(A ^ B) ^ B 应该等于多少呢？
如上式子我们可以写为: A ^ (B ^ B)
如果不好计算，我们就带入式子，假设: A 为 0011, B 为1000，而B ^ B可得:
而，A ^ 0 ，我们带入可得:
所以，A ^ B ^ B == A ^ 0 == A
如果我们将B理解为秘钥，那么，可得:
A ^ B == C以及C ^ B == A是成立的。
我们以第一个问题来收尾:
12 xor 24 == 20和20 xor 24 == 12是成立的，其计算结果如下:
关于异或就暂时介绍到这里。
页面编码
关于前端页面，我们想设计出一个内容输入框，2个秘钥输入框，以及一个计算按钮，我们很快就可以写出骨干来，如下:
前端页面，较为简单，我们内容框框，使用<textarea>标签、秘钥和确认秘钥框框我们使用input标签即可 最后的 按钮我们使用button。
我们编写css装饰一下框架，效果为:
页面稍微有点丑。
vue编码
由于有了【项目核心概念】的铺垫，所以我们直接开始编写注意事项，而后上代码，由于异或操作对象为二进制，所以我们不能直接操作字符，需要先将字符转为其底层编码，而后再将编码转为字符。
这里介绍一个小例子:
console.log(3 ^ 5 ^ 5)
这个结果为: 3
而
console.log('a' ^ 'b' ^ 'a')
结果为: 0，因为它没法处理，我们得将其转化为:
console.log(String.fromCharCode(('a'.charCodeAt() ^ 'b'.charCodeAt() ^ 'a'.charCodeAt())))
这里才能正常输出结果b。
其中fromCharCode是将编码转换为字符，而charCodeAt是将字符转换为编码。
好了，有了如上的铺垫，我们来看vue代码:
const vm = new Vue({
el:"#app",
data: {
TextContent: "",
SecretKey: "",
ReSecretKey: "",
msg: "小提示: 秘钥很重要，请记住哦",
result: ""
},
methods: {
sd() {
this.result = ""
this.msg = "小提示: 秘钥很重要，请记住哦"
if ("" == this.TextContent) {
this.msg = "小提示: 您输入的内容为空"
return
}
if (this.SecretKey != this.ReSecretKey) {
this.msg = "小提示: 您2次输入的密码不相同哦"
return
}
if ("" == this.SecretKey) {
this.msg = "小提示: 你输入的秘钥为空，将为你指定为默认秘钥"
this.SecretKey = "T!a4Z)Az"
this.ReSecretKey = this.SecretKey
}
for (let i=0;i<this.TextContent.length;i++) {
this.result = this.result + String.fromCharCode((this.TextContent[i].charCodeAt() ^ this.SecretKey[i % this.SecretKey.length].charCodeAt()))
}
}
}
})
其中TextContent是用户输入的内容，SecretKey、ReSecretKey是秘钥和验证秘钥，msg是程序输出的小提示，最后是result加解密的结果。
vue会判断，用户输入的内容为空、秘钥未输入和2次秘钥不相同等。
这些做完之后，会进入到异或运算中，这里有个注意的点为: 当用户输入内容长度 大于 秘钥长度的时候，需要轮训使用秘钥，还记得之前我们在介绍核心概念的时候，说过会高位补齐，那个是已经在进行二进制运算的时候了。 这个是在取字符的二进制呢。
其中轮训使用的算法为遍历的内容的下标对秘钥长度取余: i % this.SecretKey.length，在加上编码转换，所以核心语句是:
this.result = this.result + String.fromCharCode((this.TextContent[i].charCodeAt() ^ this.SecretKey[i % this.SecretKey.length].charCodeAt()))
测试
我们拿几个测试案例来测试一下:
加密:
解密
加密
解密
总结
正如前文所述，这是一种较为简单的加密，因为它可以通过 明文 和 密文 来推算出 秘钥，如果你的整个交互过程都是使用同一个秘钥的话，且该秘钥也会分享出去给他人使用，那么就很危险了。但是像文章这种，自定义秘钥，安全性还是很高的。
怎么样，好玩吧，动动你的小手指，快来试试吧。
