如何使用 Alpine 构建 CRUD 应用？

概述 在本指南中，您将学习如何使用 alpine js 构建一个 crud（创建、读取、更新、删除）应用程序。 本教程将引导您完成管理数据所需的核心操作，利用 back4app 作为您的强大后端服务。 我们将首先设置一个名为 basic crud app alpinejs 的新 back4app 项目。该项目将作为您管理数据的后端。 在初始化项目后，您将通过定义集合和字段来设计一个灵活的数据库架构——可以手动完成，也可以借助 back4app ai agent 的帮助。此步骤确保您的后端结构适合可靠的 crud 操作。 接下来，您将使用 back4app 管理应用程序，这是一个用户友好的拖放工具，可以轻松管理您的集合。该界面简化了数据管理任务。 最后，您将使用 rest 或 graphql api 将您的 alpine js 前端连接到 back4app，并通过强大的访问控制来保护您的后端。 在本教程结束时，您将拥有一个支持基本 crud 操作的生产就绪的 web 应用程序，并具备用户身份验证和安全数据更新功能。 你将学到什么 如何构建具有高效后端服务的crud应用程序。 设计可扩展数据模型的方法，并将其链接到alpine js前端。 使用拖放管理工具管理集合的技巧。 使用容器化和web部署技术部署应用程序的策略。 先决条件 在开始之前，请确保您拥有： 一个准备好的back4app账户和新项目。 请参考 使用back4app入门 https //www back4app com/docs/get started/new parse app 以获取帮助。 一个alpine js开发环境。 根据您的项目设置通过cdn或npm包含alpine js。 熟悉javascript、alpine js和rest api原则。 请参考 alpine js文档 https //alpinejs dev/start 以获取更多详细信息。 步骤1 – 启动您的项目 设置新的 back4app 项目 登录到您的 back4app 控制面板。 点击“新应用”按钮。 提供项目名称： basic crud app alpinejs 并按照提示操作。 创建新项目 创建后，您的项目将在控制面板上显示，准备进行后端配置。 步骤 2 – 制定您的数据库架构 绘制您的数据模型 对于我们的 crud 应用，您将设置几个关键集合。以下是示例集合及其字段和数据类型，以指导您的架构设置。这些集合促进了基本的 crud 操作。 1\ 项目集合 此集合包含每个项目的详细信息。 字段 类型 目的 id 对象id 自动生成的主要标识符。 标题 字符串 项目的名称或标题。 描述 字符串 关于该项目的简要总结。 创建于 日期 项目创建的时间戳。 更新于 日期 最后更新的时间戳。 2\ 用户集合 此集合存储用户凭据和详细信息。 字段 类型 目的 id 对象id 自动生成的主标识符。 用户名 字符串 唯一用户标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 安全存储的哈希密码。 创建于 日期 账户创建时间戳。 更新于 日期 上次账户更新的时间戳。 您可以通过在 back4app 仪表板中手动创建这些集合，为每个集合添加一个新类并相应地定义列。 创建新类 您可以通过选择类型、命名字段、添加默认值并将其标记为必填来设置字段。 创建列 利用 back4app ai 代理进行模式创建 back4app ai 代理帮助自动化模式生成。它根据描述您所需字段的提示创建您的集合。 如何使用 ai 代理： 从您的 back4app 仪表板打开 ai 代理。 输入所需集合和字段的详细描述。 查看建议的模式并将其应用于您的项目。 示例提示 create the following collections 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 仪表板中转到“更多”部分。 选择 管理应用程序 然后点击 启用管理应用程序 设置您的第一个管理员凭据以配置角色和系统集合。 启用管理应用程序 一旦激活，登录管理应用程序以管理您的数据。 管理应用程序仪表板 使用管理应用程序执行 crud 操作 在管理应用程序中，您可以： 创建记录： 点击集合中的“添加记录”按钮，例如项目。 读取和更新记录： 选择一条记录以查看详细信息或进行编辑。 删除记录： 使用删除功能移除不需要的条目。 此界面通过直观的拖放设计简化了数据管理。 步骤 4 – 将 alpine js 连接到 back4app 在您的后端准备好后，是时候将您的 alpine js 前端链接到 back4app。 使用 rest/graphql api 您将使用 rest 或 graphql 与后端进行交互。 示例：通过 rest 获取项目 // sample rest api call using fetch async function loaditems() { 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('items loaded ', data results); } catch (error) { console error('error loading items ', error); } } loaditems(); 将这些 api 调用集成到您的 alpine js 组件中，以执行 crud 操作。 步骤 5 – 保护您的后端 设置访问控制列表 (acls) 通过对记录应用 acl 来保护您的数据。例如，要创建一个私有项目： async function addprivateitem(data, owner) { const itemdata = { title data title, description data description }; // define acl settings only the owner has read/write privileges const aclsettings = { " " { "read" false, "write" false }, \[owner] { "read" true, "write" true } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ itemdata, acl aclsettings }) }); const result = await response json(); console log('private item added ', result); } catch (error) { console error('error adding private item ', error); } } 配置类级权限 (clps) 在 back4app 控制面板中，为每个集合设置 clp，以强制执行默认访问策略，确保只有授权用户可以访问敏感数据。 步骤 6 – 实施用户身份验证 创建用户帐户 back4app利用parse的用户类来管理身份验证。在您的alpine js项目中，通过api调用处理用户注册和登录。 示例：使用alpine js进行用户注册 sign up 可以为用户登录和会话处理实现类似的方法。 第7步 – 使用web部署部署您的alpine js前端 back4app的web部署功能使您可以轻松托管您的alpine js前端。在这一部分中，您将准备生产构建，将代码提交到github，将您的代码库连接到web部署，并启动您的应用程序。 7 1 构建您的生产资产 在终端中打开您的项目目录。 运行您的构建命令（如果使用 alpine js 的构建过程）： npm run build 这将生成一个文件夹（通常是 dist 或 build ）其中包含优化的静态文件。 确认您的构建文件夹中包含一个 index html 以及必要的资产。 7 2 组织和上传您的源文件 您的 github 仓库应包含您 alpine js 项目的所有源文件。一个常见的结构可能是： basic crud app alpinejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md 示例文件： src/main js document addeventlistener('alpine\ init', () => { alpine data('itemsapp', () => ({ items \[], newitemtitle '', newitemdescription '', async loaditems() { 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(); this items = data results; } catch (error) { console error('failed to load items ', error); } }, async additem() { const payload = { title this newitemtitle, description this newitemdescription }; try { await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(payload) }); this newitemtitle = ''; this newitemdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } })); }); 将您的代码提交到 github 在您的项目文件夹中初始化一个 git 仓库： git init 暂存您的文件： git add 提交您的更改： git commit m "alpine js 前端的初始提交" 在 github 上创建一个新仓库（例如， basic crud app alpinejs frontend )。 推送您的代码： git remote add origin https //github com/your username/basic crud app alpinejs frontend git git push u origin main 7 3 将您的 github 仓库链接到 web 部署 登录到您的 back4app 控制面板并选择您的项目 ( basic crud app alpinejs )。 打开 web 部署 部分。 连接您的 github 账户并选择包含您的 alpine js 代码的仓库和分支。 7 4 配置部署设置 构建命令： 如果您的项目缺少预构建文件夹，请指定一个命令（例如， npm run build ）。 输出目录： 将其设置为包含您的静态文件的文件夹（例如， build 或者 dist ）。 环境变量： 添加任何需要的变量，例如 api 密钥。 7 5 将您的 alpine js 应用程序 docker 化（可选） 如果您希望使用 docker 部署，请包含一个 dockerfile ，例如： \# use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install copy package json / run npm install \# copy source and build app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 如果需要，请在您的 web 部署配置中选择 docker 选项。 7 6 启动您的应用程序 点击 back4app 中的 部署 按钮。 监控部署过程，因为 back4app 拉取您的代码，构建并部署它。 一旦部署，您将收到一个 url，您的 alpine js 应用程序将托管在该 url 上。 7 7 测试您的部署 在浏览器中访问提供的 url。 验证您的应用程序是否正确加载，路由是否按预期工作，资产是否正确提供。 通过检查浏览器控制台日志和 back4app 部署日志来排除任何问题。 第 8 步 – 最后的想法和未来的增强 恭喜！您已经使用 alpine js 和 back4app 构建了一个完整的 crud 应用程序。 您设置了 basic crud app alpinejs 项目，创建了详细的数据库集合，并利用无代码管理工具进行数据管理。 此外，您还通过 rest api 将 alpine js 前端连接到后端，并确保安全的数据处理。 下一步： 增强您的 ui： 扩展您的 alpine js 组件，增加详细的项目视图或实时更新等高级功能。 添加更多功能： 探索整合额外的后端逻辑、第三方 api 或复杂的访问控制。 进一步学习： 访问 back4app 文档 https //www back4app com/docs 和其他资源，以加深您对高级集成的理解。 祝您编码愉快，享受构建下一个项目的乐趣！