Μια εισαγωγή στη δρομολόγηση στο Svelte

Το Svelte είναι ένα ταχέως αναπτυσσόμενο πλαίσιο ιστού που μπορείτε να χρησιμοποιήσετε για τη δημιουργία ιστοσελίδων. Παρουσιάζεται ως μια ελαφριά, εύχρηστη εναλλακτική λύση σε δημοφιλή πλαίσια όπως το React και το Vue.

Κάθε δημοφιλές πλαίσιο JavaScript έχει μια συνοδευτική βιβλιοθήκη που μπορείτε να χρησιμοποιήσετε για δρομολόγηση. Ανακαλύψτε πώς το Svelte σάς επιτρέπει να διαχειρίζεστε τις διευθύνσεις URL και τον κώδικα που τις χειρίζεται.

Δημοφιλείς βιβλιοθήκες δρομολόγησης

Η πιο δημοφιλής βιβλιοθήκη δρομολόγησης για το React είναι το React Router, που δημιουργήθηκε από την ομάδα Remix. Για το VueJS, υπάρχει ο Vue Router που δίνει στον προγραμματιστή εξαιρετικό έλεγχο σε οποιαδήποτε πλοήγηση. Στον κόσμο Svelte, η πιο δημοφιλής βιβλιοθήκη δρομολόγησης είναι σβέλτη δρομολόγηση.

Η άλλη κύρια βιβλιοθήκη δρομολόγησης για το Svelte είναι

σβέλτο-πλοηγός. Δεδομένου ότι είναι ένα πιρούνι από σβέλτη δρομολόγηση, είναι χρήσιμο να μάθετε πρώτα για αυτήν τη βιβλιοθήκη.

Πώς λειτουργεί η βιβλιοθήκη σβέλτης δρομολόγησης

Υπάρχουν τρία σημαντικά στοιχεία για το χειρισμό των διαδρομών στο Svelte: Δρομολογητής, Σύνδεσμος, και Διαδρομή. Για να τα χρησιμοποιήσετε στην εφαρμογή σας, μπορείτε απλώς να εισαγάγετε αυτά τα βοηθητικά προγράμματα από το σβέλτη δρομολόγηση βιβλιοθήκη.

<γραφή>
εισαγωγή {Route, Router, Link} από το "svelte-routing".
γραφή>

Το στοιχείο Router μπορεί να έχει δύο προαιρετικά στηρίγματα: μονοπάτι βάσης και url. ο μονοπάτι βάσης ιδιοκτησία είναι παρόμοια με το όνομα βάσης prop στο React Router.

Από προεπιλογή, έχει οριστεί σε "/". Η διαδρομή βάσης μπορεί να είναι χρήσιμη εάν η εφαρμογή σας έχει πολλά σημεία εισόδου. Για παράδειγμα, λάβετε υπόψη τον ακόλουθο κώδικα Svelte:

<γραφή>
 εισαγωγή { Route, Router, Link } από το "svelte-routing";
 let basepath = "/user";
 let path = location.pathname;
γραφή>
<Δρομολογητής {μονοπάτι βάσης}>
<divστο κλικ={() => (διαδρομή = τοποθεσία.όνομα διαδρομής)}>
<Σύνδεσμοςπρος την="/">Πήγαινε στο σπίτιΣύνδεσμος>
<Σύνδεσμοςπρος την="/user/david">Συνδεθείτε ως DavidΣύνδεσμος>
div>
<κύριος>
 Είστε εδώ: <κώδικας>{μονοπάτι}κώδικας>
<Διαδρομήμονοπάτι="/">
<h1>Καλώς όρισες σπίτι!h1>
Διαδρομή>
<Διαδρομήμονοπάτι="/Δαβίδ">
<h1>Γεια σου David!h1>
Διαδρομή>
κύριος>
Δρομολογητής>

Εάν εκτελέσετε αυτόν τον κωδικό, θα παρατηρήσετε ότι όταν κάνετε κλικ στο Πήγαινε στο σπίτι κουμπί, το πρόγραμμα περιήγησης πλοηγείται στη διαδρομή βάσης "/user". Η διαδρομή ορίζει το στοιχείο που θα πρέπει να αποδοθεί εάν η διαδρομή ταιριάζει με την τιμή στην καθορισμένη Διαδρομή στήριγμα.

