Ievads maršrutēšanā Sveltē

Svelte ir strauji augošs tīmekļa ietvars, ko varat izmantot vietņu veidošanai. Tas tiek piedāvāts kā viegla, viegli lietojama alternatīva populārām sistēmām, piemēram, React un Vue.

Katram populāram JavaScript ietvaram ir pavadošā bibliotēka, ko varat izmantot maršrutēšanai. Uzziniet, kā Svelte ļauj pārvaldīt savus URL un kodu, kas tos apstrādā.

Populāras maršrutēšanas bibliotēkas

Vispopulārākā React maršrutēšanas bibliotēka ir React Router, ko izveidojusi Remix komanda. VueJS ir Vue Router, kas sniedz izstrādātājam precīzu kontroli pār jebkuru navigāciju. Svelte pasaulē populārākā maršrutēšanas bibliotēka ir slaids maršrutēšana.

Otra galvenā Sveltes maršrutēšanas bibliotēka ir slaids-navigators. Tā kā tā ir dakša slaids maršrutēšana, vispirms ir noderīgi uzzināt par šo bibliotēku.

Kā darbojas slaidā maršrutēšanas bibliotēka

Maršrutu apstrādei Sveltē ir trīs svarīgas sastāvdaļas: Maršrutētājs

, Saite, un Maršruts. Lai tās izmantotu savā lietojumprogrammā, varat vienkārši importēt šīs utilītas no slaids maršrutēšana bibliotēka.

<skripts>
importēt {Route, Router, Link} no "svelte-routing";
skripts>

Maršrutētāja komponentam var būt divi papildu balsti: bāzes ceļš un url. The bāzes ceļš īpašums ir līdzīgs pamatnosaukums atbalsts programmā React Router.

Pēc noklusējuma tas ir iestatīts uz "/". basepath var noderēt, ja jūsu lietojumprogrammai ir vairāki ievades punkti. Piemēram, apsveriet šādu Svelte kodu:

<skripts>
 importēt { Route, Router, Link } no "svelte-routing";
 let basepath = "/lietotājs";
 let ceļš = atrašanās vieta.ceļa nosaukums;
skripts>
<Maršrutētājs {bāzes ceļš}>
<divuz: noklikšķiniet={() => (ceļš = atrašanās vieta.ceļa nosaukums)}>
<Saiteuz="/">Doties mājāsSaite>
<Saiteuz="/lietotājs/dāvids">Piesakieties kā DeividsSaite>
div>
<galvenais>
 Tu esi šeit: <kodu>{path}kodu>
<Maršrutsceļš="/">
<h1>Laipni lūgts mājās!h1>
Maršruts>
<Maršrutsceļš="/dāvids">
<h1>Sveiks, Deivids!h1>
Maršruts>
galvenais>
Maršrutētājs>

Ja palaižat šo kodu, pamanīsit, ka, noklikšķinot uz Doties mājās pogu, pārlūkprogramma pāriet uz bāzes ceļu "/user". Maršruts definē komponentu, kas jāatveido, ja ceļš atbilst norādītajai vērtībai Maršruts prop.

Varat definēt, kādus elementus atveidot komponentā Route vai kā atsevišķus .slaids failu, ja vien pareizi importējat šo failu. Piemēram:

<Maršrutsceļš="/par"komponents={About}/>

Iepriekš minētais koda bloks liek pārlūkprogrammai renderēt App komponents, ja ceļa nosaukums ir "/about".

Lietojot slaids maršrutēšana, definējiet iekšējās saites ar Saite komponents tradicionālā HTML vietā a elementi.

Tas ir līdzīgi tam, kā React Router apstrādā iekšējās saites; katram saites komponentam jābūt a uz rekvizīts, kas norāda pārlūkprogrammai, uz kuru ceļu doties.

Kad pārlūkprogramma atveido Svelte komponentu, Svelte automātiski pārvērš visus saites komponentus līdzvērtīgos a elementi, aizstājot uz balsts ar an href atribūts. Tas nozīmē, ka, rakstot:

<Saiteuz="/daži/ceļš">Šis ir saites komponents smalkajā maršrutēšanāSaite>

Svelte to piedāvā pārlūkprogrammai kā:

