如何使用 Ionic 构建 CRUD 应用？

介绍 在本指南中，您将使用ionic创建一个全面的crud（创建、读取、更新、删除）应用程序。 本教程演示了如何设置一个高效管理数据的应用程序，同时将back4app作为您的后端服务进行集成。您将首先配置一个名为 basic crud app ionic 的back4app项目，以作为您的强大数据存储。 接下来，您将通过定义集合和字段来设计一个可扩展的数据架构——可以手动定义或利用back4app ai agent。这确保了您的应用程序后端能够处理基本的数据操作。 接下来，您将利用直观的back4app管理应用程序，该应用程序提供了拖放界面以实现无缝的数据管理，使crud操作的执行变得简单。 最后，您将使用rest/graphql调用将您的ionic前端与back4app集成，并通过高级访问控制来保护您的后端。 在本教程结束时，您将构建一个生产就绪的ionic应用程序，该应用程序不仅支持基本的crud功能，还集成了用户身份验证和强大的数据管理。 关键要点 了解如何构建一个高效管理数据的crud应用程序，使用可靠的后端服务。 学习如何设计可扩展的后端架构，并将其与ionic前端集成，以提供更好的用户体验。 探索如何通过back4app管理应用程序提供的用户友好的拖放界面来管理数据。 深入了解如何通过访问控制措施来保护您的后端。 前提条件 在开始之前，请确保您拥有： 一个 back4app 账户和一个活跃的项目。 有关指导，请访问 开始使用 back4app https //www back4app com/docs/get started/new parse app 一个 ionic 开发环境。 按照 ionic 框架文档 https //ionicframework com/docs/intro/cli 中的说明安装 ionic cli。确保您已安装 node js（v14 或更高版本）。 熟悉 typescript、angular（或您选择的 ionic 框架）和 rest api。 请参考 ionic 文档 https //ionicframework com/docs 以获取更多见解。 步骤 1 – 项目设置 建立一个新的 back4app 项目 登录到您的 back4app 账户。 从您的仪表板选择 “新应用” 为您的项目命名： basic crud app ionic 并按照提示完成设置。 创建新项目 一旦您的项目创建完成，它将列在您的 back4app 仪表板上，作为您后端配置的基础。 步骤 2 – 设计您的数据库架构 构建您的数据模型 对于您的 crud 应用程序，您需要定义几个集合。以下是集合及相应字段的示例，以有效地构建您的数据库。 1\ 项目集合 此集合包含有关每个项目的详细信息。 字段 数据类型 描述 id 对象id 自动生成的主键。 标题 字符串 项目的名称或标题。 描述 字符串 该项目的简要总结。 创建于 日期 项目创建时的时间戳。 更新于 日期 最新更新的时间戳。 2\ 用户集合 此集合存储用户凭据和相关细节。 字段 数据类型 描述 id 对象id 自动生成的主键。 用户名 字符串 用户的唯一用户名。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 用于身份验证的加密密码。 创建于 日期 用户创建时的时间戳。 更新于 日期 用户详细信息修改的时间戳。 您可以通过在 back4app 仪表板中为每个集合创建一个新类并添加适当的列来直接设置这些集合。 创建新类 通过选择数据类型、分配名称和设置默认值或要求，轻松配置每个字段。 创建列 使用 back4app ai 代理进行模式生成 back4app ai 代理简化了模式创建过程。通过在提示中描述您的数据模型，代理自动生成所需的集合和字段。 如何使用 ai 代理 访问 ai 代理 通过您的 back4app 仪表板导航到 ai 代理。 定义您的数据模型 输入详细提示，概述所需的集合及其字段。 审查并实施 评估建议的模式并将其应用于您的项目。 示例提示 create the following collections for 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 – 将 ionic 与 back4app 集成 在配置好后端后，是时候将您的 ionic 前端连接到 back4app。 使用 rest 或 graphql 您可以使用 rest 或 graphql 执行 crud 操作。例如，使用 rest 检索项目： // example rest call within an ionic service async function fetchitems() { 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(); console log('fetched items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); 根据您应用程序的需求，将这些 api 调用集成到您的 ionic 组件中。 步骤 5 – 保护您的后端 设置访问控制列表 (acls) 通过将 acl 应用到对象来增强您的数据安全性。例如，要创建一个私有项目： async function createprivateitem(itemdata any, owneruser any) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl so that only the owner can access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } 配置类级权限 (clps) 在 back4app 仪表板中，为每个集合设置 clps 以定义默认访问规则。此配置将对敏感数据的访问限制为仅经过身份验证或授权的用户。 步骤 6 – 用户身份验证 管理用户账户 back4app 使用 parse 的用户类来管理身份验证。在您的 ionic 应用程序中，按如下方式实现用户注册和登录： // src/app/auth/auth page ts import { component } from '@angular/core'; import parse from ' /parseconfig'; @component({ selector 'app auth', templateurl ' /auth page html', styleurls \[' /auth page scss'], }) export class authpage { username string = ''; password string = ''; email string = ''; async signup() { const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registered successfully!'); } catch (error any) { alert('registration error ' + error message); } } } 可以遵循类似的模式来实现登录和会话管理。还可以通过 back4app 仪表板配置社交登录、电子邮件验证和密码恢复等附加功能。 第 7 步 – 结论和未来方向 恭喜！您已经成功开发了一个使用与 back4app 集成的 ionic 的基本 crud 应用程序。在本教程中，您： 在 back4app 上配置了一个名为 basic crud app ionic 的项目。 为项目中的物品和用户设计了详细的数据库集合。 使用高效的 back4app 管理应用程序管理您的数据。 使用 rest/graphql api 将您的 ionic 前端与后端连接。 使用强大的 acl 和 clp 保护您的后端。 实施用户身份验证以管理用户帐户。 下一步 扩展您的前端 为您的 ionic 应用程序丰富额外的视图、导航和实时更新。 集成高级功能 考虑加入云函数、第三方 api 集成或增强的基于角色的访问控制。 咨询更多资源 探索 back4app 文档 https //www back4app com/docs 和 ionic 资源 https //ionicframework com/docs 以获取高级优化和自定义技术。 通过遵循本教程，您现在具备使用 ionic 和 back4app 构建和保护动态、生产就绪的 crud 应用程序的技能。享受编码和进一步的实验！