PbootCMS小程序API的封裝步驟教程
作者：緹墨網絡 時間：2018-10-25 訪問量：14617
程序員應該具備的美德是“懶”，能用一行代碼搞定的，盡量不用兩行。
所以，剛開始研究PbootCMS制作小程序的時候，第一個想法就是封裝接口。
文件下載地址：
下面是封裝步驟（封裝文件在文章最后提供下載，供大家參考）。
1、準備md5加密文件。
因為PbootCMS的簽名參數signature是經過雙層md5加密的，當然如果后臺WebAPI沒有開啟強制認證的，這一步可以跳過。
2、封裝一下API的請求方法。
//聲明一個請求函數
function api_request(url, method, parm){
var apiurl = '******'; //域名 + api.php
var appid = '******'; //后臺WebAPI中設置的API認證用戶
var appsecret = '******'; //后臺WebAPI中設置的API認證密鑰
var timestamp = Date.parse(new Date());
timestamp = timestamp / 1000; //獲取當前時間戳
var signature = md5.hex_md5(md5.hex_md5(appid + appsecret + timestamp)); //構建signature
var data = { //因為搜索、留言和表單需要用到POST方法，要通過data傳遞參數，所以先聲明data對象，方便后面添加
appid: appid,
timestamp: timestamp,
signature: signature,
};
//根據請求方法構建Header
if (method == 'POST') {
//POST方法，設置請求頭部
var header = { 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8' };
//添加POST參數到data
for (var i in parm) {
data[i] = parm[i];
}
} else {
//GET方法，設置請求頭部
method = 'GET';
var header = { 'Content-Type': 'application/json' };
}
//通過promise返回數據
var promise = new Promise(function(resolve,reject){
//小程序自帶的wx.request請求
wx.request({
method: method,
url: apiurl + url,
header: header,
data: data,
//請求成功
success: function(res){
var api_data = res.data;
if (api_data.code != 1 && api_data.code != 0){
reject({ error: '數據請求失敗，請稍后重試', code: 500 });
return;
} else {
resolve(api_data);
}
}
})
})
//返回數據
return promise;
}3、封裝API模塊
//這里就比較簡單了，就是構建api的url，然后傳入到api_request這個請求函數，返回數據。
//下面是根據官方文檔中的api封裝的各個模塊，有些沒有實際測試檢查，可能有手誤什么的，大家自行調整即可。
//Api模塊
module.exports = {
//獲取公司信息
companyinfos: function(){
var url = '/cms/company';
return api_request(url);
},
//獲取單個公司信息
companyinfo: function(name){
var url = '/cms/company/name/' + name;
return api_request(url);
},
//獲取網站信息
siteinfos: function(){
var url = '/cms/site';
return api_request(url);
},
//獲取單個網站信息
siteinfo: function(name){
var url = '/cms/site/name/' + name;
return api_request(name);
},
//獲取自定義標簽
get_labels: function(){
var url = '/cms/label';
return api_request(url);
},
//獲取單個自定義標簽
get_label: function(){
var url = '/cms/label/name/' + name;
return api_request(url);
},
//獲取幻燈片
get_slide: function(gid,num){
var url = '/cms/slide/gid/' + gid + '/num/' + num;
return api_request(url);
},
//獲取友情鏈接
get_links: function(gid,num){
var url = '/cms/link/gid/' + gid + '/num/' + num;
return api_request(url);
},
//獲取欄目列表
get_navs: function(){
var url = '/cms/nav';
return api_request(url);
},
//獲取指定欄目列表
get_nav: function(scode){
var url = '/cms/nav/scode/' + scode;
return api_request(url);
},
//獲取當前欄目
get_current_cat: function(scode){
var url = '/cms/sort/scode/' + scode;
return api_request(url);
},
//獲取內容列表
get_list: function(scode,num,order){
if( ( num != '' ) && !order ){
var url = '/list/' + scode + '/num/' + num;
} else if( !num && ( order != '' ) ){
var url = '/list/' + scode + '/order/' + order;
} else if ( (num != '') && (order != '') ){
var url = '/list/' + scode + '/num/' + num + '/order/' + order;
} else {
var url = '/list/' + scode;
}
return api_request(url);
},
//獲取內容列表第*頁
get_list_paged: function (scode, paged, num, order) {
if ((num != '') && (order == '')) {
var url = '/list/' + scode + '/num/' + num + '/page/' + paged;
} else if ((num == '') && (order != '')) {
var url = '/list/' + scode + '/order/' + order + '/page/' + paged;
} else if ((num != '') && (order != '')) {
var url = '/list/' + scode + '/num/' + num + '/order/' + order + '/page/' + paged;
} else {
var url = '/list/' + scode + '/page/' + paged;
}
return api_request(url);
},
//獲取指定內容
get_content: function(id){
var url = '/content/' + id;
return api_request(url);
},
//獲取指定內容多圖
get_content_pics: function(id){
var url = '/cms/pics/id/' + id;
return api_request(url);
},
//獲取搜索結果
get_search_resault: function(parm,num,order){
if ((num != '') && (order == '')) {
var url = '/cms/search/' + 'num/' + num;
} else if ((num == '') && (order != '')) {
var url = '/cms/search/' + 'oder/' + order;
} else if ((num != '') && (order != '')) {
var url = '/cms/search/num/' + num + '/order/' + order;
} else {
var url = '/cms/search/';
}
return api_request(url, 'POST', parm);
},
//提交留言
add_message: function(parm){
var url = '/cms/addmsg';
return api_request(url, 'POST', parm);
},
//獲取留言內容
get_message: function(num){
var url = '/cms/msg/num/' + num;
return api_request(url);
},
//獲取留言內容第*頁
get_message_paged: function(num,paged){
var url = '/cms/msg/num/' + num + '/page/' + paged;
return api_request(url);
},
//提交表單
add_form: function(fcode,parm){
var url = '/cms/addform/fcode/' + fcode;
return api_request(url, 'POST', parm);
},
//獲取表單內容
get_form: function(fcode){
var url = '/cms/form/fcode/' + fcode;
return api_request(url);
},
//獲取表單內容第*頁
get_form_paged: function(fcode,num,paged){
var url = '/cms/form/fcode/' + fcode + '/num/' + num + '/page/' + paged;
return api_request(url);
},
}4、完成了，就這么簡單。
下面說明一下調用的方法：
1、在需要調用數據的js頁面引入api文件，例如首頁的index.js
const api = require('../../utils/api.js'); //路徑根據自己的實際情況調整2、在生命周期函數--監聽頁面加載函數中使用api模塊。
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
var that = this; //劃重點，這句千萬不要忘掉了。
//api.模塊函數.then...來調用，這里companyinfos()是調用公司信息
api.companyinfos().then(function (rs) {
//通過setData把獲取到的數據賦值到頁面初始數據的data對象,這樣就可以在wxml中使用數據了。
that.setData({
companyinfos: rs.data,
})
//把獲取的數據輸出到控制臺看看，實際使用的時候刪除掉下面這行
console.log(rs.data);
})
},3、控制臺截圖，可以看到公司信息的數據獲取成功，接下來就是綁定數據到頁面的事情了。
4、POST請求的使用方法。同樣在生命周期函數--監聽頁面加載函數中使用api模塊。
//首先聲明一個對象，用來存儲需要通過POST傳遞過去的參數。比如搜索的keyword,scode，留言的字段等。
//這里演示的是搜索模塊，聲明對象，POST搜索的關鍵詞和指定分類。
var search_obj = {
'keyword': '模板',
'scode': '3,5',
};
//get_search_resault需要傳入 搜索對象（也就是剛才聲明的），返回條數，排序方式。
//這里演示需要獲取的是分類3和5中的，關鍵詞是模板的5條信息。
api.get_search_resault(search_obj, 5, 'id').then(function (rs) {
that.setData({
search: rs.data,
})
console.log(rs.data);
})5、看看控制臺的截圖。
可以看到，已經獲取到分類3和分類5中的，關鍵詞是“模板”，并且按照id進行排序的前5條數據了。