Μπορείτε να ορίσετε ποια στοιχεία θα αποδοθούν εντός του στοιχείου Route ή ως ξεχωριστά .λυγερή αρχείο αρκεί να εισάγετε σωστά αυτό το αρχείο. Για παράδειγμα:

<Διαδρομήμονοπάτι="/σχετικά με"συστατικό={Σχετικά με}/>

Το μπλοκ κώδικα παραπάνω λέει στο πρόγραμμα περιήγησης να αποδώσει το App στοιχείο όταν το όνομα της διαδρομής είναι "/about".

Οταν χρησιμοποιείτε σβέλτη δρομολόγηση, ορίστε εσωτερικούς συνδέσμους με το Σύνδεσμος στοιχείο αντί για παραδοσιακό HTML ένα στοιχεία.

Αυτό είναι παρόμοιο με τον τρόπο με τον οποίο το React Router χειρίζεται τις εσωτερικές συνδέσεις. κάθε στοιχείο Link πρέπει να έχει ένα προς την στήριγμα που λέει στο πρόγραμμα περιήγησης σε ποια διαδρομή να πλοηγηθεί.

Όταν το πρόγραμμα περιήγησης αποδίδει ένα στοιχείο Svelte, το Svelte μετατρέπει αυτόματα όλα τα στοιχεία Link σε ισοδύναμα ένα στοιχεία, αντικαθιστώντας το προς την στήριγμα με ένα href Χαρακτηριστικό. Αυτό σημαίνει ότι όταν γράφετε τα εξής:

<Σύνδεσμοςπρος την="/κάποια/διαδρομή">Αυτό είναι ένα στοιχείο σύνδεσης σε σβέλτη δρομολόγησηΣύνδεσμος>

Το Svelte το παρουσιάζει στο πρόγραμμα περιήγησης ως:

<έναhref="/κάποια/διαδρομή">Αυτό είναι ένα στοιχείο σύνδεσης σε σβέλτη δρομολόγησηένα>

Θα πρέπει να χρησιμοποιήσετε το στοιχείο Link αντί για το παραδοσιακό ένα στοιχείο όταν εργάζεστε με svelte-routing. Αυτό είναι επειδή ένα στοιχεία εκτελούν επαναφόρτωση σελίδας από προεπιλογή.

Δημιουργία SPA με Svelte και Svelte-Routing

Ήρθε η ώρα να κάνετε πράξη όλα όσα έχετε μάθει δημιουργώντας μια απλή εφαρμογή λεξικού που επιτρέπει στον χρήστη να αναζητήσει λέξεις. Αυτό το έργο θα χρησιμοποιήσει το δωρεάν API λεξικού.

Για να ξεκινήσετε, βεβαιωθείτε ότι έχετε εγκαταστήσει το Yarn στον υπολογιστή σας και εκτελέστε:

νήμα δημιουργία βιτέ

Αυτό θα σκαλώσει ένα νέο έργο χρησιμοποιώντας το εργαλείο κατασκευής Vite. Ονομάστε το έργο σας και, στη συνέχεια, επιλέξτε "Svelte" ως πλαίσιο και "JavaScript" ως παραλλαγή. Μετά από αυτό, εκτελέστε τις ακόλουθες εντολές η μία μετά την άλλη:

CD
νήμα
νήμα προσθήκη σβέλτης-δρομολόγησης
νήματα dev

Στη συνέχεια, διαγράψτε τα περιεχόμενα του App.svelte αρχείο και αλλάξτε τη δομή του έργου ώστε να μοιάζει με αυτό:

Από την παραπάνω εικόνα, μπορείτε να δείτε ότι υπάρχει ένας φάκελος "components" με δύο αρχεία: Σπίτι.σβέλτο και Σημασία.σβέλτος. Σημασία.σβέλτος είναι το στοιχείο που θα αποδοθεί όταν ο χρήστης αναζητά μια λέξη.

Πλοηγηθείτε στο App.svelte αρχείο και εισαγωγή των στοιχείων Route, Router και Link από τη βιβλιοθήκη svelte-routing. Φροντίστε επίσης να εισαγάγετε το Σπίτι.σβέλτο και App.svelte συστατικά.

<γραφή>
 εισαγωγή { Route, Router, Link } από το "svelte-routing";
 εισαγωγή Αρχικής σελίδας από το "./components/Home.svelte";
 εισαγωγή Σημασία από το "./components/Meaning.svelte";
γραφή>

