如何使用 SvelteKit 构建 CRUD 应用？

概述 在本指南中，您将使用 sveltekit 创建一个简单的 crud（创建、读取、更新、删除）应用程序。 我们将演示如何执行标准数据操作，并使用 back4app 管理您的 web 应用程序的后端。教程开始于设置一个名为 basic crud app sveltekit 的 back4app 项目，它作为您强大的后端。 然后，您将通过手动创建集合和字段或利用 back4app ai agent 设计一个可适应的数据库架构。这确保您的数据模型经过优化，以便高效执行 crud 操作。 接下来，您将使用 back4app 管理应用程序——一个无代码、拖放工具——来管理您的集合，从而简化数据管理过程。 最后，您将使用 rest api 将 sveltekit 前端与 back4app 集成。还将配置高级安全措施，例如访问控制，以保护您的后端。 在本教程结束时，您将拥有一个支持 crud 操作以及用户身份验证和动态数据更新的生产就绪 web 应用程序。 要点 掌握创建有效处理数据的crud应用程序，具有可靠的后端。 了解如何构建可扩展的数据库并将其与sveltekit前端连接。 学习如何利用可视化管理工具（back4app admin app）无缝执行数据操作。 探索部署策略，包括docker容器化，以快速启动您的应用程序。 先决条件 在开始之前，请确保您拥有： 一个具有新项目的back4app账户。 请参考 back4app入门指南 https //www back4app com/docs/get started/new parse app 以获取指导。 一个sveltekit开发环境。 按照 官方文档 https //kit svelte dev/docs 安装sveltekit。 对javascript、sveltekit和rest api有基本了解。 查看 sveltekit文档 https //kit svelte dev/docs 以获取更多详细信息。 步骤1 – 项目初始化 设置一个新的back4app项目 登录到您的 back4app 控制面板。 点击“新应用”按钮 在您的控制面板上。 输入项目名称： basic crud app sveltekit 并按照屏幕上的提示创建您的项目。 创建新项目 创建后，您的新项目会出现在您的控制面板上，为后端配置提供一个稳定的平台。 步骤 2 – 制作数据库架构 制定您的数据模型 对于我们的 crud 应用，我们需要创建多个集合。以下是概述所需集合及其字段的示例，以设置您的数据库架构以执行 crud 操作。 1\ 项目集合 此集合包含有关每个项目的详细信息。 字段 数据类型 描述 id 对象id 自动生成的主键。 标题 字符串 项目标题。 描述 字符串 项目的简要概述。 创建于 日期 项目创建时的时间戳。 更新于 日期 最新更新的时间戳。 2\ 用户集合 此集合存储用户凭据和个人资料详细信息。 字段 数据类型 描述 id 对象id 自动生成的主键。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 唯一用户电子邮件地址。 密码哈希 字符串 用于身份验证的加密密码。 创建于 日期 账户创建时间戳。 更新于 日期 最新个人资料更新的时间戳。 您可以通过在 back4app 控制面板中为每个集合建立一个新类并添加相应的列来手动创建这些集合。 创建新类 通过选择适当的数据类型、命名、设置默认值，并在必要时标记为必填项来定义每个字段。 创建列 使用 back4app ai 代理自动创建模式 back4app ai 代理简化了从您的仪表板直接设置模式的过程。通过输入描述您的集合和字段的提示，您可以自动生成数据库结构。 如何使用 ai 代理： 访问 ai 代理： 打开您的 back4app 仪表板并在项目设置中导航到 ai 代理。 描述您的模型： 粘贴详细提示，概述您所需的集合和字段。 审核并确认： 提交后，审核生成的集合和字段定义，然后将其应用于您的项目。 示例提示 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 这种方法节省了时间，并确保您的模式既一致又优化。 步骤 3 – 激活管理应用程序并执行 crud 操作 介绍管理应用程序 back4app 管理应用程序提供了一个可视化界面，可以轻松管理您的后端。通过其拖放功能，执行 crud 操作变得简单明了。 激活管理员应用 前往“更多”部分 在您的 back4app 控制面板中。 选择“管理员应用” 然后点击 “启用管理员应用。” 设置管理员凭据： 创建一个初始管理员用户以建立角色（例如， b4aadminuser ) 和系统集合。 启用管理员应用 激活后，登录管理员应用以开始管理您的数据。 管理员应用仪表板 使用管理员应用管理 crud 操作 在管理员应用中，您可以： 添加记录： 在任何集合中点击“添加记录”按钮（例如，项目）以创建新条目。 查看和编辑记录： 选择一条记录以查看其详细信息或修改其字段。 删除记录： 使用删除选项消除不再需要的条目。 这个直观的界面显著简化了您的数据管理过程。 步骤 4 – 将 sveltekit 连接到 back4app 在通过管理员应用配置好后端后，是时候将您的 sveltekit 前端链接到 back4app。 在 sveltekit 中利用 rest api 您将使用 rest api 调用执行 crud 操作。 获取数据示例 创建一个 sveltekit 端点或组件，从 back4app 检索项目： \<! src/routes/items svelte > \<script> import { onmount } from 'svelte'; let items = \[]; const loaditems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); items = data results; } catch (error) { console error('failed to fetch items ', error); } }; onmount(loaditems); \</script> \<h2>items\</h2> \<ul> {#each items as item (item objectid)} \<li>{item title} – {item description}\</li> {/each} \</ul> 在您的 sveltekit 组件中集成类似的 api 调用，以进行创建、更新和删除操作。 步骤 5 – 保护您的后端 配置访问控制列表 (acls) 通过为每个对象设置 acl 来保护您的数据。例如，要创建一个私有项目： async function createprivateitem(itemdata, ownerid) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } 设置类级权限 (clps) 在 back4app 仪表板中，为每个集合配置 clps，以便只有授权用户可以访问敏感数据。 步骤 6 – 实现用户身份验证 管理用户账户 back4app 使用 parse 的用户类进行身份验证。在您的 sveltekit 应用中，设置与 back4app 通过 rest api 调用交互的注册和登录表单。 示例：用户注册 \<! src/routes/signup svelte > \<script> let username = ''; let email = ''; let password = ''; const handlesignup = async () => { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data objectid) { alert('registration successful!'); } else { alert('sign up failed ' + data error); } } catch (error) { console error('error during sign up ', error); } }; \</script> \<form on\ submit|preventdefault={handlesignup}> \<input type="text" placeholder="username" bind\ value={username} /> \<input type="email" placeholder="email" bind\ value={email} /> \<input type="password" placeholder="password" bind\ value={password} /> \<button type="submit">register\</button> \</form> 可以为用户登录和会话管理实现类似的方法。 第 7 步 – 部署您的 sveltekit 前端 back4app 的 web 部署功能使您能够通过将其链接到 github 存储库来托管您的 sveltekit 前端。本节介绍如何构建生产文件、推送源代码和部署您的网站。 7 1 创建生产构建 在项目目录中打开终端。 运行构建命令： npm run build 这将生成一个 build （或 output ）文件夹，里面包含优化后的静态资源。 验证构建： 确保构建文件夹包含一个 index html 和所有必要的资产目录。 7 2 结构化和上传你的代码 你的代码库应该包含完整的 sveltekit 源代码。一个典型的结构可能是： basic crud app sveltekit/ ├── node modules/ ├── static/ │ └── global css ├── src/ │ ├── routes/ │ │ ├── items svelte │ │ └── signup svelte │ └── lib/ │ └── api js ├── package json └── readme md 示例 api 文件： src/lib/api js export const fetchitems = async () => { const res = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await res json(); return data results; }; 提交到 github 初始化 git（如果尚未完成）： git init 添加你的文件： git add 提交你的更改： git commit m "sveltekit 前端的初始提交" 创建一个 github 仓库： 命名为，例如， basic crud app sveltekit 推送你的代码： git remote add origin https //github com/your username/basic crud app sveltekit git git push u origin main 7 3 将你的 github 仓库与网络部署链接 打开网络部署： 登录 back4app，导航到你的项目（basic crud app sveltekit），并选择 网络部署 选项。 连接到 github： 按照提示链接你的 github 账户，以便 back4app 可以访问你的仓库。 选择你的仓库和分支： 选择你的 sveltekit 仓库（例如， basic crud app sveltekit ）和包含你代码的分支（通常是 main ）。 7 4 设置你的部署 提供这些额外的设置： 构建命令： 如果没有预构建文件夹，请设置命令（例如， npm run build ）。 输出目录： 指定包含静态文件的文件夹（通常是 build 或 output ）。 环境变量： 添加任何必要的变量，例如 api 密钥。 7 5 将您的 sveltekit 应用程序容器化 如果 docker 是您的部署选择，请在您的代码库中包含一个 dockerfile ： \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire source code and build the app copy run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 如果需要，配置 web 部署以使用 docker。 7 6 部署您的应用程序 点击部署按钮： 配置完成后，点击 部署 按钮。 监控部署： back4app 将检索您的代码，执行构建，并在容器中部署您的应用。 获取您的 url： 成功部署后，back4app 会提供一个您托管的 sveltekit 应用的 url。 7 7 验证您的部署 访问 url： 在您的浏览器中打开提供的 url。 测试功能： 确认您的应用加载正确，路由正常工作，所有资源都正确提供。 如有需要进行调试： 使用浏览器开发者工具检查错误，并查看 back4app 日志以进行故障排除。 第8步 – 总结与未来方向 祝贺你成功构建了一个完整的crud应用程序，使用sveltekit和back4app！ 你创建了一个名为 basic crud app sveltekit 的项目，为项目中的items和users设计了详细的集合，并通过admin app管理你的后端。 此外，你通过rest api集成了sveltekit前端，并应用了严格的访问控制。 未来增强功能： 扩展你的前端： 增强你的sveltekit应用程序，提供详细视图、搜索功能和实时通知。 添加高级功能： 实现服务器端逻辑（例如，云函数），集成第三方api，或启用基于角色的权限。 深化你的知识： 访问 back4app文档 https //www back4app com/docs ，探索更多关于性能改进和自定义集成的教程。 本教程使你掌握了使用back4app为你的sveltekit应用程序创建可扩展crud后端所需的技能。享受编码，祝你构建愉快！