PV281: Programování v Rustu1/47
Obsah
HTMX
Askama rozšíření
Actix Cookie
Actix Session
2/47
AJAX (Asynchronous Javascript
and XML)
Pojďme se podívat 10 let zpátky:
místo celé stránky posíláme pouze vykreslené části
není třeba překreslit celou stránku
3/47
Kdy se mi to bude hodit?
4/47
Instalace přes npm
npm install htmx.org
následně přidat do stránky node_modules/htmx.org/dist/htmx.js
5/47
Instalace přes CDN (unpkg)
6/47
Load data
Response je vykreslená v elementu, který provedl request.
7/47
Requesty
Atribut Typ requestu
hx-get Provede GET na URL
hx-post Provede POST na URL
hx-put Provede PUT na URL
hx-patch Provede PATCH na URL
hx-delete Provede DELETE na URL
8/47
Předání parametrů
Get Some HTML, Including A Value in the Request
9/47
Target
Products
Pro změnu cíle pro vykreslení je nutné použít hx-target .
10/47
Extended selector
Atributy (jako hx-target ), které očekávají CSS selector, ve větši
případů podporují rozšířenou syntaxi.
closest najde nejbližšího rodiče elementu
next najde element níže v DOMu (následující)
previous najde element výše v DOMu
(předcházející)
find najde nejbližšího potomka elementu
11/47
Swapping
Hodnota Popis
innerHTML
výchozí nastavení - nahradí obsah elementu
(potomky)
outerHTML nahradí celý element včetně potomků
none bez vypsání odpovědi
12/47
Loading indikátor
Standardně se loading indikátor použije potomek s třídou
htmx-indicator . Jeho opacity se nastaví na 1. Element jde vybrat
pomocí hx-indicator="#indicator" .
13/47
View Transition
Využítím View Transitions API lze animatovat změny v rámci DOMu.
Products
14/47
Vykreslení JSONu
Vzhledem k potenciálním problémům s CORS je doporučené použít
server jako proxy pro získání dat.
Pokud ale k tak potřebujete udělat request na klientu, tak lze
použít klientské šablony.
15/47
Klientské šablony
16/47
Mustache šablona
Loading...
17/47
{{#data}}
{{name}} at {{email}} is with {{company.name}}
{{/data}}
Pozor na mixování s Askamou
18/47
Formulář
19/47
Přidání parametru mimo form
Enter email:
20/47
Odeslaní dat jako JSON
Přidáním hx-ext='json-enc' je request odeslaný jako typ
applicaton/json s převodem na JSON v těle.
21/47
Odeslání souboru
Periodicky se vyvolává htmx:xhr:progress . Odpovídá standardní
progress události během uploadu.
22/47
Zpracování v Rustu
async fn save_files(
MultipartForm(form): MultipartForm,
) -> Result {
for f in form.files {
let path = format!("./tmp/{}", f.file_name.unwrap());
log::info!("saving to {path}");
f.file.persist(path).unwrap();
}
Ok(HttpResponse::Ok())
}
23/47
Zpracování v Rustu
#[actix_web::main]
async fn main() -> std::io::Result<()> {
env_logger::init_from_env(env_logger::Env::new().default_filter_or("info"));
log::info!("creating temporary upload directory");
std::fs::create_dir_all("./tmp")?;
log::info!("starting HTTP server at http://localhost:8080");
HttpServer::new(|| {
App::new()
.wrap(middleware::Logger::default())
.app_data(TempFileConfig::default().directory("./tmp"))
.service(
web::resource("/")
.route(web::get().to(index))
.route(web::post().to(save_files)),
)
})
.bind(("127.0.0.1", 8080))?
.workers(2)
.run()
.await
}
24/47
Klientská validace
Provádí se na formulářových prvcích. Jinde je třeba zapnout přes
hx-validate='true' .
Skriptování je přes hyperscript. Pro instalaci:
přidat:
25/47
Klientská validace
26/47
CSS extensions