Sveltekitを始めましょう
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1671
14
1428
52
1331
25
1276
29
1256
24
SASSをより速くするための概念の証明
Apr 16, 2025 am 10:38 AM
新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。
毎週のプラットフォームニュース：HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動
Apr 17, 2025 am 10:55 AM
今週のプラットフォームニュースのラウンドアップで、Chromeは、Web開発者のロード、アクセシビリティ仕様、およびBBCの動きのための新しい属性を導入します
HTMLダイアログ要素を使用したいくつかの実践
Apr 16, 2025 am 11:33 AM
これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです
ペーパーフォーム
Apr 16, 2025 am 11:24 AM
購入またはビルドは、テクノロジーの古典的な議論です。自分で物を構築することは、あなたのクレジットカードの請求書にはラインアイテムがないため、安価に感じるかもしれませんが
「ポッドキャストにサブスクライブ」リンクはどこにすべきですか？
Apr 16, 2025 pm 12:04 PM
しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合：
毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター
Apr 17, 2025 am 11:26 AM
今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。
独自の非JavaScriptベースの分析をホストするためのオプション
Apr 15, 2025 am 11:09 AM
サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています
