如何创建 SvelteKit 应用程序？

SvelteKit 是一个用于构建网络应用程序的强大框架，它将 Svelte 框架的简洁性和性能与其他功能相结合。它是使用 Svelte 构建应用程序的官方框架。

SvelteKit 基于 Svelte 的原理，Svelte 是一个基于组件的框架，可在构建过程中将应用程序代码编译成高效的 JavaScript 代码。

SvelteKit 在此基础上更进一步，提供了一个成熟的应用程序框架，具有路由、服务器端渲染（SSR）和开箱即用的代码拆分等功能。

在本文中，您将探索 SvelteKit，并使用 SvelteKit 和 Back4app 构建一个基本应用程序。

SvelteKit 的优势

SvelteKit 具有多项优势。以下是 SvelteKit 的一些主要优势：

性能

SvelteKit 以其卓越的性能而闻名。它的框架体积小，因此初始页面加载速度更快。SvelteKit 还使用反应式更新，只更新 DOM 中发生变化的部分。这就产生了一个响应灵敏、使用流畅的高性能应用程序。

SvelteKit 可在构建过程中编译应用程序代码，从而生成高度优化和高效的 JavaScript 代码。这种方法无需运行时框架，从而加快了加载时间并提高了性能。

小捆尺寸

与其他框架相比，SvelteKit 生成的捆绑包尺寸较小。为此，它只包含每个组件所需的代码，从而将开销降至最低。这对网络连接速度较慢或带宽有限的用户非常有利。

SvelteKit 的捆绑包体积小，可提高性能并增强移动设备上的用户体验。它还能实现高效的代码分割和懒加载，从而改善开发人员的体验。

丰富的组件生态系统

丰富的组件生态系统是 SvelteKit 的一大优势。SvelteKit 为开发人员提供了大量预构建和可定制的组件，可以轻松集成到他们的应用程序中。

SvelteKit 中丰富的组件生态系统可加快开发速度、提高用户界面的一致性并促进代码的可重用性。此外，它还能与其他库和工具一起实现快速原型开发和扩展。

服务器端渲染（SSR）

SvelteKit 提供服务器端渲染功能，使开发人员能够先在服务器上进行页面预渲染，然后再将其发送到客户端。这种方法可提高初始页面加载速度，优化搜索引擎可见性，并提升整体用户体验。

SvelteKit 中的服务器端渲染可提高 SvelteKit 应用程序的整体性能。它还能实现缓存、动态内容、无缝导航和代码共享。

内置路由

SvelteKit 提供了一个内置路由系统，可简化应用程序路由的管理。它允许开发人员声明式地定义路由。开发人员还可以定义带有参数的路由，以创建动态页面。

SvelteKit 的路由系统提供编程导航。开发人员可以使用 SvelteKit 提供的函数以编程方式导航到不同的路由。SvelteKit 还提供路由保护和中间件功能，允许开发人员实现高级路由逻辑。

SvelteKit 的局限性

虽然 SvelteKit 有很多优点，但它也有一些限制，开发人员应该注意。以下是一些限制：

学习曲线

与React或Angular 等其他框架相比，SvelteKit 相对较新，因此可用的学习资源可能较少。SvelteKit 引入了一些独特的概念和语法，这对新开发人员来说可能具有挑战性。

已经熟悉 Svelte 的开发人员可能会发现过渡到 SvelteKit 更容易，但那些刚接触 Svelte 的开发人员可能需要投入时间学习该框架。

社区支持有限

由于 SvelteKit 仍在不断普及，社区支持可能不如其他框架广泛。SvelteKit 有限的社区支持可能会给开发人员的学习、故障排除和求职带来困难。

不过，该社区正在不断壮大，而且有一些方法可以减轻有限支持带来的影响。例如，开发人员可以通过论坛和社交媒体平台与现有的 Svelte 社区互动。

与现有代码库的兼容性

如果您现有的代码库是使用其他框架构建的，那么将其迁移到 SvelteKit 可能需要花费大量精力。SvelteKit 采用不同的架构方法，需要重写整个代码库的逻辑。

SvelteKit 引入了路由系统，这可能会与现有代码库的路由机制发生冲突。在迁移到 SvelteKit 时，您可能需要学习新概念并调整现有知识。

