如何使用 SwiftUI 构建 CRUD 应用？

概述 在本指南中，您将学习如何使用 swiftui 开发一个功能齐全的 crud（创建、读取、更新和删除）应用程序。 swiftui 是一个用于构建 ios、ipados、watchos、tvos、visionos 和 macos 用户界面的框架。 我们将使用 back4app 作为后端服务来管理我们的数据。本教程将指导您配置 back4app 项目、设计数据库架构、通过 api 调用与 swiftui 集成以及保护您的后端。 您将学习的内容 如何构建一个无缝处理数据操作的 crud 应用程序。 设计一个强大且可扩展的后端的技术。 将 swiftui 界面与 back4app 通过 rest api 连接的方法。 如何通过高级访问控制安全地管理数据。 先决条件 back4app 账户： 确保您已注册并在 back4app 上设置了新项目。 请参考 back4app 快速入门 https //www back4app com/docs/get started/new parse app 以获取帮助。 swiftui 环境： 确认您已安装 xcode 并创建了一个基本的 swiftui 项目。 熟悉程度： 对 swift、swiftui 和 restful api 的基本知识将是有帮助的。 在您开始之前： 步骤 1 – 建立您的 back4app 项目 在 back4app 上启动新项目 通过登录您的账户 访问您的 back4app 仪表板。 选择 “新应用” 以开始一个新项目。 命名您的项目： 例如， basic crud app swiftui , 并按照屏幕上的指示完成设置。 创建新项目 一旦您的项目创建完成，它将出现在您的仪表板中，准备进行后端操作的配置。 步骤 2 – 制定您的数据库架构 定义您的数据模型 对于这个 crud 应用程序，您需要定义几个集合（类）。以下是概述关键集合及其字段和类型的示例。 1\ 收藏：项目 此收藏存储有关每个条目的详细信息。 字段 类型 目的 id 对象id 自动生成的主键。 标题 字符串 项目的名称或标题。 描述 字符串 关于该项目的简要说明。 创建于 日期 时间戳标记创建。 更新于 日期 最新更新的时间戳。 2\ 收集：用户 此集合包含用户凭据和个人资料详细信息。 字段 类型 目的 id 对象id 自动生成的唯一标识符。 用户名 字符串 独特的登录用户名。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用于身份验证的加密密码。 创建于 日期 账户创建时间戳。 更新于 日期 上次账户修改的时间戳。 您可以通过 back4app 仪表板手动配置这些类，创建新类并为每个字段添加列。 创建新类 利用仪表板工具定义字段名称、类型、默认值和必需状态。 创建列 利用 back4app ai 代理 back4app ai代理简化了模式生成的过程。它可以根据文本提示自动生成您的数据库模式。 如何使用ai代理： 找到ai代理： 登录并导航到项目设置中的ai代理部分。 提交您的模式描述： 输入详细的提示，概述所需的集合和字段。 审核并实施： 生成后，验证模式并应用更改。 示例提示 create these 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 – 使用管理界面管理数据 管理界面概述 back4app管理应用程序是一个无代码工具，简化了数据管理。其直观的拖放界面使您能够轻松执行crud操作。 激活管理员界面 前往“更多”菜单 在你的back4app仪表板中。 选择“管理员应用” 然后选择 “启用管理员应用。” 设置凭据： 创建你的初始管理员用户，这将自动配置系统角色。 启用管理员应用 激活后，登录管理员应用以管理你的集合。 管理员应用仪表板 管理员界面的crud操作 创建： 在任何集合（例如，项目）中使用“添加记录”选项添加新数据。 读取/更新： 点击记录以查看详细信息并修改字段。 删除： 当记录不再需要时，使用删除功能移除记录。 此界面增强了可用性并简化了日常数据操作。 步骤4 – 将swiftui与back4app集成 在后端就位后，是时候将你的swiftui应用程序连接到back4app。 在 swiftui 中使用 rest api 调用 我们将使用 rest api 调用与 back4app 进行交互，而不是依赖 sdk，从我们的 swiftui 应用程序中 示例：获取项目 创建一个新的 swiftui 视图（例如， itemslistview\ swift ) 并添加以下代码： import swiftui import combine struct item identifiable, codable { let id string let title string let description string } class itemsviewmodel observableobject { @published var items \[item] = \[] private var cancellables = set\<anycancellable>() func fetchitems() { guard let url = url(string "https //parseapi back4app com/classes/items") else { return } var request = urlrequest(url url) request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") urlsession shared datataskpublisher(for request) map { $0 data } decode(type itemsresponse self, decoder jsondecoder()) receive(on dispatchqueue main) sink(receivecompletion { completion in if case let failure(error) = completion { print("error fetching items \\(error)") } }, receivevalue { response in self items = response results }) store(in \&cancellables) } } struct itemsresponse codable { let results \[item] } struct itemslistview view { @stateobject private var viewmodel = itemsviewmodel() var body some view { navigationview { list(viewmodel items) { item in vstack(alignment leading) { text(item title) font( headline) text(item description) font( subheadline) } } navigationtitle("items") onappear { viewmodel fetchitems() } } } } struct itemslistview previews previewprovider { static var previews some view { itemslistview() } } 此视图通过rest从back4app获取数据并以列表形式显示。 进一步的api操作 创建新项目： 使用 urlsession 通过post请求添加新条目。 更新项目： 实现put请求以修改现有数据。 删除项目： 使用delete请求删除数据。 根据需要在您的swiftui视图中集成这些网络操作。 步骤 5 – 保护您的后端 实施访问控制 通过为您的对象设置访问控制列表 (acl) 来保护您的数据。例如，要创建一个安全的项目记录： func createsecureitem(title string, description string, ownerid string) { guard let url = url(string "https //parseapi back4app com/classes/items") else { return } var request = urlrequest(url url) request httpmethod = "post" request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") request addvalue("application/json", forhttpheaderfield "content type") let itemdata \[string any] = \[ "title" title, "description" description, "acl" \[ ownerid \["read" true, "write" true], " " \["read" false, "write" false] ] ] request httpbody = try? jsonserialization data(withjsonobject itemdata) urlsession shared datatask(with request) { data, response, error in if let error = error { print("error creating item \\(error)") } } resume() } 配置类级权限 在您的 back4app 控制面板中，调整每个集合的类级权限 (clp)，以强制执行谁可以默认读取或写入数据。 步骤 6 – 实施用户身份验证 建立用户账户 back4app 利用用户类来处理身份验证。在您的 swiftui 应用中，通过 rest api 调用管理注册和登录。 示例：用户注册 func signupuser(username string, password string, email string) { guard let url = url(string "https //parseapi back4app com/users") else { return } var request = urlrequest(url url) request httpmethod = "post" request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") request addvalue("application/json", forhttpheaderfield "content type") let userdata \[string any] = \[ "username" username, "password" password, "email" email ] request httpbody = try? jsonserialization data(withjsonobject userdata) urlsession shared datatask(with request) { data, response, error in if let error = error { print("sign up error \\(error)") } else { print("user registered successfully") } } resume() } 这种方法可以扩展用于用户登录和会话管理。 第7步 – 结论和未来的增强 干得好！你已经成功构建了一个使用swiftui和back4app的基本crud应用程序。 你创建了一个名为 basic crud app swiftui 的项目，设计了items和users的数据库架构，并通过rest api调用将你的swiftui前端连接到后端。 此外，你还学习了如何使用acl保护数据并实现用户身份验证。 接下来是什么？ 扩展你的ui： 增强你的swiftui界面，添加详细视图、动画和交互元素。 高级功能： 集成额外的后端逻辑，例如云函数或实时数据更新。 探索更多： 访问 back4app文档 https //www back4app com/docs 以获取有关优化应用程序和集成更高级功能的进一步见解。 通过遵循本指南，你现在具备了使用back4app为你的swiftui应用程序创建强大且可扩展的crud后端的基本技能。享受构建和创新的乐趣！