PbootCMS接口API调用的VUE(axios)出现签名错误引发的vuedata不能相互引用

这两天刚好在研究PHPCMS的API接口，想上手练个项目，因为出色的API数据输出，可以让我更方便的调用各种频道，各种会员数据，对于新手来说，这个系统的API接口还是挺好用的。

基于安全考虑，建议调用接口的网站都开启“API强制认证”，即有Appid，Appsecret，Timestamp，Signature组合的安全通道。功能调试的时候可以不启用，基础功能实现后网站后端开“API强制认证”，数据调取方在请求地址中加入相关token参数。

后台配置信息全部搞定

看前端第一个版本的代码（vue中data值不能相互引用）：

（axios，vue-axios自行百度安装吧，挺简单的）

<script>
// var signature = hex_md5(hex_md5(appid + appsecret + timestamp));    //构建signature，如果会js-md5的小伙伴，
//可以直接将加密值卸载export default外面，这种方案也是可取的。需要index.html引入md5.js。
//既然想在vue上下功夫，那就用vue方案实现吧。
export default {
    data() {
        return {
            dataList: [],
            appid: "admin",
            api_secret: "123",
            timestamp: Date.parse(new Date()) / 1000,
            jiami:this.appid + this.api_secret + this.timestamp /*第一版出现问题了，data中的值不能相互引用问题，
            如果相互引用，那么前台会报引用的属性值为undefined（新手吃亏，找问题花了将近一个半小时，
            原因是vue中的data值是初始化响应数据的，要初始化，没响应过来数据，肯定就是未定义的属性啊。
            起初还想把数据放在created中，事实也是我头大了，再后来到第二版，往下翻...↓）*/
        }
    },

    mounted() {
        this.getCompany()
    },
    methods: {
        async getCompany() {
            //可进行解耦
            await this.$axios(
                {
                    url: 'https://www.hnssqyl.com/api.php/cms/site',
                    method: 'get',
                    params: {
                        "appid": this.appid,
                        "signature": this.$md5(this.$md5(this.jiami)),
                        "timestamp": this.timestamp,
                    }
                }
            )
                .then(res => {
                    console.log(res)
                }, error => {
                    console.log(error)
                })

        }
    }
}
</script>

事情已经过去一个小时了，然后才开始百度vue引用data失败的问题（打开了百度的大门之后，才发现太多人都遇到这种问题了。）既然知道问题所在，那么

第二版vue终于入坑（程序能跑了）：

<script>
export default {
    data() {
        return {
            dataList: [],
            appid: "admin",
            api_secret: "123",
            timestamp: Date.parse(new Date()) / 1000,
            jiami:''
        }
    },
    computed: {
    },
    mounted() {
        this.jiami = this.appid + this.api_secret + this.timestamp;
        //既然不能在data中相互引用，那么就在钩子函数里面实现吧。
        /*关键代码在这里了，直接在data中定义一个jiami，当页面初始化完毕，
        将data中想要拼接的属性值赋值给jiami，已经发现可以实现想要的功能了。
        但是问了一下朋友，说在computed的性能更好，那么，说干就干，幸好自己自学的基础还行。
        下面第三版代码，也是最佳（data不能引用实现）的代码。*/
        this.getCompany()
    },
//这里的代码和第一版一模一样，避免浪费更多空间。
//    ...
}
</script>

第三版代码（性能的提升）：

<script>
export default {
    data() {
        return {
            dataList: [],
            appid: "admin",
            api_secret: "123",
            timestamp: Date.parse(new Date()) / 1000,
        }
    },
    computed: {
    /*关键代码在这里，直接将jiami写到计算属性里面（相当于在data中定义的一个jiami，
    这里可以使用this.data中的数据，最后return拼接的数据给jiami就行了。
    超级好用，性能高。计算属性是什么？计算属性怎么用？
    好吧，我给你搜搜：转载链接[放这里](https://www.cnblogs.com/yite/p/13508658.html)）*/
        jiami() {
            return this.appid + this.api_secret + this.timestamp
        }
    },
    mounted() {
        // this.jiami = this.appid + this.api_secret + this.timestamp;
        this.getCompany()
    },
    methods: {
        async getCompany() {
            //可进行解耦
            await this.$axios(
                {
                    url: 'https://www.hnssqyl.com/api.php/cms/site',
                    method: 'get',
                    params: {
                        "appid": this.appid,
                        "signature": this.$md5(this.$md5(this.jiami)),
                        "timestamp": this.timestamp,
                    }
                }
            )
                .then(res => {
                    console.log(res)
                }, error => {
                    console.log(error)
                })
        }
    }
}
</script>

解决的事情刚刚结束，正式的事情才刚刚开始。