PbootCMS
PbootCMS接口API调用的VUE(axios)和Js(ajax)实现方法
PetitQ
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 文件，，否则会出错，系统要求对 Signature 进行二次 MD5 加密，所以要先包含这个加密文件。
特殊问题：当调试的时候发现提示“接口时间戳验证失败！”，一般是由于调试方与服务器时间不同步或差距较大造成的，请同步一下调试方电脑的日期和时间就可以解决这个问题。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
