Vue之数据排序加签

这篇随笔小编给大家带来的是数据排序加签：

　　　　所谓数据加签，就是把数据进行加密再传给后端，这样保证数据的秘密性。不容易被修改和获取；排序就是根据公司要求对字段进行排序，有些公司会把字段根据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进行排序（后续我们会说到）  先让大家看看排序的代码。

　　　　　　

　　　　　　3、上面那步已经把我们的字段进行排序，接下来就是加签的过程了，在加签中我们使用md5，上面说到secret是不需要排序的，直接放在排序好字段的后面就可以（secret=*G0^Z!eGOCh2Tf04），

把这些都准备好后，我们用md5("排序好的字段")，得出的结果就是我们加签好的数据，得到的数据用sign定义，怎么样，简单吧！！！  

 　　　　　　

　　　　　　4、最后把得到的sign和我们要给后端传递的数据放在data里传过去就可以了，这就是使用Vue对数据进行加签，下面给大家带来完整代码。

　　　　　　

 <template>
   <div>
     <input type="text" placeholder="请输入用户名" v-model="phone">
     <input type="password" placeholder="请输入密码" v-model="password">
     <button @click="handleclick()">点击</button>
   </div>
 </template>

 <script>
 import md5 from "js-md5";
 export default {
   data() {
     return {
       phone: "",
       password: "",
       sign: "",
       array: [],
       secretKey: "*G0^Z!eGOCh2Tf04",
       arr: ["secret"]
     };
   },
   created() {
     this.array = ["phone", "password" ];
     this.array = this.array.sort(function(item1, item2) {
       return item1.localeCompare(item2);
     });
     console.log(this.array[0], this.array[1]);
   },
   methods: {
     handleclick() {
       if (this.phone !== "" && this.password !== "") {
         console.log(
           this.array[0] +
             "=" +
             this.password +
             "&" +
             this.array[1] +
             "=" +
             this.phone +
             "&" +
             this.arr[0] +
             "=" +
             this.secretKey
         );
         this.sign = md5(
           this.array[0] +
             "=" +
             this.password +
             "&" +
             this.array[1] +
             "=" +
             this.phone +
             "&" +
             this.arr[0] +
             "=" +
             this.secretKey
         );
         console.log(this.sign);
         this.phone = "";
         this.password = "";
       } else {
         alert("账号或密码不能为空");
       }
     }
   }
 };
 </script>

 <style scoped>
 * {
   margin: 0;
   padding: 0;
 }
 div {
   display: flex;
   flex-direction: column;
 }
 input {
   width: 75%;
   height: 2rem;
   outline: none;
   padding-left: 1rem;
   margin: 0.5rem auto;
 }
 button {
   width: 80%;
   height: 2rem;
   margin: 0.5rem auto;
   background: skyblue;
   outline: none;
 }
 </style>

　　　　     欢迎各位同学评论留言         大 家 学 会 了 吗？