<ahref="/daži/ceļš">Šis ir saites komponents smalkajā maršrutēšanāa>

Tradicionālā vietā jāizmanto komponents Saite a elements, strādājot ar slīpo maršrutēšanu. Tas ir tāpēc, ka a elementi pēc noklusējuma veic lapas atkārtotu ielādi.

SPA izveide ar Svelte un Svelte-Routing

Ir pienācis laiks visu apgūto likt lietā, izveidojot vienkāršu vārdnīcas lietojumprogrammu, kas ļauj lietotājam meklēt vārdus. Šis projekts izmantos bezmaksas Vārdnīcas API.

Lai sāktu darbu, pārliecinieties, vai jūsu datorā ir instalēta Yarn, un palaidiet:

dzija izveidot vite

Tādējādi tiks izveidots jauns projekts, izmantojot Vite veidošanas rīks. Nosauciet savu projektu, pēc tam izvēlieties "Svelte" kā ietvaru un "JavaScript" kā variantu. Pēc tam palaidiet šādas komandas vienu pēc otras:

cd
dzija
dzija pievienot slaidu maršrutēšanu
dzija dev

Pēc tam izdzēsiet saturu App.svelte failu un mainiet projekta struktūru, lai tā izskatītos šādi:

Iepriekš redzamajā attēlā var redzēt, ka ir mape "komponenti" ar diviem failiem: Mājas.slaids un Nozīme.slaids. Nozīme.slaids ir komponents, kas tiks renderēts, kad lietotājs meklēs vārdu.

Dodieties uz App.svelte failu un importējiet komponentus Route, Router un Link no svelte-routing bibliotēkas. Noteikti importējiet arī Mājas.slaids un App.svelte sastāvdaļas.

<skripts>
 importēt { Route, Router, Link } no "svelte-routing";
 importēt Home no "./components/Home.svelte";
 importēt Nozīme no "./components/Meaning.svelte";
skripts>

Pēc tam izveidojiet maršrutētāja komponentu, kas iesaiņo a galvenais HTML elements ar klasi "app".

<Maršrutētājs>
<galvenaisklasē="lietotne">
galvenais>
Maršrutētājs>

Iekš galvenais elementu, pievienojiet a nav elementu ar saites komponentu kā tā atvasinājumu. Šīs saites komponenta atzīmei “uz” ir jānorāda uz “/”. Šis komponents ļaus lietotājam pāriet uz sākumlapu.

<galvenaisklasē="lietotne">
<nav>
<Saiteuz="/">MājasSaite>
nav>
galvenais>

Tagad ir pienācis laiks strādāt pie maršrutiem. Kad lietotājs ielādē lietotni, Mājas komponentam vajadzētu atveidot.

Pārvietojoties uz "/find/:word", vajadzētu atveidot Nozīme komponents. Klauzula ":word" ir ceļa parametrs.

Šim projektam jums nav jāuztraucas par CSS. Vienkārši nomainiet savu saturu app.css failu ar saturu app.css fails no šajā GitHub repozitorijā.

Tagad ir pienācis laiks noteikt maršrutus. Saknes līmeņa ceļam ir jāatveido Mājas komponents, savukārt "/find/:word" vajadzētu atveidot Nozīme komponents.

<Maršrutsceļš="/"komponents={Mājas} />
<Maršrutsceļš="/atrast/:vārds"let: params>
<Nozīmevārdu={params.word} />
Maršruts>

Šis koda bloks izmanto ļaut direktīvu, lai nodotu parametru "word" uz leju Nozīme sastāvdaļa kā rekvizīts.

Tagad atveriet Mājas.slaids failu un importēt pārvietoties utilītu no "svelte-routing" bibliotēkas un definējiet mainīgo ievadītsWord.

<skripts>
 importēt { navigate } no "svelte-routing";
 ļaut ievadītWord;
skripts>

Saskaņā skripts tagu, izveidojiet galveno elementu ar klasi "homepage", pēc tam izveidojiet a div elements ar klasi "vārdnīca-teksts".

<galvenaisklasē="mājas lapa">
<divklasē="vārdnīca-teksts">Vārdnīcadiv>
galvenais>

