מבוא לניתוב ב-Svelte

Svelte היא מסגרת אינטרנט שצומחת במהירות שבה אתה יכול להשתמש כדי לבנות אתרים. הוא מציג את עצמו כחלופה קלת משקל וקלה לשימוש למסגרות פופולריות כמו React ו-Vue.

לכל מסגרת JavaScript פופולרית יש ספרייה נלווית שבה אתה יכול להשתמש לניתוב. גלה כיצד Svelte מאפשר לך לנהל את כתובות האתרים שלך ואת הקוד שמטפל בהן.

ספריות ניתוב פופולריות

ספריית הניתוב הפופולרית ביותר עבור React היא React Router, נוצר על ידי צוות הרמיקס. עבור VueJS, יש Vue Router שנותן למפתח שליטה טובה בכל ניווט. בעולם Svelte, ספריית הניתוב הפופולרית ביותר היא ניתוב קלוש.

ספריית הניתוב הראשית האחרת עבור Svelte היא svelte-navigator. מאז זה מזלג של ניתוב קלוש, כדאי ללמוד תחילה על הספרייה הזו.

כיצד פועלת ספריית הניתוב הדק

ישנם שלושה מרכיבים חשובים לטיפול במסלולים בסוולטה: נתב, קישור, ו מַסלוּל. כדי להשתמש בהם ביישום שלך, אתה יכול פשוט לייבא את כלי השירות האלה מה- ניתוב קלוש סִפְרִיָה.

<תַסרִיט>
ייבוא ​​{Route, Router, Link} מ-"svelte-routing";
תַסרִיט>

לרכיב הנתב יכולים להיות שני אביזרים אופציונליים:

נתיב בסיס ו כתובת אתר. ה נתיב בסיס נכס דומה ל- שם בסיס אבזר ב-React Router.

כברירת מחדל, הוא מוגדר ל-"/". basepath יכול להיות שימושי אם לאפליקציה שלך יש מספר נקודות כניסה. לדוגמה, שקול את הקוד הבא של Svelte:

<תַסרִיט>
 ייבוא ​​{ מסלול, נתב, קישור } מ-"svelte-routing";
 תן basepath = "/משתמש";
 let path = location.pathname;
תַסרִיט>
<נתב {נתיב בסיס}>
<divבלחיצה={() => (נתיב = location.pathname)}>
<קישורל="/">לך הביתהקישור>
<קישורל="/משתמש/דיוויד">היכנס בתור דודקישור>
div>
<רָאשִׁי>
 אתה כאן: <קוד>{נָתִיב}קוד>
<מַסלוּלנָתִיב="/">
<h1>ברוך הבא הביתה!h1>
מַסלוּל>
<מַסלוּלנָתִיב="/דוד">
<h1>שלום דוד!h1>
מַסלוּל>
רָאשִׁי>
נתב>

אם תפעיל את הקוד הזה, תבחין שכאשר תלחץ על לך הביתה כפתור, הדפדפן מנווט לנתיב הבסיס "/user". מסלול מגדיר את הרכיב שאמור לעבד אם הנתיב תואם את הערך שצוין מַסלוּל לִתְמוֹך.

אתה יכול להגדיר אילו רכיבים לעיבוד בתוך רכיב המסלול או כנפרד .תָמִיר קובץ כל עוד אתה מייבא את הקובץ הזה כראוי. לדוגמה:

<מַסלוּלנָתִיב="/על אודות"רְכִיב={על אודות}/>

בלוק הקוד למעלה אומר לדפדפן לעבד את אפליקציה רכיב כאשר שם הנתיב הוא "/about".

כשמשתמש ניתוב קלוש, הגדר קישורים פנימיים עם קישור רכיב במקום HTML מסורתי א אלמנטים.

זה דומה לאופן שבו React Router מטפל בקישורים פנימיים; לכל רכיב קישור צריך להיות א ל prop שאומר לדפדפן לאיזה נתיב לנווט.

כאשר הדפדפן מעבד רכיב Svelte, Svelte ממירה אוטומטית את כל רכיבי הקישור לשווים א אלמנטים, המחליפים את ל אבזר עם an href תְכוּנָה. זה אומר שכאשר אתה כותב את הדברים הבאים:

<קישורל="/כמה/נתיב">זהו רכיב קישור ב-svelte-routingקישור>

Svelte מציג אותו לדפדפן כ:

<אhref="/כמה/נתיב">זהו רכיב קישור ב-svelte-routingא>

