Heim >Web-Frontend >CSS-Tutorial >Erste Schritte mit SELTEKIT
Erste Schritte mit SELTEKIT
- Lisa KudrowOriginal
- 2025-03-09 10:42:14442Durchsuche
sveltekit ist ein Vertreter der neuen Generation von Anwendungsrahmen. Es wird natürlich Anwendungen für Sie erstellen, einschließlich dateibasiertes Routing, Bereitstellung und serverseitiger Rendering, das das nächste Mal immer bereitgestellt hat. SVELTEKIT unterstützt aber auch verschachtelte Layouts, serverseitige Mutationen synchronisierter Seitendaten und einige andere Funktionen, die wir bald vorstellen werden. Dieser Artikel zielt darauf ab, einen hohen Überblick über Sveltekit zu geben, in der Hoffnung, das Interesse von jemandem zu wecken, der Seltekit noch nie verwendet hat. Es wird eine leichte Reise. Wenn Ihnen das gefällt, was Sie sehen, ist die vollständige Dokumentation hier. in gewisser Weise ist das Schreiben dieses Artikels eine Herausforderung. Sufelskit ist ein Anwendungsrahmen . Es existiert, um Ihnen zu helfen, ... Apps zu erstellen. Dies erschwert die Demonstration. Das Erstellen einer gesamten Anwendung in einem Blog -Beitrag ist nicht möglich. Also werden wir unsere Fantasie ein wenig nutzen. Wir werden das Skelett der Anwendung aufbauen, wobei einige leere UI-Platzhalter und hartcodierte statische Daten verwendet werden. Ziel ist es nicht, eine tatsächliche Anwendung zu erstellen, sondern den laufenden Mechanismus von Suflekit zu zeigen, damit Sie Ihre eigene Anwendung erstellen können.
npm Sufle@LETCHSCHAFT IHRE-APP-NAME 
aus und beantworten Sie die Frage-Tipps. Wählen Sie unbedingt "Skeleton Project" aus, aber für Typscript, Eslint usw. können Sie jede Wahl treffen, wenn Sie möchten.<https:>
<p> Nachdem das Projekt erstellt wurde, führen Sie <code> npm i <https:> und <code> npm run dev <https:> aus, und der Entwicklungsserver sollte ausgeführt werden. Starten Sie <code> localhost: 5173 <https:> in Ihrem Browser und Sie erhalten die Platzhalterseite für die Skelettanwendung. <https:>
<h3> grundlegendes Routing <https:>
<p> Bitte beachten Sie den Ordner <code> Routen <https:> unter <code> src <https:>. Es enthält den Code für alle unsere Routen. Es gibt bereits eine <code> Seite. Unabhängig davon, wo Sie sich in der Dateihierarchie befinden, wird die tatsächliche Seite dieses Pfades immer <https:> Seite. In diesem Sinne lass uns <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712List <https:>, <code> https://www.php.cn/link/29a9f8460E50E2BE4EDDE5557FD837111112D83712D83712D83712D83712D83712D837112de2be2be4edde , <https:> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Adminhttps://www.php.cn/link/29A9f8460e5e2be4ed4ed4edde4edde4edde57fd83712uStoS2e5e2be4eded4edde57fd83712uStoS2e2Be4edEd5 und <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Adminhttps://www.php.cn/link/29a9f8460e5e5e5e5e2be4ed2be4ed2be4ed2be2be2be2be2be2b Platzhalter für jede Seite. <https:>
<code> Ihr Dateilayout sollte so aussehen: <https:>
<code> Sie sollten in der Lage sein, durch Ändern des URL -Pfades in der Adressleiste des Browsers zu navigieren. <https:>
<code> Layout <https:>
<https:> Wir möchten Navigationslinks zu unserer App hinzufügen, aber wir möchten nicht, dass ihre Tags auf jede von uns erstellte Seite kopiert werden. Erstellen wir also eine <p> layout.svelte <https:> -Datei im Root der <p> Routen <https:>, die Sveltekit als globale Vorlage für alle Seiten behandelt.Fügen wir dazu einige Inhalte hinzu: <https:>
<pre class="brush:php;toolbar:false"> <nav>
<ul>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712"> Home <https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list"> To-Do-Liste <https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712paid-status"> Kontostatus <https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712user-settings"> Benutzereinstellungen <https:>
<https:>
<https:>
<https:>
<slot> <https:>
<style>
nav {
Hintergrundfarbe: Beige;
}
nav ul {
Anzeige: Flex;
}
li {
Listenstil: Keine;
Rand: 15px;
}
A {
Textdekoration: Keine;
Farbe: Schwarz;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Einige grundlegende Navigation und einige grundlegende Stile. Besonders wichtig ist das <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Tag. Dieser <em> ist nicht der Steckplatz, den Sie mit Webkomponenten und Shadow DOM verwenden, sondern eine Funktion von Svelte, die angibt, wo unser Inhalt platziert wird. Wenn die Seite gerendert wird, gleitet der Seiteninhalt in den Ort, an dem sich der Schlitz befindet. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Jetzt haben wir eine Navigation! Wir werden keine Designwettbewerbe gewinnen, aber wir haben auch nicht versucht, das zu tun. <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> verschachteltes Layout <h3>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3> Was ist, wenn wir möchten, dass alle Managementseiten das normale Layout erben, das wir gerade erstellt haben, und auch einige gemeinsame Punkte aller Managementseiten (aber nur Managementseiten) teilen? Kein Problem, wir fügen dem Stammverzeichnis <p> admin <code> ein weiteres <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> layout hinzu.Lassen Sie uns dies tun und Folgendes hinzufügen: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <div> Dies ist eine Administratorseite <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div>
<slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>
<style>
div {
Polsterung: 15px;
Rand: 10px 0;
Hintergrundfarbe: Rot;
Farbe: weiß;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Wir fügen ein rotes Banner hinzu, das angibt, dass es sich um eine Administratorseite handelt, und wie zuvor gibt ein <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>, wo wir den Inhalt der Seite wünschen. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Unser vorheriges Root -Layout wird rendern. Es gibt ein <p> <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> im Stammlayout. Der Inhalt des verschachtelten Layouts tritt in das Stammlayout <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> ein. Schließlich definiert das verschachtelte Layout seine eigene <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> <code> <slot>, in der der Seiteninhalt gerendert wird. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Wenn Sie zur Administratorseite navigieren, sollten Sie ein neues rotes Banner sehen: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Daten <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> definieren
<h3> Okay, lasst uns einige tatsächliche Daten rendern - oder zumindest, wie wir einige tatsächliche Daten rendern. Es gibt viele Möglichkeiten, eine Datenbank zu erstellen und eine Verbindung herzustellen. In diesem Beitrag handelt es sich um Sveltkit, nicht um die Verwaltung von DynamoDB, daher werden wir stattdessen einige statische Daten "laden". Wir werden jedoch den gleichen Mechanismus verwenden, den Sie für reale Daten zum Lesen und Aktualisieren verwenden. Ersetzen Sie für reale Webanwendungen die Funktion, die statische Daten durch die Funktion zurückgibt, die jede von Ihnen verwendete Datenbank verbindet und abfragt. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> Erstellen wir ein sehr einfaches Modul in ATA.TS <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>, der einige statische Daten zusammen mit manuellen Verzögerungen zurückgibt, um die tatsächliche Abfrage zu simulieren. Sie werden diesen <p> lib <code> über <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> $ lib <code> sehen. Dies ist es, was Sveltekit für diesen speziellen Ordner bereitstellt, und Sie können sogar Ihren eigenen Alias hinzufügen.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> lass todos = [
{ID: 1, Titel: "Schreiben Sie Sveltekit Intro Blog -Beitrag", zugewiesen: "Adam", Tags: [1]},
{ID: 2, Titel: "Schreiben Sie Seltekit Advanced Data Loading Blog -Beitrag", zugewiesen: "Adam", Tags: [1]},
{ID: 3, Titel: "Renderatl Talk vorbereiten", zugewiesen: "Adam", Tags: [2]},
{ID: 4, Titel: "Alle Sveltekit -Fehler beheben", zugewiesen: "Rich", Tags: [3]},
{ID: 5, Titel: "Adams Blog -Beiträge bearbeiten", zugewiesen: "Geoff", Tags: [4]},
];
lass tags = [
{id: 1, name: "sveltekit content", color: "ded"},
{ID: 2, Name: "Konferenzen", Farbe: "Purple"},
{id: 3, name: "sveltekit Development", Farbe: "Pink"},
{ID: 4, Name: "CSS-Tricks Admin", Farbe: "Blue"},
];
Export const wait = async (Menge) = & gt; New Promise ((res) = & gt; setTimeout (res, Menge? 100));
exportieren
Warten Sie warten ();
Rückgabe von TODOS;
}
Exportieren Sie die asynchronisierte Funktion GetTags () {
Warten Sie warten ();
return tags.Rectuce ((Lookup, Tag) = & gt; {{
Lookup [tag.id] = Tag;
Return Lookup;
}, {});
}
exportieren
return todos.find ((t) = & gt; t.id == id);
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> 一个函数返回我们待办事项的扁平数组、我们的标签的查找以及获取单个待办事项的函数（我们将在 "详细信息" 页面中使用最后一个函数）。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> 加载数据 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> 我们如何将这些数据放入我们的 selta 页面？方法有很多 ， 但现在 ， 让我们在 <code> list <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 文件夹中创建一个 <code> Seite.Server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 文件 ， 并将此内容放在其中 ： ：>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> importieren {Gettodos, Gettags} von "$ libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Datahttps: //www.php.cn/link/29a9f8c8460e5e2be4edde55557fd83712todata";
Exportfunktion load () {
const todos = getTodos ();
const tags = gettags ();
zurückkehren {
Todos,
Tags,
};
} <pre class="brush:php;toolbar:false">
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> 我们定义了一个 <p> load () <code> 函数 ， 它会提取页面所需的数据。请注意 我们 我们 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 没有 <em> 等待对我们的 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em> GetTodos <code> 和 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> GetTags <code> 异步函数的调用。这样做会创建一个数据加载瀑布 ， 因为我们在加载标签之前等待待办事项进入。相反 ， 我们从> load <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 返回原始 verspricht ， sveltkit 会执行必要的等待工作。 会执行必要的等待工作。 会执行必要的等待工作。 我们从 我们从> lastetags ， sveltkit 会执行必要的等待工作。 因为我们在加载标签之前等待待办事项进入。相反 ， 我们从 <code><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Wie können wir diese Daten aus der Seitenkomponente aus zugreifen? Sveltekit liefert unserer Komponente ein <code> Daten <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Attribut mit Daten. Wir werden mit reaktiven Zuordnungen auf unsere Aufgaben und Tags zugreifen. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Unsere Listseitenkomponente sieht jetzt so aus. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <script>
Exportieren Sie Daten;
$: ({Todos, Tags} = data);
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<table>
<thead>
<tr>
<th> Task <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th> Tags <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th> zugewiesen <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tr>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712thead>
<tbody>
{#Each Todos als t}
<tr>
<td> {t.title} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<td> {t.tags.map ((id) = & gt; tags [id] .name) .join (',')} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<td> {t.Ssigned} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tr>
{https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712each}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tbody>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712table>
<style>
th {
Text-Align: links;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Dies sollte unsere To-Do-Liste rendern! <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> Layoutgruppe <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> Bevor wir zur Seite mit den Details und mutierten Daten übergehen, schauen wir uns einen kurzen Blick auf eine sehr clevere Funktion von SVVELTEKIT: <strong> Layoutgruppe <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>. Wir haben verschachtelte Layouts für alle Managementseiten gesehen, aber was ist, wenn wir Layouts zwischen willkürlichen Seiten auf derselben Ebene im Dateisystem teilen möchten? Was ist insbesondere, wenn wir das Layout nur zwischen unserer Listenseite und der Detail -Seite teilen möchten? Wir haben bereits ein globales Layout auf dieser Ebene. Stattdessen können wir ein neues Verzeichnis erstellen, aber der Name sollte in Klammern wie folgt platziert werden: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Wir haben jetzt eine Layoutgruppe, die die Liste und die Detailseiten abdeckt. Ich habe es <code> (Todo-Management) <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> genannt, aber Sie können es nennen, was Sie mögen.Es sollte klar sein, dass dieser Name <em> die URL der Seite in der Layoutgruppe nicht beeinflusst. Die URL bleibt gleich; <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>
<code> wir <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> können <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> ein <p> layout hinzufügen.Aber lass uns etwas Interessanteres tun. Das Layout kann die Funktion <code> load () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> definieren, um Daten für alle darunter liegenden Routen bereitzustellen. Verwenden wir diese Funktion, um unsere Tags zu laden - da wir unsere Tags auf der Detail -Seite verwenden - und die Listenseite, die wir bereits haben. Tatsächlich lohnt es sich mit ziemlicher Sicherheit nicht, die Layoutgruppe zu erzwingen, nur um eine einzelne Daten bereitzustellen. Aber für diesen Beitrag wird es eine Entschuldigung bieten, die wir benötigen, um neue Funktionen von Sveltekit zu sehen! <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Gehen wir zunächst zur <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> -Page.server.js <p> Datei der Listenseite und löschen Sie die Tags daraus. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> importieren a ";
Exportfunktion load () {
const todos = getTodos ();
zurückkehren {
Todos,
};
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> Unsere Listenseite sollte nun einen Fehler erzeugen, da es kein <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> Tags <p> Objekt gibt. Lassen Sie uns dieses Problem lösen, indem Sie der Layout -Gruppe eine <code> layout.Server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> -Datei hinzufügen, und definieren Sie dann eine <code> load () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>, die die Tags lädt. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> importieren a ";
Exportfunktion load () {
const tags = gettags ();
zurückkehren {
Tags,
};
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> Auf diese Weise wurde unsere Listenseite erneut gerendert! <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Wir laden Daten von mehreren Stellen <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h4> konzentrieren wir uns auf das, was hier vor sich geht: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h4>
<p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Wir definieren eine <ul> load () <li> für die Layoutgruppe und platzieren sie in <code> layout.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Dies liefert Daten für alle <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li> Seiten, die das Layout bedienen - in diesem Fall bedeutet dies unsere Liste und Detailseiten.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> Unsere List -Seite definiert auch eine <code> load () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> funktion in ihrer <code> page.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Datei. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> sveltekit führt ein starkes Heben durch, wodurch die Ergebnisse dieser Datenquellen zusammengeführt und beide in <code> Daten <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> bereitgestellt werden. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul>
<h3> Details Seite <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> Wir werden die Detail-Seite verwenden, um die Aufgabenliste zu bearbeiten. Lassen Sie uns zunächst der Listenseite eine Spalte hinzufügen, die zur Detailseite der Abfragezeichenfolge mit der TO-DO-ID verlinkt wird. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <td> <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details?id={t.id}"> bearbeiten <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Erstellen wir jetzt die Detail -Seite. Zunächst werden wir einen Loader hinzufügen, um das Aufgabenartikel zu erhalten, den wir bearbeiten. Erstellen Sie eine <code> page.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> in <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Details <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> mit dem folgenden Inhalt: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> importieren a ";
Exportfunktion Load ({url}) {
const id = url.searchParams.get ("id");
const todo = getTodo (id);
zurückkehren {
Todo,
};
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Unser Loader wird mit dem Attribut <code> url <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> ausgestattet, aus dem wir Abfragestnungswerte extrahieren können. Dies erleichtert es einfach, die To-Do-Liste zu finden, die wir bearbeiten. Lassen Sie uns das To-Do rendern und die Funktion bearbeiten. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> sveltekit hat eine ausgezeichnete integrierte Veränderbarkeit, solange Sie das Formular verwenden. Erinnerst du dich an die Form? Hier ist unsere Detail -Seite. Der Einfachheit halber habe ich Stile weggelassen.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <script>
Import {Enhance} aus "$ apphttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Forms";
Exportieren Sie Daten;
$: ({Todo, Tags} = data);
$: currentTags = todo.tags.map ((id) = & gt; tags [id]);
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<div>
{#Each CurrentTags als Tag}
{Tag.Name}
{https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712each}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div>
<form method="POST" action="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712editTodo" use:enhance>
<input type="hidden" name="id" value={todo.id} https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712>
<input type="text" name="title" bind:value={todo.title} https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712>
<button type="submit"> Speichern <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712button>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712form> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Wir erhalten das Etikett vom Lader der Layoutgruppe wie zuvor und die Aufgabenelemente aus dem Loader der Seite. Wir erhalten das eigentliche Tag-Objekt aus der To-Do-Liste der Tag-IDs und machen dann alles. Wir erstellen ein Formular mit einer versteckten ID -Eingabe und einer echten Titeleingabe. Wir zeigen das Etikett an und geben dann eine Schaltfläche an, um das Formular einzureichen. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Wenn Sie <code> Verwendung: Verbesserung <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> bemerken, sagt dies nur, dass Seltekit progressive Verbesserung und AJAX verwendet, um unser Formular einzureichen. Sie können es immer verwenden. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h4> Wie sparen wir unsere Änderungen? <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h4>
<p> Beachten Sie die <code> action = "? Https: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712edittodo" <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Attribut auf der Form selbst? Dies sagt uns, wo wir die bearbeiteten Daten einreichen möchten. Für unseren Fall möchten wir uns einer <code> edittodo <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> "Aktion" unterwerfen.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Erstellen wir es, indem Sie Folgendes zur <code> Seite addieren.
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> import {redirect} aus "@sveltEjshttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712kit";
importieren ";
https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde57fd83712 ...
exportieren const actions = {
Async edittodo ({request}) {
const formData = warte request.FormData ();
const id = formData.get ("id");
const newtitle = formData.get ("title");
Warten Sie warten (250);
Warten Sie UpdateTodo (ID, Newtitle);
REDirect (303, "https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712List");
},
}; <code>
Die <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Formataktion bietet uns ein <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> -Anforderungsobjekt, das Zugriff auf unsere <pre class="brush:php;toolbar:false"> FormData <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> bietet, die eine <p> -Methode für unsere verschiedenen Formularfelder hat. Wir haben eine versteckte ID-Werteingabe hinzugefügt, damit wir sie hierher bringen können, um das aufgeben, das wir bearbeiten. Wir simulieren die Verzögerung, rufen die neue <code> updateTodo () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> auf und leiten Sie den Benutzer auf die <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712List <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Seite. Die <code> updateTodo () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> aktualisiert einfach unsere statischen Daten. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> asynchronisierte Funktion updateTodo (ID, Newtitle) {
const todo = todos.find ((t) = & gt; t.id == id);
Object.Sign (Todo, {Titel: Newtitle});
} <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Versuchen wir es. Wir gehen zuerst zur Listenseite: <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Klicken Sie nun auf die Schaltfläche Bearbeiten, um eines der To-Do-Elemente zu erhalten, um die Bearbeitungsseite in <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Details <pre class="brush:php;toolbar:false"> zu formulieren.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Wir werden einen neuen Titel hinzufügen: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Klicken Sie jetzt auf Speichern.Dies sollte uns auf die <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712List <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> zurückbringen und den neuen To-Do-Titel anwenden. <p>
<code> Wie erschien der neue Titel? Dies ist automatisch. Sobald wir die <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712List <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Seite <p> als alle unsere Ladegeräte wie üblich wiederholt. Dies ist ein wesentlicher Fortschritt, das Anwendungsrahmen für die neue Generation wie Seltekit, Remix und Next 13 anbieten. Anstatt Ihnen eine bequeme Möglichkeit zu geben, Seiten zu rendern, und dann viel Glück bei den Endpunkten, die Sie möglicherweise aktualisieren müssen, integrieren sie die Datenmutation in die Datenlast, sodass die beiden zusammenarbeiten können. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Einige Dinge, die Sie vielleicht wissen möchten ... <strong>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Dieses Mutations -Update erscheint nicht zu beeindruckend. <p> Der Loader wird wieder ausgeführt, während Sie navigieren. Was passiert, wenn wir keine Umleitung in der Form -Aktion hinzufügen, sondern auf der aktuellen Seite bleiben? Sveltekit führt Updates in Formularoperationen wie zuvor durch, wird jedoch weiterhin alle Lader für die aktuelle Seite weitergeben, einschließlich derer im Seitenlayout. <strong>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong> <code> Können wir eine gezieltere Möglichkeit haben, unsere Daten ungültig zu machen? <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Zum Beispiel werden unsere Tags nicht bearbeitet, so dass wir sie im wirklichen Leben nicht erneut fordern wollen. Ja, alles, was ich Ihnen zeige, ist das Standardformform -Verhalten in SELTEKIT. Sie können das Standardverhalten ausschalten, indem Sie einen Rückruf zur Verwendung von <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> verwenden: Verbesserung <p>. SVELTEKIT bietet dann eine manuelle Fehlerfunktion. <strong>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Das Laden von Daten jedes Mal, wenn Sie navigieren, kann teuer und unnötig sein. <p> Kann ich diese Daten wie ein Tool wie React-Query zwischenspeichern? Ja, es ist einfach anders. Mit Seltekit können Sie die Cache -Steuerelemente, die das Web bereitgestellt hat, festlegen (und dann respektieren). Ich werde den Cache -Versagenmechanismus in einem nachfolgenden Artikel einführen. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Wir verwenden statische Daten im gesamten Artikel und ändern die Werte im Speicher. Wenn Sie alles wiederherstellen und von vorne beginnen müssen, stoppen Sie und starten Sie den Vorgang <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> npm aus. <h3>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3> Zusammenfassung <p>
<🎜> Wir haben gerade die Oberfläche von Sveltekit berührt, aber hoffentlich haben Sie etwas gesehen, das ausreicht, um Sie zu begeistern.Ich erinnere mich nicht an das letzte Mal, als ich die Webentwicklung so interessant fand. Mit außergewöhnlichen Funktionen wie Bündelung, Routing, SSR und Bereitstellung kann ich mehr Zeit codieren als das Konfigurieren. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Folgendes sind weitere Ressourcen, die Sie als die nächsten Schritte zum Erlernen von Sveltekit verwenden können: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<ul>
<li> Ankündigte Sveltekit 1.0 (Svelt -Blog) <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> sveltekit Anfängerkurs (Vercel) <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> sveltekit dokumentation <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul></style></https:></slot></https:></https:></https:></https:></a>
</li></https:></https:></a>
</li></https:></https:></a>
</li></https:></https:></a>
</li>
</ul></nav></pre></https:></https:></p></https:></p></https:></https:>
Das obige ist der detaillierte Inhalt vonErste Schritte mit SELTEKIT. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!