在宝塔加载服务器镜像 宝塔文件服务器

接上一节从宝塔面板抓取接口url的方法，发现无论点击查看哪个文件目录信息，调用的url都是同一个，即

/files?action=GetDir&tojs=GetFiles&p=1&showRow=200

神奇的是返回的结果是不一样的，均准确返回了当前的目录信息，因此可以判定中间还有重要的一步参数传递，从而来传递相应的文件路径，而这一步，是通过JavaScript和前端html实现的，这就涉及到客户端JavaScript与服务端php的相互调用

2. 找到前端的调用函数

为了验证猜想，可以使用元素检查查看宝塔面板中文件菜单的html源码，首先点击左侧文件菜单，F12打开开发者工具，再回到页面中右键目录下的某个文件夹图标，选择检查即可在源码中看到对应的元素源码：

<div class="ico ico-folder" ondblclick="GetFiles('/www/backup')"></div>

从源码中我们可以看到该元素绑定了一个双击事件，双击时触发的函数是GetFiles('/www/backup')，括号中的参数是所查看目录的绝对路径，那下一步就是找到这个函数的定义，通过查看JavaScript的引用列表，可以定位到GetFiles('path')被定义在file.js中

<script type="text/javascript" src="/static/js/files.js?date20191219=7.4.2"></script>

为方便查看，将该源码复制到本地在编译器中打开查看，逐步分析

3. GetFiles函数分析

3.1 函数参数

Path：文件\目录的绝对路径

sort：目录下文件的排序依据

前面的部分应该是对参数的规范化处理，先跳过直接看ajax调用部分

$.post('/files?action=GetDir&tojs=GetFiles&p=' + p + '&showRow=' + showRow + search, data, function (rdata) {//函数内容略});

从形式来看，这就是jQuery中熟悉的ajax调用，Path直接通过url进行传递，不过还需要清楚参数data的含义，也就是还不清楚还需要向服务器传递什么数据，转到data的定义及其操作逐行解析，由以下5项组成

var data = {};
//1.添加了search和all两项
var searchV = $("#SearchValue").val();
if (searchV.length > 0 && searchtype == "1") {
    data['search'] = searchV; //搜索框输入的文件路径
    if ($("#search_all")[0].checked) {
    	data['all'] = 'True'  //是否包含子目录
    }
}

//2.添加了sort和reverse两项
sort = getCookie('files_sort');
reverse = getCookie(sort + '_reverse')
if (sort) {
	data['sort'] = sort;// 排序依据，如按大小还是类型
	data['reverse'] = reverse;//排序依据下的方式，如大小是升序还是降序
	setCookie(sort + '_reverse', reverse);
	setCookie('files_sort', sort);
}

//3.添加了path
data['path'] = Path; //规范化后的文件绝对路径

到这里，可以知道在双击文件夹图标时会触发GetFiles('/dir/path')函数，然后该函数将路径参数和Cookie中的数据通过ajax向发送相应的请求，这个url请求就会定位到后台的php代码，即在前一部分所介绍的通过php再调用宝塔面板的API接口函数

到这里，就可以开始开发了

下一步将要解决的是整个开发流程和前端web框架的搭建