SvelteKit είναι το πιο πρόσφατο από αυτά που θα αποκαλούσα πλαίσια εφαρμογών επόμενης γενιάς. Φυσικά, δημιουργεί μια εφαρμογή για εσάς, με τη δρομολόγηση, την ανάπτυξη και την απόδοση από την πλευρά του διακομιστή που βασίζεται σε αρχεία που έχει κάνει το Next για πάντα. Ωστόσο, το SvelteKit υποστηρίζει επίσης ένθετες διατάξεις, μεταλλάξεις διακομιστή που συγχρονίζουν τα δεδομένα στη σελίδα σας και μερικές άλλες λεπτομέρειες που θα προσεγγίσουμε.
Αυτή η ανάρτηση προορίζεται να είναι μια εισαγωγή υψηλού επιπέδου για να δημιουργηθεί κάποιος ενθουσιασμός για όποιον δεν έχει χρησιμοποιήσει ποτέ το SvelteKit. Θα είναι μια χαλαρή περιοδεία. Αν σας αρέσει αυτό που βλέπετε, το τα πλήρη έγγραφα είναι εδώ.
Κατά κάποιο τρόπο, αυτή είναι μια δύσκολη ανάρτηση για να γραφτεί. Το SvelteKit είναι ένα πλαίσιο εφαρμογής. Υπάρχει για να σας βοηθήσει να δημιουργήσετε… καλά, εφαρμογές. Αυτό καθιστά δύσκολη την επίδειξη. Δεν είναι εφικτό να δημιουργήσετε μια ολόκληρη εφαρμογή σε μια ανάρτηση ιστολογίου. Αντίθετα, λοιπόν, θα χρησιμοποιήσουμε λίγο τη φαντασία μας. Θα δημιουργήσουμε τον σκελετό μιας εφαρμογής, θα έχουμε μερικά κενά σύμβολα θέσης διεπαφής χρήστη και θα έχουμε σταθερά κωδικοποιημένα στατικά δεδομένα. Ο στόχος δεν είναι να δημιουργήσετε μια πραγματική εφαρμογή, αλλά να σας δείξουμε πώς λειτουργούν τα κινούμενα κομμάτια του SvelteKit, ώστε να μπορείτε να δημιουργήσετε μια δική σας εφαρμογή.
Για το σκοπό αυτό, θα δημιουργήσουμε τη δοκιμασμένη και αληθινή εφαρμογή To-Do ως παράδειγμα. Αλλά μην ανησυχείτε, αυτό θα είναι πολύ, πολύ περισσότερο για να δείτε πώς λειτουργεί το SvelteKit παρά για τη δημιουργία μιας άλλης εφαρμογής To-Do.
Ο κώδικας για τα πάντα σε αυτήν την ανάρτηση είναι διαθέσιμο στο GitHub. Αυτό το έργο είναι επίσης αναπτύχθηκε στο Vercel για μια ζωντανή επίδειξη.
Δημιουργία του έργου σας
Η περιστροφή ενός νέου έργου SvelteKit είναι αρκετά απλή. Τρέξιμο npm create your-app-name
στο τερματικό και απαντήστε στις ερωτήσεις. Φροντίστε να επιλέξετε "Skeleton Project", αλλά διαφορετικά κάντε όποιες επιλογές θέλετε για TypeScript, ESLint, κ.λπ.
Μόλις δημιουργηθεί το έργο, εκτελέστε npm i
και npm run dev
και ένας διακομιστής dev θα πρέπει να αρχίσει να λειτουργεί. Φουντώνω localhost:5173
στο πρόγραμμα περιήγησης και θα λάβετε τη σελίδα κράτησης θέσης για την εφαρμογή skeleton.
Βασική δρομολόγηση
Παρατηρήστε το routes
κάτω από το φάκελο src
. Αυτός περιέχει κωδικό για όλες τις διαδρομές μας. Υπάρχει ήδη ένα +page.svelte
αρχείο εκεί με περιεχόμενο για το root /
Διαδρομή. Ανεξάρτητα από το πού στην ιεραρχία αρχείων βρίσκεστε, η πραγματική σελίδα για αυτήν τη διαδρομή έχει πάντα το όνομα +page.svelte
. Έχοντας αυτό υπόψη, ας δημιουργήσουμε σελίδες για /list
, /details
, /admin/user-settings
και admin/paid-status
και προσθέστε επίσης ορισμένα σύμβολα κράτησης θέσης κειμένου για κάθε σελίδα.
Η διάταξη του αρχείου σας θα πρέπει να μοιάζει κάπως έτσι:
Θα πρέπει να μπορείτε να περιηγηθείτε αλλάζοντας τις διαδρομές URL στη γραμμή διευθύνσεων του προγράμματος περιήγησης.
σχεδιαγράμματα
Θα θέλουμε συνδέσμους πλοήγησης στην εφαρμογή μας, αλλά σίγουρα δεν θέλουμε να αντιγράψουμε τη σήμανση για αυτούς σε κάθε σελίδα που δημιουργούμε. Λοιπόν, ας δημιουργήσουμε ένα +layout.svelte
αρχείο στη ρίζα του μας routes
φάκελο, τον οποίο το SvelteKit θα χειριστεί ως καθολικό πρότυπο για όλες τις σελίδες. Ας προσθέσουμε και λίγο περιεχόμενο σε αυτό:
<nav> <ul> <li> <a href="/el/">Home</a> </li> <li> <a href="/el/list">To-Do list</a> </li> <li> <a href="/el/admin/paid-status">Account status</a> </li> <li> <a href="/el/admin/user-settings">User settings</a> </li> </ul>
</nav> <slot /> <style> nav { background-color: beige; } nav ul { display: flex; } li { list-style: none; margin: 15px; } a { text-decoration: none; color: black; }
</style>
Κάποια στοιχειώδη πλοήγηση με μερικά βασικά στυλ. Ιδιαίτερη σημασία έχει η <slot />
ετικέτα. Αυτό είναι δεν την υποδοχή που χρησιμοποιείτε με τα στοιχεία web και το σκιερό DOM, αλλά μάλλον μια λειτουργία Svelte που υποδεικνύει πού να τοποθετήσουμε το περιεχόμενό μας. Όταν μια σελίδα αποδίδεται, το περιεχόμενο της σελίδας θα ολισθαίνει στο σημείο που βρίσκεται η υποδοχή.
Και τώρα έχουμε πλοήγηση! Δεν θα κερδίσουμε κανέναν διαγωνισμό σχεδιασμού, αλλά δεν προσπαθούμε.
Ένθετες διατάξεις
Τι θα γινόταν αν θέλαμε όλες οι σελίδες διαχειριστή μας να κληρονομήσουν την κανονική διάταξη που μόλις δημιουργήσαμε, αλλά και να μοιραστούμε ορισμένα πράγματα κοινά σε όλες τις σελίδες διαχειριστή (αλλά μόνο τις σελίδες διαχειριστή); Κανένα πρόβλημα, προσθέτουμε άλλο +layout.svelte
αρχείο στο root μας admin
κατάλογο, ο οποίος θα κληρονομηθεί από οτιδήποτε βρίσκεται κάτω από αυτόν. Ας το κάνουμε αυτό και ας προσθέσουμε αυτό το περιεχόμενο:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
Προσθέτουμε ένα κόκκινο banner που υποδεικνύει ότι πρόκειται για σελίδα διαχειριστή και, όπως πριν, α <slot />
που δηλώνει πού θέλουμε να πάει το περιεχόμενο της σελίδας μας.
Η αρχική μας διάταξη από πριν αποδίδει. Το εσωτερικό της διάταξης ρίζας είναι ένα <slot />
ετικέτα. Το περιεχόμενο της ένθετης διάταξης πηγαίνει στη διάταξη ρίζας <slot />
. Και τέλος, η ένθετη διάταξη ορίζει τη δική της <slot />
, στο οποίο αποδίδεται το περιεχόμενο της σελίδας.
Εάν πλοηγηθείτε στις σελίδες διαχειριστή, θα δείτε το νέο κόκκινο banner:
Καθορισμός των δεδομένων μας
Εντάξει, ας αποδώσουμε ορισμένα πραγματικά δεδομένα — ή τουλάχιστον, να δούμε πώς μπορούμε να αποδώσουμε ορισμένα πραγματικά δεδομένα. Υπάρχουν εκατό τρόποι για να δημιουργήσετε και να συνδεθείτε σε μια βάση δεδομένων. Ωστόσο, αυτή η ανάρτηση αφορά το SvelteKit, όχι τη διαχείριση του DynamoDB, επομένως θα "φορτώσουμε" κάποια στατικά δεδομένα. Ωστόσο, θα χρησιμοποιήσουμε όλα τα ίδια μηχανήματα για να τα διαβάσουμε και να τα ενημερώσουμε που θα χρησιμοποιούσατε για πραγματικά δεδομένα. Για μια πραγματική εφαρμογή Ιστού, ανταλλάξτε τις λειτουργίες που επιστρέφουν στατικά δεδομένα με λειτουργίες που συνδέονται και υποβάλλουν ερωτήματα σε οποιαδήποτε βάση δεδομένων χρησιμοποιείτε.
Ας δημιουργήσουμε ένα ακατέργαστο module στο lib/data/todoData.ts
που επιστρέφει ορισμένα στατικά δεδομένα μαζί με τεχνητές καθυστερήσεις για την προσομοίωση πραγματικών ερωτημάτων. Θα το δεις αυτό lib
φάκελος που έχει εισαχθεί αλλού μέσω $lib
. Αυτή είναι μια δυνατότητα SvelteKit για τον συγκεκριμένο φάκελο και μπορείτε ακόμη και προσθέστε τα δικά σας ψευδώνυμα.
let todos = [ { id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] }, { id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] }, { id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] }, { id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] }, { id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
]; let tags = [ { id: 1, name: "SvelteKit Content", color: "ded" }, { id: 2, name: "Conferences", color: "purple" }, { id: 3, name: "SvelteKit Development", color: "pink" }, { id: 4, name: "CSS-Tricks Admin", color: "blue" },
]; export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 100)); export async function getTodos() { await wait(); return todos;
} export async function getTags() { await wait(); return tags.reduce((lookup, tag) => { lookup[tag.id] = tag; return lookup; }, {});
} export async function getTodo(id) { return todos.find(t => t.id == id);
}
Μια συνάρτηση για την επιστροφή ενός επίπεδου πίνακα των στοιχείων που πρέπει να κάνουμε, μια αναζήτηση των ετικετών μας και μια συνάρτηση για την ανάκτηση μιας μεμονωμένης υποχρέωσης (θα χρησιμοποιήσουμε αυτή την τελευταία στη σελίδα Λεπτομέρειες).
Φόρτωση των δεδομένων μας
Πώς μεταφέρουμε αυτά τα δεδομένα στις σελίδες μας Svelte; Υπάρχουν διάφοροι τρόποι, αλλά προς το παρόν, ας δημιουργήσουμε ένα +page.server.js
αρχείο στο δικό μας list
φάκελο και βάλτε αυτό το περιεχόμενο σε αυτόν:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
Έχουμε ορίσει α load()
λειτουργία που τραβάει τα δεδομένα που χρειάζονται για τη σελίδα. Παρατηρήστε ότι είμαστε δεν await
- καλεί σε μας getTodos
και getTags
ασύγχρονες λειτουργίες. Κάτι τέτοιο θα δημιουργούσε έναν καταρράκτη φόρτωσης δεδομένων καθώς περιμένουμε να έρθουν τα στοιχεία που πρέπει να κάνουμε πριν φορτώσουμε τις ετικέτες μας. Αντίθετα, επιστρέφουμε τις ακατέργαστες υποσχέσεις από load
, και το SvelteKit κάνει την απαραίτητη εργασία για να await
Θεμ.
Λοιπόν, πώς έχουμε πρόσβαση σε αυτά τα δεδομένα από το στοιχείο της σελίδας μας; Το SvelteKit παρέχει α data
στήριγμα για το στοιχείο μας με δεδομένα σε αυτό. Θα έχουμε πρόσβαση στις υποχρεώσεις μας και στις ετικέτες από αυτό χρησιμοποιώντας ένα αντιδραστική ανάθεση.
Το στοιχείο της σελίδας λίστας μας μοιάζει τώρα με αυτό.
<script> export let data; $: ({ todo, tags } = data);
</script> <table cellspacing="10" cellpadding="10"> <thead> <tr> <th>Task</th> <th>Tags</th> <th>Assigned</th> </tr> </thead> <tbody> {#each todos as t} <tr> <td>{t.title}</td> <td>{t.tags.map((id) => tags[id].name).join(', ')}</td> <td>{t.assigned}</td> </tr> {/each} </tbody>
</table> <style> th { text-align: left; }
</style>
Και αυτό θα πρέπει να καταστήσει τα πράγματα που πρέπει να κάνουμε!
Ομάδες διάταξης
Πριν προχωρήσουμε στη σελίδα Λεπτομέρειες και μεταλλάξουμε δεδομένα, ας ρίξουμε μια ματιά σε μια πραγματικά προσεγμένη λειτουργία SvelteKit: ομάδες διάταξης. Έχουμε ήδη δει ένθετες διατάξεις για όλες τις σελίδες διαχειριστή, αλλά τι γίνεται αν θέλαμε να μοιραστούμε μια διάταξη μεταξύ αυθαίρετων σελίδων στο ίδιο επίπεδο του συστήματος αρχείων μας; Συγκεκριμένα, τι θα γινόταν αν θέλαμε να μοιραστούμε μια διάταξη μόνο μεταξύ της σελίδας Λίστα και της σελίδας Λεπτομέρειες; Έχουμε ήδη μια παγκόσμια διάταξη σε αυτό το επίπεδο. Αντίθετα, μπορούμε να δημιουργήσουμε έναν νέο κατάλογο, αλλά με ένα όνομα που βρίσκεται σε παρένθεση, όπως αυτό:
Τώρα έχουμε μια ομάδα διάταξης που καλύπτει τις σελίδες Λίστα και Λεπτομέρειες. Το ονόμασα (todo-management)
αλλά μπορείτε να το ονομάσετε όπως θέλετε. Για να είμαστε σαφείς, αυτό το όνομα θα γίνει δεν επηρεάζουν τις διευθύνσεις URL των σελίδων μέσα στην ομάδα διάταξης. Οι διευθύνσεις URL θα παραμείνουν οι ίδιες. Οι ομάδες διάταξης σάς επιτρέπουν να προσθέτετε κοινόχρηστες διατάξεις σε σελίδες χωρίς όλες να περιλαμβάνουν το σύνολο ενός καταλόγου στο routes
.
We θα μπορούσε να πρόσθεσε ένα +layout.svelte
αρχείο και μερικά ανόητα <div>
πανό που γράφει: "Γεια σας, καταφέρνουμε να κάνουμε". Ας κάνουμε όμως κάτι πιο ενδιαφέρον. Οι διατάξεις μπορούν να ορίσουν load()
λειτουργίες για την παροχή δεδομένων για όλες τις διαδρομές κάτω από αυτές. Ας χρησιμοποιήσουμε αυτή τη λειτουργία για να φορτώσουμε τις ετικέτες μας — αφού θα χρησιμοποιούμε τις ετικέτες μας στο δικό μας details
σελίδα — εκτός από το list
σελίδα που έχουμε ήδη.
Στην πραγματικότητα, ο εξαναγκασμός μιας ομάδας διάταξης απλώς και μόνο για να παρέχει ένα μόνο κομμάτι δεδομένων, σχεδόν σίγουρα δεν αξίζει τον κόπο. είναι καλύτερα να αντιγράψετε αυτά τα δεδομένα στο load()
λειτουργία για κάθε σελίδα. Αλλά για αυτήν την ανάρτηση, θα δώσει τη δικαιολογία που χρειαζόμαστε για να δούμε μια νέα δυνατότητα SvelteKit!
Αρχικά, ας πάμε στα δικά μας list
της σελίδας +page.server.js
αρχείο και αφαιρέστε τις ετικέτες από αυτό.
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
Η σελίδα λίστας μας θα πρέπει τώρα να παράγει ένα σφάλμα, καθώς δεν υπάρχει tags
αντικείμενο. Ας το διορθώσουμε προσθέτοντας ένα +layout.server.js
αρχείο στην ομάδα διάταξης μας και, στη συνέχεια, ορίστε α load()
λειτουργία που φορτώνει τις ετικέτες μας.
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
Και, ακριβώς έτσι, η σελίδα Λίστας μας αποδίδεται ξανά!
Φορτώνουμε δεδομένα από πολλές τοποθεσίες
Ας βάλουμε μια ωραία άποψη για το τι συμβαίνει εδώ:
- Ορίσαμε ένα
load()
λειτουργία για την ομάδα διάταξης μας, την οποία τοποθετήσαμε+layout.server.js
. - Αυτό παρέχει δεδομένα για όλοι από τις σελίδες που εξυπηρετεί η διάταξη — που σε αυτήν την περίπτωση σημαίνει τις σελίδες Λίστα και Λεπτομέρειες.
- Η σελίδα λίστας μας ορίζει επίσης α
load()
λειτουργία που μπαίνει μέσα του+page.server.js
αρχείο. - Το SvelteKit κάνει τη σκληρή δουλειά για τη λήψη των αποτελεσμάτων αυτών των πηγών δεδομένων, τη συγχώνευσή τους και τη διάθεση και των δύο σε
data
.
Η σελίδα λεπτομερειών μας
Θα χρησιμοποιήσουμε τη σελίδα Λεπτομέρειες για να επεξεργαστούμε ένα αντικείμενο. Αρχικά, ας προσθέσουμε μια στήλη στον πίνακα στη σελίδα Λίστας που συνδέεται με τη σελίδα Λεπτομέρειες με το αναγνωριστικό του στοιχείου υποχρεώσεων στη συμβολοσειρά ερωτήματος.
<td><a href="/el/details?id={t.id}">Edit</a></td>
Τώρα ας δημιουργήσουμε τη σελίδα Λεπτομέρειες. Αρχικά, θα προσθέσουμε έναν φορτωτή για να αρπάξουμε το αντικείμενο που επεξεργαζόμαστε. Δημιουργώ ένα +page.server.js
in /details
, με αυτό το περιεχόμενο:
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export function load({ url }) { const id = url.searchParams.get("id"); console.log(id); const todo = getTodo(id); return { todo, };
}
Ο φορτωτής μας συνοδεύεται από ένα url
ιδιότητα από την οποία μπορούμε να αντλήσουμε τιμές συμβολοσειράς ερωτήματος. Αυτό διευκολύνει την αναζήτηση του θέματος που επεξεργαζόμαστε. Ας αποδώσουμε αυτήν την υποχρέωση, μαζί με τη λειτουργικότητα για να την επεξεργαστούμε.
Το SvelteKit έχει υπέροχες ενσωματωμένες δυνατότητες μετάλλαξης, αρκεί να χρησιμοποιείτε φόρμες. Θυμάστε φόρμες; Εδώ είναι η σελίδα λεπτομερειών μας. Έχω παραλείψει τα στυλ για συντομία.
<script> import { enhance } from "$app/forms"; export let data; $: ({ todo, tags } = data); $: currentTags = todo.tags.map(id => tags[id]);
</script> <form use:enhance method="post" action="?/editTodo"> <input name="id" type="hidden" value="{todo.id}" /> <input name="title" value="{todo.title}" /> <div> {#each currentTags as tag} <span style="{`color:" ${tag.color};`}>{tag.name}</span> {/each} </div> <button>Save</button>
</form>
Παίρνουμε τις ετικέτες όπως πριν από το πρόγραμμα φόρτωσης της ομάδας διάταξης μας και το στοιχείο που πρέπει να κάνουμε από το πρόγραμμα φόρτωσης της σελίδας μας. Αρπάζουμε το πραγματικό tag
αντικείμενα από τη λίστα των υποχρεώσεων με αναγνωριστικά ετικετών και στη συνέχεια απόδοση όλων. Δημιουργούμε μια φόρμα με μια κρυφή είσοδο για το αναγνωριστικό και μια πραγματική είσοδο για τον τίτλο. Εμφανίζουμε τις ετικέτες και στη συνέχεια παρέχουμε ένα κουμπί για την υποβολή της φόρμας.
Αν προσέξατε το use:enhance
, που απλά λέει στο SvelteKit να χρησιμοποιήσει προοδευτική βελτίωση και στον Ajax να υποβάλει τη φόρμα μας. Πιθανότατα θα το χρησιμοποιείτε πάντα.
Πώς αποθηκεύουμε τις επεξεργασίες μας;
Παρατηρήστε το action="?/editTodo"
χαρακτηριστικό στην ίδια τη φόρμα; Αυτό μας λέει πού θέλουμε να υποβάλουμε τα επεξεργασμένα δεδομένα μας. Για την περίπτωσή μας, θέλουμε να υποβάλουμε σε ένα editTodo
"δράση."
Ας το δημιουργήσουμε προσθέτοντας τα παρακάτω στο +page.server.js
αρχείο που έχουμε ήδη για Λεπτομέρειες (το οποίο αυτή τη στιγμή έχει α load()
λειτουργία, για να αρπάξουμε τις υποχρεώσεις μας):
import { redirect } from "@sveltejs/kit"; // ... export const actions = { async editTodo({ request }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); throw redirect(303, "/list"); },
};
Οι ενέργειες φόρμας μας δίνουν α request
αντικείμενο, το οποίο παρέχει πρόσβαση σε μας formData
, η οποία έχει ένα get
μέθοδος για τα διάφορα πεδία φόρμας. Προσθέσαμε αυτήν την κρυφή είσοδο για την τιμή αναγνωριστικού, ώστε να μπορούμε να την πιάσουμε εδώ για να αναζητήσουμε το αντικείμενο που επεξεργαζόμαστε. Προσομοιώνουμε μια καθυστέρηση, καλούμε μια νέα updateTodo()
και στη συνέχεια ανακατευθύνετε τον χρήστη πίσω στο /list
σελίδα. Ο updateTodo()
Η μέθοδος απλώς ενημερώνει τα στατικά μας δεδομένα. στην πραγματική ζωή θα εκτελούσατε κάποιο είδος ενημέρωσης σε οποιοδήποτε χώρο αποθήκευσης δεδομένων χρησιμοποιείτε.
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
Ας το δοκιμάσουμε. Θα πάμε πρώτα στη σελίδα Λίστα:
Τώρα ας κάνουμε κλικ στο κουμπί Επεξεργασία για ένα από τα αντικείμενα που πρέπει να κάνουμε για να εμφανιστεί η σελίδα επεξεργασίας /details
.
Θα προσθέσουμε έναν νέο τίτλο:
Τώρα, κάντε κλικ στην Αποθήκευση. Αυτό θα πρέπει να μας επαναφέρει στα δικά μας /list
σελίδα, με εφαρμοσμένο τον νέο τίτλο υποχρεώσεων.
Πώς εμφανίστηκε έτσι ο νέος τίτλος; Ήταν αυτόματο. Μόλις ανακατευθυνθήκαμε στο /list
σελίδα, το SvelteKit επανεκτέλεσε αυτόματα όλους τους φορτωτές μας όπως θα έκανε ανεξάρτητα. Αυτή είναι η βασική πρόοδος που έχουν τα πλαίσια εφαρμογών επόμενης γενιάς, όπως το SvelteKit, Remix, να Επόμενο 13 προμηθεύω. Αντί να σας προσφέρουν έναν βολικό τρόπο απόδοσης σελίδων και στη συνέχεια να σας εύχονται καλή τύχη στη λήψη οποιωνδήποτε τελικών σημείων για την ενημέρωση δεδομένων, ενσωματώνουν τη μετάλλαξη δεδομένων παράλληλα με τη φόρτωση δεδομένων, επιτρέποντας στα δύο να λειτουργούν παράλληλα.
Μερικά πράγματα που ίσως αναρωτιέστε…
Αυτή η ενημέρωση μετάλλαξης δεν φαίνεται πολύ εντυπωσιακή. Οι φορτωτές θα εκτελούνται ξανά όποτε πλοηγείστε. Τι θα γινόταν αν δεν είχαμε προσθέσει μια ανακατεύθυνση στην ενέργεια φόρμας, αλλά παραμείναμε στην τρέχουσα σελίδα; Το SvelteKit θα εκτελούσε την ενημέρωση με την ενέργεια φόρμας, όπως πριν, αλλά θα το έκανε ακόμη εκτελέστε ξανά όλα τα προγράμματα φόρτωσης για την τρέχουσα σελίδα, συμπεριλαμβανομένων των προγραμμάτων φόρτωσης στη διάταξη(ες) σελίδας.
Μπορούμε να έχουμε πιο στοχευμένα μέσα για την ακύρωση των δεδομένων μας; Για παράδειγμα, οι ετικέτες μας δεν υποβλήθηκαν σε επεξεργασία, επομένως στην πραγματική ζωή δεν θα θέλαμε να τις ξαναρωτήσουμε. Ναι, αυτό που σας έδειξα είναι απλώς η προεπιλεγμένη συμπεριφορά των φορμών στο SvelteKit. Μπορείτε να απενεργοποιήσετε την προεπιλεγμένη συμπεριφορά από παρέχοντας επανάκληση σε use:enhance
. Στη συνέχεια, το SvelteKit παρέχει εγχειρίδιο συναρτήσεις ακύρωσης.
Η φόρτωση δεδομένων σε κάθε πλοήγηση είναι δυνητικά δαπανηρή και περιττή. Μπορώ να αποθηκεύσω προσωρινά αυτά τα δεδομένα όπως κάνω με εργαλεία όπως react-query
? Ναι, απλά διαφορετικά. Το SvelteKit σάς επιτρέπει να ορίσετε (και στη συνέχεια να σέβεστε) τις κεφαλίδες ελέγχου προσωρινής μνήμης που παρέχει ήδη ο ιστός. Και θα καλύψω τους μηχανισμούς ακύρωσης της προσωρινής μνήμης σε μια επόμενη ανάρτηση.
Όλα όσα έχουμε κάνει σε αυτό το άρθρο χρησιμοποιούν στατικά δεδομένα και τροποποιούν τις τιμές στη μνήμη. Εάν πρέπει να επαναφέρετε τα πάντα και να ξεκινήσετε από την αρχή, σταματήστε και επανεκκινήστε το npm run dev
Διαδικασία κόμβου.
Ολοκληρώνοντας
Μόλις γρατσουνίσαμε την επιφάνεια του SvelteKit, αλλά ελπίζουμε να έχετε δει αρκετά για να ενθουσιαστείτε με αυτό. Δεν μπορώ να θυμηθώ την τελευταία φορά που βρήκα τόσο διασκεδαστική την ανάπτυξη ιστού. Καθώς τα πράγματα όπως η ομαδοποίηση, η δρομολόγηση, η SSR και η ανάπτυξη, όλα χειρίζονται εκτός συσκευασίας, αφιερώνω περισσότερο χρόνο στην κωδικοποίηση παρά στη διαμόρφωση.
Ακολουθούν μερικοί ακόμη πόροι που μπορείτε να χρησιμοποιήσετε ως επόμενα βήματα εκμάθησης του SvelteKit:
- SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
- Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
- πηγή: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- Ικανός
- Σχετικα
- σχετικά με αυτό
- πρόσβαση
- Λογαριασμός
- Ενέργειες
- ενεργειών
- Αδάμ
- προστιθέμενη
- Επιπλέον
- διεύθυνση
- διαχειριστής
- προηγμένες
- επηρεάζουν
- Όλα
- Επιτρέποντας
- κατά μήκος της πλευράς
- ήδη
- πάντοτε
- ποσό
- και
- Άλλος
- απάντηση
- κάποιος
- app
- Εφαρμογή
- εφαρμογές
- εφαρμοσμένος
- γύρω
- Παράταξη
- άρθρο
- τεχνητός
- ανατεθεί
- Αυτόματο
- αυτομάτως
- διαθέσιμος
- αναμένω
- πίσω
- φόντο
- πανό
- μπαρ
- βασικός
- πριν
- ΚΑΛΎΤΕΡΟΣ
- Καλύτερα
- μεταξύ
- Κομμάτι
- Μαύρη
- Μπλοκ
- Μηνύματα Blog
- Μπλε
- Κουτί
- φέρω
- πρόγραμμα περιήγησης
- σφάλματα
- χτίζω
- χτισμένο
- ενσωματωμένο
- κουμπί
- κρύπτη
- κλήση
- κλήσεις
- δυνατότητες
- περίπτωση
- σίγουρα
- πρόκληση
- αλλαγή
- καθαρός
- κωδικός
- Κωδικοποίηση
- χρώμα
- Στήλη
- Ελάτε
- Κοινός
- Διαγωνισμοί
- συστατικό
- εξαρτήματα
- συνέδρια
- Connect
- Συνδετικός
- πρόξενος
- περιεχόμενο
- Βολικός
- θα μπορούσε να
- Πορεία
- κάλυμμα
- Καλύμματα
- δημιουργία
- δημιουργήθηκε
- δημιουργία
- Ρεύμα
- Τη στιγμή
- ημερομηνία
- βάση δεδομένων
- Προεπιλογή
- Ορίζει
- delay
- καθυστερήσεις
- ανάπτυξη
- Υπηρεσίες
- καθέκαστα
- Dev
- Ανάπτυξη
- DID
- Display
- Όχι
- πράξη
- Μην
- κάθε
- αλλού
- αρκετά
- Ολόκληρος
- ολότητα
- σφάλμα
- κ.λπ.
- Even
- Κάθε
- πάντα
- παράδειγμα
- ενθουσιασμένοι
- Έξαψη
- υπάρχει
- ακριβά
- εξαγωγή
- εφικτός
- Χαρακτηριστικό
- λίγοι
- Πεδία
- Αρχεία
- Αρχεία
- Τελικά
- τέλος
- Φωτιά
- Όνομα
- σταθερός
- ίσια
- Εξής
- για πάντα
- μορφή
- μορφή
- μορφές
- Βρέθηκαν
- πλαισίων
- από
- πλήρη
- διασκέδαση
- λειτουργία
- λειτουργικότητα
- λειτουργίες
- παίρνω
- να πάρει
- Δώστε
- Δίνοντας
- Παγκόσμιο
- Go
- γκολ
- πηγαίνει
- μετάβαση
- πιάσε
- Group
- Ομάδα
- συμβαίνω
- Σκληρά
- κεφαλίδες
- βοήθεια
- εδώ
- κρυμμένο
- ιεραρχία
- υψηλού επιπέδου
- κατέχει
- Ας ελπίσουμε ότι
- Οριζόντιος
- Πως
- HTML
- HTTPS
- ΕΓΩ ΘΑ
- φαντασία
- εισαγωγή
- σπουδαιότητα
- εντυπωσιακός
- in
- Συμπεριλαμβανομένου
- αρχικός
- εισαγωγή
- αντί
- ενσωματώσει
- ενδιαφέρον
- Εισαγωγή
- IT
- αντικειμένων
- εαυτό
- το JavaScript
- Κλειδί
- Επίθετο
- αργότερο
- σχέδιο
- μάθηση
- Αφήνει
- Επίπεδο
- Li
- ζωή
- φως
- Πιθανός
- ΣΥΝΔΕΣΜΟΙ
- Λιστα
- ζω
- φορτίο
- φορτωτής
- φόρτωση
- φορτία
- Μακριά
- ματιά
- ΦΑΊΝΕΤΑΙ
- αναζήτηση
- τύχη
- μηχανήματα
- κάνω
- ΚΑΝΕΙ
- Κατασκευή
- διαχείριση
- Ταχύτητες
- Περιθώριο
- ύλη
- μέσα
- Μνήμη
- απλώς
- συγχώνευση
- μέθοδος
- ενδέχεται να
- νου
- Μονάδα μέτρησης
- περισσότερο
- μετακινήσετε
- κίνηση
- πολλαπλούς
- όνομα
- Ονομάστηκε
- nav
- Πλοηγηθείτε
- Πλοήγηση
- απαραίτητος
- Ανάγκη
- Νέα
- επόμενη
- κόμβος
- κανονικός
- αριθμός
- αντικείμενο
- αντικειμένων
- ONE
- τάξη
- ΑΛΛΑ
- αλλιώς
- δική
- Ειδικότερα
- μονοπάτι
- Εκτελέστε
- επιλέξτε
- κομμάτι
- κομμάτια
- κράτησης θέσης
- Πλάτων
- Πληροφορία δεδομένων Plato
- Πλάτωνα δεδομένα
- Σημείο
- Θέση
- Δημοσιεύσεις
- ενδεχομένως
- Προετοιμάστε
- Πρόβλημα
- διαδικασια μας
- παράγει
- προοδευτική
- σχέδιο
- Υπόσχεται
- περιουσία
- προστατεύονται
- παρέχουν
- παρέχει
- Τραβά
- βάζω
- ερώτηση
- Ακατέργαστος
- Διάβασε
- πραγματικός
- πραγματική ζωή
- Πραγματικότητα
- Red
- διευθύνω πάλιν
- Ανεξάρτητα
- παραμένουν
- θυμάμαι
- αφαιρέστε
- απόδοση
- καθιστά
- ζητήσει
- Υποστηρικτικό υλικό
- Αποτελέσματα
- απόδοση
- επιστροφή
- Επιστροφές
- Επαναφορά
- Πλούσιος
- ρίζα
- Διαδρομή
- δρομολόγια
- τρέξιμο
- τρέξιμο
- ίδιο
- Αποθήκευση
- βλέποντας
- εξυπηρετεί
- σειρά
- σκιά
- Κοινοποίηση
- Shared
- θα πρέπει να
- δείχνουν
- Απλούς
- απλά
- αφού
- ενιαίας
- Ολίσθηση
- So
- μερικοί
- κάτι
- Πηγές
- δαπανήσει
- Εκκίνηση
- ξεκίνησε
- έμεινε
- Βήματα
- στάση
- υποβάλουν
- Υποστηρίζει
- Επιφάνεια
- σύστημα
- τραπέζι
- TAG
- Πάρτε
- λήψη
- Συζήτηση
- Tandem
- στοχευμένες
- λέει
- πρότυπο
- τερματικό
- Η
- πράγματα
- παντού
- ώρα
- Τίτλος
- προς την
- μαζι
- πολύ
- εργαλεία
- Περιοδεία
- θεραπεία
- αληθής
- ΣΤΡΟΦΗ
- Typescript
- ui
- υπό
- Ενημέρωση
- ενημερώσεις
- URL
- us
- χρήση
- Χρήστες
- αξία
- Αξίες
- διάφορα
- μέσω
- Δες
- περιμένετε
- ήθελε
- τρόπους
- ιστός
- στοιχεία ιστού
- Web ανάπτυξη
- Τι
- Ποιό
- άσπρο
- θα
- νίκη
- χωρίς
- θαυμάσιος
- Εργασία
- λειτουργεί
- αξία
- θα
- γράφω
- Εσείς
- Σας
- zephyrnet