项目介绍

通过本教程，您将使用 SvelteKit 框架创建一个基本的反馈应用程序。反馈应用程序将提供 CRUD（创建、读取、更新、删除）功能，并使用 Back4app 进行数据存储。

构建 SvelteKit 应用程序

要创建 Sveltekit 应用程序，请在终端运行以下命令：

npm create svelte@latest feedback-application

运行上述代码后，会有几个提示引导您配置应用程序。这些提示如下所示

配置应用程序后，导航至应用程序目录并安装必要的依赖项。为此，请在终端运行以下代码：

cd feedback-application
npm install

现在，您已成功创建了反馈应用程序并安装了必要的依赖项。您将在应用程序中添加一些 Google 字体，以改善应用程序的外观。为此，您需要在src目录下的app.html文件中添加字体链接。这些链接可以在Google Fonts上找到。

您将在应用程序中使用 Comforter 和 Montserrat 字体。在app.html文件的head标记中添加以下代码，即可在应用程序中使用这些字体。

<!-- app.html -->
<link href="<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>" rel="stylesheet">
<link href="<https://fonts.googleapis.com/css2?family=Comforter&display=swap>" rel="stylesheet">

接下来，你要为应用程序添加一些全局样式。为此，请浏览样式文件夹中的global.css文件。您可以在src目录中找到样式文件夹。

在global.css文件中，写入以下代码：

