Научите како да направите комплетну СвелтеКит апликацију помоћу овог једноставног пројекта РСС читача.
РСС је популаран стандард за дистрибуцију веб садржаја у структурираном формату. Многи људи, од технолошких ентузијаста до наставника, користе РСС да би били у току са најновијим вестима и објавама на својим омиљеним блоговима.
Писање сопственог РСС читача је једноставан задатак, још лакши уз СвелтеКит, мета оквир изграђен на врху Свелте-а.
Постављање СвелтеКит пројекта
Код који се користи у овом пројекту доступан је у а ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом. Ако желите да погледате живу верзију овог пројекта, можете погледати ово демо.
Пре него што наставите, потребно је да на вашој машини инсталирате и Ноде.јс рунтиме Ноде Пацкаге Манагер (НПМ). Отворите свој терминал и покрените следећу команду:
npm create svelte
# or
yarn create svelte
Ово би требало да покрене креирање-свелте Интерфејс командне линије (ЦЛИ) поверед би Вите. Именујте свој пројекат и поставите шаблон апликације на „Скелетон пројецт“. Онемогућите проверу типа помоћу ТипеСцрипт-а и изаберите све додатне опције које желите. Након тога, пређите на директоријум пројекта и покрените:
npm install
# or
yarn
Након инсталирања подразумеваних зависности, потребно је да инсталирате два пакета и то: рсс-парсер и тренутак. Први пакет ће вам олакшати рашчлањивање КСМЛ података, док ће вам други помоћи да правилно форматирате датуме. У свом терминалу покрените следеће:
npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment
Сада можете покренути развојни сервер тако што ћете покренути следећу команду.
npm run dev
# or
yarn dev
Обришите садржај Апп.цсс датотеку и измените структуру пројекта тако да изгледа отприлике овако. Креирајте директоријуме који већ не постоје и креирајте празне датотеке које одговарају онима доле наведеним:
Потребно је само да промените срц директоријум, који треба да садржи а либ именик и а либ/аддТоЛоцалСтораге.јс фајл. Такође би требало да садржи а руте директоријум који садржи подређени директоријум под називом напајање и четири фајла: +лаиоут.јс, +лаиоут.свелте, +паге.свелте, и +сервер.јс. У напајање, креирајте директоријум под називом [наслов] са две датотеке унутра: +паге.сервер.јс и +паге.свелте.
Можда ћете имати проблема са стварањем [наслов] директоријум на командној линији пошто многе шкољке користе угласте заграде за подударање шаблона. Ако добијете грешку, покушајте да наведете име директоријума, нпр.:
mkdir '[title]'Креирање АПИ руте за проверу ваљаних РСС фидова
Отвори роутес/+сервер.јс датотеку и увозите јсон корисност. Такође увоз Парсер од рсс-парсер пакет.
import { json } from"@sveltejs/kit";
import Parser from"rss-parser";
Сада извезите асинхрону функцију, ДОБИТИ, и убаците урл као параметар. У овој функцији креирајте две константе: рссЛинк и парсер.
Прва константа треба да садржи параметар претраге из урл прошао, док је други, парсер, треба да ускладишти нову Парсер инстанца објекта. Затим позовите парсеУРЛ метод на парсер и ући рссЛинк као параметар. На крају, серијализирајте одговор помоћу јсон функцију и вратите је.
exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}
Дизајнирање почетне странице
СвелтеКит користи а систем рутирања заснован на систему датотека. Подразумевано, тхе руте/+страница.свелте датотека служи као почетна страница ваше веб странице.
Отворите датотеку +паге.свелте и, у скрипта таг, увозите аддТоЛоцалСтораге функција из либ именик. Ово још нисте направили, али ћете то учинити касније. Након увоза функције, креирајте две променљиве, урл и спреман, постављање спреман променљива до лажно.