Uzziniet, kā izveidot pilnīgu SvelteKit lietotni, izmantojot šo vienkāršo RSS lasītāja projektu.
RSS ir populārs standarts tīmekļa satura izplatīšanai strukturētā formātā. Daudzi cilvēki, sākot no tehnoloģiju entuziastiem un beidzot ar skolotājiem, izmanto RSS, lai būtu informēti par jaunākajām ziņām un ziņām savos iecienītākajos emuāros.
Sava RSS lasītāja rakstīšana ir vienkāršs uzdevums, kas ir vēl vienkāršāks, izmantojot SvelteKit — meta ietvaru, kas izveidots uz Svelte.
SvelteKit projekta iestatīšana
Šajā projektā izmantotais kods ir pieejams a GitHub repozitorijs un to varat izmantot bez maksas saskaņā ar MIT licenci. Ja vēlaties apskatīt šī projekta tiešraides versiju, varat to apskatīt demo.
Pirms turpināt, jūsu datorā ir jābūt instalētam Node.js izpildlaikam, kā arī Mezglu pakotņu pārvaldnieks (NPM). Atveriet savu termināli un palaidiet šādu komandu:
npm create svelte
# or
yarn create svelte
Tam vajadzētu sākt Create-svelte Komandrindas interfeiss (CLI) darbina Vite. Nosauciet savu projektu un iestatiet lietotnes veidni uz "Skeleta projekts". Atspējojiet tipa pārbaudi, izmantojot TypeScript, un atlasiet visas vajadzīgās papildu opcijas. Pēc tam pārslēdzieties uz projekta direktoriju un palaidiet:
npm install
# or
yarn
Pēc noklusējuma atkarību instalēšanas jums jāinstalē divas pakotnes, proti: rss-parsētājs un brīdis. Pirmā pakotne atvieglos XML datu parsēšanu, savukārt otrā pakotne palīdzēs pareizi formatēt datumus. Terminālī izpildiet tālāk norādīto.
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Tagad varat palaist izstrādes serveri, izpildot šo komandu.
npm run dev
# or
yarn dev
Notīrīt saturu App.css failu un modificējiet projekta struktūru, lai tā izskatītos šādi. Izveidojiet visus direktorijus, kas vēl neeksistē, un izveidojiet tukšus failus, lai tie atbilstu tālāk norādītajiem:
Jums būs tikai jāmaina src direktoriju, kurā jāiekļauj a lib direktoriju un a lib/addToLocalStorage.js failu. Tajā jāiekļauj arī a maršrutos direktorijā, kurā ir pakārtotais direktorijs ar nosaukumu barība un četri faili: +layout.js, +izkārtojums.slaids, +lapa.slaids, un +serveris.js. Iekšā barība, izveidojiet direktoriju ar nosaukumu [title] ar diviem failiem iekšpusē: +page.server.js un +lapa.slaids.
Jums var rasties grūtības, lai izveidotu [title] direktorijā komandrindā, jo daudzas čaulas raksta saskaņošanai izmanto kvadrātiekavas. Ja tiek parādīta kļūda, mēģiniet citēt direktorija nosaukumu, piemēram:
mkdir '[title]'API maršruta izveide, lai pārbaudītu derīgas RSS plūsmas
Atveriet routes/+server.js failu un importēt json lietderība. Arī importēt Parsētājs no rss-parsētājs iepakojums.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Tagad eksportējiet asinhrono funkciju, GŪT, un ieejiet url kā parametrs. Šajā funkcijā izveidojiet divas konstantes: rssLink un parsētājs.
Pirmajai konstantei ir jāietver meklēšanas parametrs no url pagājis, bet otrais, parsētājs, jāuzglabā jauns Parsētājs objekta gadījums. Tālāk zvaniet uz parseURL metode ieslēgta parsētājs un ieiet iekšā rssLink kā parametrs. Visbeidzot, serializējiet atbildi ar json funkciju un atgriezt to.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Mājas lapas noformēšana
SvelteKit izmanto a uz failu sistēmu balstīta maršrutēšanas sistēma. Pēc noklusējuma maršruti/+lapa.svelte fails kalpo kā jūsu vietnes sākumlapa.
Atveriet failu +page.svelte un sadaļā skripts tag, importējiet addToLocalStorage funkcija no lib direktoriju. Jūs to vēl neesat izveidojis, bet to izdarīsiet vēlāk. Pēc funkcijas importēšanas izveidojiet divus mainīgos, url un gatavs, iestatot gatavs mainīgs uz viltus.
