去评论
dz插件网

对接宝塔的仪表盘PHP教程（PHP+JS）

哥斯拉
2025/06/26 15:57:09
渲染效果如下，实际就是小编的哈



务必下载百度的图表JS，也就是echarts.min.js。貌似这个货有点肥已经亚健康了。看看有没有CDN的自行找找。后端PHP输出接口开始讲解。

1，为了保持良好的习惯，我们分3个文件去实现，第一个文件就是宝塔每个API接口，第二个就是封装一个宝塔的PHP类文件，第三个就是JSON输出接口，方便图表的JS对接渲染

配置文件命名为config.php，代码如下：
  1. <?php$config = array('GetSystemTotal' => '/system?action=GetSystemTotal',           //获取系统基础统计'GetDiskInfo' => '/system?action=GetDiskInfo',                             //获取磁盘分区信息'GetNetWork' => '/system?action=GetNetWork',                               //获取实时状态信息(CPU、内存、网络、负载));
我这里随意举例了几个哈，其他的自行打开你的宝塔面板F12去获取了。

第二个封装一个PHP类，命名为Bt.php
  1. <?phpclass Bt{    private $BT_KEY = "";     private $BT_PANEL = "";    public function __construct($bt_panel = null,$bt_key = null){    if($bt_panel) $this->BT_PANEL = $bt_panel;    if($bt_key) $this->BT_KEY = $bt_key;    }          public function GetSystemTotal(){          $url = $this->BT_PANEL.$this->config("GetSystemTotal");    $p_data = $this->GetKeyData();          $result = $this->HttpPostCookie($url,$p_data);          $data = json_decode($result,true);          return $data;          }          public function GetDiskInfo(){          $url = $this->BT_PANEL.$this->config("GetDiskInfo");          $p_data = $this->GetKeyData();    $result = $this->HttpPostCookie($url,$p_data);    $data = json_decode($result,true);          return $data;          }          public function GetNetWork(){          $url = $this->BT_PANEL.$this->config("GetNetWork");          $p_data = $this->GetKeyData();    $result = $this->HttpPostCookie($url,$p_data);          $data = json_decode($result,true);          return $data;          }        public function GetKeyData(){        $now_time = time();        $p_data = array(        'request_token'        =>        md5($now_time.''.md5($this->BT_KEY)),        'request_time'        =>        $now_time        );        return $p_data;            }        public function GetKeyData(){        $now_time = time();        $p_data = array(        'request_token'        =>        md5($now_time.''.md5($this->BT_KEY)),        'request_time'        =>        $now_time        );        return $p_data;            }        private function HttpPostCookie($url, $data,$timeout = 60){        $cookie_file='./Cookie/'.md5($this->BT_PANEL).'.cookie';//定义cookie保存位置 自行创建文件夹        if(!file_exists($cookie_file)){        $fp = fopen($cookie_file,'w+');        fclose($fp);        }                $ch = curl_init();        curl_setopt($ch, CURLOPT_URL, $url);        curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);        curl_setopt($ch, CURLOPT_POST, 1);        curl_setopt($ch, CURLOPT_POSTFIELDS, $data);        curl_setopt($ch, CURLOPT_COOKIEJAR, $cookie_file);        curl_setopt($ch, CURLOPT_COOKIEFILE, $cookie_file);        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);        curl_setopt($ch, CURLOPT_HEADER, 0);        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);        $output = curl_exec($ch);        curl_close($ch);        return $output;        }        private function config($str){        require_once('config.php');        return $config[$str];        }}
3，最后命名一个文件index.php就可以，这就是JSON输出的了哈。
  1. <?phprequire_once('Bt.php');//引入宝塔类函数$apiurl='http://110.110.110.110:56789/';// 修改成自己的宝塔面板地址$apikey='kGZcwuWXXunQXkluTBp5ArcZ5GwOSEqQ';// 修改成自己的宝塔Api密钥$bt = new Bt($apiurl,$apikey);$enews=$_POST['enews'];if(empty($enews)){$enews=$_GET['enews'];}if($enews=='getsystemtotal'){echo json_encode($bt->GetSystemTotal());//获取系统基础统计}if($enews=='getnetwork'){echo json_encode($bt->GetNetWork());//获取实时状态信息(CPU、内存、网络、负载)}if($enews=='getdiskinfo'){echo json_encode($bt->GetDiskInfo());//获取磁盘信息}
此JSON接口不仅仅是完美集成到网站的，也可以集成到小程序，app上面的哈。不要单纯认为网站才可以的哈。接下来就是前端AJAX发起请求，获取JSON结果后用百度图表组件进行渲染就可以了！实在连前端都看不懂的下期再讲解
进入原文参与互动