Tanulja meg, hogyan készíthet teljes SvelteKit alkalmazást ezzel az egyszerű RSS-olvasó projekttel.
Az RSS a webtartalom strukturált formátumú terjesztésének népszerű szabványa. Sokan a technológia szerelmeseitől a tanárokig használják az RSS-t, hogy naprakészek legyenek a legfrissebb hírekről és kedvenc blogjaik bejegyzéseiről.
Saját RSS-olvasó megírása egyszerű feladat, amelyet a SvelteKit, a Svelte tetejére épített meta keretrendszer még könnyebbé tesz.
A SvelteKit projekt beállítása
A projektben használt kód elérhető a GitHub adattár és az MIT licence alapján ingyenesen használható. Ha meg szeretné tekinteni a projekt élő változatát, ezt megtekintheti demó.
Mielőtt folytatná, telepítenie kell a Node.js futási környezetet a számítógépére Node Package Manager (NPM). Nyissa meg a terminált, és futtassa a következő parancsot:
npm create svelte
# or
yarn create svelte
Ezzel el kell indulnia a create-svelte-nek Parancssori interfész (CLI) powered by Vite. Nevezze el a projektet, és állítsa az alkalmazássablont „Skeleton project” értékre. Tiltsa le a típusellenőrzést a TypeScript segítségével, és válassza ki a kívánt további beállításokat. Ezt követően váltson át a projektkönyvtárba, és futtassa:
npm install
# or
yarn
Az alapértelmezett függőségek telepítése után két csomagot kell telepítenie: rss-elemző és pillanat. Az első csomag megkönnyíti az XML adatok elemzését, míg a második a dátumok helyes formázását segíti elő. A terminálon futtassa a következőket:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Most elindíthatja a fejlesztőkiszolgálót a következő parancs futtatásával.
npm run dev
# or
yarn dev
Törölje a tartalmát App.css fájlt, és módosítsa a projekt szerkezetét úgy, hogy az valahogy így nézzen ki. Hozzon létre olyan könyvtárakat, amelyek még nem léteznek, és hozzon létre üres fájlokat az alábbiak szerint:
Csak módosítania kell a src könyvtárat, amelynek tartalmaznia kell a lib címtár és a lib/addToLocalStorage.js fájlt. Tartalmaznia kell továbbá a útvonalak nevű gyermekkönyvtárat tartalmazó könyvtár takarmány és négy fájl: +layout.js, +elrendezés.karcsú, +oldal.karcsú, és +server.js. Belül takarmány, hozzon létre egy könyvtárat [cím] benne két fájllal: +page.server.js és +oldal.karcsú.
Küzdhet a létrehozásával [cím] könyvtárat a parancssorban, mivel sok shell szögletes zárójelet használ a mintaillesztéshez. Ha hibaüzenetet kap, próbálja idézni a könyvtár nevét, például:
mkdir '[title]'API-útvonal létrehozása az érvényes RSS-hírcsatornák ellenőrzéséhez
Nyissa meg a routes/+server.js fájlt, és importálja a json hasznos. Import is Elemző tól rss-elemző csomag.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Most exportáljon egy aszinkron függvényt, KAP, és bemenni url paraméterként. Ebben a függvényben hozzon létre két állandót: rssLink és elemző.
Az első állandónak tartalmaznia kell a keresési paramétert a url átment, míg a második, elemző, újat kell tárolnia Elemző objektum példány. Ezután hívja a parseURL módszer bekapcsolva elemző és bemenni rssLink paraméterként. Végül sorba rendezze a választ a json függvényt, és adja vissza.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
A kezdőlap tervezése
A SvelteKit a fájlrendszer alapú útválasztó rendszer. Alapértelmezés szerint a routes/+page.svelte fájl a webhely kezdőlapjaként szolgál.
Nyissa meg a +page.svelte fájlt, és a forgatókönyv címke, importálja a addToLocalStorage funkció a lib Könyvtár. Ezt még nem hozta létre, de később megteszi. A függvény importálása után hozzon létre két változót, url és kész, beállítása a kész változó -ra hamis.
