„Svelte“ maršruto parinkimo įvadas

Svelte yra sparčiai auganti žiniatinklio sistema, kurią galite naudoti kuriant svetaines. Jis pristatomas kaip lengva, lengvai naudojama alternatyva populiarioms sistemoms, tokioms kaip „React“ ir „Vue“.

Kiekviena populiari „JavaScript“ sistema turi papildomą biblioteką, kurią galite naudoti nukreipdami. Sužinokite, kaip „Svelte“ leidžia tvarkyti URL adresus ir juos tvarkantį kodą.

Populiarios maršrutų bibliotekos

Populiariausia „React“ maršruto parinkimo biblioteka yra „React Router“., sukurta Remix komandos. „VueJS“ yra „Vue Router“, kuris leidžia kūrėjui tiksliai valdyti bet kokią navigaciją. Svelte pasaulyje populiariausia maršruto parinkimo biblioteka yra plonas maršrutas.

Kita pagrindinė „Svelte“ maršruto parinkimo biblioteka yra plonas-navigatorius. Kadangi tai yra šakutė plonas maršrutas, naudinga pirmiausia sužinoti apie tą biblioteką.

Kaip veikia dailus maršruto parinkimo biblioteka

Yra trys svarbūs maršrutų tvarkymo komponentai Svelte: Maršrutizatorius, Nuoroda, ir Maršrutas. Norėdami jas naudoti savo programoje, galite tiesiog importuoti šias programas iš plonas maršrutas biblioteka.

<scenarijus>
importuoti {Route, Router, Link} iš "svelte-routing";
scenarijus>

Maršrutizatoriaus komponentas gali turėti du pasirenkamus rekvizitus: bazinis kelias ir url. The bazinis kelias turtas yra panašus į bazinis vardas rekvizitas React Router.

Pagal numatytuosius nustatymus jis nustatytas į „/“. basepath gali būti naudinga, jei jūsų programa turi kelis įvesties taškus. Pavyzdžiui, apsvarstykite šį Svelte kodą:

<scenarijus>
 importuoti { Route, Router, Link } iš "svelte-routing";
 tegul basepath = "/vartotojas";
 tegul kelias = vieta.kelio pavadinimas;
scenarijus>
<Maršrutizatorius {bazinis kelias}>
<divpaspaudus={() => (kelias = vieta.kelio pavadinimas)}>
<Nuorodaį="/">Eiti namoNuoroda>
<Nuorodaį="/vartotojas/deividas">Prisijunkite kaip DovydasNuoroda>
div>
<pagrindinis>
 Tu esi čia: <kodas>{path}kodas>
<Maršrutaskelias="/">
<h1>Sveikas sugrįžęs namo!h1>
Maršrutas>
<Maršrutaskelias="/deividas">
<h1>Sveiki Deividai!h1>
Maršrutas>
pagrindinis>
Maršrutizatorius>

Jei paleisite šį kodą, pastebėsite, kad spustelėsite Eiti namo mygtuką, naršyklė pereina į bazinį kelią „/user“. Maršrutas apibrėžia komponentą, kuris turėtų būti pateikiamas, jei kelias atitinka nurodytos reikšmės Maršrutas prop.

Galite apibrėžti, kokius elementus pateikti Maršruto komponente arba kaip atskirus .švelnus failą tol, kol jį tinkamai importuosite. Pavyzdžiui:

<Maršrutaskelias="/apie"komponentas={Apie}/>

Aukščiau pateiktas kodo blokas nurodo naršyklei pateikti Programėlė komponentas, kai kelio pavadinimas yra "/about".

Naudojant plonas maršrutas, apibrėžkite vidinius ryšius su Nuoroda komponentas vietoj tradicinio HTML a elementai.

Tai panašu į tai, kaip React Router tvarko vidines nuorodas; kiekvienas nuorodos komponentas turi turėti a į rekvizitas, nurodantis naršyklei, kokiu keliu eiti.

Kai naršyklė pateikia „Svelte“ komponentą, „Svelte“ automatiškai konvertuoja visus nuorodos komponentus į lygiaverčius a elementai, pakeičiantys į rekvizitas su an href atributas. Tai reiškia, kad kai rašote:

<Nuorodaį="/kai/kelias">Tai yra nuorodos komponentas svelte-routingNuoroda>

