Sveltekitは、新世代のアプリケーションフレームワークを代表しています。もちろん、ファイルベースのルーティング、展開、サーバー側のレンダリングなど、次に提供されているサーバー側のレンダリングなど、アプリケーションを構築します。しかし、Sveltekitは、ネストされたレイアウト、同期されたページデータのサーバー側の突然変異、およびすぐに紹介するその他の機能もサポートしています。 この記事は、Sveltekitを使用したことがない人の興味を刺激することを望んで、Sveltekitの高レベルの概要を示すことを目的としています。簡単な旅になります。あなたが見るものが好きなら、完全なドキュメントはこちらです。 いくつかの点で、この記事を書くことは挑戦的です。 Sveltekitはアプリケーションフレームワークです。それはあなたが構築するのを助けるために存在します...アプリ。これにより、デモが難しくなります。ブログ投稿にアプリケーション全体を構築することは実行不可能です。したがって、私たちは想像力を少し使います。空のUIプレースホルダーとハードコーディングされた静的データを使用して、アプリケーションのスケルトンを構築します。目標は、実際のアプリケーションを構築することではなく、Sveltekitの実行中のメカニズムを表示して、独自のアプリケーションを構築できるようにすることです。
npm i 
npmを実行しますsvelte@最新のyour-app-name
および<https:>npm run dev<code>を実行し、開発サーバーの実行を開始する必要があります。起動<https:>localhost：5173<code>ブラウザで、スケルトンアプリケーションのプレースホルダーページを取得します。 <https:>
<https:>基本的なルーティング<h3>
<src> src <https:>の下の<p>ルート<code>フォルダーに注意してください。すべてのルートのコードが含まれています。ルートの内容を含む<https:> page.svelte<code>ファイルが既にあります。ファイル階層のどこにいても、そのパスの実際のページには常に<https:>page.svelte<code>という名前が付けられています。これを念頭に置いて、しましょう<https:>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list <code>、<https:>https://www.php.cn/link/29a9f8c8840e5e2be4de57 、<code>https://www.php.cn/link/29a9f8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e5e2be4edde57fuss83712usおよび<https:>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edede57fdectuspatus各ページのテキストプレースホルダー。 <code>
<https:>ファイルレイアウトは次のようになります
<code>ブラウザのアドレスバーのURLパスを変更することでナビゲートできるはずです。 <https:>
<code>レイアウト<https:>
<code>アプリにナビゲーションリンクを追加する必要がありますが、作成した各ページにタグをコピーすることは確かにありません。それでは、Sveltekitがすべてのページのグローバルテンプレートとして扱う<https:>ルートのルートで<https:> layout.svelte<p>ファイルを作成しましょう。それにコンテンツを追加しましょう：<https:>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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リスト<https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712paid-status">アカウントステータス<https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712user-settings">ユーザー設定<https:>
<https:>
<https:>
<https:>
<slot><https:>
<style>
nav {
背景色：ベージュ;
}
nav ul {
ディスプレイ：Flex;
}
li {
リストスタイル：なし;
マージン：15px;
}
{
テキスト装置：なし;
色：黒;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>いくつかの基本的なナビゲーションといくつかの基本的なスタイル。特に重要なのは、<code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>タグです。これは、WebコンポーネントとShadow Domで使用するスロットではなく、コンテンツの配置場所を示すSvelteの機能です。ページがレンダリングされると、ページコンテンツがスロットが配置されている場所にスライドします。 <em>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>ナビゲーションがあります！デザインの競争には勝ちませんが、それもやろうとはしませんでした。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>ネストされたレイアウト<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>すべての管理ページに、構築したばかりの通常のレイアウトを継承し、すべての管理ページ（ただし管理ページのみ）の共通点を共有したい場合はどうなりますか？問題ありません。別の<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>layout.svelte<p>をroot<code>admin<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>ディレクトリに追加すると、その下のすべてに継承されます。これをして、これを追加しましょう：<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"><div>これは管理ページ<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div>です
<slot><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>
<style>
div {
パディング：15px;
マージン：10px 0;
背景色：赤;
色：白;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>これが管理ページであることを示す赤いバナーを追加し、以前と同様に、<code> <slot><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>は、ページのコンテンツをどこに行きたいかを示します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>以前のルートレイアウトがレンダリングされます。ルートレイアウトには<p><code> <slot><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>タグがあります。ネストされたレイアウトの内容は、ルートレイアウト<最後に、ネストされたレイアウトは、ページのコンテンツがレンダリングされる独自の<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> <code><slot>を定義します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>管理ページに移動する場合は、新しい赤いバナーが表示されます。
<code>データを定義<slot>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>わかりました、実際のデータをレンダリングしましょう。または、少なくとも実際のデータをどのようにレンダリングするかを見てみましょう。データベースを作成して接続する方法はたくさんあります。この投稿は、dynamodbを管理していないSveltekitに関するものなので、代わりにいくつかの静的データを「ロード」します。ただし、実際のデータに使用するのと同じメカニズムを使用して、読み取り、更新します。実際のWebアプリケーションの場合、静的データを返す関数を、使用するデータベースを接続してクエリする関数に置き換えます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p><p>libhttps：//www.php.cn/link/29a9f8c8c8460e5e2be4edde557fd83712datahttps：///www.php.cn/link/29a9f8c8460pde54ded844ded8444ded8444deddathttps odata.ts<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>これは、実際のクエリをシミュレートするために手動の遅延とともにいくつかの静的データを返します。これは、<h3>$ lib<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>を介して他の場所にインポートされている<p>lib<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>フォルダーが表示されます。これは、Sveltekitがその特定のフォルダーに提供するものであり、独自のエイリアスを追加することもできます。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> todos = [
{id：1、title： "sveltekitイントロブログ投稿を書く"、割り当て： "adam"、tags：[1]}、
{id：2、title： "sveltekit write sveltekit dibanced data loading blog郵便"、assioned： "adam"、tags：[1]}、
{id：3、title： "prepare renderatl talk"、assigned： "adam"、tags：[2]}、
{id：4、title：「すべてのsveltekitバグを修正」、割り当てられた： "rich"、tags：[3]}、
{ID：5、タイトル：「Adamのブログ投稿を編集」、割り当てられた：「Geoff」、タグ：[4]}、
];
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"}、
];
エクスポートconst wait = async（nomul）=＆gt; New Promise（（res）=＆gt; setimeout（res、金額?? 100））;
async関数をエクスポートgettodos（）{
待ってください（）;
Todosを返します。
}
async関数gettags（）をエクスポート{
待ってください（）;
return tags.reduce（（lookup、tag）=＆gt; {
lookup [tag.id] = tag;
return lookup;
}、{}）;
}
async関数gettodo（id）をエクスポートする{
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>我们如何将这些数据放入我们的svelte 页面？方法有很多、但现在、让我们在<code>リスト<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>文件夹中创建一个<code> page.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>Import {gettodos、gettags}から"$ libhttps：//www.php.cn/link/29a9f8460e5e2be4edde557fd83712datahttps：//www.php.cn/link/29a9f8c8460e5e5e5e4ede5557fd83712ta";
export function load（）{
const todos = gettodos（）;
const tags = gettags（）;
戻る {
トドス、
タグ、
};
}<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><code>等待对我们的<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>gettodos<code>和<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>gettags <code><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>では、ページコンポーネントからこのデータにどのようにアクセスしますか？ Sveltekitは、コンポーネントに<code> data<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>属性をデータとともに提供します。リアクティブな割り当てを使用して、to-dosとタグにアクセスします。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>リストページコンポーネントは次のようになりました。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"><script>
データをエクスポートします。
$ ：（ {todos、tags} = data）;
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<table>
<thead>
<tr>
<th>タスク<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th>タグ<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th>割り当て<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tr>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712thead>
<tbody>
{#each todos as t}
<tr>
<td>{t.title} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<td>{t.tags.map（（id）=＆gt; tags [id] .name）.jein（ '、'）} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<td> {t.assigned} <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 {
テキストアライグ：左;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>これにより、To Doリストが表示されるはずです！ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>レイアウトグループ<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>詳細ページと変異したデータに移る前に、Sveltekitの非常に巧妙な機能：<strong>レイアウトグループ<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>を簡単に見てみましょう。すべての管理ページのネストされたレイアウトを見てきましたが、ファイルシステムの同じレベルで任意のページ間でレイアウトを共有したい場合はどうでしょうか？特に、リストページと詳細ページ間でレイアウトを共有したい場合はどうなりますか？すでにそのレベルでグローバルなレイアウトがあります。代わりに、新しいディレクトリを作成できますが、名前は次のようにブラケットに配置する必要があります。
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>リストと詳細ページをカバーするレイアウトグループがあります。私はそれを<p>（todo-management）<code>と名付けましたが、好きなものは何でも名前を付けることができます。この名前がレイアウトグループのページのURLに影響しないことは明らかです。 URLは同じままです。レイアウトグループは、すべてのレイアウトをページに追加できます。 <em>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em><code><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>レイアウトを追加できます。svelte<p>ファイルと、「ねえ、私たちは何をしているのか」と言っている愚かな<em><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>バナーです。しかし、もっと面白いことをしましょう。レイアウトは、<code>load（）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>関数を定義して、その下のすべてのルートのデータを提供できます。この機能を使用してタグを読み込みましょう。詳細ページにタグを使用し、リストページを既に使用しています。実際、単一のデータを提供するためだけにレイアウトグループを強制することは、ほぼ確実に価値がありません。しかし、この投稿では、Sveltekitの新機能を見るために必要な言い訳を提供します！ <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>最初に、リストページの<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>page.server.js<p>ファイルにアクセスして、そこからタグを削除しましょう。 <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> intorm {gettodos} from "$ libhttps：//www.php.cn/link/29a9f8c8460e5e2bbe4edde557fd83712datahttps：//www.php.cn/link/29a9f8c8460pde57pde57pdeddedpedpedded ata ";
export function load（）{
const todos = gettodos（）;
戻る {
トドス、
};
}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">リストページは、<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>タグ<p>オブジェクトがないため、エラーが発生するようになりました。この問題を解決して、A <server.server.js<code>ファイルをレイアウトグループに追加し、タグをロードする<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>load（）<code>関数を定義します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
「$ libhttps：//www.php.cn/link/29a9f8c8460e5e2bbe4edde557fd83712datahttps：//www.php.cn/link/29a9f8c8460pde57pde57pde570e2de54de570pde570pde570pdeddedde5570pde570pttps ata ";
export function load（）{
const tags = gettags（）;
戻る {
タグ、
};
}<code>
このように、リストページは再びレンダリングされました！ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>複数の場所からデータをロードしています<pre class="brush:php;toolbar:false">
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>ここで何が起こっているのかに焦点を当てましょう：<p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h4>レイアウトグループのa <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h4>load（）<p>関数を定義し、<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>layout.server.js<ul>に配置します。 <li>
これにより、レイアウトにサービスを提供するすべての<code>ページのデータが提供されます。この場合、これは私たちのリストと詳細ページを意味します。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li>リストページは、<server.js<code>ファイルにある<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> load（）<code>関数も定義しています。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>sveltekitは重い持ち上げを実行し、これらのデータソースの結果を一緒に統合し、両方を<li>データ<code>を提供します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul>詳細ページ<h3>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>詳細ページを使用して、To Doリストを編集します。まず、To-Do IDを含むクエリ文字列の詳細ページにリンクする列をリストページに追加しましょう。 <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> <pre class="brush:php;toolbar:false"><td>編集<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details?id={t.id}"> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>今すぐ詳細ページを作成しましょう。まず、ローダーを追加して、編集しているTo Doアイテムを取得します。 <p> page.server.js<code>in<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details<code>次のコンテンツ：<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> intorm {gettodo} from "$ libhttps：//www.php.cn/link/29a9f8c8460e5e5e2be4edde557fd83712datahttps：//www.php.cn/link/29a9f8c8460pde57pdeddedpeddedpeddedpdedpedded ata ";
エクスポート関数負荷（{url}）{
const id = url.searchparams.get（ "id"）;
const todo = gettodo（id）;
戻る {
トッド、
};
}<pre class="brush:php;toolbar:false">
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>私たちのローダーには、クエリの文字列値を抽出できる<p>url<code>属性が付属しています。これにより、編集しているTo Doリストを簡単に見つけることができます。 to-doをレンダリングし、関数を編集しましょう。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>Sveltekitには、フォームを使用する限り、優れた組み込みの可変性があります。フォームを覚えていますか？これが詳細ページです。簡単にするために、スタイルを省略しました。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"><script>
「$ apphttps：//www.php.cn/link/29a9f8c8460e5e5e2be4edde557fd83712forms "から{entance}をインポートします。
データをエクスポートします。
$：（{todo、tags} = data）;
$：currenttags = todo.tags.map（（id）=＆gt; tags [id]）;
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<div>
{#each currentTagsとしてタグ}
{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"> save<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712button>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712form><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>レイアウトグループのローダーから以前のようにラベルと、ページのローダーからTo Doアイテムを取得します。タグIDのto-doリストから実際のタグオブジェクトを取得し、すべてをレンダリングします。非表示のID入力と実際のタイトル入力を備えたフォームを作成します。ラベルを表示し、フォームを送信するボタンを提供します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <code>使用に気づいた場合：拡張<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>、これはSveltekitにプログレッシブエンハンスメントとAJAXを使用してフォームを送信するように指示するだけです。常に使用できます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h4>編集をどのように保存しますか？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h4>
<p> <code>action = "？https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712edittodo"<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>フォーム自体の属性？これにより、編集されたデータをどこに送信するかがわかります。私たちのケースでは、<code>edittodo <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> "Action"に提出したいと考えています。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<server.server.js<p>ファイルに次のように追加して作成してみましょう（詳細」を既に提供しています（現在、ファイルには<code>load（）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>関数があります。
<sveltejshttps：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712kit "から<code> import {redirect}から{redirect}。
「$ libhttps：//www.php.cn/link/29a9f8c8460e5e2bbe4edde557fd83712datahttps：//www.php.cn/link/29a9f8c8460e4de4de2be4de2be4de2de257pdde257pdde257pdde2be4dde2be4dedahtttstpsttsttsttsttsttsttsttps」から{updatodo、wait}をインポートしてくださいa ";
https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4ede557fd83712 ...
constアクションをエクスポート= {
async edittodo（{request}）{
const formdata = await request.formdata（）;
const id = formdata.get（ "id"）;
const newtitle = formdata.get（ "title"）;
待っています（250）;
updateTodo（id、newtitle）を待っています。
スローリダイレクト（303、 "https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list"）;
}、
}; <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
フォームアクションは、さまざまなフォームフィールドに<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> formdata <pre class="brush:php;toolbar:false">メソッドを備えた<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> formdata<p>へのアクセスを提供する<code>リクエスト<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>オブジェクトを提供します。編集中のTo-Doを見つけるためにここでそれを取得できるように、Hidden ID値入力を追加しました。遅延をシミュレートし、new<code>updateTodo（）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>メソッドを呼び出し、ユーザーを<code>https://www.php.cn/link/29a9f8c8460e5e2bbe4edde557fd83712リスト<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>ページに戻します。 <code>updateTodo（）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>メソッドは、実生活では単純に更新されます。 <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>async関数updateTodo（id、newtitle）をエクスポート{{
const todo = todos.find（（t）=＆gt; t.id == id）;
object.Assign（todo、{title：newtitle}）;
}<code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>試してみましょう。最初にリストページに進みます：<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">次に、To-Doアイテムの1つの編集ボタンをクリックして、<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>https://www.php.cn/link/link/29a9f8c8460e5e5e2be4edde557fd83712details<p>で編集ページを表示しましょう。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>新しいタイトルを追加します：<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>さあ、[保存]をクリックします。これにより、<code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>ページに戻り、新しいto-doタイトルを適用します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>新しいタイトルはどのように登場しましたか？これは自動です。 <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>ページにリダイレクトすると、sveltekitはすべてのローダーを通常のように自動的に繰り返します。これは、Sveltekit、Remix、次の13のオファーなどの新世代アプリケーションフレームワークが提供する重要な進歩です。ページをレンダリングする便利な方法を提供する代わりに、データを更新する必要があるエンドポイントを取得することは幸運で、データのロードとデータのロードを統合し、2つを連携させることができます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>知りたいことがあるかもしれないこと... <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p><strong>この突然変異の更新はそれほど印象的ではないようです。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>ナビゲート中にローダーが再び実行されます。フォームアクションにリダイレクトを追加せず、代わりに現在のページにとどまるとどうなりますか？ Sveltekitは、以前と同様にフォーム操作の更新を実行しますが、ページレイアウトのものを含む現在のページのすべてのローダーを再実行します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p><strong>データを無効にするためのよりターゲットを絞った方法を持つことができますか？たとえば、<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>タグは編集されていないため、実生活ではそれらを再クエリにしたくありません。はい、私があなたに示しているのは、Sveltekitのデフォルトのフォーム動作だけです。 <code>使用にコールバックを提供することにより、デフォルトの動作をオフにすることができます。 Sveltekitは、手動障害関数を提供します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p><p>ナビゲートするたびにデータを読み込むことは、高価で不要になる可能性があります。 <strong>このデータは、React-Queryのようなツールのようにキャッシュできますか？はい、それはただ違うです。 Sveltekitを使用すると、Webが提供したキャッシュコントロールヘッダーを設定（および尊重）できます。後続の記事でキャッシュ障害メカニズムを紹介します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>記事全体で静的データを使用し、メモリ内の値を変更します。すべてを復元して最初からやり直す必要がある場合は、<p>npm run dev<code>ノードプロセスを停止して再起動します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>要約<h3>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3> Sveltekitの表面に触れましたが、あなたが興奮するのに十分なものを見てきたことを願っています。Web開発がとても面白いと思ったのを最後に覚えていません。バンドリング、ルーティング、SSR、展開など、すぐに使用できる機能を使用すると、構成よりもコーディングに多くの時間を費やすことができます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>以下は、Sveltekitを学ぶための次のステップとして使用できるリソースをいくつかあります：<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<ul>
<li>Sveltekit 1.0（Svelte blog）を発表しました<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li>Sveltekit初心者コース（Vercel）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li>sveltekitドキュメント<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><div class="contentsignin">ログイン後にコピー</div></div></https:></p></https:></https:>
以上がSveltekitを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
