如何使用 Elm 构建 CRUD 应用？

概述 在本教程中，您将学习如何使用 elm 构建一个完整的 crud（创建、读取、更新、删除）应用程序。 我们将使用 back4app 作为我们的后端服务，以轻松管理数据。 本指南解释了如何配置 back4app 项目，设计灵活的数据架构，并通过 rest api 调用将 crud 操作集成到 elm 应用程序中。 首先，您将设置一个 back4app 项目，这里命名为 basic crud app elm , 它提供了一个强大的非关系数据库。您将设计您的数据模型——可以手动设计或使用 back4app 的智能 ai 代理。 接下来，您将使用 back4app 管理员应用程序管理您的后端，该应用程序提供了一个直观的拖放界面用于数据操作。 最后，您将通过发出 restful api 请求将您的 elm 应用程序连接到 back4app，同时确保数据操作的安全性。 在本教程结束时，您将拥有一个生产就绪的 elm 应用程序，支持核心 crud 功能和安全的用户身份验证。 基本见解 学习如何构建一个与非关系型后端配对的 elm crud 应用程序。 了解如何构建可扩展的后端并将其与 elm 前端连接。 使用 back4app 管理应用程序进行无缝的创建、读取、更新和删除操作。 探索部署选项，包括 docker，以轻松启动您的 elm 应用程序。 先决条件 在开始之前，请确保您拥有： 一个已设置项目的 back4app 账户。 需要帮助？访问 开始使用 back4app https //www back4app com/docs/get started/new parse app 。 一个 elm 开发环境。 安装 elm 并使用您喜欢的编辑器。 熟悉 elm 基础知识、函数式编程和 http 请求。 如有需要，请查看 elm 指南 https //guide elm lang org/ 。 步骤 1 – 初始化您的项目 创建一个新的 back4app 项目 登录到您的 back4app 账户。 点击“新应用”按钮 在您的仪表板上。 命名您的项目： basic crud app elm 并按照说明完成设置。 创建新项目 一旦您的项目准备好，它将出现在您的仪表板上，为您的后端配置奠定基础。 步骤 2 – 制作数据架构 设置您的数据结构 对于这个 crud 应用程序，您将创建几个集合（或类）在 back4app 中。以下是主要集合及其字段的示例，以支持 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 – 激活管理界面并处理 crud 操作 管理界面介绍 back4app 的管理应用程序为您提供了一个无代码界面来管理您的后端数据。其用户友好的设计使您能够执行 crud 操作，例如添加、查看、编辑和删除记录。 启用管理应用程序 前往您的 back4app 仪表板上的 “更多” 菜单 。 选择 “管理应用程序” 并点击 “启用管理应用程序。” 创建您的管理员账户， 这也将设置角色，如 b4aadminuser 和系统集合。 启用管理应用程序 一旦激活，登录管理应用程序以管理您的数据。 管理应用程序仪表板 在管理应用程序中执行 crud 操作 在管理应用程序中，您可以： 插入记录： 在一个集合中选择“添加记录”（例如，项目）以创建新条目。 检查/编辑记录： 点击任何记录以查看详细信息或修改数据。 删除记录： 删除不再需要的条目。 这个易于使用的界面简化了数据管理。 步骤 4 – 将您的 elm 应用程序连接到 back4app 在配置好后端后，是时候将您的 elm 应用程序链接到 back4app。 在 elm 中使用 rest api 调用 由于 elm 不支持专用的 parse sdk，我们将使用其内置的 http 功能与 back4app 的 rest 端点进行交互。 示例：从项目集合中获取数据 下面是一个使用 http 包来检索项目列表的 elm 模块示例： module items exposing (item, fetchitems, itemdecoder) import http import json decode as decode exposing (decoder) type alias item = { id string , title string , description string } itemdecoder decoder item itemdecoder = decode map3 item (decode field "objectid" decode string) (decode field "title" decode string) (decode field "description" decode string) fetchitems cmd msg fetchitems = http get { url = "https //parseapi back4app com/classes/items" , expect = http expectjson handleresponse (decode field "results" (decode list itemdecoder)) } handleresponse result http error (list item) > msg handleresponse result = \ map the http result to your application's message type debug todo "handle the response appropriately" 示例：创建新项目 您还可以在 elm 中实现 post 请求以添加新记录： createitem string > string > cmd msg createitem title description = let body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } handlepostresponse result http error decode value > msg handlepostresponse result = debug todo "process the post response" createitem string > string > cmd msg createitem title description = let body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } handlepostresponse result http error decode value > msg handlepostresponse result = debug todo "process the post response" 使用put和delete方法重复类似的模式进行更新和删除操作。 步骤5 – 保护您的后端 配置访问控制（acls） 通过在您的对象上设置acl来保护您的数据。例如，要将项目限制为其创建者，您可以使用： \ in elm, you can add acl details to your json payload createprivateitem string > string > string > cmd msg createprivateitem title description ownerid = let acl = encode object \[ ( ownerid, encode object \[ ("read", encode bool true), ("write", encode bool true) ] ) , ( " ", encode object \[ ("read", encode bool false), ("write", encode bool false) ] ) ] body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) , ( "acl", acl ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } 设置类级权限（clps） 在back4app仪表板中定义clp，以便只有经过身份验证的用户可以访问特定集合。 步骤6 – 实施用户身份验证 管理用户账户 back4app利用内置的用户集合来处理身份验证。在您的elm应用程序中，您将通过rest api调用管理注册和登录。 示例：用户注册请求 signupuser string > string > string > cmd msg signupuser username password email = let body = http jsonbody <| encode object \[ ( "username", encode string username ) , ( "password", encode string password ) , ( "email", encode string email ) ] in http post { url = "https //parseapi back4app com/users" , body = body , expect = http expectjson handleauthresponse decode value } handleauthresponse result http error decode value > msg handleauthresponse result = debug todo "process the authentication response" 对登录和会话管理采取类似的方法。 第 7 步 – 部署您的 elm 应用程序 back4app 支持无缝部署。您可以使用包括 docker 在内的多种方法部署您的 elm 应用程序。 7 1 构建您的 elm 应用程序 编译您的 elm 代码： 运行 elm 编译器生成 javascript： elm make src/main elm output=dist/main js 准备您的资产： 确保您生成的 javascript 和 html 文件已准备好进行部署。 7 2 组织您的项目结构 一个典型的 elm 项目布局可能如下所示： basic crud app elm/ \| src/ \| | main elm \| | api elm \| dist/ \| | index html \| | main js \| elm json \| package json \| dockerfile 7 3 将您的 elm 应用程序 docker 化 如果容器化，请添加一个 dockerfile \# use a lightweight node image for serving static files from node 16 alpine \# set the working directory workdir /app \# copy compiled files copy dist/ /app/dist/ \# expose the desired port expose 8080 \# serve the static files using a simple server cmd \["npx", "http server", "dist", " p", "8080"] 7 4 使用 back4app 的 web 部署 链接您的代码库： 在 github 上托管您的 elm 项目。 配置部署设置： 在 back4app 仪表板中，选择 web deployment 功能，连接您的代码库（例如， basic crud app elm ），并选择所需的分支。 设置构建命令： 指定构建命令（例如， elm make src/main elm output=dist/main js ) 和工件位置。 部署您的应用： 点击 deploy 并监控日志，直到您的应用上线。 第 8 步 – 最后的想法和未来方向 恭喜！您已经构建了一个基于 elm 的 crud 应用程序，并与 back4app 集成。 您设置了一个名为 basic crud app elm 的项目，设计了 items 和 users 的集合，并通过 back4app 管理应用程序管理数据。 此外，您使用 rest api 调用连接了您的 elm 应用程序，并实施了安全措施。 未来增强功能： 扩展功能： 集成高级搜索功能、详细视图或实时更新。 增强后端功能： 尝试云函数、第三方集成或基于角色的访问。 深化您的知识： 访问 back4app 文档 https //www back4app com/docs 和其他资源，以完善您的应用程序。 祝您编码愉快，享受与 elm 和 back4app 的构建过程！