Svelte pateikia jį naršyklei kaip:

<ahref="/kai/kelias">Tai yra nuorodos komponentas svelte-routinga>

Vietoj tradicinio turėtumėte naudoti nuorodos komponentą a elementas dirbant su pasvirusiu maršrutizavimu. Tai yra, nes a elementai pagal numatytuosius nustatymus atlieka puslapio įkėlimą iš naujo.

SPA su Svelte ir Svelte-Routing kūrimas

Atėjo laikas pritaikyti viską, ko išmokote, sukuriant paprastą žodyno programą, kuri leidžia vartotojui ieškoti žodžių. Šiam projektui bus naudojama nemokama Žodyno API.

Norėdami pradėti, įsitikinkite, kad įrenginyje įdiegėte „Yarn“ ir paleiskite:

verpalai sukurti vite

Taip bus sukurtas naujas projektas naudojant „Vite“ kūrimo įrankis. Pavadinkite savo projektą, tada pasirinkite „Svelte“ kaip pagrindą ir „JavaScript“ kaip variantą. Po to paleiskite šias komandas vieną po kitos:

cd
verpalai
verpalai pridėti ploną maršrutą
verpalai dev

Tada ištrinkite turinį App.svelte failą ir pakeiskite projekto struktūrą, kad atrodytų taip:

Iš aukščiau esančios iliustracijos matote, kad yra aplankas „komponentai“ su dviem failais: Pradžia.svelte ir Reikšmė.švelnus. Reikšmė.švelnus yra komponentas, kuris bus pateiktas, kai vartotojas ieškos žodžio.

Eikite į App.svelte failą ir importuokite maršruto, maršrutizatoriaus ir nuorodos komponentus iš svelte-routing bibliotekos. Taip pat būtinai importuokite Pradžia.svelte ir App.svelte komponentai.

<scenarijus>
 importuoti { Route, Router, Link } iš "svelte-routing";
 importuoti Home iš "./components/Home.svelte";
 importuoti reikšmę iš "./components/Meaning.svelte";
scenarijus>

Tada sukurkite maršrutizatoriaus komponentą, kuris apvynioja a pagrindinis HTML elementas su klase „app“.

<Maršrutizatorius>
<pagrindinisklasė="programėlė">
pagrindinis>
Maršrutizatorius>

Viduje pagrindinis elementą, pridėkite a nav elementas, kurio antrinis elementas yra nuorodos komponentas. Šio nuorodos komponento „to“ atrama turėtų būti nukreipta į „/“. Šis komponentas leis vartotojui pereiti į pagrindinį puslapį.

<pagrindinisklasė="programėlė">
<nav>
<Nuorodaį="/">NamaiNuoroda>
nav>
pagrindinis>

Dabar laikas dirbti ties maršrutais. Kai vartotojas įkelia programą, Namai komponentas turėtų atvaizduoti.

Naršydami į „/find/:word“ turėtų pasirodyti Reikšmė komponentas. „:word“ sąlyga yra kelio parametras.

Šiam projektui nereikia jaudintis dėl CSS. Tiesiog pakeiskite savo turinį app.css failą su turiniu app.css failas iš šioje „GitHub“ saugykloje.

Dabar laikas apibrėžti maršrutus. Šakninio lygio kelias turėtų pateikti Namai komponentas, o „/find/:word“ turėtų pateikti Reikšmė komponentas.

<Maršrutaskelias="/"komponentas={Namai} />
<Maršrutaskelias="/rasti/:žodis"tegul: params>
<Reikšmėžodį={params.word} />
Maršrutas>

Šis kodo blokas naudoja leisti direktyvą perduoti parametrą "word" į Reikšmė komponentas kaip rekvizitas.

Dabar atidarykite Pradžia.svelte failą ir importuoti Rodyti kelią įrankį iš „svelte-routing“ bibliotekos ir apibrėžkite kintamąjį įvedėWord.

<scenarijus>
 importuoti { navigate } iš "svelte-routing";
 tegul enterWord;
scenarijus>

Pagal scenarijus žymą, sukurkite pagrindinį elementą su klase „pagrindinis puslapis“, tada sukurkite a div elementas su klase „žodynas-tekstas“.

<pagrindinisklasė="pagrindinis puslapis">
<divklasė="žodynas-tekstas">Žodynasdiv>
pagrindinis>

