Transcription
Hogy vagytok mindannyian ma? Amit tenni szeretnék, az az, hogy folytassuk a Pythonnal történő webalkalmazás-fejlesztés ötletét azzal, hogy egy új módszert adunk hozzá a tartalom dinamikus megjelenítéséhez a HTML sablonunkban. Tehát, ha emlékeztek, utoljára sikeresen létrehoztuk a webalkalmazásunkat a Flask segítségével, és a Jinja-t használtuk egy Python változó átadására a sablonunkhoz a `render_template` funkción keresztül az otthoni URL szabályunkban, és ez itt jelent meg.
Nos, mi van, ha ez a változó dinamikusabb lenne? Még fontosabb, mi van, ha viszonylag gyakran frissülne? Mi van, ha ez egy részvényár vagy valami hasonló lenne? Nos, akkor frissítenünk kellene az oldalt, vagy valamilyen módon kérnünk kellene az új információt a változóból a szerverről, hogy megjelenítsük a HTML sablonban. Nos, ahelyett, hogy a felhasználó frissítené az oldalt, használhatunk valamit, amit Ajaxnak hívnak.
Amit az Ajax lehetővé tesz számunkra, az az, hogy dinamikusan jelenítsünk meg tartalmat, amely gyakran frissül, vagy amelyet gyakran kell frissítenünk anélkül, hogy frissítenünk kellene a weboldalt. Oké, tehát hogy elkezdjük itt, megnézzük a HTML-ünket, és beillesztek egy szkriptet, amely lehetővé teszi számunkra az Ajax használatát, és ezt a leírásban hagyom lent, és csak másolni és beilleszteni fogjátok a HTML-be, hogy tudjuk, hol találjuk az Ajaxot, és a HTML-ünk tudja, mit tegyen azzal, amit írunk.
Tehát most, hogy beillesztettük az Ajax szkriptet, elkezdhetjük megfontolni, hogyan kezdhetjük el ezt megvalósítani. Csináljuk meg egy kicsit dinamikusabbá abban az értelemben, hogy ahelyett, hogy lenne egy név változónk, csináljunk valamit, ami véletlenszerűséget valósít meg. Tehát van ez a változónk, ami nem változik, tegyük úgy, hogy változzon.
Tehát amit tenni fogok, az az, hogy importálom a NumPy-t, és ahelyett, hogy a nevet Roman-ként deklarálnám, ezt véletlenszerű tizedesre váltom, és a véletlenszerű tizedes az NP.random.random lesz, és ez fogja meghatározni, vagy azt hiszem, hogy R, és ez egy véletlenszerű tizedes lesz 0 és 1 között, beleértve. És minden alkalommal, amikor elindítjuk ezt az alkalmazást, újra hozzárendeli a véletlenszerű tizedest egy új számhoz. És akkor ahelyett, hogy itt megadnánk a nevet, megadhatjuk a véletlenszerű tizedest, és ez megjelenik a HTML-ünkben.
Tehát amikor elindítjuk ezt az alkalmazást, kapunk egy véletlenszerű tizedest 0 és 1 között, és akkor ez megjelenik a HTML-ünkben ezen a Jinja változón keresztül, és minden alkalommal, amikor leállítjuk és újra futtatjuk ezt az alkalmazást, új tizedesünk lesz. Oké, tehát ez mind nagyszerű, de ez nem igazán praktikus, mert le kell állítanunk és el kell indítanunk a Python szkriptünket, hogy új hozzárendelést kapjunk ebből a véletlenszerű tizedes változóból.
És a gyakorlatban ez az alkalmazás, vagy ez a webalkalmazás, valami olyanon lesz tárolva, mint az Elastic Beanstalk az Amazon Web Services-en keresztül, vagy valami hasonló, és nem fogjuk tudni leállítani és újraindítani a szervert két másodpercenként, ha meg akarjuk változtatni a változónkat. Tehát ehelyett, amit tehetünk, az az, hogy létrehozhatunk egy új URL szabályt, amely lehetővé teszi számunkra ennek a véletlenszerű tizedes változónak a frissítését.
Tehát amit tenni fogok, az az, hogy létrehozok egy új URL szabályt. Azt fogom mondani, hogy `application.route`, és csak `update_decimal`-nek fogom hívni, és ez egy POST kérés lesz, és létrehozok egy funkciót alatta, csak `update_decimal`-nek hívom. És most ez az, ahol a varázslat történik. Itt írhatunk Python kódot ennek a változónak a módosításához, és frissítést kaphatunk a HTML-ünkben a felhasználó számára az elülső oldalon.
Tehát az `update_decimal` funkcióban csak hívni fogom a `random_decimal`-t, és beállítom egyenlővé az `np.random.rand`-dal, és ez lehetővé teszi számomra, hogy ezt a véletlenszerű tizedest 0 és 1 közé rendelem újra, és ezt az új URL szabályon keresztül fogja megtenni egy POST kéréssel, és képesek leszünk használni az Ajaxot, hogy felhívjuk ezt az URL szabályt, és ez lehetővé teszi számunkra, hogy megkapjuk ezt az új értéket a szerverről.
Oké, tehát tartson velem, mert most át fogok váltani HTML-re, és írok egy kis JavaScriptet és Ajaxot, amely lehetővé teszi számunkra, hogy felhívjuk ezt az új URL szabályt, amely frissíti a véletlenszerű tizedes változónkat, és akkor arról fogunk beszélni, hogyan lehet ezt a változót visszaküldeni a sablonunkba a `update_decimal` funkció és az Ajax segítségével a HTML-ünkben.
Tehát átváltok ide, és írni fogok egy kis JavaScriptet. Tehát meg fogom adni, hogy `<script>` és akkor bezárom a `<script>` címkét. Oké, most itt fogok csinálni egy új funkciót. Azt fogom mondani, hogy `function load_new_decimal()`, és ezen a funkción belül írni fogok egy kis Ajaxot. Tehát azt fogom mondani, hogy `$.ajax()`, és akkor megnyitom a zárójelet, és megnyitom a kapcsos zárójelet, Enter, Enter, bezárom egy pontosvesszővel.
És itt fogom megadni az URL szabályt, amit épp beállítottunk. Tehát azt fogom mondani, hogy `url: '/update_decimal'`, és idézőjelekben fogom tenni. Ez közvetlenül kapcsolódik az itt beállított URL szabályhoz, az `update_decimal`-hez. Aztán meg fogom adni a `type`-ot, ami egy POST kérés, amit az URL szabályunkban is megadtunk itt. Aztán meg fogom adni az `dataType`-ot. Nos, említettem, hogy valamit vissza fogunk adni ebben a funkcióban, hogy lehetővé tegyük a HTML-ünk frissítését. Ebben az esetben a visszatérési típus vagy az `dataType` JSON lesz, és erről később még beszélünk, de egyelőre csak JSON-t fogunk megadni.
És akkor az `onsuccess`-en mit fogunk csinálni? Nos, vesszük az adatokat, és frissítjük a HTML-ünket. Oké, tehát itt válnak a dolgok egy kicsit bonyolultabbá. A HTML-ünk frissítéséhez a legegyszerűbb módja az, hogy megadunk egy `div` címkét, és kicseréljük azt a címkét új HTML-lel, amely az URL szabályunk által frissített adatokat képviseli.
Tehát amit ezzel értek, az az, hogy mondjuk, hogy ez a Jinja változó egy `div` címkébe volt csomagolva. Tehát azt fogom mondani, hogy `<div>`, és akkor bezárom azt a címkét, és csak azt fogom mondani, hogy ez a `div` címke itt rendelkezik egy `id`-vel: `random_decimal`. Tehát ez irreleváns, hogy ez ugyanaz a név, mint a `random_decimal` változó itt. Csak tartsd szem előtt, hogy ez csak az `id` a `div` címkéhez HTML-ben.
Tehát most, amikor ezt a Jinja változót új információval akarjuk frissíteni ebből az általunk itt generált URL szabályból, amit valójában csinálunk, az az, hogy kicseréljük a `div` címke tartalmát új HTML-lel, amely ezt a Jinja változót vagy ezt a véletlenszerű tizedes változót képviseli itt. És hogy ezt megtegyük, ahelyett, hogy ugyanazt a HTML sablont használnánk, ami az egész weboldalt egy duplikált másolattal helyettesítené, létrehozhatunk egy új sablont, amely csak ezt a véletlenszerű változót modellezi.
És ez mind sokkal érthetőbbé válik, amikor ténylegesen létrehozom a sablont. Tehát csináljuk csak meg. Tehát létrehozok egy új sablont. Azt fogom mondani, hogy `File`, és csak `random_decimal_model.html`-nek fogom hívni. És ebben a `random_decimal_model`-ben azt fogom mondani, hogy `<div>`, és akkor az `id` egyenlő, és meg fogom adni a `random_decimal`-t. Aztán bezárom ezt a címkét, és újraírom azt a Jinja változót, mint `{{ x }}`.
Tehát most, hogy itt van ez a `random_decimal_model.html` sablonunk, a JavaScriptünkben, az Ajaxunkban, azt tehetjük, hogy azt mondjuk, hogy `$('#random_decimal').html(data)`. Ez azt jelenti, hogy oké, nézzük meg a HTML sablonunkat, az egész HTML sablonunkat, keressük meg a `random_decimal` `div` címkét itt, és valójában kicseréljük azzal az adattal, amelyet az új URL szabályunk visszaadott.
Tehát most meg kell adnunk, hogy mit adunk vissza az URL szabályunkon keresztül, és azt mondtuk, hogy JSON-t adunk vissza, és az adatokat itt, ez az `dataType`, amit visszaadunk. Tehát amit tenni akarunk, az az, hogy a Flaskból is importáljuk a `jsonify`-t. És ez lehetővé teszi számunkra, hogy ezt a `random_decimal_model.html` sablonunkat JSON-ná alakítsuk, hogy lehetővé tegyük annak kicserélését, ami ebben a `div` címkében van itt az otthoni HTML sablonunkban.
És ha mindez egy kicsit zavarónak hangzik, ne aggódjon, mindez viszonylag intuitív módon fog összeállni. Csak tartson velem egyelőre. Tehát itt fogunk visszaküldeni `jsonify`-t, üres idézőjelekkel. Azt fogjuk mondani, hogy `render_template('random_decimal_model.html', x=random_decimal)`.
Tehát ha ez egy kicsit zavarónak tűnik, mindössze annyit kell tudnod, hogy itt rendereljük a Jinja sablonunkat, a `random_decimal_model`-t, és akárcsak az otthoni oldal URL szabálya, megadjuk, hogy az `x` változó vagy az `x` Jinja változó az a `random_decimal`, amelyet egy sorral korábban újra hozzárendeltünk itt a NumPy-val. És ahelyett, hogy csak visszaadnánk a HTML sablont, rendereljük JSON adat típusként, és átadjuk ennek a `div` címkének az Ajax segítségével a JavaScriptünkben itt.
Tehát az utolsó nagy kérdőjel itt az, hogy milyen gyakran vagy mikor akarjuk hívni ezt az URL szabályt a `random_decimal` változónk frissítéséhez. És hogy erre válaszoljak, amit tenni fogok, az az, hogy becsomagolom ezt a `load_new_decimal` funkciót egy kis további Ajax-szal, amely lehetővé teszi számunkra, hogy megadjunk egy intervallumot ennek az `update_decimal` URL szabálynak a hívásához.
Tehát menni fogok, és azt mondom, hogy `$(function() { ... });`. És eltávolítom ezt a záró zárójelet, és létrehozok egy új párt, és megnyitok egy kapcsos zárójelet, és eltávolítom a későbbi kapcsos zárójelet. Tehát ezen a funkción belül azt fogom mondani, hogy `window.setInterval(function() { ... }, 1000);`.
És ismét megnyitok egy új kapcsos zárójelet. Ezúttal mindkét párt megtarthatod, és azt fogom mondani, hogy `load_new_decimal()`. Tehát most a kapcsos zárójel után, de a záró zárójel előtt azt fogom mondani, hogy vessző, 1000. És lényegében azt mondom, hogy minden 1000 ezredmásodpercben, vagy 1 másodpercben hívjuk meg a `load_new_decimal` JavaScript funkciót itt. És ez az, ami hivatkozik az Ajaxra, amely felhívja az URL szabályunkat a `random_decimal` változó frissítéséhez.
Tehát becsomagoljuk ezt a funkciót itt ezzel. Tehát az utolsó kapcsos zárójel alatt azt fogom mondani, hogy bezárom az előbbi kapcsos zárójelet, és bezárom a zárójeleket is, és hozzáadok egy pontosvesszőt. És ez lesz az Ajax és a JavaScript terjedelme, amit írunk ehhez a webalkalmazáshoz.
Tehát most csak menjünk végig a parancsláncon. Menjünk végig azon, hogy mit csinál ez a program, hogy jobban megértsük az Ajaxot és annak kapcsolatát a webalkalmazásunkkal. Tehát kezdésként van ez a Flask webalkalmazásunk, amit futtatunk, és ezzel az otthoni oldal URL szabályával kezdjük. Elérjük a localhostunkat a portunkon keresztül, és ezt a Python változót Jinja segítségével rendereljük a HTML-ünkbe itt.
És ezt a `render_template` funkción keresztül adjuk át itt. És amit csinálunk, az az, hogy azt mondjuk, hogy minden 1000 ezredmásodpercben, vagy minden 1 másodpercben hívjuk meg ezt a `load_new_decimal` funkciót. Tehát amikor ezt a `load_new_decimal` funkciót meghívják, az Ajax kimegy, és azt mondja, hogy oké, `update_decimal` URL szabály. Ez fel fogja hívni ezt a funkciót, és generálunk egy új véletlenszerű tizedest.
És az `update_decimal` funkció által visszaadott adatok alapján, amit JSON-ként adunk meg, és vesszük a `random_decimal`-t, amelyet ebben az `update_decimal` funkcióban módosítottunk, és átadjuk a Jinja segítségével a `random_decimal_model`-ünknek itt. És vesszük ezt a `random_decimal_model`-t, JSON-ná alakítjuk, és azt mondjuk az otthoni HTML sablonunkban, hogy frissítsük ezt a `random_decimal` `div`-et az ezzel a funkcióval visszaadott adatokkal, amely ebben az esetben a JSON-ná alakított `random_decimal` sablon volt itt.
És ez lehetővé teszi számunkra, hogy folyamatosan kicseréljük ezt a három sort HTML-t ezzel a három sorral HTML-lel, amelyet ez az `update_decimal` funkció frissített. Tehát ez egy elég hosszú, elnyújtott magyarázat volt, de mindössze annyit kell tudnod, hogy frissítjük a webalkalmazásunk otthoni oldalát anélkül, hogy frissítenünk kellene az oldalt, és ez az, amit az Ajax lehetővé tesz számunkra itt.
Tehát elindítom ezt, és a webböngészőben találkozunk. Oké, tehát itt vagyunk a böngészőnkben, és mint láthatjátok, minden másodpercben kapunk egy új véletlenszerű tizedest. Tehát amit ez csinál, az lényegében az Ajax erejét illusztrálja. Minden másodpercben frissítjük a webalkalmazásunkat a szerver tartalmával anélkül, hogy frissítenünk kellene a weboldalt.
És ez valóban az Ajax igazi ereje. És ez semmiképpen sem korlátozódik csak egy egyszerű változóra. Ez a koncepció kiterjeszthető összetett HTML modellekre, amelyek tartalmaznak képeket vagy táblázatokat, vagy bármi ilyesmit. De ez csak egy bevezetés az Ajax megvalósításához, amely lehetővé teszi számunkra a változók frissítését a Python és a Jinja kombinációjával, a webalkalmazás frissítésével HTML-ben anélkül, hogy frissítenénk a weboldalt.