如何使用 Aurelia 构建 CRUD 应用？

概述 在本指南中，您将学习如何使用aurelia框架创建简单的crud（创建、读取、更新、删除）应用程序。 本教程解释了如何构建一个能够处理基本数据操作的应用程序，通过将aurelia与back4app集成作为您的后端服务。 最初，您将设置一个名为 basic crud app aurelia 的back4app项目，以作为您的强大数据管理系统。 接下来，您将通过手动定义集合和字段或利用back4app ai agent来概述一个可扩展的数据库结构，以确保可靠的数据操作。 随后，您将利用back4app管理应用程序，该应用程序提供了一个拖放界面，使您能够轻松管理数据。 最后，您将使用rest/graphql调用（或在适用的情况下使用parse sdk）将aurelia前端与back4app连接，并通过详细的访问控制来保护您的后端。 在本教程结束时，您将拥有一个生产就绪的web应用程序，具备完整的crud功能、用户身份验证和安全的数据处理。 主要见解 掌握构建 crud 应用程序与可靠后端服务的技能。 获取设计可扩展后端并将其链接到 aurelia 前端的实用技能。 探索无代码管理界面（back4app 管理应用）以实现无缝数据操作。 学习如何使用现代技术（包括容器化）部署您的应用程序。 先决条件 在开始之前，请确保您具备以下条件： 一个具有活动项目的 back4app 账户。 访问 开始使用 back4app https //www back4app com/docs/get started/new parse app 如果您需要指导。 一个 aurelia 开发环境。 使用 aurelia cli 或类似工具；确保您已安装 node js（版本 14 或更高）。 基本的 javascript、aurelia 和 rest api 的熟练程度。 如有需要，请查阅 aurelia 文档 https //aurelia io/docs 以获取更多详细信息。 步骤 1 – 设置您的项目 创建一个新的 back4app 项目 登录到您的 back4app 账户。 按下“新应用”按钮 在您的仪表板上。 输入项目名称： basic crud app aurelia 并完成设置步骤。 创建新项目 创建后，您的项目将在仪表板上可见，准备进行后端配置和数据管理。 步骤 2 – 设计您的数据库架构 构建数据模型 对于这个crud应用程序，您将定义多个集合。以下是所需集合的示例，以及支持crud操作所需的字段和数据类型。 1\ 项目集合 字段 数据类型 细节 id 对象id 自动生成的主键。 标题 字符串 项目的名称或标题。 描述 字符串 该项目的简短描述。 创建于 日期 项目创建的时间戳。 更新于 日期 项目最后修改的时间戳。 2\ 用户集合 字段 数据类型 细节 id 对象id 自动生成的主键。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用于账户验证的唯一电子邮件地址。 密码哈希 字符串 用户身份验证的加密密码。 创建于 日期 账户创建时间戳。 更新于 日期 上次账户更新的时间戳。 您可以通过在 back4app 控制面板中手动创建这些集合，为每个集合添加一个新类并定义必要的列。 创建新班级 通过选择正确的数据类型、指定字段名称、设置默认值以及指明字段是否为必填项，轻松设置您的数据库字段。 创建列 使用 back4app ai 代理进行模式创建 back4app ai 代理通过让您通过提示描述数据模型来简化模式生成。该工具根据您的要求自动创建集合和字段。 使用 ai 代理的步骤： 启动 ai 代理： 打开您的 back4app 仪表板，并在项目设置中找到 ai 代理。 描述您的模式： 输入详细的提示，概述您所需的集合和字段。 审查并确认： 检查生成的模式建议并将其应用于您的项目。 示例提示 create the following 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 – 激活管理界面和 crud 功能 探索管理界面 back4app 管理应用程序是一个强大的无代码解决方案，使您能够通过用户友好的拖放界面管理后端数据。该工具简化了 crud 操作的执行。 激活管理应用程序 打开 “更多” 菜单 在您的 back4app 控制面板中。 选择 “管理员应用” 然后点击 “启用管理员应用。” 设置您的管理员凭据 通过创建您的初始管理员帐户，这也建立了默认角色（例如 b4aadminuser ) 和系统集合。 启用管理员应用 启用后，登录管理员应用以开始管理您的数据。 管理员应用仪表板 使用管理员应用执行 crud 操作 在此界面中，您可以： 创建条目： 在集合中使用 “添加记录” 选项（例如，项目）以添加新数据。 查看/修改条目： 点击任何记录以检查其详细信息或进行更改。 删除条目： 选择删除选项以消除不再需要的数据。 此接口简化了您的数据操作，通过直观的设计增强了用户体验。 步骤 4 – 将 aurelia 与 back4app 连接 在通过管理应用程序配置和管理后端后，是时候将您的 aurelia 前端连接到 back4app。 使用 rest 或 graphql 您可以使用 rest 或 graphql api。例如，通过 rest 获取项目： // example rest request to get items async function fetchitems() { 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 fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); 根据需要在您的aurelia组件中集成这些api调用。 步骤5 – 保护您的后端 实施访问控制列表（acls） 通过将acl分配给您的数据对象来增强安全性。例如，要创建一个私有项目： async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access to the owner only const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error saving secure item ', error); } } 设置类级权限（clps） 在back4app仪表板中，调整每个集合的clp以强制执行默认安全规则，确保只有经过身份验证或授权的用户可以访问敏感信息。 步骤6 – 管理用户身份验证 配置用户帐户 back4app使用parse的用户类来处理身份验证。在您的aurelia应用程序中，您可以管理用户注册和登录，如下所示： // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } 可以为登录和会话管理实现类似的模式。可以通过back4app仪表板配置其他功能，如社交登录集成、电子邮件验证和密码重置。 步骤 7 – 通过 web 部署部署您的 aurelia 前端 back4app 的 web 部署功能允许您通过从 github 存储库部署代码来高效地托管您的 aurelia 应用程序。 在本节中，您将准备生产构建，将代码提交到 github，将您的存储库与 web 部署连接，并部署您的网站。 7 1 创建您的生产构建 在终端中打开您的项目目录。 执行构建命令： au build env production 此命令生成一个 dist 文件夹，其中包含您的优化静态资产。 确认构建： 确保 dist 文件夹包含一个 index html 文件和 javascript、css 及图像所需的子目录。 7 2 组织并上传您的项目代码 您的 github 仓库应包含所有 aurelia 前端的源文件。一个示例结构可能是 basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md 示例文件 src/parse config js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } this is an example text in english 将您的代码提交到 github 在您的项目文件夹中初始化 git（如果尚未完成）： git init 暂存您的文件： git add 提交您的更改： git commit m "初始提交 aurelia 前端源代码" 在 github 上创建一个仓库 （例如， basic crud app aurelia frontend ）。 将您的代码推送到 github： git remote add origin https //github com/your username/basic crud app aurelia frontend git git push u origin main 7 3 将您的 github 仓库与 web 部署链接 访问 web 部署： 登录到您的 back4app 控制面板，导航到您的项目（basic crud app aurelia），并选择 web 部署 选项。 连接到 github： 按照提示集成您的 github 账户，授予 back4app 访问您的仓库的权限。 选择您的仓库和分支： 选择仓库（例如， basic crud app aurelia frontend ）和包含您代码的分支（例如， main ）。 7 4 部署配置 设置以下配置细节 构建命令 如果 dist 文件夹未预构建，请指定一个命令（例如， au build env production ) 供 back4app 执行。 输出目录 将其设置为 dist 以便 back4app 知道您的静态文件位于何处。 环境变量 在配置设置中添加任何所需的环境变量（如 api 密钥）。 7 5 将您的 aurelia 应用程序容器化 (docker) 如果您更喜欢 docker 部署，请在您的代码库中包含一个 dockerfile ，类似于以下内容 \# use an official node image as the build environment from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 相应地配置 web 部署中的 docker 部署选项。 7 6 部署您的应用程序 按下部署按钮： 配置完部署后，点击 部署 监控构建过程： back4app 将从 github 获取您的代码，必要时执行构建命令，并在容器中部署您的应用程序。 获取您的 url： 一旦部署完成，back4app 将提供您的 aurelia 应用程序托管的 url。 7 7 验证您的部署 打开提供的 url： 在浏览器中访问该 url 以查看您的实时网站。 测试应用程序： 确保您的应用程序正确加载，路由按预期工作，所有资源（css、javascript、图像）都能正常提供。 必要时进行故障排除： 使用浏览器开发者工具诊断任何问题，并在需要时查看 back4app 部署日志。 第8步 – 总结与未来方向 恭喜你！你已经成功构建了一个完整的crud应用程序，使用了aurelia和back4app。 你创建了一个名为 basic crud app aurelia 的项目，定义了items和users的全面数据库架构，并使用back4app管理应用程序管理数据。 你还将aurelia前端与后端集成，并实施了强大的安全措施。 下一步： 增强你的用户界面： 扩展你的aurelia应用程序，增加详细视图、搜索功能和实时数据更新。 添加高级功能： 考虑加入云函数、第三方api或基于角色的权限。 进一步探索： 查看 back4app文档 https //www back4app com/docs 和其他aurelia资源，以获取有关优化和自定义的更深入指导。 祝你编码愉快，祝你在开发旅程中好运！