עליך להשתמש ברכיב Link במקום המסורתי א אלמנט כאשר עובדים עם ניתוב svelte. זה בגלל ש א רכיבים מבצעים טעינת עמוד מחדש כברירת מחדל.

יצירת ספא ​​עם Svelte ו-Svelte-Routing

זה הזמן ליישם את כל מה שלמדת הלכה למעשה על ידי יצירת אפליקציית מילון פשוטה המאפשרת למשתמש לחפש מילים. פרויקט זה ישתמש בחינם API של מילון.

כדי להתחיל, ודא שמותקן Yarn במחשב שלך והפעל:

חוט ליצור vite

זה יהיה פיגום פרויקט חדש באמצעות כלי הבנייה של Vite. תן שם לפרויקט שלך ואז בחר "Svelte" בתור המסגרת ו"JavaScript" בתור הגרסה. לאחר מכן, הפעל את הפקודות הבאות בזו אחר זו:

CD
חוּט
חוט להוסיף ניתוב דק
מפתח חוט

לאחר מכן, מחק את התוכן של App.svelte קובץ ושנו את מבנה הפרויקט כך שייראה כך:

מהאיור למעלה, אתה יכול לראות שיש תיקיית "רכיבים" עם שני קבצים: Home.Svelte ו משמע.סולט. משמע.סולט הוא הרכיב שיוצג כאשר המשתמש יחפש מילה.

נווט אל App.svelte קובץ וייבא את רכיבי המסלול, הנתב והקישור מספריית הניתוב הסלולרי. הקפד גם לייבא את Home.Svelte ו App.svelte רכיבים.

<תַסרִיט>
 ייבוא ​​{ מסלול, נתב, קישור } מ-"svelte-routing";
 לייבא את הבית מ-"./components/Home.svelte";
 ייבוא ​​משמעות מ-"./components/Meaning.svelte";
תַסרִיט>

לאחר מכן, צור רכיב נתב שעוטף את א רָאשִׁי רכיב HTML עם המחלקה "אפליקציה".

<נתב>
<רָאשִׁימעמד="אפליקציה">
רָאשִׁי>
נתב>

בתוך ה רָאשִׁי אלמנט, הוסף א nav רכיב עם רכיב Link בתור הילד שלו. אבזר "to" של רכיב קישור זה אמור להצביע על "/". רכיב זה יאפשר למשתמש לנווט אל דף הבית.

<רָאשִׁימעמד="אפליקציה">
<nav>
<קישורל="/">ביתקישור>
nav>
רָאשִׁי>

זה הזמן לעבוד על המסלולים. כאשר המשתמש טוען את האפליקציה, ה בית רכיב צריך לרנדר.

ניווט אל "/find/:word" אמור לעבד את מַשְׁמָעוּת רְכִיב. הסעיף ":word" הוא פרמטר נתיב.

עבור פרויקט זה, אינך צריך לדאוג לגבי CSS. פשוט החלף את התוכן שלך app.css קובץ עם התוכן של app.css קובץ מ מאגר GitHub זה.

זה הזמן להגדיר את המסלולים. נתיב רמת השורש צריך לעבד את בית רכיב, בעוד "/find/:word" צריך לעבד את מַשְׁמָעוּת רְכִיב.

<מַסלוּלנָתִיב="/"רְכִיב={בית} />
<מַסלוּלנָתִיב="/find/:word"תן: params>
<מַשְׁמָעוּתמִלָה={params.word} />
מַסלוּל>

בלוק קוד זה משתמש ב- לתת הנחיה להעביר את הפרמטר "מילה" ל- מַשְׁמָעוּת רכיב כאביזר.

עכשיו, פתח את Home.Svelte קובץ וייבא את לנווט כלי עזר מספריית "svelte-routing" ולהגדיר משתנה הזיןWord.

<תַסרִיט>
 ייבוא ​​{ navigate } מ-"svelte-routing";
 תן נכנסוורד;
תַסרִיט>

תחת תַסרִיט תג, צור אלמנט ראשי עם המחלקה "דף הבית", ולאחר מכן צור א div אלמנט עם המחלקה "מילון-טקסט".

<רָאשִׁימעמד="דף הבית">
<divמעמד="מילון-טקסט">מילוןdiv>
רָאשִׁי>

