前言
REST（Representational State Transfer）是一种用于构建应用程序的架构风格。RESTful API 使用 HTTP 协议进行通信，使用轻量级、可维护和灵活的方式实现数据交互。在本教程中，我们将使用 Angular 和 Express 框架构建一个 RESTful API。
环境搭建
要使用 Angular 和 Express 构建 RESTful API，首先需要安装 Node.js 和 Angular CLI。
安装 Node.js
Node.js 是一种运行 JavaScript 代码的环境，可以在服务器端或本地计算机上运行 JavaScript 代码。要安装 Node.js，请按照官方网站上的说明进行安装。
安装 Angular CLI
Angular CLI（Command Line Interface）是一个命令行工具，可以快速创建、开发和构建 Angular 应用程序。要安装 Angular CLI，请使用以下命令：
npm install -g @angular/cli
创建 Angular 应用程序
我们将使用 Angular 来创建一个简单的 CRUD（Create, Read, Update, Delete）应用程序，然后使用 Express 框架来构建 RESTful API。
创建 Angular 应用程序
要创建一个新的 Angular 应用程序，请使用以下命令：
ng new my-app
这将在当前目录下创建一个名为 "my-app" 的新 Angular 应用程序。
添加 Angular 组件
我们将创建一个名为 "tasks" 的组件，用于展示和操作任务列表。
要创建一个新的组件，请使用以下命令：
ng generate component tasks
这将在 "src/app" 目录下创建一个名为 "tasks" 的新组件。我们还需要在 "src/app/app.component.html" 文件中添加以下代码：
<app-tasks></app-tasks>
这将在 "app.component.html" 文件中引入 "tasks" 组件。
添加样式
我们将使用 Bootstrap 框架来添加样式。要安装 Bootstrap，请使用以下命令：
npm install bootstrap
然后，在 "angular.json" 文件中添加以下代码：
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],
现在，我们已经在应用程序中添加了 Bootstrap 样式。
添加任务服务
我们将使用 Angular 服务来调用后台 API。要创建一个名为 "task" 的服务，请使用以下命令：
ng generate service task
这将在 "src/app" 目录下创建一个名为 "task" 的新服务。我们还需要在 "task.service.ts" 文件中添加以下代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- - -
---------- -
------ ----------------------------
-
------------- -
------ ---------------------------- ------
-
---------------- -
------ --------------------------- - --------- ------
-
-------------- -
------ ------------------------------ - ----
-
-这将在 "task.service.ts" 文件中创建 "TaskService" 类，用于调用后端 API。我们在这里定义一个 "getTasks" 方法，用于获取任务列表，一个 "addTask" 方法，用于添加新任务，一个 "updateTask" 方法，用于更新任务状态，一个 "deleteTask" 方法，用于删除任务。
创建任务模型
我们将使用 Mongoose 模式来创建任务模型。要安装 Mongoose，请使用以下命令：
npm install mongoose
然后，在应用程序的根目录下创建一个新文件夹 "models"，并在其中创建一个名为 "task.js" 的新文件。
在 "task.js" 文件中添加以下代码：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ---------- - --- ----------------- ------ ------- ------- -------- ---------- - ----- ----- -------- -------- - --- -------------- - ---------------------- ------------
这将定义一个 "title"、"isDone" 和 "createdAt" 字段的 Mongoose 模式。
创建 Express 应用程序
我们将使用 Express 框架来创建一个 RESTful API。要安装 Express，请使用以下命令：
npm install express
然后，在应用程序的根目录下创建一个新文件夹 "routes"，并在其中创建一个名为 "api.js" 的新文件。
在 "api.js" 文件中添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
----- ---- - --------------------------
-- --- --- -----
-------------------- ----- ---- -- -
------------- ----- ------ -- -
-- ----- -
--------------
- ---- -
----------------
-
---
---
-- --- --- ----
--------------------- ----- ---- -- -
----- ---- - --- ---------------
--------------- ----- -- -
-- ----- -
--------------
- ---- -
---------------
-
---
---
-- ------ ----
------------------------ ----- ---- ----- -- -
---------------------------- ----- ----- -- -
-- ----- -
--------------
- ---- -
----------- - --------------- -- ------------
---------- - -------------- -- -----------
--------------- ----- -- -
-- ----- -
--------------------------
- ---- -
---------------
-
---
-
---
---
-- ------ ----
--------------------------- ----- ---- -- -
---------------------------- ----- ----- -- -
-- ----- -
--------------
- ---- -
----------------- ----- -- -
-- ----- -
--------------------------
- ---- -
-----------------------
-
---
-
---
---
-------------- - -------这将创建一个包含获取任务列表、添加新任务、更新任务状态和删除任务的路由的 Express 应用程序。
要将这个路由添加到应用程序中，请在 "app.js" 文件中添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- -------- - -------------------- ----- ---- - ---------------- ----- --- - ------------------------ ----- --- - ---------- ---------------------------------------------- ---------------- - --------------- --------------------------- ------------------------------- --------- ----- ---- ------------------------------------------- ---------- --------------- ----- ------------ ----- ---- -- - --------------------------------- -------------------- --- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- ------- -- ---- ---------- ---
这将创建一个 Express 应用程序，并将路由添加到 "api" 路径。我们还使用了 "body-parser" 中间件来解析 HTTP 请求体。
运行应用程序
要运行应用程序，请使用以下命令：
ng serve
这将启动 Angular 应用程序并在浏览器中打开它。要在本地环境中测试 RESTful API，请使用以下命令：
nodemon app.js
然后，使用 Postman 等工具来测试路由和 API 是否正常工作。
总结
现在，我们已经使用 Angular 和 Express 框架构建了一个简单的 CRUD 应用程序，其中包含一个基本的 RESTful API。通过这个教程，你可以学习如何使用 Angular 和 Express 框架来创建一个完整的应用程序，并在其中实现数据库交互和 API 调用。这将对你的前端开发技能有所提升，并为你今后的开发工作提供有价值的经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493305048841e98940f3fff