Sužinokite, kaip sukurti visą „SvelteKit“ programą naudodami šį paprastą RSS skaitytuvo projektą.
RSS yra populiarus žiniatinklio turinio platinimo struktūrizuotu formatu standartas. Daugelis žmonių – nuo technologijų entuziastų iki mokytojų – naudoja RSS, kad gautų naujausias naujienas ir įrašus savo mėgstamuose tinklaraščiuose.
Rašyti savo RSS skaitytuvą yra nesudėtinga užduotis, kurią dar lengviau padaryti naudojant SvelteKit – metasistemą, sukurtą ant Svelte.
SvelteKit projekto nustatymas
Šiame projekte naudojamas kodas yra prieinamas a GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licenciją. Jei norite pažvelgti į tiesioginę šio projekto versiją, galite tai patikrinti demo.
Prieš tęsdami, turite turėti savo kompiuteryje įdiegtą Node.js vykdymo laiką Mazgo paketų tvarkyklė (NPM). Atidarykite terminalą ir paleiskite šią komandą:
npm create svelte
# or
yarn create svelte
Tai turėtų pradėti kurti-svelte Komandinės eilutės sąsaja (CLI) maitina Vite. Pavadinkite savo projektą ir nustatykite programos šabloną į „Skeleto projektas“. Išjunkite tipo tikrinimą naudodami „TypeScript“ ir pasirinkite visas norimas papildomas parinktis. Po to perjunkite į projekto katalogą ir paleiskite:
npm install
# or
yarn
Įdiegę numatytąsias priklausomybes, turite įdiegti du paketus, būtent: rss analizatorius ir momentas. Pirmasis paketas palengvins XML duomenų analizę, o antrasis padės teisingai formatuoti datas. Savo terminale paleiskite šiuos veiksmus:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Dabar galite paleisti kūrimo serverį vykdydami šią komandą.
npm run dev
# or
yarn dev
Išvalykite turinį App.css failą ir modifikuokite projekto struktūrą taip, kad ji atrodytų maždaug taip. Sukurkite katalogus, kurių dar nėra, ir sukurkite tuščius failus, kurie atitiktų toliau nurodytus pavadinimus:
Jums reikės tik pakeisti src katalogą, kuriame turėtų būti a lib katalogas ir a lib/addToLocalStorage.js failą. Jame taip pat turėtų būti a maršrutai katalogas, kuriame yra antrinis katalogas pavadinimu maitinti ir keturi failai: +layout.js, +išdėstymas.švelnus, +puslapis.svelte, ir +serveris.js. Viduje maitinti, sukurkite katalogą pavadinimu [pavadinimas] su dviem failais viduje: +puslapis.serveris.js ir +puslapis.svelte.
Jums gali būti sunku sukurti [pavadinimas] katalogą komandinėje eilutėje, nes daugelyje apvalkalų šablonų derinimui naudojami laužtiniai skliaustai. Jei gaunate klaidą, pabandykite cituoti katalogo pavadinimą, pvz.:
mkdir '[title]'API maršruto kūrimas, kad patikrintumėte, ar nėra galiojančių RSS informacijos santraukų
Atidaryk routes/+server.js failą ir importuoti json naudingumas. Taip pat importuoti Analizatorius nuo rss analizatorius paketą.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Dabar eksportuokite asinchroninę funkciją, GAUTI, ir įeiti url kaip parametras. Šioje funkcijoje sukurkite dvi konstantas: rssLink ir analizatorius.
Pirmoji konstanta turėtų turėti paieškos parametrą iš url praėjo, o antrasis, analizatorius, turėtų saugoti naują Analizatorius objekto egzempliorius. Toliau skambinkite parseURL metodas įjungtas analizatorius ir įeiti rssLink kaip parametras. Galiausiai nuosekliai surašykite atsakymą su json funkciją ir grąžinti ją.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Pagrindinio puslapio kūrimas
SvelteKit naudoja a failų sistema pagrįsta maršruto parinkimo sistema. Pagal numatytuosius nustatymus, routes/+page.svelte failas yra jūsų svetainės pagrindinis puslapis.
Atidarykite failą +page.svelte ir scenarijus žymą, importuokite AddToLocalStorage funkcija iš lib katalogas. To dar nesukūrėte, bet tai padarysite vėliau. Importavę funkciją sukurkite du kintamuosius, url ir pasiruošę, nustatydami pasiruošę kintamasis į klaidinga.
