如何构建 Sveltekit 前端并将其连接到后端？

在本教程中，您将使用 sveltekit 构建一个待办事项列表应用程序，并将其连接到由 back4app 提供的托管后端服务。 如果您想掌握基本的 crud（创建、读取、更新、删除）操作，并使用 sveltekit 创建动态、响应式界面，那么本指南就是为您设计的。在本教程结束时，您的应用程序将与处理数据存储、身份验证等的后端无缝交互。 开发全栈应用程序可能会因后端配置和数据库管理而变得复杂。为了简化您的工作流程，我们使用 back4app——一个强大的后端即服务——这样您就可以专注于打造出色的 sveltekit 前端。 back4app 提供完全托管的 nosql 数据库、身份验证、自定义逻辑的云代码以及平滑集成的 sdk。这使您能够构建和部署可扩展的应用程序，而无需管理服务器基础设施。 关键要点 通过遵循本教程，您将： 使用 vite 初始化一个现代 sveltekit 项目。 集成后端服务以管理您应用程序的数据。 实现动态的基本 crud 操作 待办事项列表 。 使用 back4app 上的容器化工作流部署您的完全功能应用程序。 前提条件 在开始之前，请确保您拥有 node js 和 npm 已安装在您的机器上。通过运行 node v 和 npm v 来验证 基本的 sveltekit 知识 , 包括路由、加载函数和响应式变量 一个 back4app 账户 用于管理您的后端服务。如果您还没有，请在 back4app https //www back4app com/ 注册 有了这些前提条件，您就可以开始构建您的项目了 项目设置 首先设置您的本地开发环境并初始化一个新的 sveltekit 项目 确保您已安装 node js (lts 版本) 。如果没有，请从 nodejs org https //nodejs org/ 下载 通过运行以下命令创建您的 sveltekit 项目 npx sv create todo app 在提示时，选择最适合您项目的 sveltekit 选项（例如，骨架项目，如果需要则选择 typescript）。 导航到您的项目目录： cd todo app 启动开发服务器以验证设置： npm run dev 您的 sveltekit 应用现在应该在浏览器中打开。前端准备好后，继续在 back4app 上创建后端。 创建 todo 后端 back4app 提供一个完全托管的后端服务，基于 parse 它包括一个 nosql 数据库、身份验证、云代码和自动生成的 api。 按照以下步骤设置您的后端： 登录 到您的 back4app 控制面板 https //www back4app com/ 并点击 "创建新应用"。 命名您的应用 （例如， todoapp ) 并选择 nodejs/parse 作为后端类型。 导航到 "数据库" > "浏览器" , 点击 "创建一个类" , 并选择 "自定义" 命名该类为 任务 并配置为公共读写（您可以稍后细化这些权限）。 在 任务 类中，添加以下字段： 标题 （字符串）– 任务标题。 描述 （字符串）– 关于任务的详细信息。 完成 （布尔值）– 任务完成状态。 截止日期 （日期）– 任务的截止日期。 点击 "保存" 创建模式。 将 back4app 与 sveltekit 集成 您将使用 parse javascript sdk 将您的 sveltekit 应用连接到 back4app 后端。 安装 parse sdk npm install parse 通过编辑 src/app html 或创建一个专用模块（例如， src/lib/parseclient js ) 来配置 sdk。例如，创建 src/lib/parseclient js ，内容如下 import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; 您现在可以在 sveltekit 路由或组件中导入此模块以与 back4app 交互。 开发前端 您的 sveltekit 应用程序将由路由和组件组成，以添加、显示、更新和删除任务。利用 sveltekit 的基于文件的路由和响应式变量进行动态更新。 构建您的组件 创建一个 src/lib/components 文件夹来组织您的组件 mkdir p src/lib/components 您将创建以下组件 taskform svelte – 用于添加新任务 tasklist svelte – 用于显示任务列表 taskitem svelte – 用于表示单个任务 taskform svelte 该组件渲染一个表单，用于捕获任务详细信息并将其提交到 back4app。 \<script> import { createeventdispatcher } from 'svelte'; import parse from '$lib/parseclient'; let title = ''; let description = ''; const dispatch = createeventdispatcher(); async function handlesubmit(event) { event preventdefault(); try { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('description', description); task set('completed', false); await task save(); dispatch('refresh'); title = ''; description = ''; } catch (error) { console error('error adding task ', error); } } \</script> \<form on\ submit|preventdefault={handlesubmit}> \<input type="text" placeholder="task title" bind\ value={title} required /> \<input type="text" placeholder="description" bind\ value={description} required /> \<button type="submit">add task\</button> \</form> taskitem svelte 该组件表示一个单独的任务，带有按钮用于切换其完成状态或删除任务。 \<script> import parse from '$lib/parseclient'; export let task; export let refresh; async function togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(task id); tasktoupdate set('completed', !task completed); await tasktoupdate save(); refresh(); } catch (error) { console error('error updating task ', error); } } async function deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(task id); await tasktodelete destroy(); refresh(); } catch (error) { console error('error deleting task ', error); } } \</script> \<div class="task item {task completed ? 'completed' ''}"> \<div> \<h3>{task title}\</h3> \<p>{task description}\</p> \</div> \<div> \<button on\ click={togglecomplete}> {task completed ? 'undo' 'complete'} \</button> \<button on\ click={deletetask}>delete\</button> \</div> \</div> tasklist svelte 该组件通过迭代数组并使用 taskitem 组件渲染每个任务来显示所有任务。 \<script> import taskitem from '$lib/components/taskitem svelte'; export let tasks = \[]; export let refresh; \</script> {#if tasks length === 0} \<p>no tasks available\</p> {\ else} {#each tasks as task (task id)} \<taskitem {task} {refresh} /> {/each} {/if} +page svelte（主路由） 在你的主 sveltekit 路由中（例如， src/routes/+page svelte ），管理任务的状态并集成组件。 \<script> import { onmount } from 'svelte'; import parse from '$lib/parseclient'; import taskform from '$lib/components/taskform svelte'; import tasklist from '$lib/components/tasklist svelte'; let tasks = \[]; async function fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } onmount(fetchtasks); \</script> \<div class="container"> \<h1>to do list\</h1> \<taskform on\ refresh={fetchtasks} /> \<tasklist {tasks} refresh={fetchtasks} /> \</div> 应用程序样式 创建一个全局样式表（例如， src/app css ）以添加基本样式： container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } 在你的 src/app html 或主布局文件中导入此样式表。 在 back4app 上部署前端 back4app web deployment 提供了一个容器化环境来托管你的 sveltekit 应用程序。 为生产配置 vite 如有必要，更新你的 vite config js 以设置容器化环境的基本路径： import { sveltekit } from '@sveltejs/kit/vite'; import { defineconfig } from 'vite'; export default defineconfig({ plugins \[sveltekit()], base ' /', }); 生成生产构建： npm run build 创建 dockerfile 在你可以本地测试 docker 容器之前，你需要安装 adapter node ，它为 node js 构建你的站点。要做到这一点，请在终端中运行以下命令： npm i d @sveltejs/adapter node 安装 adapter node 后，打开 svelte config js 文件，将其中的代码替换为以下代码块： import adapter from '@sveltejs/adapter node'; / @type {import('@sveltejs/kit') config} / const config = { &#x9;kit { &#x9; // adapter auto only supports some environments, see https //svelte dev/docs/kit/adapter auto for a list &#x9; // if your environment is not supported, or you settled on a specific environment, switch out the adapter &#x9; // see https //svelte dev/docs/kit/adapters for more information about adapters &#x9; adapter adapter() &#x9;} }; export default config; 现在，在您的项目根目录中创建一个 dockerfile ，内容如下： from node 22 alpine as builder workdir /app copy package json / run npm ci copy run npm run build run npm prune production from node 22 alpine workdir /app copy from=builder /app/build build/ copy from=builder /app/node modules node modules/ copy package json expose 3000 env node env=production cmd \[ "node", "build" ] 本地测试 docker 容器 构建您的 docker 镜像： docker build t todo frontend 运行容器： docker run p 3000 3000 todo frontend 在浏览器中打开 http //localhost 3000 以验证您的 sveltekit 应用是否正确提供服务。 部署到 back4app 初始化一个 git 仓库，添加您的项目文件并提交： git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main 登录到 back4app web 部署 https //www back4app com/containers 点击 "创建新应用" , 提供你的项目名称，并选择你的 github 仓库。 授权 back4app 并选择 dockerfile 部署 确认构建设置并点击 "部署" 开始部署过程。 监控你的部署 部署后，使用 back4app 控制面板来 查看调试日志。 监控容器性能和资源使用情况。 在新提交时触发重建。 如有需要，配置自定义域名。 访问你的实时应用程序在 https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ 测试与调试 部署后，确认您的 sveltekit 前端与 back4app 后端正确通信： api 验证： 使用浏览器的开发者工具 (f12 → 网络) 检查 api 调用。 任务操作： 通过 ui 添加、完成和删除任务，并在 back4app 数据库浏览器中验证更新。 错误处理： 检查控制台日志中的错误，并测试边缘情况，例如提交空任务。 性能测试： 使用浏览器工具模拟慢网络条件以评估响应能力。 使用 back4app 与 sveltekit 的最佳实践 为了优化您的应用程序： 高效请求： 在处理多个任务时使用批量操作： const tasks = \[task1, task2, task3]; parse object saveall(tasks); 优化查询 仅检索必要字段 query select('title', 'completed'); 环境管理 将敏感密钥存储在环境变量中 vite parse app id=your app id vite parse js key=your js key 安全 使用acl限制访问 task setacl(new parse acl(parse user current())); 后端卸载 利用云代码处理复杂逻辑以减少api暴露。 结论 您现在已经通过创建sveltekit前端、将其与back4app的后端集成并使用容器化工作流进行部署，构建了一个完整的全栈待办事项应用程序。 本教程指导您完成每一步——从本地开发到云部署——确保您的sveltekit ui与后端服务之间的顺畅交互。 展望未来，考虑增强功能，如实时更新、改进的身份验证和第三方集成。要进一步学习，请访问 back4app文档 https //www back4app com/docs 并探索社区资源。