Naučte sa, ako vytvoriť kompletnú aplikáciu SvelteKit pomocou tohto jednoduchého projektu čítačky RSS.
RSS je populárny štandard pre distribúciu webového obsahu v štruktúrovanom formáte. Mnoho ľudí, od technologických nadšencov až po učiteľov, používa RSS, aby boli informovaní o najnovších správach a príspevkoch na svojich obľúbených blogoch.
Napísať si vlastnú čítačku RSS je jednoduchá úloha, ktorá je ešte jednoduchšia so SvelteKit, metarámcom postaveným na Svelte.
Nastavenie projektu SvelteKit
Kód použitý v tomto projekte je dostupný v a úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT. Ak sa chcete pozrieť na živú verziu tohto projektu, môžete si pozrieť toto demo.
Predtým, ako budete pokračovať, musíte mať na svojom počítači nainštalovaný aj runtime Node.js Správca balíkov uzlov (NPM). Otvorte terminál a spustite nasledujúci príkaz:
npm create svelte
# or
yarn create svelte
Toto by malo naštartovať create-svelte Rozhranie príkazového riadka (CLI) poháňa Vite. Pomenujte svoj projekt a nastavte šablónu aplikácie na „Skeleton project“. Zakážte kontrolu typu pomocou TypeScript a vyberte ďalšie požadované možnosti. Potom prejdite do adresára projektu a spustite:
npm install
# or
yarn
Po nainštalovaní predvolených závislostí musíte nainštalovať dva balíčky, a to: rss-parser a moment. Prvý balík uľahčí analýzu údajov XML, zatiaľ čo druhý vám pomôže správne formátovať dátumy. Vo svojom termináli spustite nasledovné:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Teraz môžete spustiť vývojový server spustením nasledujúceho príkazu.
npm run dev
# or
yarn dev
Vyčistite obsah App.css súbor a upravte štruktúru projektu tak, aby vyzerala asi takto. Vytvorte akékoľvek adresáre, ktoré ešte neexistujú, a vytvorte prázdne súbory, ktoré budú zodpovedať tým, ktoré sú uvedené nižšie:
Budete musieť zmeniť iba src adresár, ktorý by mal obsahovať a lib adresár a a lib/addToLocalStorage.js súbor. Mal by tiež obsahovať a trasy adresár, ktorý obsahuje podradený adresár s názvom krmivo a štyri súbory: +layout.js, +rozloženie.štíhle, +strana.svelte, a +server.js. Vnútri krmivo, vytvorte adresár s názvom [názov] s dvoma súbormi vo vnútri: +page.server.js a +strana.svelte.
Môžete mať problémy s vytvorením [názov] adresár na príkazovom riadku, pretože mnoho shellov používa hranaté zátvorky na porovnávanie vzorov. Ak sa zobrazí chyba, skúste uviesť názov adresára, napr.:
mkdir '[title]'Vytvorenie trasy API na kontrolu platných informačných kanálov RSS
Otvor routes/+server.js súbor a importujte súbor json užitočnosť. Tiež import Analyzátor z rss-parser balík.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Teraz exportujte asynchrónnu funkciu, GETa prejsť dovnútra url ako parameter. V tejto funkcii vytvorte dve konštanty: rssLink a syntaktický analyzátor.
Prvá konštanta by mala obsahovať parameter vyhľadávania z url prešiel, zatiaľ čo druhý, syntaktický analyzátor, by mal uložiť nový Analyzátor inštancia objektu. Ďalej zavolajte na parseURL metóda zapnutá syntaktický analyzátor a prejsť dovnútra rssLink ako parameter. Nakoniec serializujte odpoveď pomocou json funkciu a vrátiť ju.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Navrhovanie domovskej stránky
SvelteKit používa a smerovací systém založený na súborovom systéme. V predvolenom nastavení je trasy/+strana.svelte slúži ako domovská stránka pre váš web.
Otvorte súbor +page.svelte a v súbore skript tag, importujte addToLocalStorage funkcia z lib adresár. Toto ste ešte nevytvorili, ale urobíte tak neskôr. Po importovaní funkcie vytvorte dve premenné, url a pripravený, nastavenie pripravený premenlivý na falošný.