Sveltekit是一個(gè)全堆棧框架，可以在單個(gè)項(xiàng)目中無(wú)縫集成前端和後端。 1。它使用基於文件的路由來(lái)定義頁(yè)面和API端點(diǎn)，從而實(shí)現(xiàn)了乾淨(jìng)的項(xiàng)目結(jié)構(gòu)。 2。服務(wù)器端渲染可改善性能和SEO，使用Page.Server.js用於數(shù)據(jù)加載和諸如 /API /用戶之類的API路由的Server.js。 3。 API端點(diǎn)是使用導(dǎo)出的功能（獲取，發(fā)布）直接在SRC/路由中創(chuàng)建的，並且可以連接到數(shù)據(jù)庫(kù)。 4。數(shù)據(jù)是通過(guò)加載函數(shù)加載的，並將其傳遞到Page.Svelte，而表單則使用增強(qiáng)功能作為動(dòng)態(tài)提交而無(wú)需完整重新加載的功能。 5。使用hooks.server.js在全球處理身份驗(yàn)證，在其中設(shè)置了用戶會(huì)話。 6.部署使用適配器，用於諸如Vercel，Node.js，CloudFlare或靜態(tài)託管之類的平臺(tái)，允許整個(gè)應(yīng)用程序作為統(tǒng)一軟件包構(gòu)建和部署。 Sveltekit用最少的樣板簡(jiǎn)化了全棧開(kāi)發(fā)，使其非常適合快速，可擴(kuò)展和可維護(hù)的Web應(yīng)用程序。

Sveltekit不僅是另一個(gè)前端框架 - 它是一個(gè)全堆電力型，簡(jiǎn)化了從頭開(kāi)始構(gòu)建現(xiàn)代網(wǎng)絡(luò)應(yīng)用程序。如果您想用最少的樣板構(gòu)建快速，可擴(kuò)展和可維護(hù)的全棧應(yīng)用程序，則Sveltekit應(yīng)該在您的雷達(dá)上。這是有效地使用Sveltekit進(jìn)行全堆棧開(kāi)發(fā)的實(shí)用指南。

1。了解Sveltekit的全棧體系結(jié)構(gòu)

Sveltekit建立在Svelte的頂部，但可以開(kāi)箱即用的路由，服務(wù)器端邏輯和部署靈活性。與依靠單獨(dú)後端的傳統(tǒng)水療中心不同，Sveltekit使您可以在一個(gè)項(xiàng)目中為前端代碼分類和後端代碼。

關(guān)鍵功能：

• 基於文件的路由：頁(yè)面和API端點(diǎn)由src/routes中的文件結(jié)構(gòu)定義。
• 服務(wù)器端渲染（SSR） ：默認(rèn)情況下可以在服務(wù)器上渲染頁(yè)面，從而提高性能和SEO。
• 端點(diǎn)作為API路由：您可以創(chuàng)建導(dǎo)出功能（ GET ， POST等）來(lái)處理API請(qǐng)求的.js或.ts文件 - 無(wú)需單獨(dú)的後端服務(wù)器。
• 適配器：部署到無(wú)服務(wù)器，node.js，靜態(tài)主機(jī)或帶有最小配置的邊緣運(yùn)行時(shí)間。

這意味著您可以在一個(gè)Sveltekit項(xiàng)目中構(gòu)建具有身份驗(yàn)證，數(shù)據(jù)庫(kù)訪問(wèn)和動(dòng)態(tài)內(nèi)容的博客，儀表板或電子商務(wù)網(wǎng)站。

2。使用服務(wù)器路線構(gòu)建後端邏輯

Sveltekit最大的優(yōu)勢(shì)之一是它可以在您的前端編寫後端代碼的能力。

在src/routes中，您可以創(chuàng)建：

• page.svelte - for UI
• page.server.js - 用於在服務(wù)器上加載數(shù)據(jù)
• server.js - 適用於API端點(diǎn)（例如/api/users ）

例如，創(chuàng)建一個(gè)簡(jiǎn)單的API來(lái)獲取用戶：

 // src/routes/api/users/server.js
從'@sveltejs/套件'導(dǎo)入{json};

讓用戶= [
  {id：1，名稱：'alice'}，
  {id：2，名稱：'鮑勃'}
];

導(dǎo)出異步函數(shù)get（）{
  返回JSON（用戶）;
}

導(dǎo)出異步函數(shù)帖子（{request}）{
  const newuser =等待request.json（）;
  用戶= [...用戶，Newuser];
  返回JSON（Newuser，{狀態(tài)：201}）;
}