Tada sukurkite formą su an ant: pateikti direktyva. Šioje formoje turi būti du vaikai: an įvestis elementas, kurio reikšmė susieta su įvedėWord kintamasis ir pateikimo mygtukas, kuris sąlygiškai pateikiamas, kai tik vartotojas pradeda rašyti:

<formaant: pateikti|užkirsti keliąNumatytasis={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<įvestis
 type="tekstas"
 bind: value={enteredWord}
 placeholder="Pradėkite paiešką..."
 automatinis fokusavimas
 />
 {#if entryWord}
<mygtukątipo="Pateikti">Ieškoti Wordmygtuką>
 {/if}
forma>

Šis kodo blokas naudoja Rodyti kelią funkcija, nukreipianti vartotoją, kai pateikimo veiksmas bus baigtas. Dabar atidarykite Reikšmė.švelnus failą ir scenarijaus žymoje eksportuokite žodį remti ir sukurti an klaidos pranešimas kintamasis:

eksportuoti tegul žodį;
let errorMessage = "Nėra ryšio. Patikrinkite savo internetą“;

Tada pateikite GET užklausą žodyno API, perduodant žodį kaip parametras:

asyncfunkcijagetWordMeaning(žodį) {
konst atsakymas = laukti atnešti (
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
konst json = laukti atsakymas.json();
konsolė.log (json);
jeigu (response.ok) {
grąžinti json;
 } Kitas {
 errorMessage = json.message;
mestinaujasKlaida(json);
 }
 }
leisti pažadas = getWordMeaning (žodis);

Aukščiau pateiktame kodo bloke asinchroninė funkcija grąžina JSON duomenis, jei atsakymas yra sėkmingas. Pažado kintamasis parodo rezultatą getWordMeaning funkcija, kai iškviečiama.

Žymėjime apibrėžkite div su klase prasmė-puslapis. Tada apibrėžkite h1 elementą, kuriame yra žodį kintamasis mažosiomis raidėmis:

<divklasė=„prasmės puslapis“>
<h1>
 {word.toLowerCase()}
h1>
div>

Tada naudokite Svelte laukimo blokus, kad paskambintumėte getWordMeaning funkcija:

{#laukti pažado}
<p>Įkeliama...p>
{:tada įrašai}
{:pagauti}
 {errorMessage}
{/laukti}

Šis kodas rodo Įkeliama... tekstas kada pateikiamas GET prašymas prie API. Jei yra klaida, bus rodomas turinys klaidos pranešimas.

Viduje {:tada įrašai} bloką, pridėkite:

{#kiekvienas įrašas kaip įrašas}
 {#kiekvienas įrašas.reikšmės kaip reikšmė}
<divklasė="įėjimas">
<divklasė="kalbos dalis">
 {meaning.partOfSpeech}
div>
<ol>
 {#kiekviena prasmė.apibrėžimai kaip apibrėžimas}
<li>
 {definition.definition}
<br />
<divklasė="pavyzdys">
 {#if definition.example}
 {definition.example}
 {/if}
div>
li>
 {/kiekvienas}
ol>
div>
 {/kiekvienas}
{/kiekvienas}

Jei pažadas bus sėkmingai įvykdytas, įrašų kintamajame yra gauti duomenys.

Tada kiekvienai iteracijai įrašas ir prasmė, šis kodas pateikia kalbos dalį naudojant prasmė.Kalbos dalis ir naudojamų apibrėžimų sąrašas apibrėžimas.apibrėžimas. Taip pat bus pateiktas sakinio pavyzdys, jei toks yra.

Viskas. Sukūrėte žodyną „Single Page Application“ (SPA), naudodami „svelte-routing“. Jei norite, galite tęsti reikalus arba galite patikrinti plonas-navigatorius, šakutė plonas maršrutas.

Vartotojo patirties gerinimas naudojant kliento pusės maršrutą

Maršruto tvarkymas naršyklėje, o ne serveryje, turi daug privalumų. Programos, kuriose naudojamas maršruto parinkimas kliento pusėje, galutiniam vartotojui gali atrodyti sklandžiau, ypač suporavus su animacijomis ir perėjimais.

Tačiau jei norite, kad jūsų svetainė būtų aukštesnė paieškos sistemose, turėtumėte apsvarstyti galimybę tvarkyti maršrutus serveryje.