Στη συνέχεια, δημιουργήστε ένα στοιχείο δρομολογητή που αναδιπλώνει το α κύριος Στοιχείο HTML με την κλάση "app".

<Δρομολογητής>
<κύριοςτάξη="εφαρμογή">
κύριος>
Δρομολογητής>

Στο κύριος στοιχείο, προσθέστε α nav στοιχείο με ένα στοιχείο Link ως θυγατρικό του. Η βάση "to" αυτού του στοιχείου Link πρέπει να δείχνει στο "/". Αυτό το στοιχείο θα επιτρέψει στον χρήστη να πλοηγηθεί στην αρχική σελίδα.

<κύριοςτάξη="εφαρμογή">
<nav>
<Σύνδεσμοςπρος την="/">ΣπίτιΣύνδεσμος>
nav>
κύριος>

Τώρα είναι ώρα να δουλέψουμε στα δρομολόγια. Όταν ο χρήστης φορτώνει την εφαρμογή, το Σπίτι συστατικό πρέπει να αποδοθεί.

Η πλοήγηση στο "/find/:word" θα πρέπει να αποδώσει το Εννοια συστατικό. Η ρήτρα ":word" είναι μια παράμετρος διαδρομής.

Για αυτό το έργο, δεν χρειάζεται να ανησυχείτε για το CSS. Απλώς αντικαταστήστε το δικό σας περιεχόμενο app.css αρχείο με τα περιεχόμενα του app.css αρχείο από αυτό το αποθετήριο GitHub.

Τώρα είναι ώρα να ορίσουμε τις διαδρομές. Η διαδρομή επιπέδου ρίζας πρέπει να αποδίδει το Σπίτι στοιχείο, ενώ το "/find/:word" θα πρέπει να αποδίδει το Εννοια συστατικό.

<Διαδρομήμονοπάτι="/"συστατικό={Σπίτι} />
<Διαδρομήμονοπάτι="/find/:word"ας: παραμ>
<Εννοιαλέξη={params.word} />
Διαδρομή>

Αυτό το μπλοκ κώδικα χρησιμοποιεί το αφήνω οδηγία να μεταβιβαστεί η παράμετρος "word" στο Εννοια εξάρτημα ως στήριγμα.

Τώρα, ανοίξτε το Σπίτι.σβέλτο αρχείο και εισαγωγή του διαπλέω βοηθητικό πρόγραμμα από τη βιβλιοθήκη "svelte-routing" και ορίστε μια μεταβλητή enteredWord.

<γραφή>
 εισαγωγή { navigate } από το "svelte-routing";
 ας enteredWord?
γραφή>

Σύμφωνα με το γραφή ετικέτα, δημιουργήστε ένα κύριο στοιχείο με την κλάση "αρχική σελίδα" και, στη συνέχεια, δημιουργήστε ένα div στοιχείο με την τάξη «λεξικό-κείμενο».

<κύριοςτάξη="αρχική σελίδα">
<divτάξη="λεξικό-κείμενο">Λεξικόdiv>
κύριος>

Στη συνέχεια, δημιουργήστε μια φόρμα με ένα στις: υποβολή διευθυντικός. Αυτό το έντυπο πρέπει να περιέχει δύο παιδιά: α εισαγωγή στοιχείο του οποίου η τιμή συνδέεται με το enteredWord μεταβλητή και ένα κουμπί υποβολής που αποδίδεται υπό όρους μόλις ο χρήστης αρχίσει να πληκτρολογεί:

