Leer hoe u een complete SvelteKit-app kunt bouwen met dit eenvoudige RSS-lezerproject.
RSS is een populaire standaard voor het distribueren van webinhoud in een gestructureerd formaat. Veel mensen, van techliefhebbers tot docenten, gebruiken RSS om op de hoogte te blijven van het laatste nieuws en berichten op hun favoriete blogs.
Het schrijven van uw eigen RSS-lezer is een eenvoudige taak, nog eenvoudiger gemaakt met SvelteKit, een metaframework dat bovenop Svelte is gebouwd.
Het SvelteKit-project opzetten
De code die in dit project wordt gebruikt, is beschikbaar in een GitHub-opslagplaats en kunt u gratis gebruiken onder de MIT-licentie. Als je een live versie van dit project wilt bekijken, kun je dit bekijken demonstratie.
Voordat u doorgaat, moet u de Node.js-runtime ook op uw computer hebben geïnstalleerd Knooppuntpakketbeheer (NPM). Open uw terminal en voer de volgende opdracht uit:
npm create svelte
# or
yarn create svelte
Dit zou de create-svelte moeten opstarten Commandoregelinterface (CLI)
aangedreven door Vite. Geef uw project een naam en stel de app-sjabloon in op 'Skeletproject'. Schakel typecontrole uit met TypeScript en selecteer eventuele aanvullende opties. Schakel daarna over naar de projectmap en voer het volgende uit:npm install
# or
yarn
Na het installeren van de standaardafhankelijkheden moet u twee pakketten installeren, namelijk: rss-parser En moment. Het eerste pakket maakt het gemakkelijker om de XML-gegevens te ontleden, terwijl het tweede u helpt datums correct op te maken. Voer in uw terminal het volgende uit:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Nu kunt u de ontwikkelingsserver opstarten door de volgende opdracht uit te voeren.
npm run dev
# or
yarn dev
Wis de inhoud van het App.css bestand en wijzig de projectstructuur zodat deze er ongeveer als volgt uitziet. Maak mappen aan die nog niet bestaan en maak lege bestanden die overeenkomen met de onderstaande bestanden:
U hoeft alleen de src map, die een libr map en een lib/addToLocalStorage.js bestand. Het moet ook een trajecten map die een onderliggende map bevat met de naam voer en vier bestanden: +lay-out.js, +lay-out.slank, +pagina.svelte, En +server.js. Binnen voer, maak een map met de naam [titel] met twee bestanden erin: +pagina.server.js En +pagina.svelte.
Het kan zijn dat u moeite heeft om de [titel] map op de opdrachtregel, omdat veel shells vierkante haakjes gebruiken voor patroonafstemming. Als u een foutmelding krijgt, probeer dan de mapnaam te citeren, bijvoorbeeld:
mkdir '[title]'De API-route maken om te controleren op geldige RSS-feeds
Open de routes/+server.js bestand en importeer het json nut. Importeer ook Parser van de rss-parser pakket.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Exporteer nu een asynchrone functie, KRIJGEN, en ga naar binnen URL als parameter. Maak in deze functie twee constanten: RSSLink En parser.
De eerste constante moet de zoekparameter van de bevatten URL ging voorbij, terwijl de tweede parser, zou een nieuwe moeten opslaan Parser objectinstantie. Bel vervolgens de parseURL methode aan parser en ga naar binnen RSSLink als parameter. Ten slotte serialiseert u het antwoord met de json functioneren en terugsturen.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Het ontwerpen van de startpagina
SvelteKit maakt gebruik van een op bestandssysteem gebaseerd routeringssysteem. Standaard is de routes/+pagina.svelte bestand fungeert als de startpagina van uw website.
Open het bestand +page.svelte en, in het script tag, importeer de addToLocalStorage functie uit de libr map. Je hebt dit nog niet gemaakt, maar je zult dit later doen. Maak na het importeren van de functie twee variabelen, URL En klaar, het instellen van de klaar variabel naar vals.