Pēc tam izveidojiet veidlapu ar an uz: iesniegt direktīva. Šajā veidlapā jābūt diviem bērniem: an ievade elements, kura vērtība ir saistīta ar ievadītsWord mainīgais un iesniegšanas poga, kas tiek nosacīti renderēta, tiklīdz lietotājs sāk rakstīt:

<formāuz: iesniegt|novērstNoklusējums={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<ievade
 type="text"
 bind: value={enteredWord}
 placeholder="Sāciet meklēšanu..."
 autofokuss
 />
 {#ja ievadītsWord}
<poguveids="Iesniegt">Meklēt Wordpogu>
 {/ja}
formā>

Šis koda bloks izmanto pārvietoties funkcija, lai novirzītu lietotāju, kad iesniegšanas darbība ir pabeigta. Tagad atveriet Nozīme.slaids failu un skripta tagā eksportējiet vārdu atbalstīt un izveidot an kļūdas ziņojums mainīgais:

eksportēt let vārdu;
let errorMessage = "Nav savienojuma. Pārbaudiet savu internetu";

Pēc tam veiciet GET pieprasījumu vārdnīcas API, nododot vārdu kā parametrs:

asinhronsfunkcijugetWordMeaning(vārdu) {
konst atbilde = gaidīt atnest(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
konst json = gaidīt response.json();
konsole.log (json);
ja (response.ok) {
atgriezties json;
 } cits {
 errorMessage = json.message;
mestjaunsKļūda(json);
 }
 }
ļaut solījums = getWordMeaning (vārds);

Iepriekš minētajā koda blokā asinhronā funkcija atgriež JSON datus, ja atbilde ir veiksmīga. Solījuma mainīgais atspoguļo rezultātu getWordMeaning funkcija, kad tiek izsaukta.

Marķējumā definējiet div ar klasi nozīme-lapa. Pēc tam definējiet h1 elementu, kurā ir vārdu mainīgais ar mazajiem burtiem:

<divklasē="nozīmes lapa">
<h1>
 {word.toLowerCase()}
h1>
div>

Pēc tam izmantojiet Sveltes gaidīšanas blokus, lai izsauktu getWordMeaning funkcija:

{#gaida solījumu}
<lpp>Notiek ielāde...lpp>
{:tad ieraksti}
{:catch}
 {kļūdas ziņojums}
{/gaidīt}

Šis kods parāda Notiek ielāde... rakstiet kad tiek veikts GET pieprasījums uz API. Ja ir kļūda, tiks parādīts saturs kļūdas ziņojums.

Iekš {:tad ieraksti} bloku, pievienojiet šo:

{#katrs ieraksts kā ieraksts}
 {#katrs ieraksts.nozīmes kā nozīme}
<divklasē="ieeja">
<divklasē="runas daļa">
 {meaning.partOfSpeech}
div>
<ol>
 {#katra nozīme.definīcijas kā definīcija}
<li>
 {definition.definition}
<br />
<divklasē="piemērs">
 {#if definition.example}
 {definition.example}
 {/ja}
div>
li>
 {/katrs}
ol>
div>
 {/katrs}
{/katrs}

Ja solījums tiek veiksmīgi izpildīts, ieraksti mainīgais satur iegūtos datus.

Pēc tam katrai iterācijai ierakstu un nozīmē, šis kods atveido runas daļu, izmantojot nozīme.Runas daļa un definīciju sarakstu, izmantojot definīcija.definīcija. Tas arī atveidos teikuma piemēru, ja tāds ir pieejams.

Tieši tā. Jūs esat izveidojis vārdnīcu Single Page Application (SPA), izmantojot svelte-routing. Ja vēlaties, varat veikt lietas tālāk vai arī pārbaudīt slaids-navigators, dakša no slaids maršrutēšana.

Lietotāju pieredzes uzlabošana ar klienta puses maršrutēšanu

Maršrutēšanas apstrādei pārlūkprogrammā, nevis serverī, ir daudz priekšrocību. Lietojumprogrammas, kurās tiek izmantota klienta puses maršrutēšana, gala lietotājam var justies vienmērīgākas, īpaši, ja tās ir savienotas pārī ar animācijām un pārejām.

Tomēr, ja vēlaties, lai jūsu vietne būtu augstāka meklētājprogrammās, jums vajadzētu apsvērt iespēju apstrādāt maršrutus serverī.