/* global.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 40%;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
    background-color: #f2f2f2;
}

input{
    border: none;
    border-radius: 12px;
    padding: 1rem;
    background-color: #FFFFFF;
    color: #808080;
    inline-size: 100%;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    color: #f2f2f2;
    background-color: #333333;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color: #f2f2f2;
    color: #333333;
}

然后，创建应用程序的布局。您可以使用+layout.svelte文件定义应用程序的布局。+layout.svelte文件是一个特殊文件，用于创建可重复使用的布局组件，定义页面布局的结构。确保在src/routes目录中创建了+layout.svelte文件。

像这样定义应用程序的布局：

<!-- +layout.svelte -->
<script>
    import '../style/global.css'
</script>

<header>
    <h1>Feedback App</h1>
</header>
<slot></slot>

<style>

    h1{
        text-align: center;
        padding: 1rem 0;
        font-family: 'Comforter', cursive;
    }

</style>

上面的代码块导入了global.css文件，将全局样式应用到应用程序中。它还定义了一个标题元素。标题元素中包含一个h1元素，其文本为 “反馈应用程序”。

槽元素定义了页面内容的占位符。渲染页面时，应用程序会将其内容插入槽中，使其在布局中可见。在代码块的样式部分，你可以为h1元素设置样式。

现在，您已经为应用程序定义了样式和布局。接下来，您将创建应用程序的主页。为此，请在位于src/routes目录下的+page.svelte文件中编写以下代码。

<!-- +page.svelte -->
<script lang="ts">
    let data = {
        feedback: '',
        rating: '',
    }

    const handleClick = (event: any) => {
        data.rating = event.target.value;
    }
</script>

<div class="page">
    <form>
        <input type="text" placeholder="Share your thought" name="feedback" bind:value={data.feedback}/>

        <div class="rating">
            <input type="button" value="1" class="button" on:click={handleClick}>
            <input type="button" value="2" class="button" on:click={handleClick}>
            <input type="button" value="3" class="button" on:click={handleClick}>
            <input type="button" value="4" class="button" on:click={handleClick}>
            <input type="button" value="5" class="button" on:click={handleClick}>
        </div>

        <button>Post</button>
    </form>
</div>

<style>
    form{
        margin-block-start: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .button{
        border-radius: 100%;
        color: #333333;
        padding: 1rem 1.5rem;
        background-color:#ffffff;
    }

    .button:hover{
        background-color: #333333;
        color: #f2f2f2;
    }

    .rating{
        display: flex; 
        gap: 5rem;
    }
</style>

上面的代码块创建了一个带有简单评级系统的反馈表单。您可以在文本字段中输入您的想法，并通过点击编号按钮对您的体验进行评分。应用程序会将您的输入存储在数据对象中。

handleClick函数将您的评分存储在data.rating属性中，而绑定指令将您的反馈存储在data.feedback属性中。通过绑定指令，您可以在输入值和组件中的数据之间实现双向数据绑定。

现在，您可以在网络浏览器上查看应用程序了。为此，请在终端导航到项目目录并运行以下命令：

npm run dev

运行上述命令后，您将获得http://localhost:5173/ 链接。在网络浏览器上导航至该链接，即可查看您的应用程序。

如果您正确地按照教程操作，您的应用程序应该是这样的：

将 Back4app 与您的应用程序集成

Back4App 是一个后台即服务（BaaS）平台，为您构建和管理应用程序的后台功能提供工具和基础设施。有了 Back4App，您就可以专注于为您的应用程序构建强大的功能，而不必担心设置和维护后台服务器的复杂性。Back4app 提供许多强大的功能，包括数据库管理、用户身份验证、API 托管等。

创建 Back4app 账户

在使用 Back4app 提供的强大功能之前，您需要拥有一个 Back4app 帐户。您可以通过以下简单步骤创建一个账户：

1. 访问Back4app 网站。
2. 点击 “注册 “按钮。
3. 填写报名表并提交。

介绍 Back4app ChatGPT 插件

随着最近使用人工智能使开发人员的生活更轻松的趋势，Back4app 推出了 ChatGPT 插件。该插件可帮助开发人员和非技术爱好者创建 Back4app 应用程序并与之互动。

通过该插件，您可以将与 ChatGPT 的对话转换为真正的应用程序。这意味着即使您是开发新手或使用 Back4App 平台的新手，也可以轻松创建和定制 Back4App 应用程序。

要使用 ChatGPT 上的插件，请确保您已订阅 ChatGPT Plus。订阅 ChatGPT Plus 后，如果您尚未订阅，请单击“GPT-4 “按钮，弹出窗口中将显示相关选项。

选择插件选项，然后选择 Back4app 插件。这将允许您使用 Back4app 的 ChatGPT 插件。

使用插件创建 Back4app 应用程序

有了 ChatGPT 上的 Back4app 插件，创建 Back4app 应用程序就变得轻而易举。只需告诉 ChatGPT 您想创建什么样的应用程序，剩下的就交给它吧。

例如

创建应用程序后，浏览 Back4app 网站，登录并检查您的应用程序，确认应用程序已创建。

向 Back4app 应用程序添加数据

您可以使用 Back4app 的 ChatGPT 插件为应用程序添加数据。在这里，您将要求 ChatGPT 在反馈应用程序中创建一个反馈类，并在其中填充自定义反馈。

下面举例说明如何做到这一点：

插件会在应用程序中创建 “反馈 “类，并要求提供要添加的自定义反馈的示例。

在给出自定义反馈示例后，插件会在应用程序中生成相应的反馈和评级。您可以向 ChatGPT 提供更多反馈和评级，从而为应用程序添加更多反馈和评级。

现在，您可以确认插件已在应用程序中生成了反馈类以及自定义反馈和评级。

连接到 Back4app

下一步是将您的应用程序连接到 Back4app 应用程序。为此，您需要安装 Parse JavaScript SDK。您可以在终端运行以下代码进行安装：

npm install parse

完成 Parse JavaScript SDK 的安装后。您将使用应用程序 ID和Javascript KEY凭证。您可以在 Back4app 应用程序控制面板的 “安全与密钥“部分找到这些凭证。将应用程序 ID和Javascript KEY安全地存储在您的应用程序中。

将Parse的最小化版本从parse导入src目录中的+page.svelte文件，并调用初始化方法。该方法将应用程序 ID和Javascript KEY认证作为参数。

例如

//+page.svelte
import Parse from 'parse/dist/parse.min.js';
Parse.initialize(APPLICATION_ID, JAVASCRIPT_KEY);

请注意，上述代码块应添加到+page.svelte文件的脚本标记中。调用Parse 的初始化方法后，下一步是将Parse的serverURL属性设置为https://parseapi.back4app.com/。

就像这样

//+page.svelte
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";

从 Back4app 获取数据

在显示 Back4app 应用程序中已有的数据之前，您需要获取数据。要获取数据，您需要创建一个函数fetchFeedbacks。该函数将包含从应用程序中获取反馈和评分的逻辑。

在创建功能之前，先创建一个卡片组件。卡片组件决定了反馈的外观和感觉。要创建卡片组件，首先要在src目录中创建一个components文件夹。然后，在组件文件夹中创建card.svelte文件。

在card.svelte文件中，写入以下代码：

<!-- card.svelte -->
<script lang="ts">
	export let feedback: string = '';
	export let rating: number = 0;
</script>

<div class="card">
	 <h5>{feedback}</h5>
	 <p>{rating} ratings</p>
</div>

<style>
	.card{
	    display: flex;
	    justify-content: space-between;
	    padding: 1rem;
	    background-color: #FFFFFF;
	    border-radius: 12px;
	    inline-size: 100%;
	    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
	}
</style>

这段代码定义了卡片组件。在脚本标签中，代码将反馈和评级变量导出为道具。这意味着导入该组件的组件可以定义这些道具的值。代码将反馈变量初始化为空字符串，将评分变量初始化为 0。

div标签代表卡片组件的主要结构，style标签包含应用于卡片组件的 CSS 样式。

接下来，在+page.svelte 的脚本标签中导入卡片组件，并创建fetchFeedbacks函数。

就像这样

//+page.svelte
import Card from "../components/card.svelte";
import { onMount } from "svelte";

let feedbackData: any = [];

const fetchFeedbacks = async () => {
  try {
    const query = new Parse.Query("Feedback");
    const feedbacks = await query.find();
    feedbackData = feedbacks;
  } catch (error) {
    console.log(error);
  }
};

onMount(fetchFeedbacks);

这段代码定义了fetchFeedbacks函数。它还使用onMount生命周期钩子，通过调用fetchFeedbacks函数从数据库中获取反馈信息。

fetchFeedbacks函数使用Parse.Query()方法在应用程序的数据库中搜索“反馈 “对象。然后，它在Parse.Query()调用的结果上调用 Parse SDK 的find( )方法，返回一个查询结果数组。最后，它将结果数组赋值给feedbackData变量。

现在，在包含+page.svelte文件 HTML 元素的div标签中，使用 Svelte 的eachblock 来呈现feedbackData数组中的数据。

例如

<!-- +page.svelte -->
<div class="feedbacks">
	{#each feedbackData as feedback}
	    <Card feedback={feedback.get('feedbackText')} rating={feedback.get('rating')}/>
	{/each}  
</div>

在 div 标签中，each块遍历feedbackData数组，并将每个元素赋值给变量feedback。对于数组中的每个反馈，都要渲染卡片组件。使用feedback 的 get()方法获取feedbackText和rating的值。然后将这些值传递给卡片组件的feedback和rating属性。

将下面的代码块添加到+page.svelte文件的样式标签中，为div标签添加类反馈 样式：

/* +page.svelte */
.feedbacks{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-block-start: 3rem;
	border: 2px #e2e2e2 solid;
	padding: 2rem;
	border-radius: 7px;
}

