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

在本教程中，您将使用 svelte 构建一个待办事项列表应用程序，并将其连接到由 back4app 提供的托管后端服务。 如果您想掌握基本的 crud（创建、读取、更新、删除）操作并使用 svelte 创建直观的界面，本指南是为您设计的。到最后，您的应用程序将与处理数据存储、身份验证等的后端无缝交互。 开发全栈应用程序可能会因后端配置和数据库管理而变得复杂。为了简化您的工作，我们使用 back4app——一个强大的 后端即服务 ——这样您就可以专注于构建动态的 svelte 前端。 back4app 提供完全托管的 nosql 数据库、身份验证、用于自定义逻辑的云代码以及用于顺利集成的 sdk。这使您能够在不管理服务器基础设施的情况下部署可扩展的应用程序。 关键要点 通过遵循本教程，您将： 使用 vite 初始化一个现代 svelte 项目。 无缝集成后端服务以管理您应用程序的数据。 为动态的 待办事项列表 实现基本的 crud 操作。 使用 back4app 上的容器化工作流部署您的完全功能应用程序。 前提条件 在开始之前，请确保您拥有： node js 和 npm 已安装在您的机器上。通过 node v 和 npm v 验证。 基本的 svelte 知识 , 包括组件、响应式变量和事件处理。 一个 back4app 账户 用于管理您的后端服务。如果您还没有，请在 back4app https //www back4app com/ 注册。 在这些前提条件到位后，您就可以开始构建您的项目了。 项目设置 首先设置您的本地开发环境，并使用 vite 初始化一个新的 svelte 项目。 确保您已安装 node js（lts 版本） 。如果没有，请从 nodejs org https //nodejs org/ 下载。 通过运行以下命令创建您的 svelte 项目： npm create vite\@latest todo app template svelte 切换到你的项目目录 cd todo app 安装必要的依赖 npm install 启动开发服务器以验证设置 npm run dev 在浏览器中打开提供的 url，以查看您的 svelte 应用程序的运行情况。前端准备好后，继续在 back4app 上创建您的后端。 创建待办事项后端 back4app 提供一个完全托管的后端服务，基于 parse 。它包括一个 nosql 数据库、身份验证、云代码和自动生成的 api。 按照以下步骤设置您的后端： 登录 到您的 back4app 控制面板 https //www back4app com/ 并点击 "创建新应用。" 为您的应用命名 （例如， todoapp ）并选择 nodejs/parse 作为后端类型。 导航到 "数据库" > "浏览器" ，点击 "创建一个类" ，并选择 "自定义" 。将类命名为 任务 并设置权限以允许公共读取和写入（您可以稍后进行细化）。 在 任务 类中，添加以下字段： 标题 （字符串）– 任务的标题。 描述 （字符串）– 关于任务的详细信息。 完成 （布尔值）– 任务完成状态。 截止日期 （日期）– 任务的截止日期。 点击 "保存" 以创建模式。 将 back4app 与 svelte 集成 要将您的 svelte 应用程序与 back4app 连接，您将使用 parse javascript sdk 安装 parse sdk npm install parse 通过编辑 src/main js 文件来配置 sdk。导入 sdk 并使用您的 应用程序 id 和 javascript 密钥 从 back4app 仪表板初始化它（在 应用设置 > 安全性与密钥 ) 找到这些 import app from ' /app svelte'; 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; const app = new app({ target document getelementbyid('app') }); export default app; 连接后端后，您现在可以构建待办事项列表界面并实现 crud 操作。 开发前端 您的 svelte 应用程序将由组件组成，这些组件让您可以添加、显示、更新和删除任务。您将利用 svelte 的反应性进行动态更新。 构建您的组件 在 src 中创建一个 components 文件夹以组织您的 svelte 组件 mkdir src/components 您将创建以下组件： taskform svelte – 用于添加新任务。 tasklist svelte – 用于显示任务列表。 taskitem svelte – 用于表示单个任务。 taskform svelte 该组件渲染一个表单，用于捕获任务详细信息并将其提交到 back4app。 \<script> import { createeventdispatcher } from 'svelte'; import parse from 'parse/dist/parse min js'; 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 'parse/dist/parse min js'; 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 ' /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} app svelte 在你的主组件中，管理应用程序状态并集成你的任务组件。 \<script> import { onmount } from 'svelte'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform svelte'; import tasklist from ' /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/global 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/main js 中导入这个样式表 import ' /global css'; 在 back4app 上部署前端 back4app web deployment 提供了一个容器化环境来托管您的 svelte 应用程序。 为生产配置 vite 如有必要，调整 vite config js 以正确设置容器化环境的基础路径： import { defineconfig } from 'vite'; import { svelte } from '@sveltejs/vite plugin svelte'; export default defineconfig({ plugins \[svelte()], base ' /', }); 生成生产构建： npm run build 创建 dockerfile 在根目录中创建一个 dockerfile ，内容如下 \# stage 1 build the svelte app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 在本地测试 docker 容器 构建你的 docker 镜像 docker build t todo frontend 运行容器 docker run p 8080 80 todo frontend 在浏览器中打开 http //localhost 8080 以验证你的 svelte 应用是否正确提供 部署到 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/ 测试与调试 部署后，确认您的 svelte 前端与 back4app 后端正确通信： api 验证： 使用浏览器的开发者工具 (f12 → 网络) 检查 api 调用。 任务操作： 通过 ui 添加、完成和删除任务，并在 back4app 数据库浏览器中验证更新。 错误处理： 检查控制台日志中的错误，并测试边缘情况，例如提交空任务。 性能测试： 使用浏览器工具模拟慢网络条件以评估响应能力。 与 svelte 一起使用 back4app 的最佳实践 优化您的应用程序： 高效请求： 在处理多个任务时使用批量操作： const tasks = \[task1, task2, task3]; parse object saveall(tasks); 优化查询 仅检索必要字段 query select('title', 'completed'); 环境变量 将敏感密钥存储在一个 env 文件中 vite parse app id=your app id vite parse js key=your js key 安全性 使用 acl 限制访问 task setacl(new parse acl(parse user current())); 后端卸载 利用云代码处理复杂的业务逻辑以减少 api 暴露。 结论 您现在已经通过创建 svelte 前端、将其与 back4app 的后端集成并使用容器化工作流进行部署，构建了一个全栈待办事项应用程序。 本教程带您完成每一步——从本地开发到云部署——确保您的 svelte ui 与后端服务之间的顺畅交互。 展望未来，考虑通过实时更新、改进身份验证和第三方集成来增强您的应用程序。有关进一步学习，请访问 back4app 文档 https //www back4app com/docs 并探索社区资源。