Lær, hvordan du bygger en komplet SvelteKit-app med dette enkle RSS-læserprojekt.
RSS er en populær standard for distribution af webindhold i et struktureret format. Mange mennesker, lige fra teknologientusiaster til lærere, bruger RSS til at holde sig ajour med de seneste nyheder og indlæg på deres yndlingsblogs.
At skrive din egen RSS-læser er en ligetil opgave, der er gjort endnu nemmere med SvelteKit, en metaramme bygget oven på Svelte.
Opsætning af SvelteKit-projektet
Koden brugt i dette projekt er tilgængelig i en GitHub-depot og er gratis for dig at bruge under MIT-licensen. Hvis du vil have et kig på en live version af dette projekt, kan du tjekke dette ud demo.
Før du fortsætter, skal du have Node.js runtime installeret på din maskine samt Node Package Manager (NPM). Åbn din terminal og kør følgende kommando:
npm create svelte
# or
yarn create svelte
Dette bør starte create-svelte Kommandolinjegrænseflade (CLI) drevet af Vite. Navngiv dit projekt og indstil app-skabelonen til "Skeleton project". Deaktiver typekontrol med TypeScript, og vælg eventuelle yderligere indstillinger, du ønsker. Skift derefter til projektbiblioteket og kør:
npm install
# or
yarn
Efter installation af standardafhængighederne skal du installere to pakker, nemlig: rss-parser og øjeblik. Den første pakke vil gøre det lettere at parse XML-dataene, mens den anden vil hjælpe dig med at formatere datoer korrekt. Kør følgende i din terminal:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Nu kan du starte udviklingsserveren ved at køre følgende kommando.
npm run dev
# or
yarn dev
Ryd indholdet af App.css fil og modificer projektstrukturen, så den ser ud som følgende. Opret eventuelle mapper, der ikke allerede eksisterer, og opret tomme filer, der matcher dem, der er nævnt nedenfor:
Du skal kun ændre src mappe, som skal indeholde en lib bibliotek og en lib/addToLocalStorage.js fil. Den skal også indeholde en ruter mappe, der indeholder en underordnet mappe med navnet foder og fire filer: +layout.js, +layout.svelte, +side.svelte, og +server.js. Inde foder, opret en mappe med navnet [titel] med to filer indeni: +side.server.js og +side.svelte.
Du kan kæmpe for at skabe [titel] mappe på kommandolinjen, da mange skaller bruger firkantede parenteser til mønstermatchning. Hvis du får en fejl, så prøv at citere mappenavnet, f.eks.:
mkdir '[title]'Oprettelse af API-ruten for at tjekke for gyldige RSS-feeds
Åbn routes/+server.js fil og importer json nytte. Importer også Parser fra rss-parser pakke.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Eksporter nu en asynkron funktion, FÅ, og gå ind url som en parameter. I denne funktion skal du oprette to konstanter: rssLink og parser.
Den første konstant skal holde søgeparameteren fra url bestået, mens den anden, parser, skal opbevare en ny Parser objektforekomst. Ring derefter til parseURL metode på parser og gå ind rssLink som en parameter. Til sidst skal du serialisere svaret med json funktion og returner den.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Design af hjemmesiden
SvelteKit bruger en filsystembaseret routingsystem. Som standard er ruter/+side.svelte fil fungerer som startsiden for dit websted.
Åbn +page.svelte-filen og i manuskript tag, importer addToLocalStorage funktion fra lib vejviser. Du har ikke oprettet dette endnu, men du vil gøre det senere. Efter import af funktionen skal du oprette to variable, url og parat, indstilling af parat variabel til falsk.