如何构建Angular前端并将其连接到后端？

在本教程中，您将使用 angular 构建一个待办事项列表应用程序，并将其连接到由 back4app 提供的托管后端服务。 如果您想掌握基本的 crud（创建、读取、更新、删除）操作并使用 angular 创建动态、响应式界面，那么本指南就是为您设计的。在本教程结束时，您的应用程序将与处理数据存储、身份验证等的后端无缝通信。 构建全栈应用程序通常涉及复杂的后端配置和数据库管理。为了简化您的工作流程，我们使用 back4app— 一个强大的后端即服务 —这样您就可以专注于开发功能丰富的 angular 前端。 back4app 提供完全托管的 nosql 数据库、用户身份验证、自定义逻辑的云代码以及无缝集成的 sdk。这使您能够构建和部署可扩展的应用程序，而无需管理服务器基础设施。 关键要点 通过遵循本教程，您将： 使用 angular cli 初始化一个现代 angular 项目。 无缝集成后端服务以管理您应用程序的数据。 实现动态的基本 crud 操作 待办事项列表 。 使用 back4app 上的容器化工作流部署您的完全功能应用程序。 前提条件 在开始之前，请确保您拥有 node js 和 npm 已安装在您的机器上。通过 node v 和 npm v 验证安装情况。 基本的 angular 知识 , 包括组件、服务和依赖注入。 一个 back4app 账户 用于管理您的后端服务。如果您还没有，请在 back4app https //www back4app com/ 注册。 有了这些前提条件，您就可以开始构建您的项目了。 项目设置 首先设置您的本地开发环境，并使用 angular cli 初始化一个新的 angular 项目。 确保您已安装 node js (lts 版本) 。如果没有，请从 nodejs org https //nodejs org/ 下载。 如果您还没有，请全局安装 angular cli npm install g @angular/cli 创建一个新的 angular 项目 ng new todo app routing style=css 导航到你的项目目录 cd todo app 启动开发服务器以验证设置 ng serve 在您的浏览器中打开 http //localhost 4200 以查看您的 angular 应用程序的运行情况。前端准备好后，继续在 back4app 上创建您的后端。 创建 todo 后端 back4app 提供一个完全托管的后端服务，支持 parse , 包括 nosql 数据库、身份验证、云代码和自动生成的 api。 按照以下步骤设置您的后端： 登录 到您的 back4app 控制面板 https //www back4app com/ 并点击 "创建新应用。" 命名您的应用 （例如， todoapp ) 并选择 nodejs/parse 作为后端类型。 导航到 "数据库" > "浏览器" , 点击 "创建一个类" , 并选择 "自定义" 将类命名为 任务 并设置权限以允许公共读取和写入（您可以稍后进行细化）。 在 任务 类中，添加以下字段： 标题 （字符串）– 任务的标题。 描述 （字符串）– 关于任务的详细信息。 完成 （布尔值）– 任务完成状态。 截止日期 （日期）– 任务的截止日期。 点击 "保存" 创建模式。 将 back4app 与 angular 集成 您将使用 parse javascript sdk 将您的 angular 应用连接到 back4app 后端。 安装 parse sdk npm install parse 在您的 angular 项目中配置 sdk。打开 src/app/app module ts （或创建一个专用服务），并使用您的 应用程序 id 和 javascript 密钥 从 back4app 控制面板初始化 parse（在 应用设置 > 安全性与密钥 ) 下找到。例如，在 src 目录中创建一个服务 parse service ts ： import { injectable } from '@angular/core'; import parse from 'parse'; @injectable({ providedin 'root', }) export class parseservice { constructor() { const parse app id = "your application id"; const parse js key = "your javascript key"; parse initialize(parse app id, parse js key); (parse as any) serverurl = 'https //parseapi back4app com/'; } } 然后，在您的组件中，只需在构造函数中注入 parseservice。该服务将在应用程序启动时运行其构造函数一次，为您初始化 parse。 连接后端后，您现在可以构建待办事项列表 ui 并实现 crud 操作。 开发前端 您的 angular 应用将由组件和服务组成，以添加、显示、更新和删除任务。您将利用 angular 的组件架构和依赖注入来实现顺畅的数据管理。 构建您的组件 使用 angular cli 生成以下组件： ng generate component components/task form ng generate component components/task list ng generate component components/task item 任务表单组件 该组件渲染一个用于添加新任务的表单。它捕获用户输入并将任务数据提交到 back4app。 add task // src/app/components/task form/task form component ts import { component, eventemitter, output } from '@angular/core'; import { formsmodule } from '@angular/forms'; import as parse from 'parse'; @component({ selector 'app task form', templateurl ' /task form component html', styleurls \[' /task form component css'], imports \[formsmodule] }) export class taskformcomponent { title = ''; description = ''; @output() refreshtasks = new eventemitter\<void>(); async onsubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this refreshtasks emit(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } 任务列表组件 该组件通过遍历一个数组并使用 taskitemcomponent 渲染每个任务来显示任务列表。 no tasks available // src/app/components/task list/task list component ts import { component, input, oninit } from '@angular/core'; import { commonmodule } from '@angular/common'; import as parse from 'parse'; import { taskitemcomponent } from ' /task item/task item component'; @component({ selector 'app task list', templateurl ' /task list component html', styleurls \[' /task list component css'], imports \[commonmodule, taskitemcomponent] }) export class tasklistcomponent implements oninit { @input() tasks any\[] = \[]; @input() fetchtasks! () => void; ngoninit() void {} } 任务项组件 此组件表示一个单独的任务，并提供按钮以切换完成状态或删除任务。 {{ task title }} {{ task description }} {{ task completed ? 'undo' 'complete' }} delete // src/app/components/task item/task item component ts import { component, eventemitter, input, output } from '@angular/core'; import as parse from 'parse'; @component({ selector 'app task item', templateurl ' /task item component html', styleurls \[' /task item component css'] }) export class taskitemcomponent { @input() task any; @output() taskchanged = new eventemitter\<void>(); async togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this taskchanged emit(); } catch (error) { console error('error updating task ', error); } } async deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this taskchanged emit(); } catch (error) { console error('error deleting task ', error); } } } appcomponent 集成 在你的主组件中，管理任务的状态并集成任务组件。 to do list // src/app/app component ts import { component, oninit } from '@angular/core'; import { parseservice } from ' /parse service'; import as parse from 'parse'; import { taskformcomponent } from ' /components/task form/task form component'; import { tasklistcomponent } from ' /components/task list/task list component'; @component({ selector 'app root', imports \[taskformcomponent, tasklistcomponent], templateurl ' /app component html', styleurl ' /app component css' }) export class appcomponent implements oninit { constructor(private parseservice parseservice) {} tasks any\[] = \[]; async fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); this tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } ngoninit() void { this fetchtasks(); } } 应用程序样式 在你的组件 css 文件中创建或更新样式，或在 src/styles css / src/styles css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } 应用程序样式 在 back4app 上部署前端 back4app web deployment 提供了一个容器化环境来托管您的 angular 应用程序。 为生产配置 angular 构建您的生产就绪的 angular 应用程序： ng build 此命令生成一个 dist/ 文件夹，其中包含您的编译后的 angular 应用程序。 创建 dockerfile 在你的项目根目录下创建一个 dockerfile ，内容如下 from node 18 alpine as build workdir /app copy package json package lock json / run npm install g @angular/cli run npm install copy run ng build cmd \["ng", "serve", " host", "0 0 0 0"] 在本地测试 docker 容器 构建你的 docker 镜像 docker build t todo frontend 运行容器 docker run p 4201 4200 todo frontend 在你的浏览器中打开 http //localhost 4201 以验证你的 angular 应用是否正确提供服务。 部署到 back4app 初始化一个 git 仓库，添加你的项目文件，并提交 git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main 在你的浏览器中打开 http //localhost 4201 以验证你的 angular 应用是否正确提供服务。 登录到 back4app web 部署 https //www back4app com/containers 点击 "创建新应用" , 提供您的项目名称，并选择您的 github 仓库。 授权 back4app 并选择 dockerfile 部署 确认构建设置并点击 "部署" 开始部署过程。 监控您的部署 部署后，使用 back4app 控制面板来 查看调试日志。 监控容器性能和资源使用情况。 在新提交时触发重建。 如有需要，配置自定义域名。 访问您的实时应用程序在 https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ 测试和调试 部署后，确认您的 angular 前端与 back4app 后端有效通信： api 验证： 使用浏览器的开发者工具 (f12 → 网络) 检查 api 请求。 任务操作： 通过 ui 添加、完成和删除任务，并在 back4app 数据库浏览器中验证更新。 错误处理： 检查控制台日志中的错误，并测试边缘情况，例如空提交。 性能测试： 使用浏览器工具模拟慢网络条件以评估响应能力。 使用 back4app 与 angular 的最佳实践 为了优化您的应用程序： 高效请求： 使用批量操作处理多个任务： const tasks = \[task1, task2, task3]; parse object saveall(tasks); 优化查询： 仅检索必要字段： query select('title', 'completed'); 环境管理： 将敏感密钥存储在环境变量中： ng app parse app id=your app id ng app parse js key=your js key 安全性： 使用acl限制数据访问： task setacl(new parse acl(parse user current())); 后端卸载： 利用云代码处理复杂逻辑以减少前端负担。 结论 您现在已经通过创建angular前端、将其与back4app的后端集成并使用容器化工作流进行部署，构建了一个完整的全栈待办事项应用程序。 本教程指导您完成每一步——从本地开发到云部署——确保您的angular ui与后端服务之间的稳健交互。 展望未来，考虑增强功能，如实时更新、改进的身份验证和第三方集成。 要进一步学习，请访问 back4app文档 https //www back4app com/docs 并探索社区资源。