PbootCMS

PbootCMS接口API调用的VUE(axios)和Js(ajax)实现方法

也想出现在这里?联系我们
创客云

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

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

也想出现在这里?联系我们
创客主机

第一种:Ajax 方式下实现(网站本地环境下实现)

  1. <script>
  2. //document.write(hex_md5("admin"));
  3. $(document).ready(function (e) {
  4.  
  5.     var appid     = 'test';    //后台WebAPI中设置的AppID
  6.     var appsecret = 'WxwHJOLSiowf123456';    //后台WebAPI中设置的API认证密钥
  7.     var timestamp = Date.parse(new Date());
  8.         timestamp = timestamp / 1000;  //获取当前时间戳
  9.     var signature = hex_md5(hex_md5(appid + appsecret + timestamp));    //构建signature
  10.  
  11.   var url='/api.php/cms/site';
  12.   $.ajax({
  13.     type: 'POST',
  14.     url: url,
  15.     dataType: 'json',
  16.     data: {
  17.       appid: appid,//{pboot:appid}
  18.       timestamp: timestamp,//{pboot:timestamp}
  19.       signature: signature//{pboot:signature}
  20.      },
  21.  
  22.     success: function (response, status) {
  23.       if(response.code){
  24.         //获取数据成功
  25.         alert(response.data.title);
  26.       }else{
  27.         //返回错误数据
  28.         alert(response.data);
  29.       }
  30.     },
  31.  
  32.     error:function(xhr,status,error){
  33.       //返回数据异常
  34.       alert('返回数据异常!');
  35.     }
  36.   });
  37. });
  38.  
  39. </script>

第二种:Axios 方式下实现

  1. <script type="text/javascript">
  2.         var appid     = 'test';    //后台WebAPI中设置的AppID
  3.         var appsecret = 'WxwHJOLSiowf123456';    //后台WebAPI中设置的API认证密钥
  4.         var timestamp = Date.parse(new Date());
  5.             timestamp = timestamp / 1000;
  6.             //获取当前时间戳
  7.         var signature = hex_md5(hex_md5(appid + appsecret + timestamp));    //构建signature
  8.  
  9.     new Vue({
  10.         el:'#app',
  11.         data () {
  12.             return{
  13.                 info: null
  14.             }
  15.         },
  16.         mounted(){
  17.             axios
  18.             //alert(signature)
  19.             .get("https://www.371jianzhan.com/api.php/cms/sort/scode/2", {params : {'appid':appid,'timestamp':timestamp,'signature':signature}})
  20.             .then(response => (this.info=response))
  21.             .catch(function(error){
  22.                 //console.log(error);
  23.             });
  24.         }
  25.     })
  26. </script>

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

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

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!