Sveltekit是一個全堆棧框架，可通過慣例和內(nèi)置功能簡化現(xiàn)代網(wǎng)絡開發(fā)。 1。使用基於文件的路由，其中文件夾結(jié)構(gòu)定義導航，從而消除了手動路由器配置。 2。使用server.ts文件創(chuàng)建服務器端點，使API路由與前端代碼共同進行無縫集成。 3。數(shù)據(jù)加載是通過Page.Server.ts中的加載函數(shù)來處理的，該功能會自動將數(shù)據(jù)傳遞到SSR或客戶端導航期間的頁面和工作。 4。通過增強指令，自動化提交，加載狀態(tài)和錯誤處理，簡化形式處理，同時支持漸進式增強。 5。部署具有適配器的靈活性，適用於Vercel，NetLify或靜態(tài)託管等平臺，從而允許以最小的配置進行優(yōu)化的構(gòu)建。 Sveltekit統(tǒng)一了前端和後端工作流程，提供SSR，CSR，靜態(tài)生成，打字稿支持和小捆，使其成為全堆棧開發(fā)的有力選擇。

Sveltekit不僅是另一個前端框架 - 它是一個全棧的強大企業(yè)，它使構(gòu)建現(xiàn)代Web應用程序的構(gòu)建更簡單，更快，更直觀。如果您想使用單個工具Sveltekit提供從靜態(tài)站點到動態(tài)服務器渲染的應用程序的所有內(nèi)容。這是使用Sveltekit進行全堆棧開發(fā)，涵蓋路由，服務器端點，數(shù)據(jù)加載和部署的實用指南。

1。基於文件的路由：沒有更多路由器配置

Sveltekit使用基於文件系統(tǒng)的路由器，這意味著您的文件夾結(jié)構(gòu)是應用程序的導航。不再編寫路由器聲明 - 只需在src/routes目錄中創(chuàng)建.svelte或.ts文件即可。

• src/routes/index.svelte → /
• src/routes/about.svelte /about
• src/routes/blog/[slug].svelte →動態(tài)路線/blog/hello-world

對於嵌套或分組的路線，請使用文件夾：

 src/routes/blog/[slug]/comment/page.svelte

這將映射到/blog/hello-world/comments ，並保持井井有條。

特別文件名：

• page.svelte ：頁面內(nèi)容
• page.server.ts ：加載數(shù)據(jù)或處理表單操作
• layout.svelte ：共享佈局組件
• error.svelte ：自定義錯誤UI UI

該慣例可以清除樣板並保持路由可預測。

2。帶端點的服務器端邏輯

需要API嗎？ Sveltekit可讓您使用server.ts文件在前端代碼並旁邊編寫服務器端點。

示例：創(chuàng)建src/routes/api/todos/ server.ts ：

來自'@sveltejs/kit'的導入類型{requestHandler};

導出const get：requestHandler = async（）=> {
  返回新響應（json.stringify（[
    {id：1，文字：'Learn Learning Sveltekit'}
  ]））;
};

導出const post：requestHandler = async（{request}）=> {
  const data =等待request.json（）;
  //保存到DB，等等。
  返回新響應（json.stringify（data），{狀態(tài)：201}）;
};

現(xiàn)在，您可以像任何休息端點一樣從/api/todos獲取 - 所有這些都沒有單獨的後端服務器。

您還可以使用不同的HTTP方法，處理文件上傳，或直接與這些處理程序中的數(shù)據(jù)庫集成。

3。加載數(shù)據(jù)具有load功能

在頁面渲染之前獲取數(shù)據(jù)？在page.server.ts中使用load函數(shù)。

 // src/routes/blog/[slug]/page.server.ts
導出const load = async（{params}）=> {
  const post =等待db.post.findunique（{{
    其中：{slug：params.slug}
  }）;

  如果（！post）投擲新錯誤（“找不到”）;

  返回{post};
};

返回的數(shù)據(jù)自動傳遞到page.svelte 。

 <！ -  src/routes/blog/[slug]/page.svelte->
<script>
  導出讓數(shù)據(jù)；
</script>

<h1> {data.post.title} </h1>
<p> {data.post.content} </p>

在SSR期間和在客戶端導航期間，在SSR和瀏覽器中， load在服務器上運行 - Sveltekit會自動處理序列化。

使用depends()和parent()用於高級數(shù)據(jù)依賴項或跨佈局共享狀態(tài)。

4.形式處理而無需頭痛

Sveltekit可以通過enhance來簡化形式處理，從而消除了對preventDefault()或手動獲取調(diào)用的需求。

 <！ -  Inside page.svelte->
<形式方法=“ post”使用：增強>
  <input type =“ text” name =“ title”必需 />
  <button type =“提交”>添加todo </button>
</form>

在page.server.ts中處理它：

導出const Action = {
  默認值：async（{request}）=> {
    const data =等待request.formdata（）;
    const title = data.get（'title'）;

    等待db.todo.create（{data：{title}}）;

    //形成自動還原或更新UI
  }
};

Sveltekit管理加載狀態(tài)，錯誤甚至漸進式增強 - 即使禁用JavaScript，也可以使用。

5。部署：靈活而快速

Sveltekit通過適配器支持多個部署目標：

• @sveltejs/adapter-auto - 自動檢測平臺（Vercel，Netlify等）
• @sveltejs/adapter-static - 用於完全靜態(tài)站點
• @sveltejs/adapter-node - 獨立node.js服務器
• @sveltejs/adapter-vercel - 針對Vercel進行了優(yōu)化

只需安裝適配器，配置svelte.config.js ，然後部署：

從'@sveltejs/apapter-vercel'導入適配器;

/** @type {import（' @sveltejs/kit'）。配置}*/
導出默認{
  成套工具： {
    適配器：適配器（）
  }
};

運行npm run build ，並且輸出已準備就緒。

最後的想法

Sveltekit以乾淨，以慣例為導向的方式統(tǒng)一前端和後端關注。你得到：

• SSR，CSR和靜態(tài)生成盒
• 零孔路由
• 集成的API端點
• 較小的捆綁包得益於Svelte的編譯器方法
• 偉大的打字稿支持

這不僅是一個框架，而且是一種全棧開發(fā)人員體驗，可以在每個步驟中減少摩擦。

基本上，如果您想用最少的設置構(gòu)建快速，可擴展的應用程序，那麼Sveltekit值得一提。

以上是Sveltekit：構(gòu)建全棧應用程序的綜合指南的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！