Express.js + Angular.js 实现 MVVM 开发
前言
在前端开发中，MVVM 架构模式已经成为了一种非常流行的模式。MVVM 代表着 Model-View-ViewModel 模式，它通过解偶视图和模型，大大简化了前端开发的复杂度。Angular.js 是一款非常流行的前端框架，它天生支持 MVVM 模式，可以轻松实现数据双向绑定，有很好的可扩展性和可维护性。而 Express.js 作为 Node.js 的 Web 框架，可以提供一个简单、快速、富有表现力的环境，为前端开发带来了极大的便利性。在本文中，我们将尝试使用 Express.js 和 Angular.js 实现 MVVM 开发的示例。
Express.js 简介
Express.js（简称 Express）是一个使用 Node.js 编写的 Web 应用程序框架。它提供了很多简洁的方法来处理 Web 请求和响应，当然也包括了对运行在服务器上的 REST API 的支持。此外，Express 还可以帮助我们实现 Web 应用程序的模板引擎、会话管理、路由、中间件等功能。Express 是目前最受欢迎和流行的 Node.js Web 应用程序框架。
Angular.js 简介
Angular.js（通常简称 Angular）是一个由 Google 维护的开源 Web 开发框架。它是一个强大、灵活和可扩展的框架，支持 MVVM 模式，可以帮助我们构建高质量的 Web 应用程序。Angular 拥有很多出色的特性，比如数据绑定、依赖注入、指令等等。总之，Angular 是目前最流行和最受欢迎的前端开发框架之一。
项目结构
为了方便我们的开发和管理，我们需要创建一个 Express.js 和 Angular.js 的项目。我们可以按照如下的结构创建项目：
-- -------------------- ---- ------- ---------------- --------- - ------ - --------- - ------------- - ----------- - ------------ - ----------- - -------- --------- - --------- - --------- - ---------- - ----------- --------------- --------------- ------------
在这个项目结构中，我们将客户端代码和服务器端代码分别放在了不同的文件夹中。在客户端文件夹 client 中，我们用 Angular.js 开发了我们的应用程序，包括视图、模板、组件、服务等等。在服务器端文件夹 server 中，我们用 Express.js 编写了我们的 API，包括路由、模型、中间件等等。我们还需要在根目录下创建一个 package.json 文件，用于管理我们项目的依赖和版本信息。
在这个项目中，我们将会有一个用户管理的功能，包括数据的 CRUD 操作。我们将会通过 Angular.js 的视图和控制器来操作这些数据，并通过 Express.js 提供的 API 实现数据的增删改查。让我们开始吧！
Express.js 实现 API
首先，我们需要在服务器端创建一个 Express 应用程序，它将会用来实现我们的 API。我们可以在 server 文件夹下创建一个 index.js 文件，用来初始化我们的应用程序。内容如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- -------- - -------------------- ----- ------ - -------------------- -- ------- -- ------- ---------------------------------- -- ------ -- -------- -- --- ------- ----------- ----- --- - ---------- -- --------- --- ----------- ------------------------------- --------- ----- ---- --------------------------- -- ------ --- ------ --------------------- --------------------------- -- ----- --- ------ ----------------------- -- -- - ------------------- ------- -- ---- ----------------- ---
在这个文件中，我们首先引入了 Express.js、body-parser、mongoose 模块。然后，我们连接到我们的 MongoDB 数据库。接着，我们创建了一个 Express 应用程序实例，并使用 bodyParser 中间件来解析 URL 编码和 JSON 格式的数据。最后，我们定义了我们的 API 路由，并启动了服务器。在这个项目中，我们仅仅定义了一个用户管理的 API，它的路由是 /api/users，并且使用了 users.js 文件来处理这个路由的操作。
接着，我们需要在 routes 文件夹下创建一个 users.js 文件，用来处理我们的 API 的请求。内容如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
----- ---- - --------------------------
-- ---- ----------
--------------- ----- ---- ----- -- -
--------------- ------ -- -
-- ----- ------ ----------
----------------
---
---
-- ---- --------------
------------------ ----- ---- ----- -- -
---------------------------- ----- ----- -- -
-- ----- ------ ----------
---------------
---
---
-- ----- ----------
---------------- ----- ---- ----- -- -
--------------------- ----- ----- -- -
-- ----- ------ ----------
---------------
---
---
-- ---- --------------
------------------ ----- ---- ----- -- -
------------------------------------- --------- - ---- ---- -- ----- ----- -- -
-- ----- ------ ----------
---------------
---
---
-- ------- --------------
--------------------- ----- ---- ----- -- -
------------------------------------- ----- ----- -- -
-- ----- ------ ----------
---------------
---
---
-------------- - -------在这个文件中，我们首先引入了 express、express.Router()、User 模型。我们定义了 API 的路由，包括：取得所有用户、取得单个用户、新建用户、更新用户、删除用户。每个操作对应一个 HTTP 动词，并使用相关的方法对 MongoDB 进行操作。在这个项目中，我们使用了 Mongoose 对 MongoDB 进行操作。
最后，我们需要在 models 文件夹下创建一个 user.js 文件，用来定义我们的数据模型。内容如下：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ---------- - --- ----------------- ----- ------- ------ ------- --------- ------- --------- ------ --- -------------- - ---------------------- ------------
在这个文件中，我们定义了我们的用户数据模型。我们使用 Mongoose.Schema() 方法来创建一个新的数据模型，并使用 name、email、username、password 四个属性来表示一个用户的信息。这样，我们的 Express.js 的 API 就完成了。
Angular.js 实现 MVVM
接下来，我们需要在客户端使用 Angular.js 框架来实现我们的 MVVM 模式。我们需要在客户端的 index.html 文件中引入必要的 JavaScript 和 CSS。
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
----------------- - ---------- -- ---- ----------
----- ---------------- -----------------
-------
----- -------------------------
---------------
-------
-------
----
-----------
-----------
-------------
------------
-----------
-----
--------
-------
--- --------------- -- -------
------ -------- -------
------ --------- -------
------ ---------- -------
------ ------------- -------
----
------- -------------------------------------
------- ---------------------------------------
-----
-----
--------
--------
----- -----------------------
------ - ---------
----------
-----------------
------ ----------- -------------------- ---------
-----------
----------
-------------------
------ ------------ --------------------- ---------
-----------
----------
------------------
------ ----------- ------------------------ ---------
-----------
----------
-----------------
------ --------------- ------------------------ ---------
-----------
------- ------------- -------------------------------------------
-------
------- --------------------------------------------------------------------------------------
------- ----------------------
-------
-------在这个文件中，我们引入了 Angular.js、style.css 和 app.js 文件。我们使用了 ng-app 和 ng-controller 指令来告诉 Angular.js 框架，哪些节点应该被管理和控制。我们使用了 ng-repeat 指令来显示用户列表，并使用 ng-click 指令来绑定相应的操作。我们使用了 ng-submit 指令来提交用户数据，并使用 ng-model 指令绑定表单中的数据。我们使用了 ng-disabled 指令来管理表单中的按钮是否禁用。我们的页面中，我们有一个用户数据列表和一个用户信息表单，用来展示用户信息、创建 / 编辑用户等操作。
我们还需要在 app.js 中编写 JavaScript 代码来控制我们的页面。内容如下：
-- -------------------- ---- -------
----- --- - ----------------------- ----
-------------------------- -------- ------ -- -
-----------------------
--------- -- -
------------ - ---------
---
----------- - ---
--------------- - ------ -- -
----------- - -----
--
----------------- - ------ -- -
-------------------------- - ---------
-------- -- -
----- ----- - ---------------------------
-- ------ --- --- -------------------------- ---
---
--
--------------- - -- -- -
-- ----------------- -
----------------------- - ---------------- ------------
-------- -- -
----- ----- - ------------------------ -- ----- --- -----------------
-- ------ --- --- -------------------------- -- -------------
---
- ---- -
------------------------ ------------
--------- -- -
----------------------------
----------- - ---
---
-
--
---在这个文件中，我们首先创建了一个 Angular 模块，并定义了一个控制器 MainCtrl。我们首先使用 $http.get() 方法从服务器获取所有的用户数据。然后，我们定义了一个 $scope.user 对象，用来保存当前的用户信息，它可以在我们的视图中进行双向绑定；我们定义了一个 editUser 方法和一个 deleteUser 方法，用来修改 / 删除用户信息。最后，我们定义了一个 saveUser 方法，用来保存用户信息。如果 $scope.user._id 存在，则表示这是一个编辑用户的操作，我们使用 $http.put() 方法向服务器发送一个 PUT 请求，更新用户信息。否则，表示这是一个创建用户的操作，我们使用 $http.post() 方法向服务器发送一个 POST 请求，创建用户信息。所有的操作都需要更新用户列表。
总结
在本文中，我们介绍了如何使用 Express.js 和 Angular.js 实现 MVVM 开发的示例。我们首先使用 Express.js 实现了我们的 RESTful API，并且用 Mongoose 对 MongoDB 进行了操作。接着，我们使用 Angular.js 实现了我们的前端界面，包括用户管理、用户列表、用户信息展示、用户信息编辑等操作。最后，我们将前后端进行了整合，将数据通过 API 传递，实现了双向绑定和数据的增删改查。本文的示例比较简单，但是基本涵盖了一个前后端分离的实现，并可以作为学习 Express.js 和 Angular.js 的一个入门例子。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647eabff48841e9894e5f9e6