paint-brush
K vytvoření webového správce souborů nepotřebujete mnoho kódupodle@gliimlang
Nová historie

K vytvoření webového správce souborů nepotřebujete mnoho kódu

podle Gliimly7m2024/12/17
Read on Terminal Reader

Příliš dlouho; Číst

Sestavte užitečnou webovou aplikaci v méně než 100 řádcích kódu.
featured image - K vytvoření webového správce souborů nepotřebujete mnoho kódu
Gliimly HackerNoon profile picture

Nahrávání a stahování souborů ve webovém prohlížeči je běžným úkolem prakticky jakékoli webové aplikace nebo služby. Tento článek ukazuje, jak to udělat s velmi malým kódováním - v méně než 100 řádcích kódu. Použitá databáze je PostgreSQL a webový server je Nginx.

Gliimly budete používat jako aplikační server a programovací jazyk. Bude běžet za webovým serverem kvůli výkonu a zabezpečení a také umožní bohatší webové funkce. Tímto způsobem nemůže koncový uživatel mluvit s vaším aplikačním serverem přímo, protože všechny takové požadavky procházejí přes webový server, zatímco vaše back-endová aplikace může kvůli lepšímu výkonu mluvit přímo s vaším aplikačním serverem.

Za předpokladu, že váš aktuálně přihlášený uživatel Linuxu bude aplikaci vlastnit, vytvořte adresář se zdrojovým kódem a také vytvořte aplikaci Gliimly s názvem „správce souborů“:


 mkdir filemgr cd filemgr gg -k file-manager


Dále vytvořte PostgreSQL databázi s názvem "db_file_manager", kterou vlastní aktuálně přihlášený uživatel (tj. nastavení bez hesla):

 echo "create user $(whoami); create database db_file_manager with owner=$(whoami); grant all on database db_file_manager to $(whoami); \q" | sudo -u postgres psql


Vytvořte konfigurační soubor databáze používaný Gliimly, který popisuje databázi (je to soubor "db"):

 echo "user=$(whoami) dbname=db_file_manager" > db


Vytvořte SQL tabulku, která bude obsahovat soubory aktuálně uložené na serveru:

 echo "create table if not exists files (fileName varchar(100), localPath varchar(300), extension varchar(10), description varchar(200), fileSize int, fileID bigserial primary key);" | psql -d db_file_manager


Nakonec vytvořte zdrojové soubory Gliimly. Nejprve vytvořte soubor "start.gliim" a zkopírujte a vložte:

 begin-handler /start public @<h2>File Manager</h2> @To manage the uploaded files, <a href="<<p-path "/list">>">click here.</a><br/> @<br/> @<form action="<<p-path "/upload">>" method="POST" enctype="multipart/form-data"> @ <label for="file_description">File description:</label><br> @ <textarea name="filedesc" rows="3" columns="50"></textarea><br/> @ <br/> @ <label for="filename">File:</label> @ <input type="file" name="file" value=""><br><br> @ <input type="submit" value="Submit"> @</form> end-handler


Vytvořte soubor „list.gliim“ a zkopírujte a vložte:

 begin-handler /list public @<h2>List of files</h2> @To add a file, <a href="<<p-path "/start">>">click here</a><br/><br/> @<table border="1"> @<tr> @ <td>File</td><td>Description</td><td>Size</td><td>Show</td><td>Delete</td> @</tr> run-query @db= \ "select fileName, description, fileSize, fileID from files order by fileSize desc" \ output file_name, description noencode, file_size, file_ID @<tr> @ <td><<p-web file_name>></td><td><<p-web description>><td><<p-web file_size>></td> @ <td><a href="<<p-path "/download">>/file_id=<<p-url file_ID>>">Show</a></td> @ <td><a href="<<p-path "/delete">>/action=confirm/file_id=<<p-url file_ID>>">Delete</a></td> @</tr> end-query @</table> end-handler


Vytvořte soubor „upload.gliim“ a zkopírujte a vložte:

 begin-handler /upload public get-param filedesc // file description from the upload form get-param file_filename // file name get-param file_location // the path to uploaded file get-param file_size // size in bytes get-param file_ext // the file extension @<h2>Uploading file</h2> run-query @db= \ "insert into files (fileName, localPath, extension, description, fileSize) \ values ('%s', '%s', '%s', '%s', '%s')" \ input file_filename, file_location, file_ext, filedesc, file_size end-query @File <<p-web file_filename>> of size <<p-web file_size>> \ is stored on server at <<p-web file_location>>. \ File description is <<p-web filedesc>>.<hr/> end-handler


Vytvořte soubor „download.gliim“ a zkopírujte a vložte:

 begin-handler /download public get-param file_id run-query @db= \ "select localPath,extension from files where fileID='%s'" \ input file_id \ output local_path, ext \ row-count num_files if-true ext equal ".jpg" send-file local_path headers content-type "image/jpg" else-if ext equal ".pdf" send-file local_path headers content-type "application/pdf" else-if send-file local_path headers content-type "application/octet-stream" download end-if end-query if-true num_files not-equal 1 @Cannot find this file!<hr/> exit-handler end-if end-handler


Vytvořte soubor „delete.gliim“ a zkopírujte a vložte:

 begin-handler /delete public @<h2>Delete a file</h2> get-param action get-param file_id run-query @db="select fileName, localPath, description from files where fileID='%s'" output file_name, local_path, desc input file_id if-true action equal "confirm" // get file information to confirm what will be deleted @Are you sure you want to delete file <<p-web file_name>> (<<p-web desc>>)? Click <a href="<<p-path "/delete">>?action=delete&amp;file_id=<<p-url file_id>>">Delete</a> or click the browser's Back button to go back.<br/> else-if action equal "delete" // actual delete file, once confirmed begin-transaction @db run-query @db= "delete from files where fileID='%s'" input file_id error err no-loop if-true err not-equal "0" @Could not delete the file (error <<p-web err>>) rollback-transaction @db else-if delete-file local_path status st if-true st equal GG_OKAY commit-transaction @db @File deleted. Go back to <a href="<<p-path "/start">>">start page</a> else-if rollback-transaction @db @File could not be deleted, error <<p-num st>> end-if end-if else-if @Unrecognized action <<p-web action>> end-if end-query end-handler


Vytvořte aplikaci:

 gg -q --db=postgres:db


Spusťte svůj aplikační server:

 mgrg file-manager


Webový server je umístěn před aplikačním serverem Gliimly, takže je třeba jej nastavit. Tento příklad je pro Ubuntu, takže tam upravte konfigurační soubor Nginx:

 sudo vi /etc/nginx/sites-enabled/default


Přidejte to do sekce "server {}" ("client_max_body_size" umožňuje nahrát obrázky typických velikostí):

 location /file-manager/ { include /etc/nginx/fastcgi_params; fastcgi_pass unix:///var/lib/gg/file-manager/sock/sock; } client_max_body_size 100M;


Restartujte Nginx:

 sudo systemctl restart nginx


Přejděte do webového prohlížeče a zadejte:

 http://127.0.0.1/file-manager/start


Takto vypadá konečný výsledek. Je zřejmé, že jsme použili pouze holé HTML, ale o to tady vůbec nejde. Můžete použít jakýkoli druh front-end technologie, jde o to předvést Gliimly jako back-end server pro webové aplikace/služby.

Zde je domovská obrazovka s formulářem pro nahrání souboru a odkazem na liFilest of files:

Domovská stránka správce souborů


Výpis souborů:

Seznam souboru


Žádost o smazání souboru:

Požádejte o potvrzení smazání


Potvrzení o smazání:

Smazat soubor