如何使用 React Native 创建 CRUD 应用？

概述 在本教程中，您将学习如何制作一个使用 back4app 作为云后端的 react native 应用程序，该应用程序执行基本的 crud（创建、读取、更新、删除）操作。 本指南将引导您在 back4app 中创建项目，设置灵活的数据模型，并使用 restful api 将您的 react native 应用与后端集成。 最初，您将建立一个名为 basic crud app reactnative 的 back4app 项目，以作为您的后端。然后，您将通过在 back4app 仪表板中手动定义类和字段或使用集成的 ai 代理进行协助来设计数据架构。 在配置好后端后，您将使用 back4app 管理应用，该应用提供用户友好的拖放界面来管理您的数据，使执行 crud 操作变得更加容易。 在本指南结束时，您将拥有一个功能齐全的 react native 应用程序，该应用程序可以创建、读取、更新和删除记录，同时还支持安全的用户身份验证和数据处理。 主要好处 构建移动应用： 学习开发一个具有强大后端的 react native crud 应用程序。 后端集成： 了解如何使用 back4app 设计和集成可扩展的数据模型。 轻松的数据管理： 使用 back4app 的管理应用程序快速管理您的应用程序数据。 安全操作： 实施安全的用户身份验证和数据隐私措施。 先决条件 在开始之前，请确保您拥有： 一个活跃的 back4app 账户，并设置了一个新项目。 需要帮助？请参考 开始使用 back4app https //www back4app com/docs/get started/new parse app 。 一个 react native 开发环境。 安装 node js、npm（或 yarn）和 react native cli 等工具。expo 也可以用于快速原型设计。 熟悉 react、javascript 和 rest api。 如果您需要复习，请查阅 react native 文档 https //reactnative dev/docs/getting started 。 步骤 1 – 设置您的 back4app 项目 创建您的 back4app 项目 登录到您的 back4app 账户。 点击“新应用”按钮 在您的仪表板上。 命名您的项目： basic crud app reactnative 并按照提示完成设置。 创建新项目 在您的项目创建后，它将出现在您的仪表板上，为您的后端配置奠定基础。 步骤 2 – 构建您的数据模型 构建您的数据 对于这个 crud 应用，您将在您的 back4app 项目中定义几个集合。以下是支持核心 crud 功能所需的关键集合和字段的示例。 1\ 集合：项目 此集合存储每个项目的详细信息。 字段 类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 该项目的简要说明。 创建于 日期 添加项目的时间戳。 更新时间 日期 最近更新的时间戳。 2\ 收集：用户 此集合管理用户凭据和身份验证信息。 字段 类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的电子邮件地址（必须是唯一的）。 密码哈希 字符串 用于安全登录的哈希密码。 创建于 日期 账户创建的时间。 更新时间 日期 账户详细信息最后更新的时间。 您可以通过 back4app 控制面板定义这些集合及其字段。 创建新类 您可以通过选择数据类型、输入字段名称、设置默认值以及标记是否为必填项来添加新字段。 创建列 使用 back4app ai 代理进行模式生成 back4app 中集成的 ai 代理可以根据简单描述自动构建您的数据模式。此工具有助于简化项目设置，并确保您的数据模型支持必要的 crud 操作。 如何使用ai代理 打开ai代理 前往back4app仪表板上的项目设置并选择ai代理。 描述您的模式 输入您所需的集合和字段的详细描述。 审核并确认 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管理应用提供了一个无代码界面，简化了后端数据管理。其拖放功能使您能够执行crud操作——添加、查看、更新和删除记录——而无需编写复杂的查询。 启用管理应用 前往“更多”菜单 在您的 back4app 控制面板中。 点击“管理应用” 然后选择 “启用管理应用。” 设置管理员凭据： 创建您的初始管理员帐户，这也设置了系统角色，如 b4aadminuser 。 启用管理应用 一旦激活，登录管理应用以管理您的应用数据。 管理应用仪表板 通过管理应用管理 crud 操作 在管理应用中，您可以： 插入新记录： 在任何集合中使用“添加记录”功能（例如，项目）以引入新数据。 检查/修改记录： 选择一条记录以查看详细信息或更新其字段。 删除记录： 删除不再必要的条目。 这个简化的工具通过使数据管理变得简单来改善您的工作流程。 步骤 4 – 将您的 react native 应用与 back4app 集成 在设置好后端后，是时候将您的 react native 应用连接到 back4app。 使用 rest api 进行集成 虽然有可用于 javascript 的 parse sdk，但在 react native 环境中，您可以选择使用标准的 rest api 调用以获得灵活性。以下是如何使用 javascript fetch api 执行 crud 操作的示例。 示例：获取项目 async function fetchitems() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'get', 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 fetching items ', error); } } export default fetchitems; 示例：创建新项目 async function createitem(title, description) { try { 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, description }) }); const data = await response json(); console log('item created ', data); } catch (error) { console error('error creating item ', error); } } export { createitem }; 您可以类似地使用适当的 http 方法（put/post 用于更新，delete 用于删除）实现更新和删除项目的函数。 根据需要将这些函数集成到您的 react native 组件中，以完成 crud 操作。 步骤 5 – 增强后端安全性 配置访问控制列表 (acls) 通过设置acl来保护您的记录。例如，确保某个项目仅由其所有者访问： async function createprivateitem(title, description, ownerid) { try { const acl = { " " { "read" false, "write" false }, \[ownerid] { "read" true, "write" true } }; 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, description, acl acl }) }); const data = await response json(); console log('private item created ', data); } catch (error) { console error('error creating private item ', error); } } export { createprivateitem }; 设置类级权限 (clps) 通过back4app仪表板调整您的集合的默认权限。这确保只有经过身份验证的用户才能与某些数据类型交互。 步骤 6 – 实施用户身份验证 配置用户管理 back4app利用内置的用户集合来处理身份验证。在您的react native应用中，您可以使用rest api调用管理用户注册和登录。 示例：用户注册 async function signup(username, password, email) { 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, password, email }) }); const data = await response json(); console log('user registered successfully ', data); } catch (error) { console error('error during sign up ', error); } } export { signup }; 示例：用户登录 async function login(username, password) { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('logged in user ', data); } catch (error) { console error('login failed ', error); } } export { login }; 这种方法可以扩展以包括密码重置、会话管理和其他身份验证功能。 结论和下一步 干得好！您已经成功构建了一个与 back4app 集成的 react native crud 应用程序。 在本指南中，您设置了一个名为 basic crud app reactnative 的项目，设计了 items 和 users 的数据架构，并使用 back4app 管理应用程序的后端。 此外，您通过 rest api 连接了您的应用程序，并实施了重要的安全措施和用户身份验证。 接下来是什么？ 扩展您的应用： 添加更多功能，例如高级过滤、详细项目视图或实时数据更新。 增强后端能力： 探索云函数、第三方集成或微调您的访问控制策略。 继续学习： 查看 back4app 文档 https //www back4app com/docs 和其他教程，以进一步提升您的技能。 祝您编码愉快，祝您的 react native 项目好运！