Naučite se sestaviti celotno aplikacijo SvelteKit s tem preprostim projektom bralnika RSS.
RSS je priljubljen standard za distribucijo spletnih vsebin v strukturiranem formatu. Mnogi ljudje, od tehnoloških navdušencev do učiteljev, uporabljajo RSS, da ostanejo na tekočem z najnovejšimi novicami in objavami na svojih priljubljenih spletnih dnevnikih.
Pisanje lastnega bralnika RSS je enostavna naloga, ki je še enostavnejša s SvelteKitom, meta ogrodjem, zgrajenim na Svelteju.
Nastavitev projekta SvelteKit
Koda, uporabljena v tem projektu, je na voljo v a Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT. Če si želite ogledati različico tega projekta v živo, si lahko ogledate to demo.
Preden nadaljujete, morate imeti na svojem računalniku nameščeno tudi izvajalno okolje Node.js Node Package Manager (NPM). Odprite terminal in zaženite naslednji ukaz:
npm create svelte
# or
yarn create svelte
To bi moralo zagnati create-svelte Vmesnik ukazne vrstice (CLI) poganja Vite. Poimenujte svoj projekt in nastavite predlogo aplikacije na "Skeleton project". Onemogočite preverjanje tipa s TypeScriptom in izberite dodatne možnosti, ki jih želite. Po tem preklopite v imenik projekta in zaženite:
npm install
# or
yarn
Po namestitvi privzetih odvisnosti morate namestiti dva paketa, in sicer: razčlenjevalnik rss in trenutek. Prvi paket bo olajšal razčlenjevanje podatkov XML, drugi pa vam bo pomagal pravilno oblikovati datume. V terminalu zaženite naslednje:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Zdaj lahko zaženete razvojni strežnik tako, da zaženete naslednji ukaz.
npm run dev
# or
yarn dev
Počistite vsebino App.css datoteko in spremenite strukturo projekta tako, da bo videti nekako takole. Ustvarite vse imenike, ki še ne obstajajo, in ustvarite prazne datoteke, ki bodo ustrezale spodaj navedenim:
Spremeniti boste morali le src imenik, ki naj vsebuje a lib imenik in a lib/addToLocalStorage.js mapa. Vsebovati mora tudi a poti imenik, ki vsebuje podrejeni imenik z imenom krma in štiri datoteke: +layout.js, +postavitev.svelte, +stran.svelte, in +server.js. V notranjosti krma, ustvarite imenik z imenom [naslov] z dvema datotekama v notranjosti: +stran.strežnik.js in +stran.svelte.
Morda se boste trudili ustvariti [naslov] v ukazni vrstici, saj številne lupine uporabljajo oglate oklepaje za ujemanje vzorcev. Če se prikaže napaka, poskusite navesti ime imenika, npr.:
mkdir '[title]'Ustvarjanje poti API za preverjanje veljavnih virov RSS
Odprite routes/+server.js datoteko in uvozite json utility. Tudi uvoz Razčlenjevalnik Iz razčlenjevalnik rss paket.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Zdaj izvozite asinhrono funkcijo, DOBITI, in vstopite url kot parameter. V tej funkciji ustvarite dve konstanti: rsspovezava in razčlenjevalnik.
Prva konstanta mora vsebovati iskalni parameter iz url opravil, medtem ko je drugi, razčlenjevalnik, naj shrani novo Razčlenjevalnik primerek predmeta. Nato pokličite razčlenitiURL metoda na razčlenjevalnik in vstopi rsspovezava kot parameter. Na koncu odgovor serializirajte z json funkcijo in jo vrnite.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Oblikovanje domače strani
SvelteKit uporablja a usmerjevalni sistem, ki temelji na datotečnem sistemu. Privzeto je routes/+page.svelte služi kot domača stran za vaše spletno mesto.
Odprite datoteko +page.svelte in v scenarij oznako, uvozite addToLocalStorage funkcijo od lib imenik. Tega še niste ustvarili, vendar boste to storili pozneje. Po uvozu funkcije ustvarite dve spremenljivki, url in pripravljena, nastavitev pripravljena spremenljivka do lažno.