어떤면에서,이 기사를 작성하는 것은 어려운 일입니다. Sveltekit은 응용 프로그램 프레임 워크 입니다. 앱을 구축하는 데 도움이됩니다. 이것은 시연을 어렵게 만듭니다. 블로그 게시물에서 전체 응용 프로그램을 구축하는 것은 불가능합니다. 그래서 우리는 상상력을 조금 사용할 것입니다. 빈 UI 자리 표시 자와 하드 코딩 된 정적 데이터를 사용하여 응용 프로그램의 골격을 구축 할 것입니다. 목표는 실제 응용 프로그램을 구축하는 것이 아니라 Sveltekit의 실행중인 메커니즘을 보여 주어 자신의 응용 프로그램을 구축 할 수 있습니다.
이를 위해, 우리는 예를 들어 시도하고 테스트 된 할 일을 구축 할 것입니다. 그러나 걱정하지 마십시오. 이것은 Sveltekit이 다른 할 일 앱을 만드는 것보다 어떻게 작동하는지에 더 중점을 둘 것입니다.
프로젝트를 만듭니다
및 npm run dev 를 실행하고 개발 서버가 실행되기 시작해야합니다. 브라우저에서 
기본 라우팅
<https:> src <code> 아래의 <https:> 폴더 폴더에 주목하십시오. 모든 경로에 대한 코드가 포함되어 있습니다. 루트 > 파일은 이미 https://www.php.cn/link/29a9f8c8c8460e5e5e2be4edde557fd83712 page.svelte <p>입니다. 이것을 염두에두고,합시다 <psps> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list , <https:> https://www.php.cn/link/29a9f8460e5e5e2be4edde557272be557237fd83 , <code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e5e2be4edde557fd83712user-setstation and https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c84600e5e2be4bedde557fd83712-stut 각 페이지의 텍스트 자리 소유자. <https:>
<out> 파일 레이아웃은 다음과 같아야합니다
<able> 브라우저 주소 표시 줄에서 URL 경로를 변경하여 탐색 할 수 있어야합니다. <code>
<https:> 레이아웃
<add> 우리는 앱에 내비게이션 링크를 추가하고 싶지만 생성 한 각 페이지에 태그를 복사하기를 원하지 않습니다. 따라서 Sveltekit이 모든 페이지의 글로벌 템플릿으로 취급하는 폴더의 루트에 <create create> layout.svelte <code> 파일을 만들어 봅시다.내용을 추가해 봅시다 : <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">
<https:>
<list> 할 일 목록
<https:>
<li>
계정 상태
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list">
<https:>
사용자 설정
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712paid-status">
<https:>
<https:>
Nav {
배경색 : 베이지 색;
}
Nav ul {
디스플레이 : Flex;
}
Li {
목록 스타일 : 없음;
여백 : 15px;
}
A {
텍스트 결정 : 없음;
색상 : 검은 색;
}
<li>
<igation> 일부 기본 탐색 및 일부 기본 스타일. 특히 중요한 것은 <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712user-settings"> <https:> <https:> 태그입니다. 이것은 웹 구성 요소 및 Shadow Dom과 함께 사용하는 슬롯이 아니라 콘텐츠가 위치하는 위치를 나타내는 Svelte의 기능입니다. 페이지가 렌더링되면 페이지 컨텐츠가 슬롯이있는 위치로 미끄러집니다. <https:>
<some> 이제 우리는 약간의 내비게이션이 있습니다! 우리는 어떤 디자인 경쟁도 이기지 못하지만 그렇게하려고하지 않았습니다. <https:>
<out> 중첩 레이아웃
<want> 모든 관리 페이지가 방금 구축 한 일반 레이아웃을 상속하고 모든 관리 페이지의 공통점 (그러나 관리 페이지 만)을 공유하려면 어떻게해야합니까? 문제 없음, 우리는 root 디렉토리에 또 다른 <https:> layout.svelte <style>를 추가하면 그 아래의 모든 것에 의해 상속됩니다.이것을하고 이것을 추가합시다 : <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <<> 이것은 관리 페이지 <🎜 <div>입니다
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div> <<>
<slot>
div {
패딩 : 15px;
여백 : 10px 0;
배경색 : 빨간색;
색상 : 흰색;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> <<>
<red> 우리는 이것이 관리 페이지임을 나타내는 빨간색 배너를 추가 한 다음, 이전과 같이 <🎜 🎜> <style> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style>는 페이지의 내용이 어디로 가고 싶은지를 나타냅니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<lay> 우리의 이전 루트 레이아웃이 렌더링됩니다. 루트 레이아웃에는 <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>
<igate> 관리자 페이지로 이동하면 새로운 빨간 배너가 표시됩니다.
<<<<> 데이터 정의 <🎜 🎜>
<'s> 알겠습니다. 실제 데이터를 렌더링하거나 최소한 실제 데이터를 어떻게 렌더링하는지 살펴 보겠습니다. 데이터베이스를 작성하고 연결하는 방법에는 여러 가지가 있습니다. 이 게시물은 DynamoDB를 관리하지 않고 Sveltekit에 관한 것이므로 일부 정적 데이터를 "로드"합니다. 그러나 실제 데이터에 사용하는 동일한 메커니즘을 사용하여 읽고 업데이트합니다. 실제 웹 응용 프로그램의 경우 정적 데이터를 반환하는 기능을 사용하는 모든 데이터베이스를 연결하고 쿼리하는 기능으로 바꾸십시오. <code>
<a> <libhttps : //www.php.cn/link/29A9F8C8C8460E5E2BE4EDDE557FD83712DATAHTTPS : //www.php.cn/link/29A9F8460E5E2BE4472472472472472445555555555555555555555555555555555555572324555572472472472472472472472472472472472724723247 Odata.ts <<<>는 실제 쿼리를 시뮬레이션하기 위해 수동 지연과 함께 일부 정적 데이터를 반환합니다. 이 <<> $ lib <slot>를 통해 다른 곳에서 가져 오는이 <<> lib <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> 폴더가 표시됩니다. 이것이 Sveltekit이 해당 특정 폴더에 제공하는 것이며 자신의 별칭을 추가 할 수도 있습니다.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<os> let todos = [
{id : 1, 제목 : "Sveltekit Intro 블로그 게시물 쓰기", 할당 : "Adam", 태그 : [1]},
{id : 2, 제목 : "Sveltekit 고급 데이터로드 블로그 게시물 작성", 할당 : "Adam", 태그 : [1]},
{id : 3, 제목 : "RenderAtl Talk 준비", 할당 : "Adam", 태그 : [2]},
{id : 4, 제목 : "모든 sveltekit 버그 수정", 할당 : "Rich", 태그 : [3]},
{id : 5, 제목 : "Adam의 블로그 게시물 편집", 할당 : "Geoff", 태그 : [4]},
];
태그를하자 = [
{id : 1, 이름 : "Sveltekit Content", Color : "DED"},
{id : 2, 이름 : "회의", 색상 : "Purple"},
{id : 3, 이름 : "Sveltekit Development", Color : "Pink"},
{id : 4, 이름 : "CSS-Tricks Admin", 색상 : "Blue"},
];
내보내기 const wain = async (and) = & gt; 새로운 약속 ((res) = & gt; settimeout (res, mold ?? 100));
Async 함수 내보내기 getTodos () {
대기 ();
돌아 오는 토 도스;
}
Async 함수 내보내기 getTags () {
대기 ();
return tags.reduce ((조회, 태그) = & gt; {
조회 [tag.id] = 태그;
반환 조회;
}, {});
}
Async 함수 내보내기 gettodo (id) {
return todos.find ((t) = & gt; t.id == id);
} <.>
<（一个函数返回我们待办事项的扁平数组、我们的标签的查找以及获取单个待办事项的函数 一个函数返回我们待办事项的扁平数组、我们的标签的查找以及获取单个待办事项的函数 一个函数返回我们待办事项的扁平数组、我们的标签的查找以及获取单个待办事项的函数 一个函数返回我们待办事项的扁平数组、我们的标签的查找以及获取单个待办事项的函数 (我们将在“详细信息”页面中使用最后一个函数）） <<pre class="brush:php;toolbar:false">
<🎜 🎜> <🎜 🎜>
<vel> 我们如何将这些数据放入我们的 svelte 页面？方法有很多 页面？方法有很多 页面？方法有很多, 但现在 但现在, 让我们在 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> 목록 <🎜 🎜> 文件夹中创建一个 <p> page.server.js <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> 文件 ： ： <h3>
<get> import {gettodos, gettags}에서 "$ libhttps : //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps : //www.php.cn/link/29a9f8c8460e5e5e2be4edde557fd83712todata";
내보내기 기능 load () {
const todos = gettodos ();
const tags = getTags ();
반품 {
토 도스,
태그,
};
} <.>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3> 我们定义了一个 <🎜 <p> load () <🎜 🎜> 函数 函数, 它会提取页面所需的数据。请注意 它会提取页面所需的数据。请注意, 我们 <🎜 没有> <🎜 <🎜 <等待对我们的 <code> gettodos <🎜 和 <<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> gettags <code> 异步函数的调用。这样做会创建一个数据加载瀑布 异步函数的调用。这样做会创建一个数据加载瀑布, 因为我们在加载标签之前等待待办事项进入。相反, 我们从 <<🎜 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> road <load> 返回原始 会执行必要的等待工作。 会执行必要的等待工作。 会执行必要的等待工作。 会执行必要的等待工作。 会执行必要的等待工作。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<do> 그렇다면 페이지 구성 요소 에서이 데이터에 어떻게 액세스합니까? Sveltekit은 구성 요소에 <🎜 <p> data <code> 속성을 데이터와 함께 제공합니다. 반응성 할당을 사용하여 할 일과 태그에 액세스 할 것입니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<comp> 목록 페이지 구성 요소는 이제 다음과 같습니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <<>
내보내기 데이터;
$ : ({todos, tags} = data);
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">
<script>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<table> 작업 <🎜 🎜>
<thead> 태그 <🎜 🎜>
<tr> 할당 <🎜 🎜>
<th>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th>
{#Each todos as t}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<. {t.title} <🎜 🎜>
<..> {t.tags.map ((id) = & gt; tags [id] .name) .join ( ',')} <th>
<. {t.assigned} <🎜 🎜>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
{https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712each}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tr>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712thead>
<tbody>
th {
텍스트 정렬 : 왼쪽;
}
<tr> <<>
<our> 이것은 우리의 할 일 목록을 렌더링해야합니다! <td>
<<> 레이아웃 그룹 <🎜 🎜>
<on> 세부 사항 페이지와 변이 된 데이터로 넘어 가기 전에 Sveltekit의 매우 영리한 기능을 간단히 살펴 보겠습니다. 모든 관리 페이지에 대한 중첩 레이아웃을 보았지만 파일 시스템의 동일한 레벨에서 임의의 페이지간에 레이아웃을 공유하려면 어떻게해야합니까? 특히 목록 페이지와 세부 사항 페이지 사이의 레이아웃을 공유하려면 어떻게해야합니까? 우리는 이미 그 수준에서 글로벌 레이아웃이 있습니다. 대신 새 디렉토리를 만들 수 있지만 이름은 다음과 같이 괄호 안에 배치되어야합니다.
<a> 이제 목록 및 세부 사항 페이지를 다루는 레이아웃 그룹이 있습니다. 나는 그것을 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td> (Todo-Management) <🎜 <td>라고 명명했지만 원하는대로 이름을 지정할 수 있습니다.이 이름 <em>는 레이아웃 그룹의 페이지의 URL에 영향을 미치지 않을 것입니다. URL은 동일하게 유지됩니다. 레이아웃 그룹은 전체 디렉토리의 일부를 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em> loutes <🎜 🎜>로 구성하지 않고 공유 레이아웃을 페이지에 추가 할 수 있습니다. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 우리는 <🎜 <🎜 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>를 추가 할 수 있습니다.그러나 더 흥미로운 일을합시다. 레이아웃은 <code> load () <🎜 🎜> 함수를 정의하여 그 아래의 모든 경로에 대한 데이터를 제공 할 수 있습니다. 이 기능을 사용하여 세부 사항 페이지에서 태그를 사용하고 이미 가지고있는 목록 페이지를 사용하기 때문에 태그를로드하겠습니다. 실제로, 레이아웃 그룹이 단일 데이터를 제공하도록 강요하는 것은 거의 가치가 없습니다. 그러나이 게시물의 경우 Sveltekit의 새로운 기능을 볼 필요가있는 변명을 제공 할 것입니다! <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<'s> 먼저, 목록 페이지의 <🎜 페이지 .server.js <code> 파일로 가서 태그를 삭제합시다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
"$ libhttps : //www.php.cn/link/29a9f8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8cc8c8c8c8c8c8c8c8c8c8c84460e5e2be4edde5572327fde572327fde572327272727272727272727272727247 ATA ";
내보내기 기능 load () {
const todos = gettodos ();
반품 {
토 도스,
};
} <.>
<should> 목록 페이지는 <🎜 🎜> <🎜 🎜> 객체가 없기 때문에 오류가 발생해야합니다. 레이아웃 그룹에 파일을 추가 하여이 문제를 해결 한 다음 태그를로드하는 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> load () <p> 함수를 정의하십시오. <code>
"$ libhttps : //www.php.cn/link/29a9f8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8cc8c8c8c8c8c8c8c8c8c8c8c84460e5e2be4224723247232472727272727272727272727272727272727247 ATA ";
내보내기 기능 load () {
const tags = getTags ();
반품 {
태그,
};
} <.>
<,> 이런 식으로 목록 페이지가 다시 렌더링되었습니다! <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<ing> 우리는 여러 위치에서 데이터를로드하고 있습니다
<on> 여기서 무슨 일이 일어나고 있는지에 집중합시다 : <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">
<a> 우리는 레이아웃 그룹의 <🎜 road () <🎜 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre> 함수를 정의하고 <🎜 🎜> layout.server.js <🎜 🎜 <p>에 배치합니다. <code>
<for> 이것은 레이아웃을 제공하는 모든 <🎜 🎜> 페이지에 대한 데이터를 제공합니다.이 경우 목록 및 세부 정보를 의미합니다.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<also also> 목록 페이지는 <🎜 🎜> load () <🎜 🎜> <🎜 🎜> page.server.js <li> 파일에 위치한 a a <load () <🎜 🎜> 기능을 정의합니다. <code>
<k> Sveltekit는 이러한 데이터 소스의 결과를 함께 병합하고 <🎜 🎜> 데이터 <🎜 🎜 <🎜 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>를 모두 제공하는 무거운 리프팅을 수행합니다. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li> 세부 사항 페이지 <🎜 🎜>
<the> 우리는 세부 사항 페이지를 사용하여 할 일 목록을 편집합니다. 먼저 할 일 ID가 포함 된 쿼리 문자열의 세부 사항 페이지에 링크하는 목록 페이지에 열을 추가하겠습니다. <li>
<🎜 🎜> <<> <code> 편집 <🎜 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul>
<the> 지금 세부 정보 페이지를 작성하겠습니다. 먼저 편집중인 할 일 항목을 얻기 위해 로더를 추가합니다. 다음 내용과 함께 <details <link/29a9a9f8c8460e5e2be4edde557fd83712details : <🎜 🎜 <🎜 <🎜 <🎜 https://www.php.
"$ libhttps : //www.php.cn/link/29a9f8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8c8cc8c8c8c8c8c8c8c8c8c8c8c8c8460e5e2be4edde572472472727272472727272724727272727272727247 ATA ";
내보내기 함수로드 ({url}) {
const id = url.searchparams.get ( "id");
const todo = gettodo (id);
반품 {
톨도,
};
} <.>
<comes> 우리의 로더에는 쿼리 문자열 값을 추출 할 수있는 <🎜 🎜 url <h3> 속성이 함께 제공됩니다. 이를 통해 편집중인 할 일 목록을 쉽게 찾을 수 있습니다. 할 일을 렌더링하고 기능을 편집합시다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<k> sveltekit은 양식을 사용하는 한 우수한 내장 돌연변이를 가지고 있습니다. 양식을 기억하십니까? 다음은 세부 사항 페이지입니다. 단순화하기 위해 스타일을 생략했습니다.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"> <<>
"$ apphttps : //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712forms에서 {enhance} import";
내보내기 데이터;
$ : ({todo, tags} = data);
$ : currentTags = todo.tags.map ((id) = & gt; tags [id]);
<script>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
{#Each currentTags as tag}
{tag.name}
{https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712each}
<div>
<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"> <<>
<label> 우리는 이전과 같이 레이아웃 그룹의 로더에서 레이더와 페이지의 로더에서 할 일 항목을 얻습니다. 태그 ID의 할 일 목록에서 실제 태그 객체를 얻은 다음 모든 것을 렌더링합니다. 숨겨진 ID 입력과 실제 제목 입력이있는 양식을 만듭니다. 레이블을 표시 한 다음 양식을 제출할 버튼을 제공합니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712button>
<<> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712form> 사용 : Enhance <🎜 🎜>, 이것은 Sveltekit에게 진보적 인 향상과 Ajax를 사용하여 우리의 양식을 제출하도록 지시하는 것입니다. 당신은 항상 그것을 사용할 수 있습니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<save> 우리는 어떻게 편집을 저장합니까? <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> active = "? action ="? https : //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712edittodo "<🎜 🎜> 속성? 편집 된 데이터를 제출할 위치를 알려줍니다. 우리의 경우, 우리는 <p> edittodo <code> "Action"에 제출하려고합니다.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<it> 다음을 <p> page.server.js <code> 파일에 추가하여 이미 "세부 사항"에 제공하는 파일 (현재 파일에는 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> load () <🎜 🎜> 기능이 있습니다) : <code>.
"@sveltejshttps : //www.php.cn/link/29a9f8c8c8460e5e2be4edde557fd83712kit"에서 <red>> import {redirect} ";
"$ libhttps : //www.php.cn/link/29a9f8c8c8c84c8460e5e2be4edde5557fd83712datahttps : //www.php.cn/link/29a9f8460e5e2be555572be5555555555555555555555557f에서 가져 오기 {updatetodo, wait} ";
https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29A9F8C8460E5E5E5E24EDDE557FD83712 ...
내보내기 const action = {
비동기 Edittodo ({request}) {
const formdata = await request.formdata ();
const id = formdata.get ( "id");
const newtitle = formdata.get ( "title");
기다리고 기다렸다 (250);
Await updatetodo (id, newtitle);
던지기 리디렉션 (303, "https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list");
},
}; <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<🎜 🎜> 양식 조치는 다양한 양식 필드에 대한 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> get <pre class="brush:php;toolbar:false"> 메소드를 갖는 <🎜 🎜> formdata <🎜 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>에 대한 액세스를 제공하는 <p> 요청 <code> 객체를 제공합니다. 우리는 숨겨진 ID 값 입력을 추가하여 편집 할 계획을 찾기 위해 여기에 가져올 수 있습니다. 지연을 시뮬레이션하고, 새로운 <🎜 🎜> updateTodo () <🎜 🎜> 메소드를 호출하고 사용자를 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list <code>로 다시 리디렉션합니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> updatetodo () <<code> 메소드는 단순히 정적 데이터를 업데이트합니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<yn yn> 내보내기 비동기 기능 updatetodo (id, newtitle) {
const todo = todos.find ((t) = & gt; t.id == id);
Object.Assign (todo, {title : newtitle});
} <.>
<it> 시도해 봅시다. 먼저 목록 페이지로 이동합니다
<'s> 이제 할 일 항목 중 하나에 대한 편집 버튼을 클릭하여 <code> https://www.php.cn/link/29a9f8c8c8460e5e2be4edde557fd83712details <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<a> 우리는 새로운 제목을 추가 할 것입니다 : <🎜 🎜>
<save> 이제 저장을 클릭하십시오.이것은 우리에게 <🎜 https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list <code> 페이지로 돌아와서 새로운 할 일 제목을 적용해야합니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<new> 새 타이틀은 어떻게 나타 났습니까? 이것은 자동입니다. <🎜 https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>로 리디렉션되면 Sveltekit은 평소와 같이 모든 로더를 자동으로 다시 실행합니다. 이것은 Sveltekit, Remix 및 Next 13 제안과 같은 새로운 세대 응용 프로그램 프레임 워크가 제공되는 주요 발전입니다. 페이지 렌더링하는 편리한 방법을 제공하는 대신 데이터를 업데이트하는 데 필요한 엔드 포인트를 얻는 것이 행운을 빕니다. 데이터 돌연변이를 데이터로드와 통합하여 두 사람이 함께 작동 할 수 있습니다. <p>
<might> 당신이 알고 싶은 것들 ... <🎜 🎜>
이 돌연변이 업데이트는 너무 인상적이지 않은 것 같습니다. <will> 탐색하는 동안 로더가 다시 실행됩니다. 양식 동작에 리디렉션을 추가하지 않고 대신 현재 페이지에 머무르면 어떻게됩니까? Sveltekit은 이전과 같이 양식 작업에서 업데이트를 수행하지만 페이지 레이아웃의 모든 로더를 포함하여 현재 페이지의 모든 로더를 다시 실행합니다. <code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> <<> 데이터를 무효화 할 수있는 더 대상이 될 수 있습니까? 예를 들어, <our> 우리의 태그는 편집되지 않으므로 실제 생활에서 우리는 그것들을 다시 정체하고 싶지 않습니다. 예, 내가 보여주는 것은 Sveltekit의 기본 형식 동작입니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> aing : enhance <🎜 🎜>에 대한 콜백을 제공하여 기본 동작을 끄질 수 있습니다. 그런 다음 Sveltekit은 수동 고장 기능을 제공합니다. <p>
탐색 할 때마다 데이터로드하는 데 비싸고 불필요 할 수 있습니다. <ache>이 데이터를 React-Query와 같은 도구처럼 캐시 할 수 있습니까? 예, 그것은 단지 다릅니다. Sveltekit을 사용하면 웹에서 제공 한 캐시 제어 헤더를 설정하고 존중할 수 있습니다. 후속 기사에서 캐시 실패 메커니즘을 소개하겠습니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<atic> 우리는 기사 전체에서 정적 데이터를 사용하고 메모리에서 값을 수정합니다. 모든 것을 복원하고 다시 시작 해야하는 경우 <🎜 🎜> npm run dev <🎜🎜> 노드 프로세스를 중지하고 다시 시작하십시오. <p>
<strong> 요약 <🎜 🎜>
<ed> 우리는 방금 Sveltekit의 표면을 만졌지 만, 당신은 당신이 흥분하기에 충분한 것을 보았습니다.웹 개발이 너무 흥미로운 것을 마지막으로 찾은 것을 기억하지 못합니다. 번들링, 라우팅, SSR 및 배포와 같은 상자 외 기능을 사용하면 구성보다 코딩에 더 많은 시간을 소비 할 수 있습니다. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<some> 다음은 Sveltekit을 배울 수있는 다음 단계로 사용할 수있는 더 많은 리소스입니다.
<p>
<vel>는 Sveltekit 1.0 (Svelte Blog) <🎜 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> 발표
<k k> Sveltekit 초보자 코스 (Vercel) <🎜 🎜>
<k> Sveltekit 문서 <🎜 🎜>
<ul></style></https:></want></out></https:></some></https:></https:></https:></a></igation>
</li></https:></https:></a>
</li></https:></https:></a>
</li></https:></list></https:></a>
</li>
</ul></nav></pre><div class="contentsignin">로그인 후 복사</div></div></https:>
위 내용은 Sveltekit로 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
