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>

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