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:>
<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></https:></p></https:></https:>
以上がSveltekitを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
@KeyFrames対CSSトランジション：違いは何ですか？May 14, 2025 am 12:01 AM@keyframesandcsstransitionsdifferincomplexity：@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。
静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM私は知っています、私は知っています：たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY＆＃039;知っているものはありませんでしたか？奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります＆
HTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AMCSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1）タグを使用して、ローカルCSSファイルをリンクします。 2）複数のタグを追加することにより、複数のCSSファイルを実装できます。 3）外部CSSファイルは、そのような絶対URLリンクを使用します。 4）ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。
CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AMFlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。
CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AMCSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。
FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AMはい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを
軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。
CSSアニメーション：それらを作成するのは難しいですか？May 09, 2025 am 12:03 AMcssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1）
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
SublimeText3 中国語版
中国語版、とても使いやすい
ドリームウィーバー CS6
ビジュアル Web 開発ツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