這將變成/api/users的類似休息的端點(diǎn)，可從您的前端或外部客戶端訪問(wèn)。

您也可以在這些服務(wù)器文件中直接連接到數(shù)據(jù)庫(kù)（Prisma，drizzle，mongodb等），因?yàn)樗鼈冊(cè)卺岫诉\(yùn)行。

3。數(shù)據(jù)加載和表格處理Sveltekit方式

Sveltekit使用load函數(shù)（在page.server.js中）在呈現(xiàn)頁(yè)面之前獲取數(shù)據(jù)。

 // src/routes/users/page.server.js
導(dǎo)出異步函數(shù)load（）{
  const res =等待fetch（'http：// localhost：5173/api/users'，{
    方法：'獲取'
  }）;
  const用戶=等待res.json（）;
  返回{用戶};
}

然後，該數(shù)據(jù)可以在您的page.svelte中可用data

 <！ -  src/routes/users/page.svelte->
<script>
  導(dǎo)出讓數(shù)據(jù)；
</script>

<H1>用戶</h1>
<ul>
  {#each data.users作為用戶}
    <li> {user.name} </li>
  {/每個(gè)}
</ul>

對(duì)於表格，Sveltekit使用sveltekit/forms的enhance來(lái)支持傳統(tǒng)的帖子和增強(qiáng)的Spa樣行為：

 <script>
  從&#39;$ app/forms&#39;導(dǎo)入{增強(qiáng)};
</script>

<形式方法=“ post”使用：增強(qiáng)>
  <輸入type =“ text” name =“ name”必需 />
  <button type =“提交”>添加用戶</button>
</form>

如果禁用JS，則通過(guò)JavaScript通過(guò)JavaScript提交表單。

4.身份驗(yàn)證和會(huì)話簡(jiǎn)單

Sveltekit提供了一個(gè)handle鉤，可以在全球管理身份驗(yàn)證。

 // src/hooks.server.js
從'@sveltejs/kit/hooks'導(dǎo)入{sequence};

異步函數(shù)auth（{event，resolve}）{
  const token = event.cookies.get（'token'）;
  如果（token）{
    event.locals.user =等待validatekoken（token）; //您的邏輯
  }
  返回分辨率（事件）;
}

導(dǎo)出const handle =序列（auth）;

現(xiàn)在，在任何page.server.js或server.js中，您可以訪問(wèn)event.locals.user ?；兑韵路绞奖Ｗo(hù)路線或API端點(diǎn)：

 // src/routes/dashboard/page.server.js
導(dǎo)出功能負(fù)載（{locals}）{
  如果（！locals.user）投擲重定向（302，'/login'）;
  返回{用戶：locals.user};
}

使用Lucia ， Auth.js（以前是NextAuth）之類的庫(kù)，或滾動(dòng)您自己的基於JWT的流程 - 在Sveltekit中都可以很好地工作。

5。部署：一個(gè)代碼庫(kù)，多個(gè)目標(biāo)

Sveltekit使用適配器為不同的環(huán)境編譯應(yīng)用程序。

流行選擇：

• @sveltejs/adapter-auto - 自動(dòng)檢測(cè)平臺(tái)
• @sveltejs/adapter-node - node.js服務(wù)器
• @sveltejs/adapter-vercel - 針對(duì)Vercel進(jìn)行了優(yōu)化
• @sveltejs/adapter-cloudflare - 用於Cloudflare工人
• @sveltejs/adapter-static - 用於純靜態(tài)站點(diǎn)（SSR的警告）

只需安裝適配器，配置svelte.config.js ，然後運(yùn)行npm run build 。

 // svelte.config.js
從'@sveltejs/apapter-vercel'導(dǎo)入適配器;

導(dǎo)出默認(rèn){
  成套工具： {
    適配器：適配器（）
  }
};

無(wú)需額外的後端服務(wù)器設(shè)置 - 您的API路由和頁(yè)面已包裝在一起。

Sveltekit消除了前端和後端之間的摩擦。您將獲得反應(yīng)性，SSR，API路線和易於部署 - 所有這些都是乾淨(jìng)的，最小的語(yǔ)法。無(wú)論您是建立個(gè)人項(xiàng)目還是啟動(dòng)MVP，這都是全棧應(yīng)用程序的引人注目的選擇。

基本上，如果您想編寫更多的代碼，那麼Sveltekit值得嘗試。

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