这篇随笔小编给大家带来的是数据排序加签:
所谓数据加签,就是把数据进行加密再传给后端,这样保证数据的秘密性。不容易被修改和获取;排序就是根据公司要求对字段进行排序,有些公司会把字段根据a-z排序,有些公司会选择倒序,具体情况按照公司要求进行修改,下面的例子小编用的是a-z排序,话不多说,下面开始讲解。
1、首先vue为我们提供好了一种方法----md5,这种方法就是用来加签的,在vue中下载md5使用 npm install --save js-md5。
下载后在所需要的组件里引用就可以了------import md5 from "js-md5";
2、接下来我们先对字段进行排序,在这里我们对字段使用a-z排序,小编用登录举例,在用户输入登录名和密码后,对其进行排序,这里值得注意的是,如果有token,也要把token加进去一起进行排序,还有一点很重要,在排序的时候,不需要把
secret进行排序(后续我们会说到) 先让大家看看排序的代码。
![](https://img2018.cnblogs.com/blog/1554225/201906/1554225-20190613140058620-1948069664.png)
3、上面那步已经把我们的字段进行排序,接下来就是加签的过程了,在加签中我们使用md5,上面说到secret是不需要排序的,直接放在排序好字段的后面就可以(secret=*G0^Z!eGOCh2Tf04),
把这些都准备好后,我们用md5("排序好的字段"),得出的结果就是我们加签好的数据,得到的数据用sign定义,怎么样,简单吧!!!
![](https://img2018.cnblogs.com/blog/1554225/201906/1554225-20190613140138944-1443527481.png)
4、最后把得到的sign和我们要给后端传递的数据放在data里传过去就可以了,这就是使用Vue对数据进行加签,下面给大家带来完整代码。
1 <template> 2 <div> 3 <input type="text" placeholder="请输入用户名" v-model="phone"> 4 <input type="password" placeholder="请输入密码" v-model="password"> 5 <button @click="handleclick()">点击</button> 6 </div> 7 </template> 8 9 <script> 10 import md5 from "js-md5"; 11 export default { 12 data() { 13 return { 14 phone: "", 15 password: "", 16 sign: "", 17 array: [], 18 secretKey: "*G0^Z!eGOCh2Tf04", 19 arr: ["secret"] 20 }; 21 }, 22 created() { 23 this.array = ["phone", "password" ]; 24 this.array = this.array.sort(function(item1, item2) { 25 return item1.localeCompare(item2); 26 }); 27 console.log(this.array[0], this.array[1]); 28 }, 29 methods: { 30 handleclick() { 31 if (this.phone !== "" && this.password !== "") { 32 console.log( 33 this.array[0] + 34 "=" + 35 this.password + 36 "&" + 37 this.array[1] + 38 "=" + 39 this.phone + 40 "&" + 41 this.arr[0] + 42 "=" + 43 this.secretKey 44 ); 45 this.sign = md5( 46 this.array[0] + 47 "=" + 48 this.password + 49 "&" + 50 this.array[1] + 51 "=" + 52 this.phone + 53 "&" + 54 this.arr[0] + 55 "=" + 56 this.secretKey 57 ); 58 console.log(this.sign); 59 this.phone = ""; 60 this.password = ""; 61 } else { 62 alert("账号或密码不能为空"); 63 } 64 } 65 } 66 }; 67 </script> 68 69 <style scoped> 70 * { 71 margin: 0; 72 padding: 0; 73 } 74 div { 75 display: flex; 76 flex-direction: column; 77 } 78 input { 79 width: 75%; 80 height: 2rem; 81 outline: none; 82 padding-left: 1rem; 83 margin: 0.5rem auto; 84 } 85 button { 86 width: 80%; 87 height: 2rem; 88 margin: 0.5rem auto; 89 background: skyblue; 90 outline: none; 91 } 92 </style>
欢迎各位同学评论留言 大 家 学 会 了 吗?