从应用程序向 Back4app 添加数据

最初，您使用 Back4app 的 ChatGPT 插件向 Back4app 应用程序添加数据，但您应用程序的用户无法这样做。为了让用户能够从应用程序中添加数据，您将创建一个功能，将新的反馈和评分添加到 Back4app 应用程序的数据库中。

就像这样

// +page.svelte
const handleSubmit = () => {
  try {
    const Feedback = new Parse.Object("Feedback");
    Feedback.set("feedbackText", data.feedback);
    Feedback.set("rating", +data.rating);
    Feedback.save().then(() => {
      console.log("New Feedback added successfully");
    });
  } catch (error) {
    console.log(error);
  }

  fetchFeedbacks();
};

将上述代码块添加到+page.svelte文件的脚本标记中。handleSubmit()函数会创建一个新的 Parse“反馈 “对象，并将其feedbackText和rating属性设置为data.feedback和data.rating 的值。然后使用save()方法将该对象保存到 Parse 服务器。最后，函数会调用fetchFeedbacks()函数。

现在，使用事件绑定将handleSubmit函数绑定到+page.svelte文件中的表单。将函数绑定到on:submit事件，这样每当用户提交表单时，函数就会运行。

<form on:submit={handleSubmit}>
	<input 
	type="text" 
	placeholder="Share your thought" 
	name="feedback" 
	bind:value={data.feedback}
	/>
	
	<div class="rating">
	    <input type="button" value="1" class="button" on:click={handleClick}>
	    <input type="button" value="2" class="button" on:click={handleClick}>
	    <input type="button" value="3" class="button" on:click={handleClick}>
	    <input type="button" value="4" class="button" on:click={handleClick}>
	    <input type="button" value="5" class="button" on:click={handleClick}>
	</div>
	
	<button>Post</button>
 </form>