לאחר מכן, צור טופס עם an ב: להגיש הוֹרָאָה. טופס זה צריך להכיל שני ילדים: א קֶלֶט אלמנט שערכו קשור ל- הזיןWord משתנה וכפתור שלח שמוצג באופן מותנה ברגע שהמשתמש מתחיל להקליד:

<טופסב: להגיש|למנוע ברירת מחדל={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<קֶלֶט
 type="text"
 bind: value={enteredWord}
 placeholder="התחל את החיפוש שלך..."
 פוקוס אוטומטי
 />
 {#if enteredWord}
<לַחְצָןסוּג="שלח">חפש ב-Wordלַחְצָן>
 {/אם}
טופס>

בלוק קוד זה משתמש ב- לנווט פונקציה להפנות את המשתמש לאחר סיום פעולת השליחה. עכשיו, פתח את משמע.סולט קובץ, ובתג הסקריפט, ייצא את ה- מִלָה תמיכה ויצירת הודעת שגיאה מִשְׁתַנֶה:

ייצוא תן מילה;
let errorMessage = "אין חיבור. בדוק את האינטרנט שלך";

לאחר מכן, שלח בקשת GET לממשק ה-API של מילון תוך מעבר של מִלָה בתור הפרמטר:

אסינכרוןפוּנקצִיָהgetWordMeaning(מִלָה) {
const תגובה = לְהַמתִין לְהָבִיא(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
const json = לְהַמתִין response.json();
לְנַחֵם.log (json);
אם (response.ok) {
לַחֲזוֹר json;
 } אַחֵר {
 errorMessage = json.message;
לזרוקחָדָשׁשְׁגִיאָה(json);
 }
 }
לתת הבטחה = getWordMeaning (מילה);

בבלוק הקוד למעלה, הפונקציה האסינכרונית מחזירה את נתוני ה-JSON אם התגובה מצליחה. משתנה ההבטחה מייצג את התוצאה של getWordMeaning לתפקד כאשר מופעל.

בסימון, הגדר div עם המחלקה דף משמעות. לאחר מכן, הגדר אלמנט h1 המחזיק את מִלָה משתנה באותיות קטנות:

<divמעמד="דף משמעות">
<h1>
 {word.toLowerCase()}
h1>
div>

לאחר מכן, השתמש בבלוקים ממתינים של Svelte כדי להתקשר ל- getWordMeaning פוּנקצִיָה:

{#await הבטחה}
<ע>טוען...ע>
{:then entries}
{:לתפוס}
 {הודעת שגיאה}
{/לְהַמתִין}

קוד זה מציג את טוען... טקסט מתי בקשת GET מתבצעת ל-API. אם יש שגיאה, זה יציג את התוכן של הודעת שגיאה.

בתוך ה {:then entries} לחסום, הוסף את הדברים הבאים:

{#each entries as entry}
 {#each entry.meanings as meaning}
<divמעמד="כְּנִיסָה">
<divמעמד="חלק מהדיבור">
 {meaning.partOfSpeech}
div>
<ol>
 {#each meaning.definitions as definition}
<לי>
 {definition.definition}
<br />
<divמעמד="דוגמא">
 {#if definition.example}
 {definition.example}
 {/אם}
div>
לי>
 {/כל אחד}
ol>
div>
 {/כל אחד}
{/כל אחד}

אם ההבטחה תיפתר בהצלחה, ה ערכים המשתנה מכיל את הנתונים המתקבלים.

לאחר מכן עבור כל איטרציה של כְּנִיסָה ו מַשְׁמָעוּת, קוד זה מעבד את חלק הדיבור באמצעות משמעות.חלק דיבור ורשימת הגדרות באמצעות הגדרה.הגדרה. זה גם יציג משפט לדוגמה, אם קיים כזה.

זהו זה. יצרת יישום עמוד אחד של מילון (SPA) באמצעות ניתוב svelte. אתה יכול לקחת דברים רחוק יותר אם אתה רוצה, או שאתה יכול לבדוק svelte-navigator, מזלג של ניתוב קלוש.

שיפור חווית משתמש עם ניתוב בצד הלקוח

ישנם יתרונות רבים לטיפול בניתוב בדפדפן במקום בשרת. יישומים שעושים שימוש בניתוב בצד הלקוח יכולים להרגיש חלקים יותר למשתמש הקצה, במיוחד כאשר הם משולבים עם אנימציות ומעברים.

עם זאת, אם אתה רוצה שהאתר שלך ידורג גבוה יותר במנועי החיפוש, עליך לשקול טיפול במסלולים בשרת.