如何建立 CRUD 应用程序与 Flutter？

概述 在本指南中，您将开发一个 flutter 应用程序，该应用程序通过利用 back4app 作为后端服务来处理基本的 crud 操作——创建、读取、更新和删除。 我们将引导您设置 back4app 项目，设计灵活的数据架构，并使用 parse sdk for flutter 将您的 flutter 应用与后端集成。 最初，您将创建一个名为 basic crud app flutter 的新 back4app 项目。该项目为您的移动应用程序提供可靠的数据存储解决方案。然后，您将通过手动创建集合和字段或借助 back4app 的 ai agent 来定义您的数据模型。 接下来，您将使用直观的 back4app 管理应用程序无缝管理您的数据。最后，您将通过使用 parse server sdk flutter 包将您的 flutter 应用程序连接到 back4app，从而实现安全高效的 crud 操作。 在本教程结束时，您将拥有一个生产就绪的 flutter 应用程序，能够执行基本的 crud 功能，并具备安全的用户身份验证和数据管理。 关键见解 构建一个与强大后端交互的flutter应用。 学习在back4app上设计可扩展的后端架构。 利用back4app管理应用程序轻松管理数据。 实施包括acl和用户身份验证在内的强大安全措施。 先决条件 在开始之前，请确保您拥有： 一个具有活跃项目的back4app账户。 需要帮助？访问 back4app入门指南 https //www back4app com/docs/get started/new parse app 一个flutter开发环境。 安装flutter并选择一个ide，如visual studio code或android studio。 对flutter、dart和rest api的基本理解。 如有需要，请查看 flutter文档 https //flutter dev/docs 。 步骤 1 – 项目初始化 创建一个新的 back4app 项目 登录到您的 back4app 账户。 点击您的仪表板上的“新应用”按钮 。 命名您的项目： basic crud app flutter 并按照提示完成设置。 创建新项目 在您的项目创建后，它将出现在您的仪表板上，准备进行后端配置。 步骤 2 – 构建数据模型 设置您的数据结构 对于这个 flutter 应用程序，您将在您的 back4app 项目中建立几个集合。以下是支持 crud 功能所需的关键集合和字段的示例。 1\ 产品集合 此集合存储有关单个产品的详细信息。 字段 类型 描述 id 对象id 自动分配唯一标识符。 名字 字符串 产品名称。 细节 字符串 产品的简要描述。 创建于 日期 产品添加的时间戳。 更新时间 日期 产品最后更新的时间戳。 2\ 用户收集 此集合管理用户凭据和身份验证详细信息。 字段 类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一用户名。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用于安全认证的加密密码。 创建于 日期 账户创建的时间戳。 更新时间 日期 账户最后更新时间戳。 您可以在 back4app 控制面板中手动创建这些集合。 创建新类 要添加字段，只需选择数据类型，指定字段名称，必要时设置默认值，并将其标记为必填。 创建列 使用 back4app 的 ai 代理进行模式创建 back4app 中集成的 ai 代理可以根据您的描述自动生成数据模式，从而简化设置过程。 如何使用ai代理： 访问ai代理： 打开您的back4app仪表板，并在项目设置中找到ai代理。 描述您的模式： 提供详细的提示，概述您需要的集合和字段。 审核并确认： 一旦ai代理处理您的输入，审核提议的模式并确认以应用它。 示例提示 create the following collections in my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 – 激活管理员应用程序并管理crud操作 管理员应用程序简介 back4app管理员应用程序提供了一个无代码界面，用于管理您的后端数据。其拖放功能使您能够轻松执行crud操作，例如创建、读取、更新和删除记录。 启用管理员应用程序 导航到“更多”菜单 在您的 back4app 控制面板中。 选择“管理员应用” 然后点击 “启用管理员应用。” 设置您的管理员凭据 通过创建一个初始管理员账户，这也将配置角色，如 b4aadminuser 启用管理员应用 启用后，登录管理员应用以管理您的应用数据。 管理员应用仪表板 管理 crud 操作 在管理员应用中，您可以： 创建条目： 在集合中使用“添加记录”选项（例如，产品）插入新数据。 查看和编辑条目： 点击记录以检查详细信息或更新字段。 删除条目： 删除不再需要的记录。 这个用户友好的界面简化了管理您的后端数据的过程。 步骤 4 – 将您的 flutter 应用与 back4app 连接 在您的后端配置完成后，是时候将您的 flutter 应用与 back4app 集成了。 使用 flutter 的 parse sdk 添加依赖： 打开你的 pubspec yaml 并包含 parse server sdk flutter 包： dependencies flutter sdk flutter parse server sdk flutter ^3 1 0 在你的应用中初始化 parse： 在你的 main dart , 使用你的 back4app 凭据初始化 parse： import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; future\<void> main() async { widgetsflutterbinding ensureinitialized(); await parse() initialize( 'your application id', 'https //parseapi back4app com', clientkey 'your flutter key', debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'basic crud app', home homepage(), ); } } 实现 crud 操作： 创建一个 dart 文件（例如， product service dart ）来处理您的 crud 操作： import 'package\ parse server sdk flutter/parse server sdk dart'; class productservice { future\<list\<parseobject>> fetchproducts() async { final query = querybuilder\<parseobject>(parseobject('products')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } return \[]; } future\<void> addproduct(string name, string details) async { final product = parseobject('products') set('name', name) set('details', details); final response = await product save(); if (response success) { print('product added successfully '); } else { print('error adding product ${response error? message}'); } } future\<void> updateproduct(string objectid, string newname, string newdetails) async { final query = querybuilder\<parseobject>(parseobject('products')); query whereequalto('objectid', objectid); final response = await query first(); if (response != null && response success) { final product = response results! first as parseobject; product set('name', newname) set('details', newdetails); final saveresponse = await product save(); if (saveresponse success) { print('product updated '); } } } future\<void> deleteproduct(string objectid) async { final query = querybuilder\<parseobject>(parseobject('products')); query whereequalto('objectid', objectid); final response = await query first(); if (response != null && response success) { final product = response results! first as parseobject; final deleteresponse = await product delete(); if (deleteresponse success) { print('product deleted '); } } } } 此服务文件使您的 flutter ui 能够与您的 back4app 后端顺畅交互。 替代方案：在 flutter 中使用 rest/graphql 如果您选择不使用 parse sdk，您可以使用像 http 这样的包进行 rest 调用。然而，推荐使用 parse sdk 以获得更集成的体验。 步骤 5 – 保护您的后端 访问控制列表 (acls) 为了保护您的数据，为您的对象配置 acls。例如，创建一个仅对其创建者可见的产品 import 'package\ parse server sdk flutter/parse server sdk dart'; future\<void> addprivateproduct(string name, string details, parseuser owner) async { final product = parseobject('products') set('name', name) set('details', details); final acl = parseacl(owner) setpublicreadaccess(false) setpublicwriteaccess(false); product setacl(acl); final response = await product save(); if (response success) { print('private product created '); } else { print('error ${response error? message}'); } } 类级别权限 (clps) 在您的 back4app 控制面板中，配置 clps 以强制执行默认安全规则，确保只有经过身份验证的用户可以访问或修改特定集合。 步骤 6 – 实现用户身份验证 设置用户注册和登录 back4app 利用 parse 用户类来处理身份验证。在您的 flutter 应用中，按如下方式实现用户注册和登录 import 'package\ parse server sdk flutter/parse server sdk dart'; class authservice { future\<void> registeruser(string username, string password, string email) async { final user = parseuser createuser(username, password, email); final response = await user signup(); if (response success) { print('user registered successfully!'); } else { print('registration failed ${response error? message}'); } } future\<void> loginuser(string username, string password) async { final user = await parseuser login(username, password); if (user success) { print('logged in as ${user result? username}'); } else { print('login error ${user error? message}'); } } } 此设置涵盖了用户注册、登录和您 flutter 应用程序的其他身份验证管理。 第 7 步 – 结论和未来的增强 恭喜！您已成功构建了一个与 back4app 集成的基于 flutter 的 crud 应用程序。 在本教程中，您创建了一个名为 basic crud app flutter 的项目，定义了产品和用户的集合，并使用管理应用程序管理您的后端。 此外，您使用 parse server sdk flutter 包将您的 flutter 应用程序与 back4app 连接，同时实现了强大的安全性和用户身份验证。 下一步： 扩展您的应用： 添加高级搜索、详细视图或实时更新等功能。 增强后端功能： 探索云函数、第三方 api 集成或更细粒度的基于角色的访问控制。 继续学习： 查看 back4app 文档 https //www back4app com/docs 和其他教程，以进一步优化您的应用程序。 祝您编码愉快，并在 flutter 开发之旅中一切顺利！