关于PbootCMS接口API调用的VUE(axios)实现方式-PbootCMS是一套开源且成熟的PHP建站系统,标签简单使用方便,利于它建企业网站是相当省事的。近期需要用到VUE项目,结合PbootCMS的API接口调用数据,使用还是相当简...

建站技术分享网

建站技术分享网
首页>> js >>关于PbootCMS接口API调用的VUE(axios)实现方式
2021-5-13
分类: js

关于PbootCMS接口API调用的VUE(axios)实现方式

文章作者:清风

PbootCMS是一套开源且成熟的PHP建站系统,标签简单使用方便,利于它建企业网站是相当省事的。近期需要用到VUE项目,结合PbootCMS的API接口调用数据,使用还是相当简单的。今天主要讲......

PbootCMS是一套开源且成熟的PHP建站系统,标签简单使用方便,利于它建企业网站是相当省事的。近期需要用到VUE项目,结合PbootCMS的API接口调用数据,使用还是相当简单的。今天主要讲一下API强制认证方式下的实现步骤,希望对API接口感兴趣的朋友能有所帮助。


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

第一种:Ajax方式下实现

<script>
//document.write(hex_md5("admin"));
$(document).ready(function (e) {

    var appid     = 'test';    //后台WebAPI中设置的AppID
    var appsecret = 'WxwHJOLSiowf123456';    //后台WebAPI中设置的API认证密钥
    var timestamp = Date.parse(new Date());
        timestamp = timestamp / 1000;  //获取当前时间戳
    var signature = hex_md5(hex_md5(appid + appsecret + timestamp));    //构建signature

  var url='/api.php/cms/site';
  $.ajax({
    type: 'POST',
    url: url,
    dataType: 'json',
    data: {
      appid: appid,//{pboot:appid}
      timestamp: timestamp,//{pboot:timestamp}
      signature: signature//{pboot:signature}
     },

    success: function (response, status) {
      if(response.code){
        //获取数据成功
        alert(response.data.title);
      }else{
        //返回错误数据
        alert(response.data);
      }
    },

    error:function(xhr,status,error){
      //返回数据异常
      alert('返回数据异常!');
    }
  });
});

</script>

第二种:Axios方式下实现

<script type="text/javascript">
        var appid     = 'test';    //后台WebAPI中设置的AppID
        var appsecret = 'WxwHJOLSiowf123456';    //后台WebAPI中设置的API认证密钥
        var timestamp = Date.parse(new Date());
            timestamp = timestamp / 1000;
            //获取当前时间戳
        var signature = hex_md5(hex_md5(appid + appsecret + timestamp));    //构建signature
        
    new Vue({
        el:'#app',
        data () {
            return{
                info: null
            }
        },
        mounted(){
            axios
            //alert(signature)
            .get("https://www.371jianzhan.com/api.php/cms/sort/scode/2", {params : {'appid':appid,'timestamp':timestamp,'signature':signature}})
            .then(response => (this.info=response))
            .catch(function(error){
                //console.log(error);
            });
        }
    })
</script>

注意事项:请一定要在网页头部引用MD5文件,<script src="md5.js"></script>,否则会出错,系统要求对Signature进行二次MD5加密,所以要先包含这个加密文件。

特殊问题:当调试的时候发现提示“接口时间戳验证失败!”,一般是由于调试方与服务器时间不同步或差距较大造成的,请同步一下调试方电脑的日期和时间就可以解决这个问题。


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:FEIBA分享博客 » 关于PbootCMS接口API调用的VUE(axios)实现方式

发表评论

路人甲

网友评论(0)