<μορφήστις: υποβολή|πρόληψη προεπιλογής={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<εισαγωγή
 type = "κείμενο"
 bind: value={enteredWord}
 placeholder="Ξεκινήστε την αναζήτησή σας..."
 αυτόματη εστίαση
 />
 {#if enteredWord}
<κουμπίτύπος="υποβάλλουν">Αναζήτηση λέξηςκουμπί>
 {/αν}
μορφή>

Αυτό το μπλοκ κώδικα χρησιμοποιεί το διαπλέω λειτουργία για να ανακατευθύνει τον χρήστη μόλις ολοκληρωθεί η ενέργεια υποβολής. Τώρα, ανοίξτε το Σημασία.σβέλτος αρχείο και, στην ετικέτα σεναρίου, εξάγετε το λέξη στηρίξτε και δημιουργήστε ένα μήνυμα λάθους μεταβλητός:

εξαγωγή ας λέξη?
let errorMessage = "Δεν υπάρχει σύνδεση. Ελέγξτε το Διαδίκτυό σας";

Στη συνέχεια, κάντε ένα αίτημα GET στο API του Λεξικού περνώντας το λέξη ως παράμετρος:

ασυγχρονισμόςλειτουργίαgetWordMeaning(λέξη) {
συνθ ανταπόκριση = αναμένω φέρω(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
συνθ json = αναμένω answer.json();
κονσόλα.log (json);
αν (response.ok) {
ΕΠΙΣΤΡΟΦΗ json;
 } αλλού {
 errorMessage = json.message;
βολήνέοςΛάθος(json);
 }
 }
αφήνω υπόσχεση = getWordMeaning (λέξη);

Στο μπλοκ κώδικα παραπάνω, η ασύγχρονη συνάρτηση επιστρέφει τα δεδομένα JSON εάν η απόκριση είναι επιτυχής. Η μεταβλητή υποσχέσεις αντιπροσωπεύει το αποτέλεσμα του getWordMeaning λειτουργία όταν γίνεται επίκληση.

Στη σήμανση, ορίστε ένα div με την κλάση σελίδα νόημα. Στη συνέχεια, ορίστε ένα στοιχείο h1 που περιέχει το λέξη μεταβλητή με πεζά:

<divτάξη="Σελίδα σημασίας">
<h1>
 {word.toLowerCase()}
h1>
div>

Στη συνέχεια, χρησιμοποιήστε τα μπλοκ αναμονής του Svelte για να καλέσετε το getWordMeaning λειτουργία:

{#wait υπόσχεση}
<Π>Φόρτωση...Π>
{:μετά καταχωρήσεις}
{:σύλληψη}
 {μήνυμα λάθους}
{/αναμένω}

Αυτός ο κωδικός εμφανίζει το Φόρτωση... κείμενο όταν γίνεται το αίτημα GET στο API. Εάν υπάρχει σφάλμα, θα εμφανίσει τα περιεχόμενα του μήνυμα λάθους.

Στο {:μετά καταχωρήσεις} μπλοκ, προσθέστε τα εξής:

{#κάθε εγγραφές ως καταχώριση}
 {#each entry.meanings as meaning}
<divτάξη="είσοδος">
<divτάξη="μέρος του λόγου">
 {meaning.partOfSpeech}
div>
<ol>
 {#each meaning.definitions as definition}
<li>
 {definition.definition}
<br />
<divτάξη="παράδειγμα">
 {#if definition.example}
 {definition.example}
 {/αν}
div>
li>
 {/καθε}
ol>
div>
 {/καθε}
{/καθε}

Εάν η υπόσχεση επιλυθεί επιτυχώς, το καταχωρήσεις μεταβλητή περιέχει τα δεδομένα που προκύπτουν.

Στη συνέχεια για κάθε επανάληψη του είσοδος και έννοια, αυτός ο κώδικας αποδίδει το τμήμα της ομιλίας χρησιμοποιώντας νόημα.partOfSpeech και μια λίστα με τους ορισμούς που χρησιμοποιούν ορισμός.ορισμός. Θα αποδώσει επίσης μια παραδειγματική πρόταση, εάν είναι διαθέσιμη.

Αυτό είναι. Έχετε δημιουργήσει ένα λεξικό Single Page Application (SPA) χρησιμοποιώντας σβέλτη δρομολόγηση. Μπορείτε να προχωρήσετε τα πράγματα περαιτέρω, αν θέλετε, ή μπορείτε να ελέγξετε έξω σβέλτο-πλοηγός, ένα πιρούνι του σβέλτη δρομολόγηση.

Βελτίωση της εμπειρίας χρήστη με τη δρομολόγηση από την πλευρά του πελάτη

Υπάρχουν πολλά οφέλη από τον χειρισμό της δρομολόγησης στο πρόγραμμα περιήγησης αντί του διακομιστή. Οι εφαρμογές που κάνουν χρήση της δρομολόγησης από την πλευρά του πελάτη μπορούν να αισθάνονται πιο ομαλές στον τελικό χρήστη, ειδικά όταν συνδυάζονται με κινούμενα σχέδια και μεταβάσεις.

Ωστόσο, εάν θέλετε ο ιστότοπός σας να κατατάσσεται υψηλότερα στις μηχανές αναζήτησης, θα πρέπει να εξετάσετε το ενδεχόμενο χειρισμού διαδρομών στον διακομιστή.