Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use fodi to separate the front and back of onemanager", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use fodi to separate the front and rear of onemanager.

Pure api server: basic work

Fortunately, although onemanager itself is a combination of customer service output, but the internal is also subdivided into different functions, customer service is also distinguished. This makes our work easier: my version is https://github.com/qkqpttgf/OneManager-php/commite439ed8e68c4ae0d8d42bc5c293a3ba06aa1bc9c files 20200607-1856.19, the main line logic is main ()-> list_files- > files_json (), or render_list (), there are two branches of decomposing important functions or logic: (1) list_files ($path)-> fetch_files ($path), (2) render_list ($path ='', $files =')-> fetch_files ($path)-> output Renderlist is the client-side output logic. Onemanger supports the call to https://www.xxxx.com/?json. This function is function files_json ($files) in common, which outputs json, which is equivalent to the logic of json output in path in fodi backend index.js. The next job is to deal with these two functions.

Our test environment is carried out in a VPS (corresponding to platform/normal), and I completed it in the pagoda panel, which is divided into two websites to deploy om code and fodi frontend. Then I set up the original backend of fodi with free worker in cloudflare. Copy the fodi front into two copies of the html and put it under the second station, and our idea is to compare the front and rear of the two systems to achieve our goal. Put some files in the folder in advance, and some preparatory work:

Om needs to be preprocessed: the top-level code block of server index.php (which is not in a function here):

} else {include 'platform/Normal.php'; / / change / / $path = getpath () from this sentence; comment out $_ GET = getGET () followed by a note: $path = $_ GET [' path'] / / $_ GET is an array of collected parameters entered by the user. The getGet () is under platform/normal.php, where the path item is obtained. In this way, the URL (http://apiurl/?path+ parameter) entered by the user in the browser will display the json result under this path.

Server common.php is a common three-in-one platform. In the following logic, in the main ($path) function:

If (isset ($files ['folder']) | | isset ($files [' file']) {return render_list ($path, $files); / / replace the original comment with the full html output with the following sentence return files_json (/ * $path, * / $files)

End of function files_json ($files) function:

Return output (json_encode ($tmp)); return output (json_encode ($tmp), 200,200, ['Content-Type' = >' application/json']); / / this has actually been fixed in the new version

Client fodi in that frontend html: / fodi/ to be removed or simulated

Window.GLOBAL_CONFIG = {SCF_GATEWAY: "https://apiurl/", / / you can also use https://apiurl/?json if you don't change render_list to files_jsonSITE_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/' Change to / window.GLOBAL_CONFIG.IS_CF = false;}

In the settings-> configuration file of the pagoda server website, add ssl and set the web security domain name, otherwise a cross-domain error will occur in chrome F12 debugging (cloudflare does not have this problem). Chrome is not only web browser, but also webdever's IDE plus debugger. In fact, this can also be set in the program logic, but it is more troublesome.

Under the for nginx:server block location, you can also add_header 'Access-Control-Allow-Origin'' * 'directly in the pseudo-static; for apache: Header set Access-Control-Allow-Origin "*"

Then you can debug next (be careful not to use safari to use the latest google chrome as far as possible, so that the safari after macos big sur can return the correct results). The most difficult thing for the debugger is to find a debugging method. All these can be seen in chrome's f12Grainnetwork.Otherwise, chrome F12 produces errors. For the backend, the debugging you join can only be seen in the backend of the SCF. For the frontend, you can view it in chrome. Which should be distinguished? the path is called by the server test and which is from the client.

Pure api server: debugging work

A url such as https://apiurl/?path=%2Fd%2Fmirrors is constructed in fodi (% 2F is /), and the output is observed against the back end of cf and php. The result is that nothing will change. The result returned by the path= fed to fodi will not change because it accepts json requests rather than GET path. The feed to the php side needs to be dealt with again.

This is the output from 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"}]}

This is fodi's (you can debug it in the cloudflare interface):

{"parent": "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...."}]}"

Our idea is to make the output consistent, and since the html on the fodi client uses ajax to request ajax results, path is not for submission. It is returned as a form data. This is a later problem, dealing with output consistency first.

Because the correct json is parent,files,name,size,time,url, in common.php function files_json ($files):

.. $tmp ['list'] = []; change to $tmp [' files'] = []; .foreach ($files ['children'] as $file) {. $tmp1 [' name'] = $file ['name']; / / including this sentence, add $tmp1 [' size'] = $file ['size']; $tmp1 [' time'] = $file ['lastModifiedDateTime'];. / / $tmp1 [' type'] = 0 / / this comment / / $tmp1 ['type'] = 1; / / this comment / / $tmp1 [' id'] = $file ['id']; / / includes this sentence. The next 5 sentences are annotated, and the middle 3 sentences are moved to / / $tmp1 ['name'] = $file [' name']; / / $tmp1 ['time'] = $file [' lastModifiedDateTime']; / / $tmp1 ['size'] = $file [' size']; / / $tmp1 ['mime'] = $file [' file'] ['mimeType'];. Array_push ($tmp ['list'], $tmp1); change to array_push ($tmp [' files'], $tmp1);.

Add parent and add at the appropriate location of main () (corresponding to where it outputs the parent field in the result, that is, $tmp ['list'] = []; change to $tmp [' files'] = []; above)

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

Keep testing url, and with the change of path parameters, json finally has the same result as fodi. In this way, fodi finally received the initial correct data (only initially), but so far, clicking on any entry including the folder will not get the correct result. As mentioned above, we just let the back end return what we think is the right result, and our program depends on the work of feeding? path. So far, it's just a manual job. Fodi frontend is not linked with it, this is the first step, the front and rear of fodi it is automatic linkage api path parameters change. For example, if you look at chrome F12, the client also accepts another parameter & encrypted=&plain=&passwd=undefined. (cloud Development will verify the source domain name of the web application request. You need to add the source domain name to the list of WEB secure domain names. )

This is because the html on the fodi client uses ajax to request ajax results, and path is not for submission. It is returned as a form data. One is the user-initiated url path, and the other is the xhr-initiated url request path, which are not the same thing. Fodi client-server interaction has its own logic. There is also complex ajax parameter interaction (view the xhr object generated by the chrome f12 ajax class request):

For example, the data in the message body works, but not the parameters in the URI field, and is encapsulated in the formdata of the xmlhttprequest. The server restores this type of formdata, because the server-side request parameters distinguish between Get and Post. The get method is received by Request.QueryString ["strName"], while the post method is received by Request.Form ["strName"], and blala..ajax has other details. Next step: docking with fodi frontend. More research may be needed.

At this point, I believe you have a deeper understanding of "how to use fodi to separate the front and rear of onemanager". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.