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

創(chuàng)新互聯(lián)建站專注于香坊網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供香坊營銷型網(wǎng)站建設，香坊網(wǎng)站制作、香坊網(wǎng)頁設計、香坊網(wǎng)站官網(wǎng)定制、小程序設計服務，打造香坊網(wǎng)絡公司原創(chuàng)品牌,更為您提供香坊網(wǎng)站排名全網(wǎng)營銷落地服務。

純 api 服務器:基礎(chǔ)工作

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

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

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

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

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

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

function files_json($files)函數(shù)末尾：

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;
}

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

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

for apache:
	
	Header set Access-Control-Allow-Origin "*"

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

純 api 服務器:調(diào)試工作

在fodi構(gòu)造https://apiurl/?path=%2Fd%2Fmirrors之類的url（%2F是/），比對cf和php后端觀察到輸出的結(jié)果。結(jié)果是都不會變的。喂給fodi的?path=返回結(jié)果不會變的，因為它是接受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那個界面可以調(diào)試到）：

{"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結(jié)果，?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()合適的位置（對應于它在結(jié)果中輸出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參數(shù)的改變，json終于有fodi相同的結(jié)果。這樣，fodi終于接受到初步正確的數(shù)據(jù)了(僅初始)，，但是到現(xiàn)在為止,點擊任何條目包括文件夾都不會出來正確結(jié)果，如上所說，我們只是讓后端返回了我們認為正確的結(jié)果，我們的程序靠喂?path這個工作。到現(xiàn)在為止這僅是一種手動工作。fodi frontend并不與之聯(lián)動，這是第一步，fodi前后端它是自動聯(lián)動api path參數(shù)變化經(jīng)的。比如，查看chrome f12,客戶端還接受其它參數(shù)&encrypted=&plain=&passwd=undefined。（云開發(fā)會校驗網(wǎng)頁應用請求的來源域名，您需要將來源域名加入到WEB安全域名列表中。）

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

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

到此，相信大家對“如何利用fodi給onemanager前后端分離”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！