SvelteKit เป็นเฟรมเวิร์กแอปพลิเคชันรุ่นถัดไปล่าสุดที่ฉันเรียกว่า แน่นอนว่ามันเป็นโครงร่างแอปพลิเคชันสำหรับคุณด้วยการกำหนดเส้นทางตามไฟล์ การปรับใช้ และการเรนเดอร์ฝั่งเซิร์ฟเวอร์ที่ Next ได้ทำมาตลอด แต่ SvelteKit ยังรองรับเลย์เอาต์ที่ซ้อนกัน การกลายพันธุ์ของเซิร์ฟเวอร์ที่ซิงค์ข้อมูลบนเพจของคุณ และสิ่งอำนวยความสะดวกอื่นๆ ที่เราจะพูดถึง
โพสต์นี้มีขึ้นเพื่อเป็นการแนะนำระดับสูงเพื่อหวังว่าจะสร้างความตื่นเต้นให้กับทุกคนที่ไม่เคยใช้ SvelteKit มันจะเป็นทัวร์ที่ผ่อนคลาย หากคุณชอบสิ่งที่คุณเห็น เอกสารฉบับเต็มอยู่ที่นี่.
ในบางแง่ นี่เป็นโพสต์ที่ท้าทายในการเขียน SvelteKit คือ กรอบงานแอปพลิเคชัน. มันมีไว้เพื่อช่วยคุณสร้าง... ก็ แอปพลิเคชัน ทำให้ยากต่อการสาธิต เป็นไปไม่ได้ที่จะสร้างแอปพลิเคชันทั้งหมดในบล็อกโพสต์ ดังนั้นเราจะใช้จินตนาการของเราแทน เราจะสร้างโครงกระดูกของแอปพลิเคชัน มีตัวยึดตำแหน่ง UI ที่ว่างเปล่า และข้อมูลคงที่แบบฮาร์ดโค้ด เป้าหมายไม่ใช่การสร้างแอปพลิเคชันจริง แต่เพื่อแสดงให้คุณเห็นว่าชิ้นส่วนเคลื่อนที่ของ SvelteKit ทำงานอย่างไร เพื่อให้คุณสามารถสร้างแอปพลิเคชันของคุณเองได้
ด้วยเหตุนี้ เราจะสร้างแอปพลิเคชัน To-Do ที่ได้รับการทดลองและใช้งานจริงเป็นตัวอย่าง แต่อย่ากังวล นี่จะเป็นการมากกว่าการดูว่า SvelteKit ทำงานอย่างไรมากกว่าการสร้างแอป To-Do อื่น
รหัสสำหรับทุกอย่างในโพสต์นี้คือ มีให้ที่ GitHub. โครงการนี้ด้วย ปรับใช้บน Vercel สำหรับการสาธิตสด
การสร้างโครงการของคุณ
การปั่นโครงการ SvelteKit ใหม่นั้นง่ายพอ วิ่ง npm create your-app-name
ในเทอร์มินัลและตอบคำถามที่แจ้ง อย่าลืมเลือก "Skeleton Project" แต่อย่างอื่นให้เลือกอะไรก็ได้ที่คุณต้องการสำหรับ TypeScript, ESLint เป็นต้น
เมื่อสร้างโครงการแล้ว ให้เรียกใช้ npm i
และ npm run dev
และเซิร์ฟเวอร์ dev ควรเริ่มทำงาน ไฟขึ้น localhost:5173
ในเบราว์เซอร์ และคุณจะได้หน้าตัวยึดตำแหน่งสำหรับแอปโครงกระดูก
เส้นทางพื้นฐาน
สังเกตเห็น routes
ภายใต้โฟลเดอร์ src
. ที่เก็บรหัสสำหรับทุกเส้นทางของเรา มีแล้ว +page.svelte
ไฟล์ที่มีเนื้อหาสำหรับรูท /
เส้นทาง. ไม่ว่าคุณจะอยู่ที่ใดในลำดับชั้นของไฟล์ หน้าจริงสำหรับพาธนั้นจะมีชื่ออยู่เสมอ +page.svelte
. ด้วยเหตุนี้เรามาสร้างเพจสำหรับ /list
, /details
, /admin/user-settings
และ admin/paid-status
และเพิ่มตัวยึดข้อความสำหรับแต่ละหน้า
เค้าโครงไฟล์ของคุณควรมีลักษณะดังนี้:
คุณควรจะนำทางได้โดยเปลี่ยนเส้นทาง URL ในแถบที่อยู่ของเบราว์เซอร์
รูปแบบ
เราต้องการลิงก์การนำทางในแอปของเรา แต่แน่นอนว่าเราไม่ต้องการคัดลอกมาร์กอัปสำหรับลิงก์เหล่านั้นในแต่ละหน้าที่เราสร้างขึ้น ดังนั้นเรามาสร้าง +layout.svelte
ไฟล์ในรูทของเรา routes
โฟลเดอร์ ซึ่ง SvelteKit จะถือว่าเป็นแม่แบบส่วนกลางสำหรับทุกหน้า มาเพิ่มเนื้อหาเข้าไปกันเถอะ:
<nav> <ul> <li> <a href="/th/">Home</a> </li> <li> <a href="/th/list">To-Do list</a> </li> <li> <a href="/th/admin/paid-status">Account status</a> </li> <li> <a href="/th/admin/user-settings">User settings</a> </li> </ul>
</nav> <slot /> <style> nav { background-color: beige; } nav ul { display: flex; } li { list-style: none; margin: 15px; } a { text-decoration: none; color: black; }
</style>
การนำทางเบื้องต้นพร้อมสไตล์พื้นฐานบางอย่าง ความสำคัญเป็นพิเศษคือ <slot />
แท็ก นี่คือ ไม่ ช่องที่คุณใช้กับเว็บคอมโพเนนต์และ DOM เงาแต่เป็นคุณสมบัติ Svelte ที่ระบุตำแหน่งที่จะวางเนื้อหาของเรา เมื่อเพจแสดงผล เนื้อหาของเพจจะเลื่อนเข้ามาในตำแหน่งที่สล็อตอยู่
และตอนนี้เรามีระบบนำทางแล้ว! เราจะไม่ชนะการแข่งขันการออกแบบใด ๆ แต่เราจะไม่พยายาม
เค้าโครงที่ซ้อนกัน
จะเกิดอะไรขึ้นถ้าเราต้องการให้หน้าผู้ดูแลระบบทั้งหมดสืบทอดเค้าโครงปกติที่เราเพิ่งสร้างขึ้น แต่ยังแบ่งปันบางสิ่งที่เหมือนกันกับหน้าผู้ดูแลระบบทั้งหมด (แต่เฉพาะหน้าผู้ดูแลระบบเท่านั้น) ไม่มีปัญหา เราเพิ่มอีก +layout.svelte
ไฟล์ในรูทของเรา admin
ไดเร็กทอรีซึ่งทุกสิ่งที่อยู่ข้างใต้จะสืบทอดมา ลองทำและเพิ่มเนื้อหานี้:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
เราเพิ่มแบนเนอร์สีแดงเพื่อระบุว่านี่คือเพจของผู้ดูแลระบบ จากนั้น ก <slot />
แสดงถึงตำแหน่งที่เราต้องการให้เนื้อหาของหน้าไป
เค้าโครงรูทของเราตั้งแต่ก่อนแสดงผล ด้านในของเค้าโครงรูทคือ a <slot />
แท็ก เนื้อหาของเลย์เอาต์ที่ซ้อนกันจะเข้าสู่รูทของเลย์เอาต์ <slot />
. และสุดท้าย เค้าโครงที่ซ้อนกันจะกำหนดรูปแบบของตัวเอง <slot />
ซึ่งแสดงเนื้อหาของหน้า
หากคุณไปที่หน้าผู้ดูแลระบบ คุณจะเห็นแบนเนอร์สีแดงใหม่:
การกำหนดข้อมูลของเรา
ตกลง มาแสดงข้อมูลจริงกันบ้าง — หรืออย่างน้อยก็ดูว่าเราจะแสดงข้อมูลจริงได้อย่างไร มีร้อยวิธีในการสร้างและเชื่อมต่อกับฐานข้อมูล โพสต์นี้เกี่ยวกับ SvelteKit ไม่ใช่การจัดการ DynamoDB ดังนั้นเราจะ "โหลด" ข้อมูลคงที่บางส่วนแทน แต่เราจะใช้กลไกเดียวกันทั้งหมดเพื่ออ่านและอัปเดตข้อมูลที่คุณต้องการใช้สำหรับข้อมูลจริง สำหรับเว็บแอปจริง ให้สลับฟังก์ชันที่ส่งคืนข้อมูลคงที่ด้วยฟังก์ชันเชื่อมต่อและสอบถามไปยังฐานข้อมูลใดก็ตามที่คุณใช้
มาสร้างโมดูลง่ายๆ กันเถอะ lib/data/todoData.ts
ที่ส่งคืนข้อมูลคงที่พร้อมกับความล่าช้าเทียมเพื่อจำลองการสืบค้นจริง คุณจะเห็นสิ่งนี้ lib
นำเข้าโฟลเดอร์ที่อื่นผ่าน $lib
. นี่คือคุณสมบัติ SvelteKit สำหรับโฟลเดอร์นั้นๆ และคุณยังทำได้ เพิ่มนามแฝงของคุณเอง.
let todos = [ { id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] }, { id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] }, { id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] }, { id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] }, { id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
]; let 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" },
]; export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 100)); export async function getTodos() { await wait(); return todos;
} export async function getTags() { await wait(); return tags.reduce((lookup, tag) => { lookup[tag.id] = tag; return lookup; }, {});
} export async function getTodo(id) { return todos.find(t => t.id == id);
}
ฟังก์ชันเพื่อส่งคืนอาร์เรย์ของรายการสิ่งที่ต้องทำของเรา ค้นหาแท็กของเรา และฟังก์ชันเพื่อดึงสิ่งที่ต้องทำรายการเดียว (เราจะใช้รายการสุดท้ายในหน้ารายละเอียดของเรา)
กำลังโหลดข้อมูลของเรา
เราจะนำข้อมูลนั้นเข้าสู่หน้า Svelte ของเราได้อย่างไร มีหลายวิธี แต่ตอนนี้เรามาสร้าง +page.server.js
ไฟล์ในไฟล์ list
โฟลเดอร์และใส่เนื้อหานี้ในนั้น:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
เราได้กำหนด a load()
ฟังก์ชันที่ดึงข้อมูลที่จำเป็นสำหรับเพจ สังเกตว่าเราเป็น ไม่ await
- กำลังโทรหาเรา getTodos
และ getTags
ฟังก์ชัน async การทำเช่นนั้นจะสร้างน้ำตกในการโหลดข้อมูลในขณะที่เรารอให้รายการสิ่งที่ต้องทำเข้ามาก่อนที่จะโหลดแท็กของเรา แต่เราคืนสัญญาดิบจาก load
และ SvelteKit ก็ทำงานที่จำเป็นให้ await
พวกเขา
เราจะเข้าถึงข้อมูลนี้จากส่วนประกอบของเพจได้อย่างไร SvelteKit ให้ data
prop สำหรับส่วนประกอบของเราที่มีข้อมูลอยู่ เราจะเข้าถึงรายการสิ่งที่ต้องทำและแท็กจากรายการนั้นโดยใช้ การมอบหมายปฏิกิริยา.
ตอนนี้ส่วนประกอบของหน้ารายการของเรามีลักษณะดังนี้
<script> export let data; $: ({ todo, tags } = data);
</script> <table cellspacing="10" cellpadding="10"> <thead> <tr> <th>Task</th> <th>Tags</th> <th>Assigned</th> </tr> </thead> <tbody> {#each todos as t} <tr> <td>{t.title}</td> <td>{t.tags.map((id) => tags[id].name).join(', ')}</td> <td>{t.assigned}</td> </tr> {/each} </tbody>
</table> <style> th { text-align: left; }
</style>
และสิ่งนี้ควรแสดงรายการสิ่งที่ต้องทำของเรา!
กลุ่มเค้าโครง
ก่อนที่เราจะไปยังหน้ารายละเอียดและเปลี่ยนแปลงข้อมูล เรามาดูคุณสมบัติ SvelteKit ที่สวยงามจริงๆ กัน: กลุ่มเค้าโครง. เราได้เห็นเลย์เอาต์ที่ซ้อนกันสำหรับหน้าผู้ดูแลระบบทั้งหมดแล้ว แต่ถ้าเราต้องการแชร์เลย์เอาต์ระหว่างเพจต่างๆ ที่ระดับเดียวกันของระบบไฟล์ของเราล่ะ โดยเฉพาะอย่างยิ่ง ถ้าเราต้องการแชร์เค้าโครงระหว่างหน้ารายการและหน้ารายละเอียดของเราเท่านั้น เรามีเลย์เอาต์ส่วนกลางในระดับนั้นแล้ว แต่เราสามารถสร้างไดเร็กทอรีใหม่ แต่ใช้ชื่อที่อยู่ในวงเล็บดังนี้:
ขณะนี้เรามีกลุ่มเค้าโครงที่ครอบคลุมหน้ารายการและรายละเอียดของเรา ฉันตั้งชื่อมัน (todo-management)
แต่คุณสามารถตั้งชื่ออะไรก็ได้ที่คุณต้องการ เพื่อความชัดเจน ชื่อนี้จะ ไม่ ส่งผลกระทบต่อ URL ของเพจภายในกลุ่มเลย์เอาต์ URL จะยังคงเหมือนเดิม กลุ่มเลย์เอาต์อนุญาตให้คุณเพิ่มเลย์เอาต์ที่ใช้ร่วมกันในหน้าต่างๆ โดยไม่ต้องรวมทั้งหมดไว้ในไดเร็กทอรี routes
.
We ได้ เพิ่ม +layout.svelte
ไฟล์และบางโง่ <div>
แบนเนอร์พูดว่า “เฮ้ เรากำลังจัดการสิ่งที่ต้องทำ” แต่มาทำสิ่งที่น่าสนใจกันดีกว่า เค้าโครงสามารถกำหนดได้ load()
ฟังก์ชั่นเพื่อให้ข้อมูลทุกเส้นทางที่อยู่ด้านล่าง มาใช้ฟังก์ชันนี้เพื่อโหลดแท็กของเรา — เนื่องจากเราจะใช้แท็กของเราใน details
หน้า — นอกเหนือจาก list
หน้าเรามีแล้ว
ในความเป็นจริง การบังคับให้กลุ่มเลย์เอาต์ให้ข้อมูลเพียงชิ้นเดียวนั้นแทบไม่คุ้มค่าเลย เป็นการดีกว่าที่จะทำซ้ำข้อมูลนั้นใน load()
ฟังก์ชั่นสำหรับแต่ละหน้า แต่สำหรับโพสต์นี้ จะเป็นข้อแก้ตัวที่เราจำเป็นต้องดูฟีเจอร์ SvelteKit ใหม่!
ขั้นแรกให้เข้าสู่ของเรา list
ของหน้า +page.server.js
ไฟล์และลบแท็กออกจากนั้น
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
หน้ารายการของเราควรสร้างข้อผิดพลาดเนื่องจากไม่มี tags
วัตถุ. มาแก้ไขโดยเพิ่ม a +layout.server.js
ในกลุ่มเค้าโครงของเรา จากนั้นกำหนด a load()
ฟังก์ชันที่โหลดแท็กของเรา
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
และเช่นเดียวกัน หน้ารายการของเราก็แสดงผลอีกครั้ง!
เรากำลังโหลดข้อมูลจากหลายตำแหน่ง
เรามาพูดถึงสิ่งที่เกิดขึ้นที่นี่กันดีกว่า:
- เรากำหนดไฟล์
load()
ฟังก์ชันสำหรับกลุ่มเค้าโครงที่เราใส่ไว้+layout.server.js
. - สิ่งนี้ให้ข้อมูลสำหรับ ทั้งหมด ของหน้าที่เค้าโครงให้บริการ — ซึ่งในกรณีนี้หมายถึงหน้ารายการและรายละเอียดของเรา
- หน้ารายการของเรายังกำหนด
load()
ฟังก์ชั่นที่จะไปในนั้น+page.server.js
ไฟล์ - SvelteKit ทำงานอย่างหนักในการรับผลลัพธ์ของแหล่งข้อมูลเหล่านี้ รวมเข้าด้วยกัน และทำให้ทั้งสองพร้อมใช้งานใน
data
.
หน้ารายละเอียดของเรา
เราจะใช้หน้ารายละเอียดเพื่อแก้ไขรายการสิ่งที่ต้องทำ ขั้นแรก ให้เพิ่มคอลัมน์ในตารางในหน้ารายการของเราที่ลิงก์ไปยังหน้ารายละเอียดด้วย ID ของรายการสิ่งที่ต้องทำในสตริงข้อความค้นหา
<td><a href="/th/details?id={t.id}">Edit</a></td>
ตอนนี้เรามาสร้างหน้ารายละเอียดของเรากัน ก่อนอื่น เราจะเพิ่มตัวโหลดเพื่อดึงรายการสิ่งที่ต้องทำที่เรากำลังแก้ไข สร้าง +page.server.js
in /details
โดยมีเนื้อหาดังนี้
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export function load({ url }) { const id = url.searchParams.get("id"); console.log(id); const todo = getTodo(id); return { todo, };
}
รถตักของเรามาพร้อมกับ url
คุณสมบัติที่เราสามารถดึงค่าสตริงการสืบค้น ทำให้ง่ายต่อการค้นหารายการสิ่งที่ต้องทำที่เรากำลังแก้ไข มาแสดงสิ่งที่ต้องทำพร้อมกับฟังก์ชันในการแก้ไข
SvelteKit มีความสามารถในการกลายพันธุ์ในตัวที่ยอดเยี่ยม ตราบใดที่คุณใช้แบบฟอร์ม จำแบบฟอร์ม? นี่คือหน้ารายละเอียดของเรา ฉันได้ยกเลิกรูปแบบเพื่อความกะทัดรัด
<script> import { enhance } from "$app/forms"; export let data; $: ({ todo, tags } = data); $: currentTags = todo.tags.map(id => tags[id]);
</script> <form use:enhance method="post" action="?/editTodo"> <input name="id" type="hidden" value="{todo.id}" /> <input name="title" value="{todo.title}" /> <div> {#each currentTags as tag} <span style="{`color:" ${tag.color};`}>{tag.name}</span> {/each} </div> <button>Save</button>
</form>
เรากำลังดึงแท็กจากตัวโหลดของกลุ่มเลย์เอาต์และรายการสิ่งที่ต้องทำจากตัวโหลดของหน้าของเราเช่นเดิม เรากำลังคว้าตัวจริง tag
ออบเจ็กต์จากรายการแท็ก ID ของสิ่งที่ต้องทำ แล้วแสดงผลทุกอย่าง เราสร้างแบบฟอร์มที่มีการป้อนข้อมูลที่ซ่อนอยู่สำหรับ ID และป้อนข้อมูลจริงสำหรับชื่อเรื่อง เราแสดงแท็ก จากนั้นให้ปุ่มเพื่อส่งแบบฟอร์ม
หากคุณสังเกตเห็นว่า use:enhance
ซึ่งเพียงแค่บอก SvelteKit ให้ใช้การปรับปรุงขั้นสูงและ Ajax เพื่อส่งแบบฟอร์มของเรา คุณมักจะใช้สิ่งนั้นเสมอ
เราจะบันทึกการแก้ไขของเราได้อย่างไร?
สังเกตเห็น action="?/editTodo"
คุณลักษณะในแบบฟอร์มเอง? สิ่งนี้บอกเราว่าเราต้องการส่งข้อมูลที่แก้ไขของเราไปที่ใด สำหรับกรณีของเรา เราต้องการที่จะส่งไปยัง editTodo
"การกระทำ."
มาสร้างมันโดยเพิ่มสิ่งต่อไปนี้ใน +page.server.js
เรามีไฟล์สำหรับรายละเอียดอยู่แล้ว (ซึ่งปัจจุบันมีไฟล์ load()
ฟังก์ชั่นเพื่อคว้าสิ่งที่เราต้องทำ):
import { redirect } from "@sveltejs/kit"; // ... export const actions = { async editTodo({ request }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); throw redirect(303, "/list"); },
};
การดำเนินการแบบฟอร์มทำให้เรามี request
วัตถุซึ่งให้การเข้าถึงของเรา formData
ซึ่งมี get
วิธีการสำหรับช่องแบบฟอร์มต่างๆ ของเรา เราได้เพิ่มอินพุตที่ซ่อนอยู่สำหรับค่า ID เพื่อให้เราสามารถคว้ามันได้ที่นี่เพื่อค้นหารายการสิ่งที่ต้องทำที่เรากำลังแก้ไข เราจำลองความล่าช้า เรียกใหม่ updateTodo()
วิธีแล้วเปลี่ยนเส้นทางผู้ใช้กลับไปที่ /list
หน้า. updateTodo()
วิธีการเพียงอัปเดตข้อมูลคงที่ของเรา ในชีวิตจริง คุณจะต้องเรียกใช้การอัปเดตบางอย่างในที่เก็บข้อมูลใดก็ตามที่คุณใช้อยู่
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
มาลองดูกัน เราจะไปที่หน้ารายการก่อน:
ตอนนี้ให้คลิกปุ่มแก้ไขสำหรับรายการสิ่งที่ต้องทำรายการหนึ่งเพื่อเปิดหน้าแก้ไขขึ้นมา /details
.
เราจะเพิ่มชื่อเรื่องใหม่:
ตอนนี้คลิกบันทึก นั่นควรพาเรากลับไปที่ของเรา /list
หน้าโดยใช้หัวเรื่องที่ต้องทำใหม่
ชื่อเรื่องใหม่ปรากฏขึ้นได้อย่างไร มันเป็นไปโดยอัตโนมัติ เมื่อเราเปลี่ยนเส้นทางไปที่ /list
SvelteKit เรียกใช้ตัวโหลดทั้งหมดของเราใหม่โดยอัตโนมัติเหมือนที่เคยทำมา นี่คือความก้าวหน้าที่สำคัญของเฟรมเวิร์กแอปพลิเคชันยุคถัดไป เช่น SvelteKit โภชนาการและ 13 ถัดไป จัดเตรียม. แทนที่จะให้วิธีที่สะดวกแก่คุณในการแสดงผลหน้าเว็บ แล้วขอให้คุณโชคดีในการเรียกข้อมูลปลายทางใดๆ ที่คุณอาจต้องอัปเดตข้อมูล พวกเขารวมการกลายพันธุ์ข้อมูลควบคู่ไปกับการโหลดข้อมูล ทำให้ทั้งสองทำงานควบคู่กันไป
บางสิ่งที่คุณอาจสงสัย...
การอัปเดตการกลายพันธุ์นี้ดูไม่น่าประทับใจนัก รถตักจะทำงานใหม่ทุกครั้งที่คุณนำทาง จะเกิดอะไรขึ้นหากเราไม่ได้เพิ่มการเปลี่ยนเส้นทางในการดำเนินการกับแบบฟอร์ม แต่ยังคงอยู่ในหน้าปัจจุบัน SvelteKit จะดำเนินการอัปเดตในการดำเนินการกับฟอร์มเหมือนแต่ก่อน แต่จะทำ ยังคง รันตัวโหลดทั้งหมดอีกครั้งสำหรับเพจปัจจุบัน รวมถึงตัวโหลดในโครงร่างเพจ
เราสามารถมีวิธีที่ตรงเป้าหมายมากขึ้นในการทำให้ข้อมูลของเราเป็นโมฆะได้หรือไม่? ตัวอย่างเช่น แท็กของเราไม่ได้ถูกแก้ไข ดังนั้นในชีวิตจริงเราจึงไม่ต้องการสอบถามซ้ำ ใช่ สิ่งที่ฉันแสดงให้คุณเห็นเป็นเพียงพฤติกรรมเริ่มต้นของแบบฟอร์มใน SvelteKit คุณสามารถปิดการทำงานเริ่มต้นได้โดย ให้โทรกลับไปที่ use:enhance
. จากนั้น SvelteKit จะให้คู่มือ ฟังก์ชันที่ใช้ไม่ได้.
การโหลดข้อมูลในทุกการนำทางอาจมีราคาแพงและไม่จำเป็น ฉันสามารถแคชข้อมูลนี้เหมือนกับที่ทำกับเครื่องมือเช่น react-query
? ใช่ต่างกันเพียง SvelteKit ให้คุณตั้งค่า (และปฏิบัติตาม) ส่วนหัวของการควบคุมแคชที่เว็บมีให้อยู่แล้ว และฉันจะกล่าวถึงกลไกการทำให้แคชใช้ไม่ได้ในโพสต์ถัดไป
ทุกสิ่งที่เราทำในบทความนี้ใช้ข้อมูลคงที่และปรับเปลี่ยนค่าในหน่วยความจำ หากคุณต้องการย้อนกลับทุกอย่างและเริ่มต้นใหม่ ให้หยุดและเริ่มระบบใหม่ npm run dev
กระบวนการโหนด
ตัดขึ้น
เราแทบจะไม่ได้เห็นพื้นผิวของ SvelteKit เลย แต่หวังว่าคุณจะได้ดูมากพอที่จะรู้สึกตื่นเต้นกับมัน ฉันจำไม่ได้ว่าครั้งสุดท้ายที่ฉันพบว่าการพัฒนาเว็บไซต์สนุกมาก ด้วยสิ่งต่างๆ เช่น การรวมกลุ่ม, การกำหนดเส้นทาง, SSR และการปรับใช้ทั้งหมดได้รับการจัดการทันที ฉันใช้เวลาเขียนโค้ดมากกว่าการกำหนดค่า
ต่อไปนี้เป็นแหล่งข้อมูลเพิ่มเติมบางส่วนที่คุณสามารถใช้เป็นขั้นตอนถัดไปในการเรียนรู้ SvelteKit:
- เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
- เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
- ที่มา: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- สามารถ
- เกี่ยวกับเรา
- เกี่ยวกับมัน
- เข้า
- ลงชื่อเข้าใช้
- การกระทำ
- การปฏิบัติ
- อาดัม
- ที่เพิ่ม
- นอกจากนี้
- ที่อยู่
- ผู้ดูแลระบบ
- สูง
- มีผลต่อ
- ทั้งหมด
- การอนุญาต
- คู่ขนาน
- แล้ว
- เสมอ
- จำนวน
- และ
- อื่น
- คำตอบ
- ทุกคน
- app
- การใช้งาน
- การใช้งาน
- ประยุกต์
- รอบ
- แถว
- บทความ
- เทียม
- ที่ได้รับมอบหมาย
- อัตโนมัติ
- อัตโนมัติ
- ใช้ได้
- รอคอย
- กลับ
- พื้นหลัง
- แบนเนอร์
- บาร์
- ขั้นพื้นฐาน
- ก่อน
- ที่ดีที่สุด
- ดีกว่า
- ระหว่าง
- บิต
- Black
- บล็อก
- บล็อกโพสต์
- สีน้ำเงิน
- กล่อง
- นำมาซึ่ง
- เบราว์เซอร์
- เป็นโรคจิต
- สร้าง
- สร้าง
- built-in
- ปุ่ม
- แคช
- โทรศัพท์
- โทร
- ความสามารถในการ
- กรณี
- อย่างแน่นอน
- ท้าทาย
- เปลี่ยนแปลง
- ชัดเจน
- รหัส
- การเข้ารหัส
- สี
- คอลัมน์
- อย่างไร
- ร่วมกัน
- การแข่งขัน
- ส่วนประกอบ
- ส่วนประกอบ
- การประชุม
- เชื่อมต่อ
- การเชื่อมต่อ
- ปลอบใจ
- เนื้อหา
- สะดวกสบาย
- ได้
- คอร์ส
- ครอบคลุม
- ครอบคลุม
- สร้าง
- ที่สร้างขึ้น
- การสร้าง
- ปัจจุบัน
- ขณะนี้
- ข้อมูล
- ฐานข้อมูล
- ค่าเริ่มต้น
- กำหนด
- ความล่าช้า
- ความล่าช้า
- การใช้งาน
- ออกแบบ
- รายละเอียด
- dev
- พัฒนาการ
- DID
- แสดง
- ไม่
- การทำ
- Dont
- แต่ละ
- ที่อื่น ๆ
- พอ
- ทั้งหมด
- ทั้งหมด
- ความผิดพลาด
- ฯลฯ
- แม้
- ทุกๆ
- ทุกอย่าง
- ตัวอย่าง
- ตื่นเต้น
- ความตื่นเต้น
- ที่มีอยู่
- แพง
- ส่งออก
- เป็นไปได้
- ลักษณะ
- สองสาม
- สาขา
- เนื้อไม่มีมัน
- ไฟล์
- ในที่สุด
- ปลาย
- ธรรมชาติ
- ชื่อจริง
- แก้ไขปัญหา
- แบน
- ดังต่อไปนี้
- ตลอดไป
- ฟอร์ม
- รูป
- รูปแบบ
- พบ
- กรอบ
- ราคาเริ่มต้นที่
- เต็ม
- สนุก
- ฟังก์ชัน
- ฟังก์ชั่น
- ฟังก์ชั่น
- ได้รับ
- ได้รับ
- ให้
- ให้
- เหตุการณ์ที่
- Go
- เป้าหมาย
- ไป
- ไป
- คว้า
- บัญชีกลุ่ม
- กลุ่ม
- เกิดขึ้น
- ยาก
- ส่วนหัว
- ช่วย
- โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม
- ซ่อนเร้น
- ลำดับชั้น
- ระดับสูง
- ถือ
- หวังว่า
- ตามแนวนอน
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- HTML
- HTTPS
- ฉันเป็น
- จินตนาการ
- นำเข้า
- ความสำคัญ
- ประทับใจ
- in
- รวมทั้ง
- แรกเริ่ม
- อินพุต
- แทน
- รวบรวม
- น่าสนใจ
- บทนำ
- IT
- รายการ
- ตัวเอง
- JavaScript
- คีย์
- ชื่อสกุล
- ล่าสุด
- แบบ
- การเรียนรู้
- ช่วยให้
- ชั้น
- Li
- ชีวิต
- เบา
- น่าจะ
- การเชื่อมโยง
- รายการ
- สด
- โหลด
- loader
- โหลด
- โหลด
- นาน
- ดู
- LOOKS
- ค้นหา
- โชค
- เครื่องจักรกล
- ทำ
- ทำให้
- การทำ
- การจัดการ
- คู่มือ
- ขอบ
- เรื่อง
- วิธี
- หน่วยความจำ
- แค่
- การผสม
- วิธี
- อาจ
- ใจ
- โมดูล
- ข้อมูลเพิ่มเติม
- ย้าย
- การย้าย
- หลาย
- ชื่อ
- ที่มีชื่อ
- nav
- นำทาง
- การเดินเรือ
- จำเป็น
- จำเป็นต้อง
- ใหม่
- ถัดไป
- ปม
- ปกติ
- จำนวน
- วัตถุ
- วัตถุ
- ONE
- ใบสั่ง
- อื่นๆ
- มิฉะนั้น
- ของตนเอง
- ในสิ่งที่สนใจ
- เส้นทาง
- ดำเนินการ
- เลือก
- ชิ้น
- ชิ้น
- ตัวยึด
- เพลโต
- เพลโตดาต้าอินเทลลิเจนซ์
- เพลโตดาต้า
- จุด
- โพสต์
- โพสต์
- ที่อาจเกิดขึ้น
- เตรียมการ
- ปัญหา
- กระบวนการ
- ก่อ
- โปรเกรสซีฟ
- โครงการ
- สัญญา
- คุณสมบัติ
- การป้องกัน
- ให้
- ให้
- ดึง
- ใส่
- คำถาม
- ดิบ
- อ่าน
- จริง
- ชีวิตจริง
- ความจริง
- สีแดง
- เปลี่ยนเส้นทาง
- ไม่คำนึงถึง
- ยังคง
- จำ
- เอาออก
- การแสดงผล
- วาทกรรม
- ขอ
- แหล่งข้อมูล
- ผลสอบ
- กลับ
- การคืน
- รับคืน
- คืนกลับ
- รวย
- ราก
- เส้นทาง
- เส้นทาง
- วิ่ง
- วิ่ง
- เดียวกัน
- ลด
- เห็น
- ให้บริการอาหาร
- ชุด
- เงา
- Share
- ที่ใช้ร่วมกัน
- น่า
- โชว์
- ง่าย
- ง่ายดาย
- ตั้งแต่
- เดียว
- เลื่อน
- So
- บาง
- บางสิ่งบางอย่าง
- แหล่งที่มา
- ใช้จ่าย
- เริ่มต้น
- ข้อความที่เริ่ม
- อยู่
- ขั้นตอน
- หยุด
- ส่ง
- รองรับ
- พื้นผิว
- ระบบ
- ตาราง
- TAG
- เอา
- การ
- คุย
- ตามกันไป
- เป้าหมาย
- บอก
- เทมเพลต
- สถานีปลายทาง
- พื้นที่
- สิ่ง
- ตลอด
- เวลา
- ชื่อหนังสือ
- ไปยัง
- ร่วมกัน
- เกินไป
- เครื่องมือ
- ทัวร์
- รักษา
- จริง
- กลับ
- ประเภท
- ui
- ภายใต้
- บันทึก
- การปรับปรุง
- URL
- us
- ใช้
- ผู้ใช้งาน
- ความคุ้มค่า
- ความคุ้มค่า
- ต่างๆ
- ผ่านทาง
- รายละเอียด
- รอ
- อยาก
- วิธี
- เว็บ
- ส่วนประกอบของเว็บ
- การพัฒนาเว็บ
- อะไร
- ที่
- ขาว
- จะ
- ชนะ
- ไม่มี
- ยอดเยี่ยม
- งาน
- โรงงาน
- คุ้มค่า
- จะ
- เขียน
- คุณ
- ของคุณ
- ลมทะเล