从 Back4app 中删除数据

您可以使用 destroy 方法从 Back4app 中删除数据，从而从数据库中删除相应记录。创建一个deleteFeedback函数，其中包含根据给定 ID 从应用程序数据库中删除反馈的逻辑。

在创建deleteFeedback函数之前，更新卡片组件，添加一个deleteFeedbackprop 和一个按钮元素，使用on:click事件将按钮元素绑定到deleteFeedbackprop。用下面的代码块替换card.svelte文件中的代码。

<!-- card.svelte -->
<script lang="ts">
	export let feedback: string = '';
	export let rating: number = 0;
	export let deleteFeedback: any = '';
</script>

<div class="card">
	<div style="display: flex; flex-direction: column; gap: 1rem; ">
	<h5>{feedback}</h5>
	<button on:click={deleteFeedback}>Delete</button>
	</div>
	<p>{rating} ratings</p>
</div>

<style>
	.card{
	  display: flex;
	  justify-content: space-between;
	  padding: 1rem;
	  background-color: #FFFFFF;
	  border-radius: 12px;
	  inline-size: 100%;
	  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
	}
</style>

在+page.svelte文件中创建deleteFeedback函数：

// +page.svelte
const deleteFeedback = async (id: string) => {
  try {
    const Feedback = Parse.Object.extend("Feedback");
    const feedback = new Feedback();
    feedback.id = id;
    await feedback.destroy();
    const newData = feedbackData.filter((item: any) => item.id !== id);
    feedbackData = newData;
  } catch (error) {
    console.log(error);
  }
};

deleteFeedback函数使用Parse.Object.extend方法创建了一个新的“Feedback “对象。然后将该对象的id属性设置为传递给函数的id参数。然后，它调用“Feedback “对象的异步destroy方法，从 Back4app 中删除具有给定 ID 的反馈项。

然后，函数会使用feedbackData.filter方法过滤feedbackData数组。它会过滤掉带有给定id 的反馈项，创建一个没有被删除反馈项的新数组。然后，函数将新数组赋值给feedbackData。

现在，将deleteFeedback函数传递给卡片组件的deleteFeedbackprop。这样，每当用户点击卡片组件中的按钮元素时，deleteFeedback函数就会运行。

就像这样

<!-- +page.svelte -->
<div class="feedbacks">
	{#each feedbackData as feedback}
		<Card 
		feedback={feedback.get('feedbackText')} 
		rating={feedback.get('rating')} 
		deleteFeedback={() => deleteFeedback(feedback.id)}
		/>
	{/each}  
</div>

测试应用程序

您已经完成了应用程序的构建，下一步就是测试了。要测试应用程序，请导航到终端上的应用程序目录并运行开发服务器。

运行开发服务器后，打开浏览器并访问以下链接：http://localhost:5173/。应用程序应如下图所示。

要添加反馈意见，请在输入框中写下 “我非常喜欢这款应用程序”，然后点击带有 “4 “字样的按钮进行评分。最后，点击 “发布 “提交反馈。

要确认您是否添加了新的反馈，在之前的卡片下方会出现一张新的卡片，上面写着 “我非常喜欢这个应用程序”，评分为 4 分。 您也可以在 Back4app 上导航到应用程序的仪表板进行确认。

要删除反馈，只需点击删除按钮。要确认这一点，请删除 “该应用程序太棒了 “的反馈。

结论

SvelteKit 是一个使用 Svelte 开发健壮、高性能网络应用程序的框架。它是一个元框架，这意味着它提供了一套工具和抽象，可用于构建任何类型的网络应用程序。

将 SvelteKit 与 Back4app 集成后，开发人员可专注于开发前端应用程序，而 Back4app 则负责后台。Back4app 降低了后端开发的复杂性，使开发人员更容易创建全栈网络应用程序。

常见问题