如何构建基础 CRUD 应用？

介绍 在本指南中，我们将引导您完成使用 angular 构建基本 crud（创建、读取、更新、删除）应用程序的过程。 您将学习如何开发一个高效管理数据操作的应用程序，利用 angular 强大的框架。 首先，您将创建并配置一个名为 basic crud app angular 的新 back4app 项目，该项目将作为您后端数据管理的支柱。 接下来，您将通过详细列出集合和字段来设计一个可扩展的数据库模型——可以手动进行，也可以借助 back4app ai agent。这一步确保您的系统能够很好地处理所有 crud 功能。 在设置好您的架构后，您将探索 back4app 管理应用程序，这是一个直观的拖放界面，可以轻松管理您的集合和记录。 最后，您将使用 rest/graphql（或 parse sdk，如果更喜欢）将您的 angular 前端与 back4app 集成，同时实施高级安全措施以保护您的后端。 在本教程结束时，您将构建一个具备用户身份验证和全面 crud 功能的生产就绪 angular 应用程序。 关键要点 掌握如何构建高效处理数据的crud应用程序，并拥有可靠的后端。 获得创建可扩展数据模型并将其链接到angular前端的实用见解。 学习如何利用back4app管理应用程序的用户友好界面进行轻松的数据管理。 了解部署策略，包括docker容器化，以快速启动您的angular应用程序。 先决条件 在开始之前，请确保您具备以下条件 一个具有新项目设置的back4app账户。 需要帮助？查看 back4app入门指南 https //www back4app com/docs/get started/new parse app 一个angular开发环境。 通过运行 npm install g @angular/cli 安装angular cli，并使用 ng new 创建一个新项目。确保安装node js（版本14或更高）。 对typescript、angular和rest api有基本了解。 如需复习，请访问 angular文档 https //angular io/docs 步骤1 – 设置您的项目 启动一个新的 back4app 项目 登录到您的 back4app 账户。 点击“新应用”按钮 在您的仪表板上。 输入项目名称： basic crud app angular 并按照设置提示进行操作。 创建新项目 一旦项目创建完成，它将出现在您的 back4app 仪表板上，为您的后端配置提供坚实的基础。 步骤 2 – 构建您的数据库模式 构建您的数据模型 对于这个 crud 应用程序，您将定义几个集合。以下是将构成您数据库模式基础的集合及其字段的示例。这些集合使应用程序能够执行基本的 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 primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 这种基于 ai 的方法简化了流程，并确保一致、优化的模式。 第 3 步 – 激活管理员应用程序并管理 crud 操作 管理员应用程序的概览 back4app 管理员应用程序提供了一个无代码、拖放界面，使您能够轻松管理后端数据。 通过它，您可以轻松执行 crud 操作，例如添加、查看、修改和删除记录。 激活管理员应用程序 在您的 back4app 控制面板中导航到 “更多” 菜单 。 选择 “管理员应用程序” 并点击 “启用管理员应用程序。” 设置您的管理员凭据： 创建您的初始管理员用户，这也将配置角色（例如， b4aadminuser ) 和系统集合。 启用管理员应用程序 激活后，登录管理员应用程序以管理您的集合和记录。 管理员应用程序仪表板 利用管理员应用程序进行 crud 任务 在管理员应用程序中，您可以： 添加新记录： 在任何集合中点击 “添加记录”（例如，项目）以创建新条目。 查看和编辑记录： 选择一条记录以查看其详细信息或更新其字段。 删除记录： 使用删除选项来移除过时的记录。 这个直观的界面大大简化了您对后端数据的管理。 步骤 4 – 将您的 angular 前端连接到 back4app 现在您的后端已通过管理员应用程序完全设置和管理，是时候将您的 angular 前端链接到 back4app。 选项 a：将 parse sdk 与 angular 集成 安装 parse sdk： npm install parse 在您的 angular 项目中设置 parse： 创建一个配置文件（例如， src/app/parse config ts ) // src/app/parse config ts import parse from 'parse'; // 用您的实际 back4app 凭据替换 parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 3\ implement parse in an angular component for example, create a component to fetch and display items ```typescript // src/app/components/items list/items list component ts import { component, oninit } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app items list', templateurl ' /items list component html', styleurls \[' /items list component css'] }) export class itemslistcomponent implements oninit { items any\[] = \[]; async ngoninit() { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error retrieving items ', error); } } } 在 html 模板中（ items list component html ) items {{ item get('title') }} – {{ item get('description') }} 选项 b：使用 rest 或 graphql 如果您不想使用 parse sdk，可以通过 rest 或 graphql 执行 crud 操作。例如，要在 angular 中使用 rest 获取项目，可以创建一个这样的服务方法： // src/app/services/items service ts import { injectable } from '@angular/core'; import { httpclient, httpheaders } from '@angular/common/http'; import { observable } from 'rxjs'; @injectable({ providedin 'root' }) export class itemsservice { private apiurl = 'https //parseapi back4app com/classes/items'; constructor(private http httpclient) { } getitems() observable\<any> { const headers = new httpheaders({ 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }); return this http get(this apiurl, { headers }); } } 您可以根据需要在 angular 组件中集成这些 api 调用。 步骤 5 – 保护您的后端 实施访问控制列表 (acls) 通过将 acl 分配给您的对象来增强数据安全性。例如，要创建一个仅由其所有者访问的项目： async function createsecureitem(itemdata any, owneruser any) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // assign acl only the owner has read/write access 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 creating item ', error); } } 配置类级权限 (clps) 在 back4app 仪表板中，调整每个集合的 clp 以设置默认访问规则，确保只有经过身份验证或授权的用户可以访问敏感数据。 步骤 6 – 管理用户身份验证 创建和处理用户账户 back4app 利用 parse 的用户类来管理身份验证。在您的 angular 项目中，您可以按如下方式处理用户注册和登录： // src/app/components/auth/auth component ts import { component } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app auth', templateurl ' /auth component html', styleurls \[' /auth component css'] }) export class authcomponent { username string = ''; password string = ''; email string = ''; async signup(event 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('user registration successful!'); } catch (error any) { alert('registration error ' + error message); } } } 以及相应的 html 模板 ( auth component html ) register 类似的方法可以应用于用户登录和会话管理。对于社交登录或密码重置等功能，请在back4app仪表板中调整您的设置。 步骤 7 – 部署您的 angular 前端 back4app 的 web 部署功能使您能够通过直接从 github 存储库部署代码来托管您的 angular 应用程序。在本节中，您将准备生产构建，提交源代码，并集成您的存储库以进行部署。 7 1 构建您的生产版本 在终端中打开您的项目目录。 运行生产构建命令： ng build prod 此命令将您的 angular 应用程序编译到一个优化的 dist/ 文件夹中。 验证构建： 确保 dist/ 目录包含 index html 和所有必要的资产。 7 2 结构化和上传您的源代码 您的代码库应包含整个 angular 项目。典型的文件结构可能如下所示： basic crud app angular/ ├── node modules/ ├── src/ │ ├── app/ │ │ ├── app component ts │ │ ├── app module ts │ │ └── components/ │ │ ├── auth/ │ │ │ ├── auth component ts │ │ │ └── auth component html │ │ └── items list/ │ │ ├── items list component ts │ │ └── items list component html ├── angular json ├── package json └── readme md 示例： src/app/parse config ts // src/app/parse config ts import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 示例 src/app/app component ts import { component } from '@angular/core'; import parse from ' /parse config'; @component({ selector 'app root', template ` \<div style="padding 2rem;"> \<h1>items\</h1> \<app items list>\</app items list> \</div> `, styles \[] }) export class appcomponent { } 将您的代码提交到 github 在您的项目文件夹中初始化一个 git 仓库 （如果您还没有的话） git init 添加您的项目文件 git add 提交您的更改 git commit m "angular 前端的初始提交" 创建一个 github 仓库 例如，命名为 basic crud app angular 将您的代码推送到 github git remote add origin https //github com/your username/basic crud app angular git git push u origin main 7 3 将您的 github 存储库与 web 部署链接 访问 web 部署功能： 登录到您的 back4app 控制面板，选择您的项目 ( basic crud app angular ），然后选择 web deployment 连接您的 github 账户： 按照提示集成您的 github 账户，允许 back4app 访问您的存储库。 选择您的存储库和分支： 选择您的存储库（例如， basic crud app angular ）和包含您代码的分支（例如， main ）。 7 4 配置您的部署设置 提供必要的配置细节： 构建命令： 如果您的存储库缺少预构建的 dist/ 文件夹，请指定构建命令（例如， ng build prod ）。 输出目录： 将输出目录设置为 dist/your project name ，以便 back4app 知道您的静态文件位于何处。 环境变量： 在部署配置中添加任何所需的环境变量（例如 api 密钥）。 7 5 使用 docker 容器化您的 angular 应用程序 如果您更喜欢基于 docker 的部署，请在您的存储库中包含一个 dockerfile 。例如： # use an official node image to build the angular app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application and build it copy run npm run build prod \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/dist/your project name /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 将此 dockerfile 包含在您的代码库中，然后在 back4app 的 web 部署设置中选择 docker 部署选项。 7 6 启动您的应用程序 点击部署按钮： 一旦您的部署设置配置完成，点击 部署 。 监控部署过程： back4app 将拉取您的代码，必要时执行构建命令，并部署您的 angular 应用。 获取您的 url： 成功部署后，back4app 将提供一个 url，您的应用程序将在该 url 上运行。 7 7 测试您的已部署应用程序 访问提供的 url： 在您的浏览器中打开该 url。 验证功能： 确保您的 angular 应用正常加载，所有路由按预期工作，资产正确提供。 必要时进行故障排除： 使用浏览器开发者工具识别和解决任何问题。如果出现问题，请检查 back4app 的部署日志和您的配置。 第8步 – 总结与未来方向 恭喜你！你已经成功使用angular和back4app构建了一个基本的crud应用程序。 你设置了一个名为 basic crud app angular 的项目，为项目中的items和users设计了全面的数据库集合，并使用直观的admin app管理你的数据。 此外，你将angular前端连接到后端，并实施了强大的安全措施。 下一步： 增强你的前端： 为你的angular应用程序扩展高级功能，如详细的项目视图、搜索功能和实时更新。 扩展功能： 考虑集成额外的后端逻辑（如云函数）或实施基于角色的访问控制。 探索更多资源： 查看 back4app文档 https //www back4app com/docs 和其他angular资源，以加深你的理解。 通过本指南，你现在可以使用back4app为你的angular应用程序构建强大、可扩展的crud后端。祝你编码愉快！