. Ia wujud untuk membantu anda membina ... aplikasi. Ini menjadikan demonstrasi sukar. Membina keseluruhan aplikasi dalam catatan blog tidak boleh dilaksanakan. Jadi kita akan menggunakan imaginasi kita sedikit. Kami akan membina rangka aplikasi, menggunakan beberapa ruang letak UI kosong dan data statik yang berkod keras. Matlamatnya bukan untuk membina aplikasi sebenar, tetapi untuk menunjukkan kepada anda mekanisme Sveltekit yang berjalan supaya anda dapat membina aplikasi anda sendiri.
Semua kod dalam artikel ini boleh didapati di GitHub. Projek ini juga telah digunakan di Vercel untuk demonstrasi masa nyata. Buat projek di terminal dan jawab petua soalan. Pastikan untuk memilih "Projek Skeleton", tetapi untuk TypeScript, Eslint, dan lain -lain, anda boleh membuat pilihan jika anda mahu. Selepas projek itu dibuat, jalan 
Sangat mudah untuk memulakan projek Sveltekit baru. Jalankan
npm i <https:> dan <code> npm run dev <https:>, dan pelayan pembangunan harus mula berjalan. Pelancaran <code> localhost: 5173 <https:> dalam penyemak imbas anda dan anda akan mendapat halaman tempat untuk aplikasi Skeleton. <https:>
<h3> Routing Asas <https:>
<p> Sila ambil perhatian folder <code> <https:> di bawah <code> src <https:>. Ia mengandungi kod untuk semua laluan kami. Terdapat fail <code> page.svelte <st> yang mengandungi kandungan akar <https:> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 <code> Tidak kira di mana anda berada dalam hierarki fail, halaman sebenar laluan itu selalu dinamakan <https:> page.svelte <code>. Dengan ini, mari <https:> https://www.php.cn/link/29a9f8c8460e5e2be4edde5557fd83712list <code>, <https:> https://www.php.cn , <stww.cn dan pemegang letak teks untuk setiap halaman.>
<https:> susun atur fail anda sepatutnya kelihatan seperti ini: <code>
<https:> anda harus dapat menavigasi dengan menukar laluan URL di bar alamat penyemak imbas. <code>
<https:> Layout <https:>
<p> Kami mahu menambah pautan navigasi ke aplikasi kami, tetapi kami pasti tidak mahu tag mereka disalin ke setiap halaman yang kami buat. Oleh itu mari kita buat fail <stsvelte> di akar folder <p> <https:> folder, yang Sveltekit akan dianggap sebagai templat global untuk semua halaman.Mari tambahkan beberapa kandungan kepadanya: <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"> rumah <https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list"> Senarai To-Do <https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712paid-status"> status akaun <https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712user-settings"> Tetapan Pengguna <https:>
<https:>
<https:>
<https:>
<slot> <https:>
<style>
nav {
latar belakang warna: beige;
}
nav ul {
Paparan: Flex;
}
li {
Senarai gaya: Tiada;
Margin: 15px;
}
{
Teks-penyerapan: Tiada;
Warna: Hitam;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Beberapa navigasi asas dan beberapa gaya asas. Apa yang penting ialah tag <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> <s>. Ini <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> bukan slot yang anda gunakan dengan komponen web dan bayangan dom, tetapi ciri svelte yang menunjukkan di mana kandungan kami diletakkan. Apabila halaman diberikan, kandungan halaman akan meluncur ke lokasi di mana slot terletak. <em>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em> Sekarang kita mempunyai beberapa navigasi! Kami tidak akan memenangi sebarang pertandingan reka bentuk, tetapi kami tidak cuba untuk melakukannya sama ada. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> susun atur bersarang <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> Bagaimana jika kita mahu semua halaman pengurusan mewarisi susun atur biasa yang baru kita bina dan juga berkongsi beberapa titik umum dari semua halaman pengurusan (tetapi hanya halaman pengurusan)? Tidak ada masalah, kami menambah satu lagi <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3> susun atur.svelte <p> ke direktori akar <code> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> dan ia akan diwarisi oleh segala -galanya di bawahnya.Mari buat ini dan tambahkan ini: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <div> Ini adalah halaman admin <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div>
<slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>
<style>
div {
Padding: 15px;
Margin: 10px 0;
latar belakang warna: merah;
Warna: Putih;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Kami menambah sepanduk merah yang menunjukkan bahawa ini adalah halaman admin, dan kemudian, seperti dahulu, A <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> menunjukkan di mana kami mahu kandungan halaman itu pergi. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> susun atur akar sebelumnya akan diberikan. Terdapat tag <p> <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> dalam susun atur akar. Kandungan susun atur bersarang memasuki susun atur akar <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> <code> <slot> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>. Akhirnya, susun atur bersarang mentakrifkan sendiri <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> <code> <slot> di mana kandungan halaman akan diberikan. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Jika anda menavigasi ke halaman admin, anda harus melihat sepanduk merah baru: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Tentukan data <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> Baiklah, mari kita jadikan beberapa data sebenar - atau sekurang -kurangnya melihat bagaimana kita memberikan beberapa data sebenar. Terdapat banyak cara untuk membuat dan menyambung ke pangkalan data. Siaran ini adalah mengenai Sveltekit, tidak menguruskan DynamoDB, jadi kami sebaliknya akan "memuatkan" beberapa data statik. Walau bagaimanapun, kami akan menggunakan mekanisme yang sama yang anda gunakan untuk data sebenar untuk membaca dan mengemas kini. Untuk aplikasi web sebenar, gantikan fungsi yang mengembalikan data statik dengan fungsi yang menghubungkan dan menanyakan mana -mana pangkalan data yang anda gunakan. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> mari kita buat modul yang sangat mudah dalam libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps: //www.cn Ata.ts <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> yang mengembalikan beberapa data statik bersama -sama dengan kelewatan manual untuk mensimulasikan pertanyaan sebenar. Anda akan melihat folder ini <p> lib <code> yang diimport di tempat lain melalui <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> $ lib <code>. Inilah yang disediakan oleh Sveltekit untuk folder tertentu, dan anda juga boleh menambah alias anda sendiri.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> biarkan todos = [
{id: 1, Tajuk: "Tulis Sveltekit Intro Blog Post", ditugaskan: "Adam", tags: [1]},
{id: 2, Tajuk: "Tulis Sveltekit Lanjutan Data Memuatkan Data Pos", Ditugaskan: "Adam", Tags: [1]},
{id: 3, Tajuk: "Sediakan RenderAtl Talk", ditugaskan: "Adam", tags: [2]},
{id: 4, tajuk: "Betulkan semua bug sveltekit", ditugaskan: "kaya", tags: [3]},
{id: 5, Tajuk: "Edit catatan blog Adam", yang ditugaskan: "Geoff", tags: [4]},
];
Biarkan tags = [
{id: 1, nama: "kandungan sveltekit", warna: "ded"},
{id: 2, nama: "persidangan", warna: "ungu"},
{id: 3, nama: "pembangunan sveltekit", warna: "merah jambu"},
{id: 4, nama: "css-tricks admin", warna: "biru"},
];
Export const Wait = Async (Amaun) = & gt; janji baru ((res) = & gt; setTimeout (res, amaun ?? 100));
Eksport fungsi async getTodos () {
menunggu tunggu ();
kembali todos;
}
Eksport fungsi async getTags () {
menunggu tunggu ();
kembali tags.Reduce ((lookup, tag) = & gt; {
lookup [tag.id] = tag;
kembali carian;
}, {});
}
Eksport fungsi async getToDo (id) {
kembali 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> senarai <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 文件夹中创建一个 <code> page.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 文件, 并将此内容放在其中: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> import {getTodos, getTags} dari "$libhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712todoData";
beban fungsi eksport () {
const todos = getTodos ();
const tags = getTags ();
kembali {
Todos,
tag,
};
} <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> 我们定义了一个 <code> beban () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 函数, 它会提取页面所需的数据。请注意, 我们 <em> 没有 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em> 等待对我们的 <code> gettodos <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 和 <code> gettags <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 异步函数的调用。这样做会创建一个数据加载瀑布, 因为我们在加载标签之前等待待办事项进入。相反, 我们从<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Jadi, bagaimana kita mengakses data ini dari komponen halaman? Sveltekit menyediakan komponen kami dengan atribut data <code> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> dengan data. Kami akan mengakses to-dos dan tag kami menggunakan tugasan reaktif. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Komponen halaman senarai kami kini kelihatan seperti ini. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <script>
Eksport Let Data;
$: ({todos, tags} = data);
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<table>
<thead>
<tr>
<th> tugas <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th> tags <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th> Ditugaskan <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) .join (',')} <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 {
Teks-Align: Kiri;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Ini harus menjadikan senarai tugasan kami! <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> Kumpulan susun atur <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> Sebelum kita beralih ke halaman butiran dan data yang bermutasi, mari kita lihat dengan cepat ciri -ciri yang sangat bijak dari Sveltekit: <strong> Kumpulan Layout <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>. Kami telah melihat susun atur bersarang untuk semua halaman pengurusan, tetapi bagaimana jika kita mahu berkongsi susun atur antara halaman sewenang -wenangnya pada tahap yang sama dalam sistem fail? Khususnya, bagaimana jika kita hanya mahu berkongsi susun atur antara halaman senarai kami dan halaman butiran? Kami sudah mempunyai susun atur global pada tahap itu. Sebaliknya, kita boleh membuat direktori baru, tetapi nama itu harus diletakkan dalam kurungan, seperti berikut: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Kami kini mempunyai kumpulan susun atur yang meliputi halaman senarai dan butiran. Saya menamakannya <code> (Todo-Management) <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>, tetapi anda boleh menamakannya apa sahaja yang anda suka.Harus jelas bahawa nama ini <em> tidak akan menjejaskan URL halaman dalam kumpulan susun atur. URL akan tetap sama; <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>
<code> kami <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> boleh <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> tambah file <p>Tetapi mari kita buat sesuatu yang lebih menarik. Susun atur boleh menentukan fungsi <code> () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> untuk menyediakan data untuk semua laluan di bawahnya. Mari kita gunakan ciri ini untuk memuatkan tag kami - kerana kami akan menggunakan tag kami di halaman butiran - dan halaman senarai yang kami ada. Malah, ia hampir tidak bernilai untuk memaksa kumpulan susun atur hanya untuk menyediakan satu data; Tetapi untuk jawatan ini, ia akan memberikan alasan yang kita perlukan untuk melihat ciri -ciri baru Sveltekit! <code>
3 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> import {gettodos} dari "$ libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps: //www.php.cn/link/29a9 a ";
beban fungsi eksport () {
const todos = getTodos ();
kembali {
Todos,
};
} <p>
<code> Halaman senarai kami kini harus menghasilkan ralat kerana tidak ada <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> tags <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> objek. Mari kita selesaikan masalah ini dengan menambahkan fail susun atur <pre class="brush:php;toolbar:false"> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> import {gettags} dari "$ libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps: //www.pn. a ";
beban fungsi eksport () {
const tags = getTags ();
kembali {
tag,
};
} <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Dengan cara ini, halaman senarai kami diberikan lagi! <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Kami memuatkan data dari pelbagai lokasi <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> mari kita fokus pada apa yang berlaku di sini: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> Kami menentukan fungsi <p> () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> untuk kumpulan susun atur, dan kami meletakkannya dalam <h4> susun atur.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h4>. <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Ini menyediakan data untuk semua halaman <ul> yang melayani susun atur - dalam kes ini, ini bermakna senarai senarai dan butiran kami.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> Halaman senarai kami juga mentakrifkan fungsi <code> () <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> yang terletak di fail <code> page.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> Sveltekit melakukan pengangkat berat, menggabungkan hasil sumber data ini bersama -sama dan menyediakan kedua -dua data <code> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul>
<h3> Halaman Butiran <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> Kami akan menggunakan halaman Butiran untuk mengedit senarai tugasan. Pertama, mari tambahkan lajur ke halaman senarai yang menghubungkan ke halaman butiran rentetan pertanyaan yang mengandungi ID To-Do. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <td> <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details?id={t.id}"> edit <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td> <s>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> mari kita bina halaman butiran sekarang. Pertama, kami akan menambah loader untuk mendapatkan item tugasan yang kami edit. Buat A
<p> import {getTodo} dari "$ libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps: //www.pn/link/29a9 a ";
beban fungsi eksport ({url}) {
const id = url.searchParams.get ("id");
const todo = getToDo (id);
kembali {
Todo,
};
} <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Loader kami dilengkapi dengan atribut <code> url <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> dari mana kami dapat mengekstrak nilai rentetan pertanyaan. Ini menjadikannya mudah untuk mencari senarai tugasan yang kami edit. Mari kita membuat tugas, dan edit berfungsi. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> Sveltekit mempunyai mutabiliti terbina dalam yang sangat baik selagi anda menggunakan borang tersebut. Ingat borang? Inilah halaman butiran kami. Untuk kesederhanaan, saya telah meninggalkan gaya.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <script>
import {enhance} dari "$ apphttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712forms";
Eksport Let Data;
$: ({todo, tags} = data);
$: currentTags = todo.tags.map ((id) = & gt; tags [id]);
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<div>
{#each currentTags sebagai 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"> Simpan <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712button>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712form> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p> Kami mendapat label dari loader kumpulan susun atur seperti dahulu dan item tugasan dari loader halaman. Kami mendapat objek tag sebenar dari senarai tugasan ID Tag dan kemudian memberikan segala-galanya. Kami membuat borang dengan input ID tersembunyi dan input tajuk sebenar. Kami memaparkan label dan kemudian memberikan butang untuk menyerahkan borang. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Jika anda melihat <code> Gunakan: Tingkatkan <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>, ini hanya memberitahu Sveltekit untuk menggunakan peningkatan progresif dan Ajax untuk menyerahkan borang kami. Anda boleh sentiasa menggunakannya. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h4> Bagaimana kita menyimpan suntingan kita? <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h4>
<p> Nota <code> action = "? Https: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712edittodo" <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> atribut pada borang itu sendiri? Ini memberitahu kami di mana kami mahu menyerahkan data yang diedit. Untuk kes kami, kami ingin menyerahkan kepada <code> edittodo <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> tindakan ".<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> mari kita buat dengan menambahkan yang berikut ke page.server.js <code> fail yang telah kami sediakan untuk "butiran" (fail yang kini mempunyai <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> beban () <code> fungsi untuk mendapatkan item tugas kami): <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> import {redirect} dari "@sveltejshttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712kit";
Import {UpdateTodo, tunggu} dari "$ libhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps: //www.php.cn/Link. ";
https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e2be5557fd8fd8fd8fd8fd8fd8f.
Eksport Const Actions = {
async edittodo ({request}) {
const formData = menunggu permintaan.FormData ();
const id = formData.get ("id");
const newtitle = formData.get ("tajuk");
menunggu tunggu (250);
menunggu updateToDo (id, newtitle);
membuang redirect (303, "https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list");
},
}; <pre class="brush:php;toolbar:false">
Tindakan borang <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> menyediakan kami dengan objek <p> <code> yang memberikan akses kepada kami <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> formData <code> yang mempunyai <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> get <code> kaedah untuk pelbagai bidang bentuk kami. Kami menambah input nilai ID tersembunyi supaya kami dapat mendapatkannya di sini untuk mencari tugas yang kami edit. Kami mensimulasikan kelewatan itu, hubungi kaedah baru <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> UpdateToDo () <code>, dan mengalihkan pengguna kembali ke <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> https://www.php.cn/link/29A9F8460E5E2E4EDDE557FD83712LIST <code> PAGE. Kaedah <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> UpdateToDo () <code> hanya mengemas kini data statik kami; <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Export async function updateToDo (id, newtitle) {
const todo = todos.find ((t) = & gt; t.id == id);
Object.assign (todo, {title: newtitle});
} <pre class="brush:php;toolbar:false">
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> mari cuba. Kami mula -mula pergi ke halaman senarai: <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> Sekarang, mari klik butang Edit untuk salah satu item To-Do untuk membawa halaman edit dalam <p> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details <code>.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> kami akan menambah tajuk baru: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Sekarang, klik Simpan.Ini harus membawa kita kembali ke <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> dan memohon tajuk To-Do yang baru. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Bagaimana tajuk baru muncul? Ini adalah automatik. Sebaik sahaja kita mengarahkan ke <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Page, Sveltekit akan secara automatik akan meraih semula semua pemuat kita secara automatik. Ini adalah kemajuan utama bahawa rangka kerja aplikasi generasi baru seperti Sveltekit, Remix, dan 13 tawaran seterusnya. Daripada memberi anda cara yang mudah untuk menjadikan halaman, maka nasib baik mendapatkan sebarang titik akhir yang mungkin anda perlukan untuk mengemas kini data anda, mereka mengintegrasikan mutasi data dengan pemuatan data, yang membolehkan kedua -duanya bekerja bersama. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Beberapa perkara yang mungkin anda ingin tahu ... <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <strong> Kemas kini mutasi ini tidak kelihatan terlalu mengagumkan. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong> Loader akan berjalan semula semasa anda menavigasi. Apa yang berlaku jika kita tidak menambah pengalihan dalam tindakan borang, tetapi sebaliknya tinggal di halaman semasa? Sveltekit akan melakukan kemas kini dalam operasi borang seperti dahulu, tetapi masih akan memulihkan semua pemuat untuk halaman semasa, termasuk yang ada dalam susun atur halaman. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <strong> Bolehkah kita mempunyai cara yang lebih disasarkan untuk membatalkan data kami? <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong> Sebagai contoh, tag kami tidak diedit, jadi dalam kehidupan sebenar kami tidak mahu membuat pertanyaan semula. Ya, semua yang saya tunjukkan adalah tingkah laku bentuk lalai di Sveltekit. Anda boleh mematikan tingkah laku lalai dengan memberikan panggilan balik kepada <code> penggunaan: Tingkatkan <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. Sveltekit kemudian menyediakan fungsi kegagalan manual. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <strong> Memuatkan data setiap kali anda menavigasi boleh mahal dan tidak perlu. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong> Bolehkah saya cache data ini seperti alat seperti React-Query? Ya, ia hanya berbeza. Sveltekit membolehkan anda menetapkan (dan kemudian menghormati) tajuk kawalan cache yang disediakan oleh web. Saya akan memperkenalkan mekanisme kegagalan cache dalam artikel berikutnya. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Kami menggunakan data statik sepanjang artikel dan mengubah nilai dalam ingatan. Jika anda perlu memulihkan segala -galanya dan mulakan semula, hentikan dan mulakan semula proses nod <code> npm run dev <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> Ringkasan <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> Kami hanya menyentuh permukaan Sveltekit, tetapi diharapkan anda telah melihat sesuatu yang cukup untuk membuat anda teruja.Saya tidak ingat kali terakhir saya mendapati pembangunan web begitu menarik. Dengan ciri-ciri luar kotak seperti bundling, routing, ssr, dan penempatan, saya boleh menghabiskan lebih banyak masa pengekodan daripada mengkonfigurasi. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> Berikut adalah lebih banyak sumber yang boleh anda gunakan sebagai langkah seterusnya untuk mempelajari Sveltekit: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<ul>
<li> mengumumkan sveltekit 1.0 (blog svelte) <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> kursus pemula sveltekit (vercel) <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li> Dokumentasi 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">Salin selepas log masuk</div></div></https:></https:></p></stsvelte></p></https:></https:>
Atas ialah kandungan terperinci Bermula dengan Sveltekit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
