如何使用 Ember.js 创建 CRUD 应用？

介绍 在本教程中，您将学习如何使用 ember js 构建一个简单的 crud（创建、读取、更新、删除）应用程序。 我们将依赖 back4app 作为后端服务，以轻松管理您的数据。本指南涵盖 crud 系统的所有基本操作，向您展示如何设置 back4app 项目，设计动态数据模型，并将 crud 操作集成到 ember js 应用程序中。 首先，您将建立一个名为 basic crud app ember 的 back4app 项目，为您的应用程序提供可靠的非关系数据存储解决方案。您将通过手动设置模型和字段或借助 back4app 的 ai agent 来定义数据结构。 接下来，您将探索 back4app 管理应用程序——一个无代码界面，让您通过简单的拖放交互来管理数据。最后，您将通过 api 调用将您的 ember js 应用程序与 back4app 集成，同时实现安全的访问控制。 在本教程结束时，您将拥有一个生产就绪的 ember js 应用程序，能够执行所有 crud 操作，包括安全的用户身份验证和有效的数据管理。 关键要点 构建一个基于 ember js 的 crud 应用程序，后端平台强大。 了解如何构建和集成可扩展的后端与 ember js 前端。 使用 back4app 的直观管理应用程序轻松执行创建、读取、更新和删除操作。 了解部署策略，包括 docker 容器化，以实现无缝的应用程序交付。 先决条件 在开始之前，请确认您已拥有： 一个带有新创建项目的 back4app 账户。 需要帮助？访问 back4app 入门指南 https //www back4app com/docs/get started/new parse app 。 一个 ember js 开发环境。 按照 ember js 指南 https //guides emberjs com/release/ 安装 ember cli 并设置您的环境。 对 ember js、javascript 和 rest api 有基本的了解。 如有需要，请复习这些主题。 步骤 1 – 项目设置 启动一个新的 back4app 项目 登录到您的 back4app 账户。 点击“新应用”按钮 从您的仪表板 分配项目名称： basic crud app ember 并按照后续提示完成项目设置。 创建新项目 一旦项目创建完成，它将出现在您的仪表板上，并为您的后端配置奠定基础。 步骤 2 – 设计数据模型 构建您的数据模型 对于这个 crud 应用程序，您将在 back4app 项目中定义几个模型。以下是 outlining 核心模型及其执行 crud 操作所需字段的示例。 1\ 项目模型 该模型存储有关每个项目的信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 物品名称。 描述 字符串 项目的简要总结。 创建于 日期 标记项目添加时间的时间戳。 更新时间 日期 标记最后更新的时间戳。 2\ 用户模型 该模型处理用户身份验证和凭据。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一用户名。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 加密的用户密码。 创建于 日期 账户创建的时间戳。 更新时间 日期 账户更新的时间戳。 您可以直接在 back4app 仪表板中创建这些模型并定义它们的字段。 创建新类 您可以通过选择数据类型、输入字段名称、设置默认值以及标记是否为必填项来添加字段。 创建列 利用 back4app ai 代理进行模式生成 back4app ai 代理是您仪表板中的一项智能功能，可以根据您的规格自动配置数据模式。此工具通过确保您的数据模型针对 crud 操作进行了优化，从而简化了项目初始化。 如何使用 ai 代理： 打开 ai 代理： 登录到您的 back4app 仪表板，并在项目设置中找到 ai 代理。 提供您的模型详细信息： 提交您所需模型和字段的详细描述。 审核并确认： ai 代理将生成建议的模式。确认详细信息以应用配置。 示例提示 create the following models in my back4app project 1\) model items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) model users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) 这种 ai 辅助的方法节省了时间，并确保您的数据结构一致且经过优化。 步骤 3 – 启用管理员应用程序并处理 crud 操作 管理员应用程序概述 back4app 管理员应用程序提供了一个用户友好的无代码平台，用于管理您的后端数据。其拖放界面使您能够轻松执行 crud 任务，例如添加、查看、更新和删除记录。 启用管理员应用程序 转到“更多”菜单 在您的 back4app 控制面板中。 选择“管理员应用程序” 然后点击 “启用管理员应用程序。” 通过创建初始管理员帐户配置您的管理员凭据 。这还将设置角色（例如， b4aadminuser ) 和系统模型。 启用管理员应用程序 一旦激活，登录管理员应用程序以管理您的应用程序数据。 管理员应用程序仪表板 通过管理员应用程序管理 crud 操作 在管理员应用程序中，您可以： 插入记录： 在模型（例如，项目）中单击“添加记录”按钮以输入新数据。 检查/修改记录： 选择任何记录以查看其详细信息或编辑其字段。 删除记录： 删除不再需要的条目。 这个简化的界面显著提高了数据管理的效率。 第 4 步 – 将您的 ember js 应用程序与 back4app 连接 在您的后端配置完成后，是时候将您的 ember js 应用程序连接到 back4app。 在 ember js 中使用 api 调用 ember js 利用 ember data 处理数据操作。在本教程中，您将使用 rest 适配器与您的 back4app 后端进行交互。 1\ 配置 rest 适配器 创建或更新您的应用程序适配器（例如， app/adapters/application js ）并使用以下配置： import restadapter from '@ember data/adapter/rest'; export default class applicationadapter extends restadapter { host = 'https //parseapi back4app com'; headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; } 2\ 定义 ember data 模型 为 item 创建一个 ember 模型（例如， app/models/item js ）： import model, { attr } from '@ember data/model'; export default class itemmodel extends model { @attr('string') title; @attr('string') description; @attr('date') createdat; @attr('date') updatedat; } 同样为 user 创建（例如， app/models/user js ）： import model, { attr } from '@ember data/model'; export default class usermodel extends model { @attr('string') username; @attr('string') email; @attr('string') passwordhash; @attr('date') createdat; @attr('date') updatedat; } 3\ 实现 crud 操作 使用 ember data 的 store 服务执行 crud 操作。例如，要获取所有项目，您可以创建一个类似于以下的路由： import route from '@ember/routing/route'; export default class itemsroute extends route { model() { return this store findall('item'); } } 您可以使用 ember data 的 api 方法类似地添加、更新或删除记录。 替代方案：使用原生 fetch 进行 api 调用 如果您不想使用 ember data，可以利用原生 fetch 调用。例如，检索项目： async function fetchitems() { try { let response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let data = await response json(); console log('fetched items ', data); } catch (error) { console error('error fetching items ', error); } } 根据需要将这些 api 调用集成到您的 ember 组件或服务中。 步骤 5 – 增强后端安全性 实施访问控制 通过为每个对象配置访问控制列表 (acl)，保护您的数据。例如，当创建一个仅应对其所有者可见的项目时，您可以通过 api 调用调整 acl 设置。 类级权限 (clp) 在 back4app 仪表板中设置 clp，以确保只有经过身份验证的用户才能访问某些模型。这通过强制执行默认访问规则增加了一层额外的安全性。 步骤 6 – 在 ember js 中实现用户身份验证 设置用户帐户 back4app 利用 parse 用户模型来处理身份验证。在您的 ember js 应用程序中，您可以创建服务通过 api 调用来管理用户注册和登录。 例如，创建一个身份验证服务 ( app/services/auth js ) import service from '@ember/service'; export default class authservice extends service { async register(username, password, email) { try { let response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); let result = await response json(); console log('user registered successfully ', result); } catch (error) { console error('registration error ', error); } } async login(username, password) { try { let response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let result = await response json(); console log('user logged in ', result); } catch (error) { console error('login error ', error); } } } 此服务可以注入到您的路由或组件中，以处理会话管理、密码重置和其他与身份验证相关的任务。 第 7 步 – 部署您的 ember js 应用程序 back4app 支持多种部署策略。您可以使用 docker 容器化等方法来部署您的 ember js 应用程序。 7 1 构建您的 ember 应用程序 构建您的应用程序： 在终端中运行以下命令： ember build environment=production 验证输出： 确保 dist/ 文件夹包含您的生产就绪资产。 7 2 项目结构概述 一个典型的 ember js 项目可能组织如下： basic crud app ember/ \| app/ \| | adapters/ \| | | application js \| | models/ \| | | item js \| | | user js \| | routes/ \| | | items js \| | services/ \| | auth js \| config/ \| | environment js \| public/ \| tests/ \| ember cli build js \| package json \| readme md 7 3 将您的 ember 应用程序容器化 如果您更喜欢容器化部署，请在项目根目录中包含一个 dockerfile ： \# use an official node js image as the base from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# build the ember application run npm run build environment=production \# use a lightweight web server to serve static files from nginx\ stable alpine copy from=0 /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 通过 back4app web 部署 连接您的 github 仓库： 在 github 上托管您的 ember js 项目。 配置部署设置： 在您的 back4app 控制面板中，导航到 web deployment , 连接您的仓库（例如， basic crud app ember ），并选择所需的分支。 设置构建命令： 定义您的构建命令（例如， ember build environment=production ) 并指定输出目录。 部署您的应用程序： 点击 deploy 并监控日志，直到您的应用程序上线。 第 8 步 – 结论和后续步骤 干得好！你现在已经构建了一个基于ember js的crud应用程序，并与back4app集成。 在本教程中，你设置了一个名为 basic crud app ember 的项目，设计了items和users的模型，并通过back4app管理应用程序的后端。 你还通过api调用连接了你的ember js应用程序，并实施了强大的安全实践。 下一步： 增强你的应用程序： 考虑添加高级搜索功能、详细视图或实时更新等功能。 扩展后端功能： 探索云函数，集成第三方api，或设置基于角色的访问控制。 加深你的理解： 访问 back4app文档 https //www back4app com/docs 和其他ember js资源，以获取更高级的主题。 祝你编码愉快，祝你在ember js的旅程中一切顺利！