如何利用fodi給onemanager前后端分離

本篇內容主要講解“如何利用fodi給onemanager前后端分離”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何利用fodi給onemanager前后端分離”吧!

純 api 服務器:基礎工作

所幸雖然onemanager本身是客服輸出合體的，但內部也是細分到不同函數的易區分，客服也進行了區分。這使得我們的工作較為容易進行：我的版本是https://github.com/qkqpttgf/OneManager-php/commite439ed8e68c4ae0d8d42bc5c293a3ba06aa1bc9c，20200607-1856.19，主線邏輯：main()->list_files->files_json(),or render_list()，分解重要的函數或邏輯有二支：（1）list_files($path)->fetch_files($path)，（2）render_list($path = '', $files = '')->fetch_files($path)->output，renderlist就是客戶端輸出邏輯。onemanger支持https://www.xxxx.com/?json的調用，這個函數就是common中的function files_json($files)，會輸出json，相當于在fodi后端index.js中?path輸出json那些邏輯。接下來的工作就是這二個函數的處理。

我們的測試環境是在一臺VPS中(對應platform/normal)進行，我是在寶塔面板中完成的，分成二個網站部署好om代碼和fodi frontend。然后fodi原來的后端我是在cloudflare中開免費worker搭建的。fodi front復制成二份html放在第二個站下，我們的思路是比對這二套系統的前后端，以促成我們的目標。事先在文件夾中放一些文件，還有一些準備工作：

