如何使用 Svelte 创建 CRUD 应用？

概述 在本教程中，您将学习如何使用 svelte 构建一个完整的 crud（创建、读取、更新、删除）应用程序。 我们将利用 back4app 作为我们的后端平台，它提供了一个强大的低代码后端来管理您的应用程序数据。 本指南解释了如何设置 back4app 项目，设计灵活的数据架构，并在 svelte 应用程序中实现 crud 操作。 最初，您将创建一个名为 basic crud app svelte 的 back4app 项目。该项目构成了您后端设置的基础，您将在此手动定义数据架构或借助 back4app 的集成 ai 代理。 接下来，您将探索 back4app 管理应用程序——一个用户友好的数据管理界面——使您能够轻松执行 crud 操作。 最后，您将把 svelte 应用程序连接到 back4app，使用 parse javascript sdk 或直接的 rest/graphql api 调用，同时确保安全的数据处理。 在本教程结束时，您将拥有一个功能齐全的 svelte 应用程序，能够执行基本的 crud 任务，并具备安全的用户身份验证。 您将学习什么 如何设置基于 svelte 的 crud 应用程序，并具有灵活的后端。 组织您的后端并将其连接到 svelte 应用程序的方法。 如何利用 back4app 管理应用程序实现无缝的数据操作。 部署您的 svelte 应用程序的策略，包括 docker 容器化。 先决条件 在开始之前，请确保您拥有： 一个具有活动项目的 back4app 账户。 需要帮助？访问 back4app 入门指南 https //www back4app com/docs/get started/new parse app 以获取指导。 一个 svelte 开发环境。 您可以使用像 vscode 这样的代码编辑器，并确保安装了 node js。 对 svelte、javascript 和 rest api 的基本了解。 如有需要，请查看 svelte 文档 https //svelte dev/docs 。 步骤 1 – 设置您的项目 启动一个新的 back4app 项目 登录到您的 back4app 账户。 点击仪表板上的“新应用”按钮 为您的项目命名： basic crud app svelte 并按照屏幕上的说明完成设置。 创建新项目 创建项目后，您将在仪表板上看到它，这为配置您的后端提供了基础。 步骤 2 – 构建数据架构 构建您的数据 对于这个 crud 应用程序，您需要在 back4app 项目中定义几个集合。以下是支持您的 svelte crud 操作所需的关键集合和字段的示例。 1\ 项目集合 此集合存储每个项目的信息。 字段 类型 细节 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 项目的简要描述。 创建于 日期 项目创建时的时间戳。 更新时间 日期 该项目最后更新的时间戳。 2\ 用户集合 此集合管理用户凭据和身份验证详细信息。 字段 类型 细节 id 对象id 自动生成的唯一标识符。 用户名 字符串 每个用户的唯一用户名。 电子邮件 字符串 用户的电子邮件地址。 密码哈希 字符串 用于身份验证的加密密码。 创建于 日期 账户创建时间戳。 更新时间 日期 上次账户更新的时间戳。 您可以直接从您的 back4app 控制面板创建这些集合并定义字段。 创建新类 您可以通过选择适当的类型、命名字段、设置默认值并将其标记为必填来添加字段。 创建列 使用 back4app ai 代理快速生成模式 back4app 中集成的 ai 代理可以根据简单的描述自动设置您的数据模式。此工具简化了设置过程，并确保您的模式针对 crud 操作进行了优化。 如何利用 ai 代理： 打开 ai 代理： 在您的 back4app 仪表板的项目设置中，找到 ai 代理。 详细说明您的架构要求： 提供一个清晰的提示，概述您需要的集合和字段。 审核并确认： 检查提议的架构并确认应用它。 示例提示 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) 此方法节省时间，并确保您的后端架构与应用程序的需求完美对齐。 步骤 3 – 使用管理应用管理数据 管理应用概述 back4app 管理应用提供了一个无代码环境来管理您的后端数据。通过其拖放界面，您可以轻松执行添加、编辑和删除记录等操作。 激活管理应用 转到“更多”菜单 在您的 back4app 仪表板中。 选择“管理应用” 然后点击 “启用管理应用。” 设置您的管理员帐户 按照提示建立您的凭据。此过程还将设置角色（如 b4aadminuser ) 和其他系统配置。 启用管理应用 启用后，登录管理应用以有效管理您项目的数据。 管理员应用仪表板 如何使用管理员应用 插入新记录： 在集合中使用“添加记录”功能（如项目）以引入新数据。 检查或编辑记录： 单击记录以查看其详细信息或修改其字段。 删除记录： 删除过时或不必要的数据条目。 这个直观的界面使管理您的后端数据变得简单高效。 步骤 4 – 将您的 svelte 应用连接到 back4app 现在您的后端已设置好，是时候将您的 svelte 应用程序链接到 back4app 了。 选项 a：使用 parse javascript sdk 安装 sdk： 使用 npm 或 yarn 安装 parse javascript sdk： npm install parse 在您的 svelte 应用中初始化 parse： 在您的主 javascript 文件中（例如， src/main js ），初始化 parse： // src/main js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; // 您的 svelte 应用初始化代码如下 实现 crud 函数： 创建一个模块（例如， src/services/items js ) 来处理 crud 操作： // src/services/items js import parse from 'parse'; export async function fetchitems() { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("获取项目时出错：", error); return \[]; } } export async function additem(title, description) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("项目成功创建！"); } catch (error) { console error("创建项目时出错：", error); } } export async function updateitem(objectid, newtitle, newdescription) { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("项目成功更新！"); } catch (error) { console error("更新项目时出错：", error); } } export async function removeitem(objectid) { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("项目成功删除！"); } catch (error) { console error("删除项目时出错：", error); } } 选项 b：使用 rest/graphql api 如果 parse sdk 不适合您的用例，您可以直接调用 back4app 的 rest 或 graphql 端点。例如，通过 rest 检索项目： export async function getitemsrest() { 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(); return data results; } catch (error) { console error("rest error fetching items ", error); return \[]; } } 根据需要在您的 svelte 组件中集成这些 api 调用。 步骤 5 – 保护您的后端 使用访问控制列表 (acls) 通过在您的对象上设置 acl 来增强数据的安全性。例如，要创建一个仅对其所有者可见的项目： import parse from 'parse'; export async function createprivateitem(title, description, owner) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item successfully created!"); } catch (error) { console error("error saving private item ", error); } } 设置类级权限 (clps) 直接在您的 back4app 仪表板中配置 clp，以限制访问，使只有经过身份验证的用户才能与某些集合进行交互。 步骤 6 – 在 svelte 中实现用户身份验证 设置用户帐户 back4app 利用 parse 的内置用户集合来管理身份验证。在您的 svelte 应用中，实现类似于以下示例的注册和登录功能： import parse from 'parse'; export async function registeruser(username, password, email) { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("registration error ", error); } } export async function loginuser(username, password) { try { const user = await parse user login(username, password); console log("user logged in ", user get("username")); } catch (error) { console error("login failed ", error); } } 这种方法可以扩展到管理会话、密码重置和其他身份验证功能。 第7步 – 部署您的svelte应用程序 back4app简化了部署过程。您可以使用多种方法部署您的svelte应用程序，包括docker容器化。 7 1 构建您的svelte应用程序 编译您的应用程序： 运行您的svelte构建命令，通常是： npm run build 检查构建： 确保生成的文件（通常在 public 或 build 文件夹中）包含所有必要的资产。 7 2 项目结构示例 一个典型的svelte项目结构可能如下所示： basic crud app svelte/ \| public/ \| | build/ \| | global css \| | index html \| src/ \| | components/ \| | | itemlist svelte \| | | itemform svelte \| | services/ \| | | items js \| | | auth js \| | app svelte \| | main js \| package json \| readme md 7 3 docker化您的svelte应用程序 如果您更喜欢容器化部署，请在项目根目录中创建一个 dockerfile ： \# use a node js image to build the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the project files and build the app copy run npm run build \# use a lightweight server to serve the built files from nginx\ alpine copy from=build /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 通过 back4app web 部署 链接您的 github 仓库： 在 github 上托管您的 svelte 项目。 在 back4app 中设置部署： 在 back4app 仪表板中，选择 web 部署 选项，连接您的仓库（例如， basic crud app svelte ），并选择您的目标分支。 定义构建设置： 指定您的构建命令（如 npm run build ) 并指向构建输出目录。 部署您的应用： 点击 部署 并监控日志，直到您的应用上线。 第 8 步 – 总结与未来增强 恭喜！您已经构建了一个基于 svelte 的 crud 应用程序，连接到 back4app。 您设置了一个名为 basic crud app svelte 的项目，配置了项目的 items 和 users 集合，并通过 back4app 管理应用程序管理您的数据。 然后，您使用 parse javascript sdk（或 rest/graphql）集成了 svelte 前端，并添加了强大的安全措施。 接下来是什么？ 扩展功能： 添加高级搜索、详细视图或实时更新等功能。 增强后端逻辑： 尝试云函数、第三方 api 集成或基于角色的访问控制。 深化您的学习： 进一步探索教程和 back4app 文档 https //www back4app com/docs 以优化您的应用程序。 祝您编码愉快，享受构建您的 svelte crud 应用程序的过程！