随着 Web 应用程序的复杂性不断增加，全栈开发已经成为了前端开发的趋势。全栈应用是使用同一编程语言、相同技术栈开发的应用，通常包括前端、后端和数据库层面。在这篇文章中，我们将讨论如何使用 Angular+Node.js 构建全栈应用。
Angular
Angular 是一个流行的前端框架，它为开发者提供了很多功能。Angular 使用 TypeScript 作为开发语言，这意味着代码更加简洁、可读性更好、更加容易维护。Angular 还提供了强大的模块化功能和可重用的组件。 Angular 的优势在于通过组件和服务的定义，将一个 Web 应用分解为更小的部分。
Node.js
Node.js 是一个流行的后端框架。它使用 JavaScript 作为开发语言，非常适合于编写可扩展、高性能的 Web 应用程序。由于用 JavaScript 编写后端代码的便利性，使用 Node.js 作为后端开发语言的项目繁荣发展。在使用 Node.js 开发 Web 应用时，开发人员使用 Express 框架来构建和管理路由和控制器，使用 MongoDB 来管理数据。
全栈应用
全栈开发是指开发人员使用同一技术栈(相同的编程语言和工具集)来开发 Web 应用的前端、后端和数据库层。前端应用负责展示数据，后端应用负责提供数据和处理业务逻辑，数据库层则负责存储和管理数据。使用全栈技术，可以快速开发健壮、高效的 Web 应用程序。
在我们的示例中，我们将使用 Angular+Node.js 构建名为“TaskManager”的应用程序。该应用程序将包括以下功能：
- 用户可以创建、编辑和删除任务
- 用户可以查看特定日期的任务
- 用户可以将任务标记为已完成
构建前端
我们将从构建前端开始。我们将使用 Angular 作为前端框架，并使用 CLI 命令构建项目。
ng new task-manager
这将创建一个名为“task-manager”的应用程序项目，该项目将包含 Angular 框架的所有依赖项和文件。接下来，我们需要创建一些组件和服务。
ng g component task-list ng g component add-task ng g service task
这将创建三个文件夹，分别包含名为 task-list、add-task 和 task 的组件和服务。将这些文件放在 app 文件夹中。
在 app.component.html 文件中，添加以下代码：
<app-task-list></app-task-list> <app-add-task></app-add-task>
这将向前端应用程序添加“Task List”和“Add Task”组件。
task-list.component.ts
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ ------------- ---- ------------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- ---------- ------ -
------------------- ------------- ------------ - -
------ ----
----------- ---- -
------------------------------------------- -- -
---------- - -----
---
-
------------------ ------- -
--------------------------------------------------- -- -
---------- - ------------------------ ---- -- -------- --- --------
---
-
-------------- ---- -
------------------------------------------ ---------------------------- -- -
----------- - -------------
---
-
-
add-task.component.ts
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ----------- - ---- ------------------
------------
--------- ---------------
------------ ----------------------------
---------- ----------------------------
--
------ ----- ---------------- -
-------- - ---------------
------------ -----
-------- ----
---
------------
------- --- ------------
------- ------------- -----------
- - -
--------- --------- - --- --------------------
---------- -
---------------------------------------------------------------- -- -
----------------------
--------------------------
---
-
-task.service.ts
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- - -
---------- -
------ ----------------------------
-
---------------- ---- -
------ ---------------------------- ------
-
------------------ ------- ------- -------- -
------ -------------------------------------- ----------
-
-------------- ------- -
------ -------------------------------------
-
-在 app.module.ts 中，我们将引入 HttpClientModule 和 ReactiveFormsModule，并将 TaskService 注入到 providers 数组中。
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------------
------ - ------------------- - ---- -----------------
---
-----------
------------- -
-------------
------------------
----------------
--
-------- -
--------------
-----------------
--------------------
----------------
--
---------- --------------
---------- --------------
--
------ ----- --------- - -我们已经成功构建了前端部分，下面我们将构建后端。
构建后端
为了构建后端，我们将使用 Node.js 和 Express 框架。我们还需要使用 MongoDB 数据库。在接下来的示例中，我们将使用 Mongoose 库来连接和管理 MongoDB 数据库。
安装依赖
安装所有相应的依赖：
npm init --yes npm install express mongoose body-parser cors
创建项目结构
mkdir server touch server/app.js
创建路由器
mkdir server/routes touch server/routes/tasks.js
在 routes/tasks.js 中，我们将定义所有与任务有关的路由。
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
----- ---- - --------------------------
--------------- ----- ---- -- -
------------- ------------- ------ -
-- ----- -
--------------
-
----------------
---
---
---------------- ----- ---- -- -
----- ---- - --- ---------------
----------------------- ----- -
-- ----- -
--------------
-
---------------
---
---
----------------------- ----- ---- -- -
--------------------------- --------------- --------- ----- ------ ------------- ----- -
-- ----- -
--------------
-
---------------
---
---
--------------------- ----- ---- -- -
-------------------- --------------- ------------- ----- -
-- ----- -
--------------
-
---------- -------- ----- ------------ -------- ---
---
---
-------------- - -------创建模型
在 models/Task.js 中，我们将定义 Task 模型。
-- -------------------- ---- -------
----- -------- - --------------------
----- ---------- - --- ----------------
-
------------ -
----- -------
--------- ----
--
-------- -
----- -----
--------- ----
--
------- -
----- --------
-------- -----
-
--
- ----------- ---- -
--
-------------- - ---------------------- ------------构建 Express 应用
在 app.js 中，我们将构建 Express 应用程序，并将 Task 路由器添加到应用程序中。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- -------- - -------------------- ----- --- - ---------- ----- ---- - ---------------- -- ----- ---------------- ------------------------ --------------------------------------------------------- ----------------- ----- ------------------- ------- ----- ---------- - -------------------- ----------------------- ---------- - -------------------- -------- ---------- ----------- --------------- --- ----- ----------- - -------------------------- --------------------- ------------- ---------------- -- -- - ------------------- -- ------- -- ----- ---------- ---
将前端和后端连接起来
打开 terminal 并分别打开前端和后端的目录。
在前端中，我们需要使用 proxyConfig 配置，为 Angular CLI提供反向代理功能，将 http 请求重定向到指定的地址。
在 prox.config.json 文件中，增加如下代码：
{
"/api/*": {
"target": "http://localhost:3000/",
"secure": false,
"logLevel": "debug"
}
}然后，在项目根目录下打开终端，运行：
ng serve --proxy-config proxy.config.json
在后端中，我们只需要从前端的静态构建中提供静态资源。在 app.js 文件中，添加以下代码：
app.use(express.static(__dirname + '/../dist/task-manager'));
app.get('/', function(req, res){
res.sendFile(__dirname + '/../dist/task-manager/index.html');
});最后，构建并启动项目:
cd server && node app.js
cd client/task-manager && ng serve
结论
全栈开发是一种流行的开发模式，它通过相同的编程语言和技术栈将前端、后端和数据库层连接在一起。在本文中，我们讨论了如何使用 Angular+Node.js 和 MongoDB 构建全栈应用程序。我们还构建了一个名为“TaskManager”的示例应用程序，该应用程序包括创建、编辑和删除任务、将任务标记为已完成以及查看特定日期的任务等功能。精通此技术后，您将能够开发出高效、稳定且易于维护的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714915cad1e889fe2146b55