om需要預處一下：服務端index.php頂層代碼塊（這里并沒有處在一個函數中）中：

} else { include 'platform/Normal.php'; //從這句開始改
    //$path = getpath(); 注釋掉
    $_GET = getGET()后面加一條：
    $path = $_GET['path']; //$_GET是收集到的用戶輸入的參數組成的數組，該getGet()在platform/normal.php下，這里是得到path項,這樣，用戶在瀏覽器中輸入什么網址(http://apiurl/?path+參數)，就會展示該路徑下的json結果

服務端common.php這個三合一平臺通用接下來邏輯中，main($path)函數中：

if ( isset($files['folder']) || isset($files['file']) ) {
  return render_list($path, $files); //原來的帶完整html輸出的注釋掉，換成接下來這句
  return files_json(/*$path, */$files);

function files_json($files)函數末尾：

return output(json_encode($tmp));
return output(json_encode($tmp), 200, ['Content-Type' => 'application/json']); //這條實際上在新版被修復了

客戶端fodi那個frontend html中：要將/fodi/去掉或模擬出來

window.GLOBAL_CONFIG = {
SCF_GATEWAY: "https://apiurl/",    //這里你也可以用https://apiurl/?json如果上面你沒有把render_list改成files_json
SITE_NAME: "FODI",
IS_CF: true
};
if (window.GLOBAL_CONFIG.SCF_GATEWAY.indexOf('workers') === -1) {
  window.GLOBAL_CONFIG.SCF_GATEWAY += '/';   //window.GLOBAL_CONFIG.SCF_GATEWAY += '/fodi/';改成/
  window.GLOBAL_CONFIG.IS_CF = false;
}

在寶塔服務端網站的設置->配置文件中，加好ssl，并把web安全域名設置一下，否則接下來chrome f12調試會產生跨域錯誤（cloudflare沒有這個問題）。chrome這東西不光是web browser，也是webdever的IDE加調試器，其實這個也可以在程序邏輯中設置，但比較麻煩。

for nginx:
server塊location下，直接放在偽靜態里也可以
add_header 'Access-Control-Allow-Origin' '*';

for apache:
	</Directory>
	Header set Access-Control-Allow-Origin "*"
</VirtualHost>

然后就可以接下來調試了(注意不要用safari盡量用最新的google chrome，支持度足夠，macos big sur之后的safari才能返回正確結果)，調試程序最難的是找到調試的方法，以上這些都可以在chrome的f12，network->request,respone中看到，否則還是chrome f12產生錯誤，對于后端，你加入的調試只能在云函數執后臺看到，對于前端，在chrome中查看。要區分哪些?path是服務端測試調用的，哪些是客戶端的。

純 api 服務器:調試工作

在fodi構造https://apiurl/?path=%2Fd%2Fmirrors之類的url（%2F是/），比對cf和php后端觀察到輸出的結果。結果是都不會變的。喂給fodi的?path=返回結果不會變的，因為它是接受json請求的而不是GET形式的?path。喂給php端的需要再處理一下。

這是om輸出的：

{"list":[
{"type":1,"id":"01AL5B7D25YGLLNRUY5FG3INXIYG5BDB5V","name":"d","time":"2020-07-23T14:14:52Z","size":14716769375,"mime":null},
{"type":1,"id":"01AL5B7D26ZI4V2QKN35HJSUUZPTHQ3KQN","name":"docs","time":"2020-08-02T05:59:38Z","size":5640494,"mime":null},
{"type":0,"url":"https:\/\/balala...","id":"01AL5B7DY3H337ZRZ3BNAIUSPVR5RXLU2M","name":"readme.md","time":"2020-08-05T12:25:06Z","size":1311,"mime":"application\/octet-stream"}
]}

這是fodi的（在cloudflare那個界面可以調試到）：

{"parent":"/","files":[
{"name":"d","size":14716769375,"time":"2020-07-23T14:14:52Z"},
{"name":"docs","size":5640494,"time":"2020-08-02T05:59:38Z"},
{"name":"readme.md","size":1311,"time":"2020-08-05T12:25:06Z","url":"https://blalaa...."}
]}

我們的思路就是讓其輸出一致，而且由于fodi客戶端那個html是用的ajax請求ajax結果，?path并不是提交用的。而是作為form data被返回的。這是后來的問題，先處理輸出一致。

因為正確的json是parent,files,name,size,time,url，所以在common.php function files_json($files)中：

....
$tmp['list'] = [];改為        $tmp['files'] = [];
......
foreach ($files['children'] as $file) {
  ...
  $tmp1['name'] = $file['name']; //包括這句，以下三新加
  $tmp1['size'] = $file['size'];
  $tmp1['time'] = $file['lastModifiedDateTime'];
  ...
  // $tmp1['type'] = 0;   //這句注釋
  // $tmp1['type'] = 1;  //這句注釋
  //$tmp1['id'] = $file['id']; //包括這句。接下來5句注釋，中間3句被移到上面了
  //$tmp1['name'] = $file['name'];
  //$tmp1['time'] = $file['lastModifiedDateTime'];
  //$tmp1['size'] = $file['size'];
  //$tmp1['mime'] = $file['file']['mimeType'];
  .....
  array_push($tmp['list'], $tmp1);改為array_push($tmp['files'], $tmp1);
  ......

加入parent,在main()合適的位置（對應于它在結果中輸出parent字段在整個全部字段所在的位置，即$tmp['list'] = [];改為 $tmp['files'] = [];一句上面）加上

$a= str_replace($_SERVER['list_path'],"",array_pop(explode(":",$files['parentReference']['path'])));
if (isset($a)) { 
	$tmp['parent'] = $a;
}
if ($a =='') {
	$tmp['parent'] = '/';
}

不斷測試url，隨著path參數的改變，json終于有fodi相同的結果。這樣，fodi終于接受到初步正確的數據了(僅初始)，，但是到現在為止,點擊任何條目包括文件夾都不會出來正確結果，如上所說，我們只是讓后端返回了我們認為正確的結果，我們的程序靠喂?path這個工作。到現在為止這僅是一種手動工作。fodi frontend并不與之聯動，這是第一步，fodi前后端它是自動聯動api path參數變化經的。比如，查看chrome f12,客戶端還接受其它參數&encrypted=&plain=&passwd=undefined。（云開發會校驗網頁應用請求的來源域名，您需要將來源域名加入到WEB安全域名列表中。）

這是由于fodi客戶端那個html是用的ajax請求ajax結果，?path并不是提交用的。而是作為form data被返回的。一個是用戶發動的url path，一個是xhr發動的url request path，這二者不是一回事。fodi客戶端服務端交互有它自己的邏輯。這里面還有復雜的ajax參數交互（查看chrome f12 ajax類請求產生的xhr對象）：

比如，消息體中的數據起作用,對于URI字段中的參數不起作用，被封裝在xmlhttprequest的formdata中。服務端要還原處理這類formdata，，，這一切是因為服務器端請求參數區分Get與Post。get 方法用Request.QueryString["strName"]接收，而post 方法用Request.Form["strName"] 接收，blala..ajax還有其它細節。下一步：與fodi frontend對接。可能需要更多研究。

到此，相信大家對“如何利用fodi給onemanager前后端分離”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！