15 KiB

Raw Permalink Blame History

Sukurkite banko programėlę 1 dalis: HTML šablonai ir maršrutai žiniatinklio programėlėje

Prieš paskaitą: testas

Įvadas

Nuo tada, kai naršyklėse atsirado JavaScript, svetainės tapo interaktyvesnės ir sudėtingesnės nei bet kada anksčiau. Žiniatinklio technologijos dabar dažnai naudojamos kuriant visiškai funkcionalias programėles, kurios veikia tiesiogiai naršyklėje ir vadinamos žiniatinklio programėlėmis. Kadangi žiniatinklio programėlės yra labai interaktyvios, vartotojai nenori laukti, kol puslapis bus visiškai perkrautas kiekvieną kartą atliekant veiksmą. Todėl JavaScript naudojamas HTML atnaujinimui tiesiogiai per DOM, kad būtų užtikrinta sklandesnė vartotojo patirtis.

Šioje pamokoje mes sukursime pagrindus banko žiniatinklio programėlei, naudodami HTML šablonus, kad sukurtume kelis ekranus, kurie gali būti rodomi ir atnaujinami be viso HTML puslapio perkrovimo.

Būtinos žinios

Jums reikės vietinio žiniatinklio serverio, kad galėtumėte išbandyti žiniatinklio programėlę, kurią kursime šioje pamokoje. Jei jo neturite, galite įdiegti Node.js ir naudoti komandą npx lite-server iš savo projekto aplanko. Tai sukurs vietinį žiniatinklio serverį ir atidarys jūsų programėlę naršyklėje.

Pasiruošimas

Savo kompiuteryje sukurkite aplanką pavadinimu bank su failu index.html viduje. Pradėsime nuo šio HTML šablono:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank App</title>
  </head>
  <body>
    <!-- This is where you'll work -->
  </body>
</html>

HTML šablonai

Jei norite sukurti kelis ekranus žiniatinklio puslapiui, vienas sprendimas būtų sukurti po vieną HTML failą kiekvienam ekranui, kurį norite rodyti. Tačiau šis sprendimas turi tam tikrų nepatogumų:

Perjungiant ekraną reikia iš naujo įkelti visą HTML, o tai gali būti lėta.
Sunku dalintis duomenimis tarp skirtingų ekranų.

Kitas požiūris yra turėti tik vieną HTML failą ir apibrėžti kelis HTML šablonus, naudojant <template> elementą. Šablonas yra pakartotinai naudojamas HTML blokas, kuris naršyklėje nerodomas ir turi būti sukurtas vykdymo metu naudojant JavaScript.

Užduotis

Sukursime banko programėlę su dviem ekranais: prisijungimo puslapiu ir prietaisų skydeliu. Pirmiausia pridėkime HTML kūne vietos rezervavimo elementą, kurį naudosime skirtingiems programėlės ekranams rodyti:

<div id="app">Loading...</div>

Mes suteikiame jam id, kad vėliau būtų lengviau jį rasti naudojant JavaScript.

Patarimas: kadangi šio elemento turinys bus pakeistas, galime įdėti įkėlimo pranešimą arba indikatorių, kuris bus rodomas, kol programėlė kraunasi.

Toliau pridėkime HTML šabloną prisijungimo puslapiui. Šiuo metu įdėsime tik pavadinimą ir skyrių su nuoroda, kurią naudosime navigacijai.

<template id="login">
  <h1>Bank App</h1>
  <section>
    <a href="/dashboard">Login</a>
  </section>
</template>

Tada pridėsime kitą HTML šabloną prietaisų skydelio puslapiui. Šiame puslapyje bus skirtingi skyriai:

Antraštė su pavadinimu ir atsijungimo nuoroda
Dabartinis banko sąskaitos likutis
Operacijų sąrašas, rodomas lentelėje

<template id="dashboard">
  <header>
    <h1>Bank App</h1>
    <a href="/login">Logout</a>
  </header>
  <section>
    Balance: 100$
  </section>
  <section>
    <h2>Transactions</h2>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Object</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </section>
</template>

Patarimas: kuriant HTML šablonus, jei norite pamatyti, kaip jie atrodys, galite užkomentuoti <template> ir </template> eilutes, apgaubdami jas .

✅ Kodėl, jūsų manymu, mes naudojame id atributus šablonuose? Ar galėtume naudoti ką nors kitą, pavyzdžiui, klases?

Šablonų rodymas naudojant JavaScript

Jei bandysite dabartinį HTML failą naršyklėje, pamatysite, kad jis užstringa rodydamas Loading.... Taip yra todėl, kad mums reikia pridėti JavaScript kodą, kad sukurtume ir rodytume HTML šablonus.

Šablono sukūrimas paprastai atliekamas 3 etapais:

Rasti šablono elementą DOM'e, pavyzdžiui, naudojant document.getElementById.
Nukopijuoti šablono elementą, naudojant cloneNode.
Pridėti jį prie DOM po matomu elementu, pavyzdžiui, naudojant appendChild.

✅ Kodėl mums reikia nukopijuoti šabloną prieš jį pridedant prie DOM? Kas, jūsų manymu, nutiktų, jei praleistume šį žingsnį?

Užduotis

Sukurkite naują failą pavadinimu app.js savo projekto aplanke ir importuokite šį failą į HTML <head> skyrių:

<script src="app.js" defer></script>

Dabar app.js faile sukursime naują funkciją updateRoute:

function updateRoute(templateId) {
  const template = document.getElementById(templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Čia mes atliekame būtent 3 aukščiau aprašytus žingsnius. Mes sukuriame šabloną su templateId ir įdedame jo nukopijuotą turinį į mūsų programėlės vietos rezervavimo elementą. Atkreipkite dėmesį, kad mums reikia naudoti cloneNode(true), kad nukopijuotume visą šablono medį.

Dabar iškvieskite šią funkciją su vienu iš šablonų ir pažiūrėkite rezultatą.

updateRoute('login');

✅ Koks šio kodo app.innerHTML = ''; tikslas? Kas nutinka be jo?

Maršrutų kūrimas

Kalbant apie žiniatinklio programėlę, maršrutizavimas (Routing) reiškia ketinimą susieti URL su konkrečiais ekranais, kurie turėtų būti rodomi. Svetainėje su keliais HTML failais tai daroma automatiškai, nes failų keliai atsispindi URL. Pavyzdžiui, su šiais failais jūsų projekto aplanke:

mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html

Jei sukursite žiniatinklio serverį su mywebsite kaip šaknimi, URL susiejimas bus toks:

https://site.com            --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/     --> mywebsite/admin/index.html

Tačiau mūsų žiniatinklio programėlei mes naudojame vieną HTML failą, kuriame yra visi ekranai, todėl šis numatytasis elgesys mums nepadės. Turime rankiniu būdu sukurti šį susiejimą ir atnaujinti rodomą šabloną naudodami JavaScript.

Užduotis

Naudosime paprastą objektą, kad įgyvendintume žemėlapį tarp URL kelių ir mūsų šablonų. Pridėkite šį objektą savo app.js failo viršuje.

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard' },
};

Dabar šiek tiek pakeiskime updateRoute funkciją. Vietoj to, kad tiesiogiai perduotume templateId kaip argumentą, norime jį gauti pirmiausia pažvelgę į dabartinį URL, o tada naudoti mūsų žemėlapį, kad gautume atitinkamą šablono ID reikšmę. Galime naudoti window.location.pathname, kad gautume tik kelio dalį iš URL.

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  const template = document.getElementById(route.templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Čia mes susiejome deklaruotus maršrutus su atitinkamu šablonu. Galite išbandyti, ar tai veikia teisingai, rankiniu būdu pakeisdami URL naršyklėje.

✅ Kas nutinka, jei įvedate nežinomą kelią URL? Kaip galėtume tai išspręsti?

Navigacijos pridėjimas

Kitas mūsų programėlės žingsnis yra pridėti galimybę naršyti tarp puslapių, nereikia rankiniu būdu keisti URL. Tai apima du dalykus:

Dabartinio URL atnaujinimas
Rodymo šablono atnaujinimas pagal naują URL

Antrąją dalį jau pasirūpinome su updateRoute funkcija, todėl turime išsiaiškinti, kaip atnaujinti dabartinį URL.

Turėsime naudoti JavaScript ir konkrečiai history.pushState, kuris leidžia atnaujinti URL ir sukurti naują įrašą naršymo istorijoje, neperkraunant HTML.

Pastaba: Nors HTML inkarų elementas <a href> gali būti naudojamas savarankiškai kuriant hipernuorodas į skirtingus URL, jis pagal numatytuosius nustatymus privers naršyklę perkrauti HTML. Šį elgesį būtina užkirsti, kai maršrutizavimas tvarkomas naudojant pasirinktą JavaScript, naudojant preventDefault() funkciją ant paspaudimo įvykio.

Užduotis

Sukurkime naują funkciją, kurią galime naudoti navigacijai programėlėje:

function navigate(path) {
  window.history.pushState({}, path, path);
  updateRoute();
}

Šis metodas pirmiausia atnaujina dabartinį URL pagal pateiktą kelią, tada atnaujina šabloną. Savybė window.location.origin grąžina URL šaknį, leidžiant mums rekonstruoti pilną URL iš pateikto kelio.

Dabar, kai turime šią funkciją, galime pasirūpinti problema, kuri kyla, jei kelias neatitinka jokio apibrėžto maršruto. Pakeisime updateRoute funkciją, pridėdami atsarginį variantą vienam iš esamų maršrutų, jei nerandame atitikmens.

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  if (!route) {
    return navigate('/login');
  }

  ...

Jei maršrutas nerandamas, dabar nukreipsime į prisijungimo puslapį.

Dabar sukurkime funkciją, kad gautume URL, kai paspaudžiama nuoroda, ir užkirstume kelią naršyklės numatytam nuorodos elgesiui:

function onLinkClick(event) {
  event.preventDefault();
  navigate(event.target.href);
}

Užbaikime navigacijos sistemą, pridėdami ryšius su mūsų Prisijungimo ir Atsijungimo nuorodomis HTML.

<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick(event)">Logout</a>

Aukščiau esantis event objektas užfiksuoja click įvykį ir perduoda jį mūsų onLinkClick funkcijai.

Naudodami onclick atributą, susiekite click įvykį su JavaScript kodu, šiuo atveju su navigate() funkcijos iškvietimu.

Pabandykite paspausti šias nuorodas, dabar turėtumėte galėti naršyti tarp skirtingų programėlės ekranų.

✅ history.pushState metodas yra HTML5 standarto dalis ir įgyvendintas visose moderniose naršyklėse. Jei kuriate žiniatinklio programėlę senesnėms naršyklėms, yra triukas, kurį galite naudoti vietoj šio API: naudodami hash (#) prieš kelią galite įgyvendinti maršrutizavimą, kuris veikia su įprasta inkarų navigacija ir neperkrauna puslapio, nes jo paskirtis buvo kurti vidines nuorodas puslapyje.

Naršyklės mygtukų „Atgal“ ir „Pirmyn“ tvarkymas

Naudojant history.pushState sukuriami nauji įrašai naršyklės naršymo istorijoje. Galite tai patikrinti, laikydami naršyklės atgal mygtuką, jis turėtų rodyti kažką panašaus į tai:

Jei bandysite kelis kartus paspausti atgal mygtuką, pamatysite, kad dabartinis URL keičiasi ir istorija atnaujinama, tačiau tas pats šablonas vis tiek rodomas.

Taip yra todėl, kad programėlė nežino, kad reikia iškviesti updateRoute() kiekvieną kartą, kai istorija keičiasi. Jei pažvelgsite į history.pushState dokumentaciją, pamatysite, kad jei būsena keičiasi - tai reiškia, kad perėjome į kitą URL - suveikia popstate įvykis. Naudosime tai, kad išspręstume šią problemą.

Užduotis

Kad įsitikintume, jog rodomas šablonas atnaujinamas, kai naršyklės istorija keičiasi, pridėsime naują funkciją, kuri iškviečia updateRoute(). Tai padarysime app.js failo apačioje:

window.onpopstate = () => updateRoute();
updateRoute();

Pastaba: čia naudojome rodyklės funkciją, kad deklaruotume popstate įvykio tvarkyklę trumpumo dėlei, tačiau įprasta funkcija veiktų taip pat.

Štai vaizdo įrašas apie rodyklės funkcijas:

🎥 Spustelėkite aukščiau esantį vaizdą, kad pamatytumėte vaizdo įrašą apie rodyklės funkcijas.

Dabar pabandykite naudoti naršyklės mygtukus „Atgal“ ir „Pirmyn“ ir patikrinkite, ar rodomas maršrutas šį kartą teisingai atnaujinamas.

🚀 Iššūkis

Pridėkite naują šabloną ir maršrutą trečiam puslapiui, kuris rodo šios programėlės autorius.

Po paskaitos: testas

Apžvalga ir savarankiškas mokymasis

Maršrutizavimas yra vienas iš stebėtinai sudėtingų žiniatinklio kūrimo dalių, ypač kai žiniatinklis pereina nuo puslapio atnaujinimo elgesio prie vieno puslapio programėlių atnaujinimų. Perskaitykite šiek tiek apie kaip „Azure Static Web App“ paslauga tvarko maršrutizavimą. Ar galite paaiškinti, kodėl kai kurie sprendimai, aprašyti tame dokumente, yra būtini?

Užduotis

Patobulinkite maršrutizavimą

Atsakomybės apribojimas:
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.

15 KiB Raw Permalink Blame History

Sukurkite banko programėlę 1 dalis: HTML šablonai ir maršrutai žiniatinklio programėlėje

Prieš paskaitą: testas

Įvadas

Būtinos žinios

Pasiruošimas

HTML šablonai

Užduotis

Šablonų rodymas naudojant JavaScript

Užduotis

Maršrutų kūrimas

Užduotis

Navigacijos pridėjimas

Užduotis

Naršyklės mygtukų „Atgal“ ir „Pirmyn“ tvarkymas

Užduotis

🚀 Iššūkis

Po paskaitos: testas

Apžvalga ir savarankiškas mokymasis

Užduotis

15 KiB

Raw Permalink Blame History